/* Hallmark · component-scope: application shell · genre: modern-minimal * theme: custom (vibe: "calm, credible, unhurried clinical") * paper oklch(98.6% 0.003 240) · light band * accent oklch(46% 0.085 196) · cool teal, deliberately off the 250° SaaS blue * display/body: IBM Plex Sans · utility: IBM Plex Mono (one superfamily) * contrast: pass · states: 8/8 * * Design tokens for the Zolutium assistant. Every colour and font in the app * references a name from this file. Nothing inlines a raw value. */ :root { /* ── Surface ────────────────────────────────────────────────────────── A near-white with a trace of blue, not a warm cream. This is a tool someone uses at their desk during the working day; warmth here reads as decoration rather than calm. */ --color-paper: oklch(98.6% 0.003 240); --color-paper-raised: oklch(100% 0 0); --color-paper-sunk: oklch(96.2% 0.005 240); --color-paper-inset: oklch(21% 0.012 250); /* video wells are dark */ /* Text sitting ON a video well, which is dark in both themes — so these do not flip with the colour scheme. 12.35:1 and 7.12:1 on the well. */ --color-on-inset: oklch(88% 0.008 250); --color-on-inset-2: oklch(72% 0.012 250); --color-line: oklch(91.5% 0.006 240); /* decorative hairlines */ --color-line-strong: oklch(85% 0.008 240); /* A secondary button is identified BY its border, so WCAG 1.4.11 wants 3:1 against the page. The decorative --color-line measured 1.53:1, which is fine for a panel divider and not fine for a control boundary. */ --color-control-line: oklch(58% 0.012 250); /* ── Ink ────────────────────────────────────────────────────────────── Three levels only. More than three and hierarchy stops being legible. */ --color-ink: oklch(23% 0.015 250); --color-ink-2: oklch(48% 0.012 250); /* Measured at 3.49:1 on paper at 62% — below AA for the 11.5-13.5px text it carries (captions, clock, disclosure label). Darkened to clear 4.5. */ --color-ink-3: oklch(54% 0.012 250); --color-ink-invert: oklch(99% 0 0); /* ── Accent ─────────────────────────────────────────────────────────── Deep desaturated teal. Off the 250° SaaS blue and off acid green, and dark enough to carry white text at 8:1. */ --color-accent: oklch(46% 0.085 196); --color-accent-hover: oklch(40% 0.085 196); --color-accent-press: oklch(36% 0.085 196); --color-accent-wash: oklch(96% 0.022 196); --color-accent-line: oklch(84% 0.045 196); /* 52%, not 55%: at 55% white label on the filled success button measured 4.46:1 — just under AA for 13.5px text. */ --color-live: oklch(52% 0.125 158); --color-warn: oklch(60% 0.125 72); --color-warn-wash: oklch(96.5% 0.035 80); --color-danger: oklch(53% 0.165 27); --color-danger-wash: oklch(96% 0.035 27); --color-focus: oklch(52% 0.16 245); /* ── Type ───────────────────────────────────────────────────────────── One superfamily. Pairing two unrelated faces on a utility surface is a decorative move; a product tool wants coherence, and Plex carries Spanish diacritics properly across both cuts. */ --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* A real scale, ~1.2 ratio. Six steps is enough for an app surface. */ --text-caption: 11.5px; --text-label: 12.5px; --text-small: 13.5px; --text-body: 15px; --text-lead: 17px; --text-title: 21px; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; /* ── Space — 4pt scale ────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── Radius ─────────────────────────────────────────────────────────── Restrained. An 18px radius on a work surface reads soft and consumer; 8-10px reads like an instrument. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-pill: 999px; --rule-hair: 1px; /* ── Depth — one elevation, used once ────────────────────────────── */ --shadow-raised: 0 1px 2px oklch(23% 0.015 250 / .06), 0 12px 28px -18px oklch(23% 0.015 250 / .22); /* ── Motion ───────────────────────────────────────────────────────── */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 260ms; --ease-out: cubic-bezier(.22, .61, .36, 1); --ease-in: cubic-bezier(.55, .06, .68, .19); --ease-in-out: cubic-bezier(.65, .05, .36, 1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-paper: oklch(17.5% 0.012 250); --color-paper-raised: oklch(21% 0.014 250); --color-paper-sunk: oklch(14% 0.010 250); --color-paper-inset: oklch(11% 0.008 250); --color-line: oklch(28% 0.014 250); --color-line-strong: oklch(36% 0.016 250); --color-control-line: oklch(52% 0.016 250); --color-ink: oklch(95% 0.005 250); --color-ink-2: oklch(72% 0.010 250); --color-ink-3: oklch(66% 0.012 250); --color-ink-invert: oklch(15% 0.010 250); --color-accent: oklch(72% 0.095 193); --color-accent-hover: oklch(79% 0.095 193); --color-accent-press: oklch(66% 0.095 193); --color-accent-wash: oklch(26% 0.035 196); --color-accent-line: oklch(38% 0.055 196); --color-live: oklch(72% 0.13 158); --color-warn: oklch(78% 0.115 78); --color-warn-wash: oklch(27% 0.045 75); --color-danger: oklch(70% 0.145 27); --color-danger-wash: oklch(26% 0.05 27); --color-focus: oklch(70% 0.14 245); --shadow-raised: 0 1px 2px oklch(0% 0 0 / .4), 0 14px 32px -20px oklch(0% 0 0 / .8); } }