/* Hallmark · design tokens · theme: custom "Night + Mint" · genre: modern-minimal * Anchored on the logo: deep teal #0A7B6C = oklch(52% 0.093 180) · mint #00C896 = oklch(74% 0.152 167) * ink #08221C = oklch(23% 0.034 176) · night #06110E = oklch(16.5% 0.018 176) * Light paper: oklch(99.2% 0.004 170) · night paper: oklch(16% 0.020 170) * Actions: ink buttons on light, mint buttons on night. Links: teal. Brand signal: mint (spark). * display + wordmark: Space Grotesk · body: Geist · outlier: Geist Mono (code + figures only) * axes: light+night bands / grotesk-sans / chromatic-mint · studied: no · context: explicit (2026-10-01) * * Scopes: * :root light system (content sections, industry microsites) * [data-theme="dark"] night system (header, hero, developer panels, footer) * [data-vertical=""] industry microsites override the accent family only * * Contrast (WCAG 2.1, verified): ink/paper 16.3 · muted/paper 6.9 · muted/paper-2 6.4 * paper-on-ink button 16.3 · teal link/paper 5.3 · control/paper 3.8 * night: ink 17.3 · muted 8.5 · night-on-mint button 9.7 * --color-spark (mint, 2.1:1 on light paper) is decorative only on light: dots, rules, marks. */ :root { /* ── Surface ───────────────────────────────────────────── */ --color-paper: oklch(99.2% 0.004 170); /* #fafdfc */ --color-paper-2: oklch(96.8% 0.010 170); /* #eef7f3 bands, cards */ --color-paper-3: oklch(94% 0.016 170); /* #e1efe9 wells, pressed */ --color-rule: oklch(89.5% 0.014 170); /* decorative hairlines only */ --color-control: oklch(60% 0.020 170); /* control borders · 3.8:1 */ /* ── Text ──────────────────────────────────────────────── */ --color-ink: oklch(23% 0.035 170); /* #09221a · logo ink · 16.3:1 */ --color-muted: oklch(46% 0.025 170); /* 6.9:1 */ /* ── Brand ─────────────────────────────────────────────── */ --color-spark: oklch(74% 0.16 165); /* logo mint · decorative only */ /* ── Accent (actions) ──────────────────────────────────── * * --color-accent button fill / large marks * --color-on-accent text on that fill * --color-accent-text links + small accent text on paper * --color-accent-edge button outline (only where the fill lacks an edge on paper) */ --color-accent: oklch(23% 0.035 170); /* ink buttons on light */ --color-on-accent: oklch(99.2% 0.004 170); /* 16.3:1 */ --color-accent-hover: oklch(51% 0.10 178); /* teal */ --color-on-accent-hover: oklch(99.2% 0.004 170); /* 5.3:1 */ --color-accent-text: oklch(51% 0.10 178); /* 5.3:1 */ --color-accent-soft: oklch(95% 0.040 165); /* mint wash for chips/highlights */ --color-accent-edge: transparent; --color-focus: oklch(51% 0.12 178); /* ── Status (paired with icons; never colour-only) ─────── */ --color-success: oklch(52% 0.13 155); --color-warning: oklch(60% 0.13 75); --color-danger: oklch(54% 0.19 28); /* ── Type ──────────────────────────────────────────────── */ --font-display: "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --weight-body: 400; --weight-strong: 600; --weight-display: 700; /* ≥ 300 units above body */ /* Major third (1.25) from 16px */ --text-xs: 0.8rem; /* 12.8px — labels only, never body */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.75rem); --text-display: clamp(2.5rem, 5vw + 1rem, 5.25rem); --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; --tracking-display: -0.035em; --tracking-label: 0.08em; --measure: 65ch; /* ── Space (4pt) ───────────────────────────────────────── */ --space-3xs: 0.25rem; /* 4 */ --space-2xs: 0.5rem; /* 8 */ --space-xs: 0.75rem; /* 12 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --space-4xl: 8rem; /* 128 */ --gutter: clamp(1rem, 4vw, 2.5rem); --container: 76rem; /* ── Shape ─────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --rule-width: 1px; --shadow-1: 0 1px 2px oklch(23% 0.035 170 / 0.06); --shadow-2: 0 1px 2px oklch(23% 0.035 170 / 0.05), 0 12px 32px -12px oklch(23% 0.035 170 / 0.14); --color-scrim: oklch(23% 0.035 170 / 0.22); --color-print: oklch(0% 0 0); /* print / save-as-PDF ink (legal pages) */ /* ── Layers ────────────────────────────────────────────── */ --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; /* ── Motion ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms; color-scheme: light; } /* ── Night: header, hero, developer panels, footer ────────── * * Paper is the logo's night colour. Same hue family; only L and C move. */ [data-theme="dark"] { --color-paper: oklch(16% 0.020 170); /* #05100c */ --color-paper-2: oklch(20.5% 0.022 170); /* code panels */ --color-paper-3: oklch(25% 0.024 170); --color-rule: oklch(30% 0.020 170); --color-control: oklch(52% 0.020 170); --color-ink: oklch(96% 0.010 170); /* 17.3:1 */ --color-muted: oklch(74% 0.020 170); /* 8.5:1 */ --color-spark: oklch(76% 0.16 165); --color-accent: oklch(76% 0.16 165); /* mint · 9.7:1 */ --color-on-accent: oklch(16% 0.020 170); --color-accent-hover: oklch(96% 0.010 170); --color-on-accent-hover: oklch(16% 0.020 170); --color-accent-text: oklch(76% 0.16 165); --color-accent-soft: oklch(26% 0.050 165); --color-focus: oklch(80% 0.15 165); --color-success: oklch(74% 0.14 155); --color-warning: oklch(80% 0.13 75); --color-danger: oklch(72% 0.16 28); --weight-body: 350; --shadow-1: none; --shadow-2: 0 0 0 1px var(--color-rule); color-scheme: dark; } /* ── Industry microsites ─────────────────────────────────── * * Set on . Only the accent family changes. * Slugs match the live /solutions// URLs. Pattern: fill oklch(66% 0.14 H) with ink text · text oklch(50% 0.13 H). */ [data-vertical="salons-and-clinics"] { --vertical-hue: 350; } /* rose · Salons & spas (slug kept for the live URL) */ [data-vertical="schools-and-coaching"] { --vertical-hue: 70; } /* amber */ [data-vertical="automotive-dealerships"] { --vertical-hue: 245; } /* steel */ [data-vertical="retail"] { --vertical-hue: 30; } /* coral */ [data-vertical="ecommerce-d2c"] { --vertical-hue: 290; } /* violet */ [data-vertical="cafes-and-restaurants"] { --vertical-hue: 95; } /* saffron */ [data-vertical="clinics-and-doctors"] { --vertical-hue: 200; } /* clinical cyan */ [data-vertical] { --color-accent: oklch(66% 0.14 var(--vertical-hue)); --color-accent-text: oklch(50% 0.13 var(--vertical-hue)); --color-accent-soft: oklch(94% 0.035 var(--vertical-hue)); --color-focus: oklch(50% 0.16 var(--vertical-hue)); --color-on-accent: var(--color-ink); --color-accent-hover: var(--color-ink); --color-on-accent-hover: var(--color-paper); } /* Night bands that opt in with data-tint (industry hero + "week") carry the vertical hue on marks, * chips, tags and focus — buttons stay mint so the brand action never changes colour. */ [data-vertical] [data-theme="dark"][data-tint] { --color-spark: oklch(74% 0.14 var(--vertical-hue)); --color-accent-text: oklch(80% 0.11 var(--vertical-hue)); /* ≥ 7:1 on night paper */ --color-accent-soft: oklch(28% 0.05 var(--vertical-hue)); --color-focus: oklch(80% 0.12 var(--vertical-hue)); }