/* VENDORED — do not edit here. Copied verbatim from the Incalmo design system: design-system/tokens/incalmo.tokens.css To update, re-copy that file over this one. Site-specific mappings from these tokens onto the site's own variables live in blog.css. */ /* ============================================================= Incalmo Design Tokens Source: Figma — "Incalmo Slope Design Guidelines", page "Brand Guidelines" (node 186:2). Colour values are transcribed verbatim from the Primary Color (slide 20) and Secondary Color (slide 21) boards. Type roles come from Typography / In Use (slide 26). Component measurements come from the Applications boards (slides 43-44). ============================================================= */ :root { color-scheme: light; /* --------------------------------------------------------- PALETTE — core "The palette is built from paper and ink rather than from light. Ground and Light Table carry the majority of every layout." --------------------------------------------------------- */ --in-atlas: #FDFFFA; /* paper white, faint warm cast */ --in-atlas-tint: #D1D4D5; /* neutral rule / disabled ground */ --in-light-table: #F1F6F3; /* light neutral, faint green cast*/ --in-system-grey: #93978D; /* mid neutral, warm green cast */ --in-strata: #025781; /* deep signal blue */ --in-ultra-blue: #84D2F8; /* bright accent */ --in-loom: #28384A; /* ink — primary text & inverse bg*/ /* PALETTE — secondary. "Exist for range, not for expression. Roughly four applications in five use the core palette alone." */ --in-ledger: #20422D; --in-script: #93978D; --in-patina: #C2A975; --in-leather: #EFE6D4; --in-contour: #3C1E3E; --in-lilac: #BBC5E0; /* PALETTE — utility */ --in-ink-black: #1B1B1B; /* logotype black, favicon */ --in-paper: #EEF7F0; /* type knocked out of Loom */ --in-true-black: #000000; /* social icon ground only */ /* --------------------------------------------------------- SEMANTIC COLOUR --------------------------------------------------------- */ --in-bg-canvas: var(--in-light-table); --in-bg-surface: var(--in-atlas); --in-bg-surface-sunk: var(--in-light-table); --in-bg-inverse: var(--in-loom); --in-bg-accent: var(--in-ultra-blue); --in-bg-muted: var(--in-atlas-tint); --in-text-primary: var(--in-loom); --in-text-secondary: #5B6875; --in-text-muted: var(--in-system-grey); --in-text-inverse: var(--in-paper); --in-text-accent: var(--in-strata); --in-text-on-accent: var(--in-loom); --in-border-subtle: #DDE4E0; --in-border-default: var(--in-atlas-tint); --in-border-strong: var(--in-loom); --in-border-accent: var(--in-strata); --in-focus-ring: var(--in-strata); /* Status. The guidelines define no status palette; these are derived from brand hues so alerts stay in-family. */ --in-status-info: var(--in-strata); --in-status-success: var(--in-ledger); --in-status-warning: var(--in-patina); --in-status-danger: #8A2B2B; /* Categorical series, in the order used on the chart boards (slides 38-41). */ --in-series-1: var(--in-strata); --in-series-2: var(--in-loom); --in-series-3: var(--in-patina); --in-series-4: var(--in-ultra-blue); --in-series-5: var(--in-system-grey); --in-series-6: var(--in-lilac); --in-series-7: var(--in-ledger); --in-series-8: var(--in-contour); /* --------------------------------------------------------- TYPEFACES Family — licensed retail serif, self-hosted from assets/fonts/family via css/incalmo.fonts.css. Geist / Geist Mono — open source (Vercel). --------------------------------------------------------- */ --in-font-serif: "Family", Georgia, "Times New Roman", serif; --in-font-sans: "Geist", "Geist Sans", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --in-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --in-weight-regular: 400; --in-weight-medium: 500; --in-weight-bold: 700; /* Type scale (16px root) */ --in-size-3xs: 0.6875rem; /* 11 */ --in-size-2xs: 0.75rem; /* 12 */ --in-size-xs: 0.875rem; /* 14 */ --in-size-sm: 1rem; /* 16 */ --in-size-md: 1.125rem; /* 18 */ --in-size-lg: 1.25rem; /* 20 */ --in-size-xl: 1.5rem; /* 24 */ --in-size-2xl: 2rem; /* 32 */ --in-size-3xl: 2.5rem; /* 40 */ --in-size-4xl: 3.5rem; /* 56 */ --in-size-5xl: 4.5rem; /* 72 */ --in-leading-tight: 1.03; --in-leading-heading: 1.1; --in-leading-snug: 1.15; --in-leading-normal: 1.38; --in-leading-relaxed: 1.55; --in-tracking-tight: -0.02em; --in-tracking-snug: -0.01em; --in-tracking-normal: 0; --in-tracking-wide: 0.03em; /* eyebrow */ --in-tracking-wider: 0.05em; /* link/CTA */ --in-tracking-widest: 0.1em; /* mono CTA */ /* --------------------------------------------------------- SPACE — 4px base --------------------------------------------------------- */ --in-space-0: 0; --in-space-1: 0.25rem; /* 4 */ --in-space-2: 0.5rem; /* 8 */ --in-space-3: 0.75rem; /* 12 */ --in-space-4: 1rem; /* 16 */ --in-space-5: 1.25rem; /* 20 */ --in-space-6: 1.5rem; /* 24 */ --in-space-8: 2rem; /* 32 */ --in-space-10: 2.5rem; /* 40 */ --in-space-12: 3rem; /* 48 */ --in-space-16: 4rem; /* 64 */ --in-space-20: 5rem; /* 80 */ --in-space-24: 6rem; /* 96 */ --in-space-32: 8rem; /* 128 */ /* --------------------------------------------------------- RADIUS — the brand runs generous. Interactive controls are pills; content surfaces use the large 2xl corner. --------------------------------------------------------- */ --in-radius-sm: 0.25rem; /* 4 */ --in-radius-md: 0.5rem; /* 8 */ --in-radius-lg: 1rem; /* 16 */ --in-radius-xl: 1.5rem; /* 24 */ --in-radius-2xl: 2.5rem; /* 40 — cards, panels */ --in-radius-pill: 999px; /* --------------------------------------------------------- STROKE — the pattern system is specified at .5 / 2 / 4 pt (slide 36); UI borders reuse the same ladder. --------------------------------------------------------- */ --in-stroke-hairline: 0.5px; --in-stroke-thin: 1px; --in-stroke-medium: 2px; --in-stroke-thick: 4px; /* Elevation. The brand is flat — paper and ink, not light. Shadows stay near-invisible and are used only for overlays. */ --in-shadow-none: none; --in-shadow-overlay: 0 1px 2px rgba(40, 56, 74, 0.06), 0 12px 32px rgba(40, 56, 74, 0.10); /* Layout */ --in-container-max: 1200px; --in-container-pad: var(--in-space-6); --in-grid-columns: 12; --in-grid-gutter: var(--in-space-6); /* Motion */ --in-duration-fast: 120ms; --in-duration-base: 200ms; --in-duration-slow: 400ms; --in-ease: cubic-bezier(0.2, 0, 0.1, 1); } /* ============================================================= Dark theme — the inverse applications (slides 47-51) run Loom or black grounds with paper type and Ultra Blue accents. ============================================================= */ :root[data-theme="dark"] { color-scheme: dark; --in-bg-canvas: var(--in-loom); --in-bg-surface: #33465C; --in-bg-surface-sunk: #1E2A38; --in-bg-inverse: var(--in-atlas); --in-bg-muted: #44576E; --in-text-primary: var(--in-paper); --in-text-secondary: #B7C2CD; --in-text-muted: var(--in-system-grey); --in-text-inverse: var(--in-loom); --in-text-accent: var(--in-ultra-blue); --in-border-subtle: #3C4F66; --in-border-default: #4C607A; --in-border-strong: var(--in-paper); --in-border-accent: var(--in-ultra-blue); --in-focus-ring: var(--in-ultra-blue); --in-status-info: var(--in-ultra-blue); --in-status-success: #7FB894; }