/* ============================================================================= ZINTHI DESIGN TOKENS Shared system: zinthi.com + Zinthi Chat + Zinthi Docs + Zinthi Boards --- v3 — Monochrome (full Z ramp) --- Light-first, technical/utilitarian. UI chrome is true grayscale (Z-00..Z-10); warmth lives only in the canvas palette (clay, rust, ochre, sage, teal, slate, plum, iron) for user-drawn content. Mode switching unchanged: [data-theme] on or any ancestor; unset = prefers-color-scheme. Pivots from v2: - Page surface is one step off white in light (Z-01, #FAFAFA) so a raised card at Z-00 lifts off it the way it does in dark; warm-tilted near-black in dark (NOT pure black — pure black makes canvas colors look like glowing chips instead of paper). Until 2026-09-06 the light page was pure white and cards sat on it at 1.00:1, with a hairline edge at 1.19:1 — the light theme read flat next to dark. Light borders moved one step up the ramp at the same time (subtle Z-04, default Z-05, strong Z-06) so their contrast against the page matches dark's. - Z-09 in dark mode is bone-white (#ECEBE3), not pure white — same reason: pure white buzzes against dark surfaces. - Canvas palette membership shifted: paper, butter, rose dropped from the semantic layer; ochre and iron added; every color now has a matching tint (lighter than fill in light, darker than fill in dark) for code-block backgrounds, hover states, etc. Old paper/butter/rose primitives stay defined as escape hatches; they just don't power any --sticky-* semantic token. - Tomato, forest, amber primitives retained as escape hatches. Semantic tokens no longer point at them. Cream/coal/warmgray/ink primitives are kept at their v2 values intentionally. apps/swarm-chat-ui/src/index.css does its own manual light/dark swapping using those names; making them mode-aware would double-flip and produce wrong results. New code should consume the semantic layer (--surface-*, --text-*, etc.) which is mode-aware via the Z ramp. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. PRIMITIVES — raw values, never used directly in components ----------------------------------------------------------------------------- */ :root { /* ---------- GRAYSCALE RAMP (Z-00..Z-10) — light values ---------- */ /* Z-00 is the raised surface (pure white) and Z-01 the page; Z-09 is primary text (near-black, not pure black). Pure values live at Z-10 / --color-pure-* and are reserved for accent peaks (text-accent-strong, focus rings). */ --color-z-00: #FFFFFF; /* page / canvas */ --color-z-01: #FAFAFA; /* sunken / boards-canvas-bg */ --color-z-02: #F4F4F4; /* hover surface, subtle fill */ --color-z-03: #EBEBEB; /* default border, active surface */ --color-z-04: #DCDCDC; /* default border (mid), divider strong */ --color-z-05: #B8B8B8; /* faint borders, disabled chrome */ /* Z-06 is a TEXT step (muted text, placeholder), so it has to clear 4.5:1 on the surfaces text sits on. At #8A8A8A it was 3.31:1 on the page and 2.90:1 on the active surface — the single most-used small-text color in the system and it failed everywhere. #707070 is 4.74:1 on the page, 4.95:1 raised, 4.50:1 hover. Caveat that survives the fix: 4.15:1 on --surface-active, so don't put muted text on a pressed/selected row — use --text-secondary there. */ --color-z-06: #707070; /* muted text, placeholder */ --color-z-07: #5C5C5C; /* secondary text */ --color-z-08: #2E2E2E; /* tertiary text, hover ink */ --color-z-09: #141414; /* primary text, accent ink */ --color-z-10: #000000; /* accent only — max emphasis */ /* Pure values — escape hatches for the rare cases where Z-00/Z-10 aren't enough. Most "white"/"black" usage should hit the Z ramp. */ --color-pure-black: #000000; --color-pure-white: #FFFFFF; /* ---------- LEGACY GRAYSCALE PRIMITIVES (mode-independent fixed values) ---------- */ /* These keep working for direct callers — chat-ui's index.css does its own manual mode swap using these names, so they MUST NOT flip on [data-theme]. Use the Z ramp via the semantic layer for new code. */ --color-cream-50: #FCFBF7; --color-cream-100: #FAF8F3; --color-cream-200: #F2EFE7; --color-cream-300: #E8E4D8; --color-cream-400: #D8D2C2; --color-coal-100: #C9C3B7; --color-coal-200: #A39A8C; --color-coal-300: #6F695F; --color-coal-400: #3A342D; --color-coal-500: #1A1A1A; --color-coal-600: #2E2823; --color-coal-700: #241F1A; --color-coal-800: #1A1612; --color-coal-900: #0F0D0A; --color-warmgray-100: #C9C3B7; --color-warmgray-200: #A39A8C; --color-warmgray-300: #8B8378; --color-warmgray-400: #6F695F; --color-warmgray-500: #524D45; --color-ink-400: var(--color-coal-400); --color-ink-500: var(--color-coal-500); --color-ink-600: var(--color-coal-600); --color-ink-700: var(--color-coal-700); --color-ink-800: var(--color-coal-800); --color-ink-900: var(--color-coal-900); /* ---------- CANVAS PALETTE — fill / ink / tint × light / dark ---------- */ /* Each color has three roles per mode: fill = sticky body, shape fill, pen ink primary ink = text on the sticky, stroke, pen ink contrast tint = code-block background inside the sticky, hover state, secondary fill In dark mode, fill becomes darker, ink becomes lighter (roles preserved but values shift), tint becomes darker than fill. */ /* Clay — warm beige */ --color-clay-fill-light: #E8DCC8; --color-clay-ink-light: #6B5A3E; --color-clay-tint-light: #F2EADC; --color-clay-fill-dark: #5A4F3D; --color-clay-ink-dark: #E8D9BE; --color-clay-tint-dark: #3D3528; /* Rust — warm orange-brown */ --color-rust-fill-light: #D9A88A; --color-rust-ink-light: #6E3A20; --color-rust-tint-light: #E8C9B4; --color-rust-fill-dark: #7A4530; --color-rust-ink-dark: #F0BFA0; --color-rust-tint-dark: #4A2C1E; /* Ochre — mustard */ --color-ochre-fill-light: #DDC176; --color-ochre-ink-light: #6B521C; --color-ochre-tint-light: #ECDCA8; --color-ochre-fill-dark: #6E5825; --color-ochre-ink-dark: #F0D88A; --color-ochre-tint-dark: #443818; /* Sage — muted green */ --color-sage-fill-light: #B8C4A0; --color-sage-ink-light: #3F4D2C; --color-sage-tint-light: #D6DDC4; --color-sage-fill-dark: #4A5A38; --color-sage-ink-dark: #C9D4AE; --color-sage-tint-dark: #2E3823; /* Teal — blue-green */ --color-teal-fill-light: #9CB8B5; --color-teal-ink-light: #2A4644; --color-teal-tint-light: #C2D2D0; --color-teal-fill-dark: #38524F; --color-teal-ink-dark: #B5CECB; --color-teal-tint-dark: #233533; /* Slate — blue-gray */ --color-slate-fill-light: #A8B4C2; --color-slate-ink-light: #2E3D4F; --color-slate-tint-light: #C8D2DD; --color-slate-fill-dark: #3F4C5C; --color-slate-ink-dark: #BAC6D6; --color-slate-tint-dark: #28323E; /* Plum — muted purple */ --color-plum-fill-light: #C0A4B0; --color-plum-ink-light: #4F2E3C; --color-plum-tint-light: #D9C5CD; --color-plum-fill-dark: #5A3E48; --color-plum-ink-dark: #D6B6C2; --color-plum-tint-dark: #38262E; /* Iron — warm gray-brown */ --color-iron-fill-light: #B0A89E; --color-iron-ink-light: #3D352B; --color-iron-tint-light: #CFC9BF; --color-iron-fill-dark: #4D453D; --color-iron-ink-dark: #C4BCB0; --color-iron-tint-dark: #2F2A23; /* ---------- LEGACY CANVAS PRIMITIVES (out of semantic layer in v3) ---------- */ /* Paper, butter, rose stayed defined so any existing import keeps resolving, but no --sticky-* token points at them in v3. */ --color-paper-fill-light: #F5EFE0; --color-paper-ink-light: #5C523E; --color-paper-fill-dark: #3D362A; --color-paper-ink-dark: #E8DEC8; --color-butter-fill-light: #FCEFA3; --color-butter-ink-light: #6B5610; --color-butter-fill-dark: #6E5825; --color-butter-ink-dark: #F0D88A; --color-rose-fill-light: #E8B5B0; --color-rose-ink-light: #6E2820; --color-rose-fill-dark: #5A3530; --color-rose-ink-dark: #E8BAB0; /* ---------- BRAND ESCAPE HATCHES (out of semantic layer) ---------- */ /* Tomato/forest/amber primitives retained at their canonical hex values so charts, illustrations, and any explicit brand-callout surface can opt back in. The semantic layer no longer points at them. */ --color-tomato-300: #FF8A6B; --color-tomato-400: #FF6B47; --color-tomato-500: #E84F2C; /* canonical brand tomato — legacy */ --color-tomato-600: #B83C1C; --color-tomato-700: #8C2D14; --color-forest-300: #7AAA8C; --color-forest-400: #5B8B6F; --color-forest-500: #2D4A3E; --color-forest-600: #1E3329; /* ---------- STATUS — semantic colors ---------- */ /* Status colors stay color-coded; status is communication, not chrome. */ --color-amber-500: #D4A017; /* legacy Swarm amber, kept for backcompat */ /* Amber-500 is a dark-mode value: 7.34:1 on the dark page but only 2.38:1 on the light one, where it fails even the 3:1 floor for a non-text mark. 600 is the same hue (43.5deg) and saturation dropped to 4.58:1 on white, so light mode has something legible to use. Darkened again 2026-09-12: #947010 measured 4.39:1 on the light page, just under the 4.5:1 floor for small text, and #8A6800 cleared the page at 4.95:1 but still measured 4.34:1 on --surface-active, so a warning on a pressed row failed. #826200 is the same hue and clears every light surface: 5.44:1 page / 5.68:1 raised / 4.77:1 active. The contract test in src/tokens.contract.test.ts is what found the active-surface gap and is what keeps it closed. */ --color-amber-600: #826200; --color-success-500: #5B8B6F; /* sage-leaning */ --color-success-600: #2D4A3E; --color-danger-500: #B83C1C; /* rust-leaning */ --color-danger-600: #8C2D14; --color-info-500: #6F8AA3; /* slate-leaning */ /* Info had only a 500 — the mark — so anything needing info *as text* read the mark and failed AA at small sizes: measured 3.93:1 in dark and 2.92:1 in light on a 16% info tint. These are the same hue (209deg) with lightness moved, exactly as amber/success/danger do it. 600 for light surfaces, 300 for dark. */ --color-info-300: #A2B8CD; --color-info-600: #3B5268; /* ---------- ALPHA TOKENS — for borders, overlays, scrims ---------- */ /* Driven by Z-09 (light-mode ink) and Z-09 dark (bone) so alphas blend correctly on either surface. */ --alpha-ink-04: rgba(20, 20, 20, 0.04); --alpha-ink-08: rgba(20, 20, 20, 0.08); --alpha-ink-12: rgba(20, 20, 20, 0.12); --alpha-ink-20: rgba(20, 20, 20, 0.20); --alpha-ink-40: rgba(20, 20, 20, 0.40); --alpha-ink-60: rgba(20, 20, 20, 0.60); --alpha-cream-04: rgba(236, 235, 227, 0.04); --alpha-cream-08: rgba(236, 235, 227, 0.08); --alpha-cream-12: rgba(236, 235, 227, 0.12); --alpha-cream-20: rgba(236, 235, 227, 0.20); --alpha-cream-40: rgba(236, 235, 227, 0.40); --alpha-cream-60: rgba(236, 235, 227, 0.60); /* ---------- TYPOGRAPHY PRIMITIVES ---------- */ /* Two cuts of one family. Inter Tight is a condensed display cut: at message-body sizes it puts visibly less ink on the line than Slack's Lato or Discord's gg sans at the same nominal weight. Body text uses regular Inter; Inter Tight stays on headings and dense chrome. Every app that consumes these tokens must load both cuts. */ --font-display: 'Inter Tight', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-brand: 'Fraunces', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Size scale. Every value is rem, deliberately: Chrome's Settings → Appearance → Font size and Firefox's default-size preference only move rem/em text. A px font-size ignores them, which is the WCAG 1.4.4 risk — see ADR-0033. Never express a size here in px. The bottom three steps were raised by 1px each in ADR-0033's follow-up: 12px is the floor for anything a person reads, and the workhorse secondary step (--text-sm, 173 call sites in chat-ui alone) reaches 14px. Nothing shrank, and base and up are untouched so the 16px mobile-Safari zoom floor still lines up with --text-md. */ --text-2xs: 0.75rem; /* 12px — micro labels, meta. The floor. */ --text-xs: 0.8125rem; /* 13px — captions */ --text-sm: 0.875rem; /* 14px — secondary body */ --text-base: 0.9375rem; /* 15px — body */ --text-md: 1rem; /* 16px — comfortable body */ --text-lg: 1.125rem; /* 18px — large body, lead */ --text-xl: 1.375rem; /* 22px — h4 */ --text-2xl: 1.625rem; /* 26px — h3 */ --text-3xl: 2rem; /* 32px — h2 */ --text-4xl: 2.5rem; /* 40px — h1 */ --text-5xl: 3.5rem; /* 56px — display sm */ --text-6xl: 5.5rem; /* 88px — display lg, wordmark */ --weight-light: 300; --weight-regular: 400; /* Body-copy default. Inter is variable, so 450 is free: a half step up from regular that reads as "present" rather than bold. Chrome and labels keep --weight-regular. */ --weight-body: 450; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tightest: -0.04em; --tracking-tighter: -0.025em; --tracking-tight: -0.01em; --tracking-normal: -0.005em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.16em; /* ---------- SPACING (4px base, unchanged) ---------- */ --space-0: 0; --space-px: 1px; --space-0_5: 0.125rem; /* 2 */ --space-1: 0.25rem; /* 4 */ --space-1_5: 0.375rem; /* 6 */ --space-2: 0.5rem; /* 8 */ --space-2_5: 0.625rem; /* 10 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ --space-40: 10rem; /* 160 */ --space-48: 12rem; /* 192 */ --space-64: 16rem; /* 256 */ /* ---------- RADIUS (unchanged) ---------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* ---------- BORDERS (unchanged) ---------- */ --border-hairline: 0.5px; --border-thin: 1px; --border-medium: 2px; --border-thick: 3px; /* ---------- SHADOWS ---------- */ --shadow-light-xs: 0 1px 2px var(--alpha-ink-04); --shadow-light-sm: 0 1px 3px var(--alpha-ink-08), 0 1px 2px var(--alpha-ink-04); --shadow-light-md: 0 4px 12px var(--alpha-ink-08), 0 2px 4px var(--alpha-ink-04); --shadow-light-lg: 0 12px 32px var(--alpha-ink-12), 0 4px 8px var(--alpha-ink-08); --shadow-light-xl: 0 24px 64px var(--alpha-ink-20), 0 8px 16px var(--alpha-ink-08); --shadow-dark-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-dark-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-dark-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-dark-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --shadow-dark-xl: 0 24px 64px rgba(0, 0, 0, 0.7); --shadow-sticky-light: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-sticky-light-hover: 0 1px 0 rgba(0, 0, 0, 0.04), 0 14px 24px -6px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-sticky-dark: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 16px -4px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-sticky-dark-hover: 0 1px 0 rgba(0, 0, 0, 0.4), 0 14px 24px -6px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4); /* Focus rings — driven by Z-09 in light, Z-09 dark in dark. Apps wanting a colored ring opt in via raw primitive. These were a single low-alpha wash (18% / 22% ink) until 2026-09-12. Composited against the page that measured 1.46:1 light and 1.90:1 dark: the rule was in the right place and painted a ring nobody could see, under the 3:1 that WCAG 2.4.11 asks of a focus indicator. They are now the same two-tone ring the app rail and mobile nav pill already drew by hand — a surface-colored gap so the ring reads on a busy row, then the ink itself at 17.65:1 light / 14.57:1 dark. Gap colors are literals, not var(--surface-page): a custom property inside these resolves per element at use time, which would flip both variants to the same theme. Consumers pair this with `outline: none`. That trade is only safe because box-shadow survives everywhere except forced-colors mode, where it is dropped entirely — so every app consuming this token must also re-assert a real `outline` under `@media (forced-colors: active)`. */ --shadow-focus-light: 0 0 0 2px #FAFAFA, 0 0 0 4px #141414; --shadow-focus-dark: 0 0 0 2px #1A1A18, 0 0 0 4px #ECEBE3; /* ---------- MOTION (unchanged) ---------- */ --duration-instant: 80ms; --duration-fast: 140ms; --duration-normal: 220ms; --duration-slow: 360ms; --duration-slower: 560ms; --duration-slowest: 880ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); /* iOS sheet curve. Mirrored in JS as SHEET_EASE (src/motion.ts) for `motion` transitions — change both or they drift. */ --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* ---------- Z-INDEX (unchanged) ---------- */ --z-below: -1; --z-base: 0; --z-raised: 10; /* Floating app chrome — the create dock, the mobile floating stack. Deliberately BELOW 50, not in the 300s: chat-ui's shadcn dialogs render at Tailwind's z-50 rather than var(--z-modal), so anything in the overlay band would paint over every real modal in that app. */ --z-dock: 35; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-cursor: 700; --z-max: 999; /* ---------- BREAKPOINTS (unchanged) ---------- */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* ----------------------------------------------------------------------------- 2. SEMANTIC LAYER — light mode (default fallback) These are the tokens components actually consume. The Z ramp + canvas palette flip in mode-override blocks below. ----------------------------------------------------------------------------- */ :root, [data-theme="light"] { /* Surfaces — Z ramp. Page sits one step off white so a raised card (Z-00) reads as an object — the same one-step lift dark has. Sunken shares the page tone, as it does in dark; inputs stay white. */ --surface-page: var(--color-z-01); /* #FAFAFA */ --surface-raised: var(--color-z-00); --surface-sunken: var(--color-z-01); --surface-overlay: rgba(255, 255, 255, 0.92); --surface-hover: var(--color-z-02); /* A quiet column — weekends on the calendar grid. Between page and hover so the selected day (hover) still reads as the stronger of the two; no ramp step sits there, so it is the one literal in this layer. */ --surface-weekend: #F7F7F7; --surface-active: var(--color-z-03); --surface-input: var(--color-z-00); --surface-inverse: var(--color-z-09); /* Loading placeholders (Skeleton): ink at 8%, no hue. Declared in every theme block, not just here, so it resolves against the --text-primary of the region it sits in — a light-scoped surface inside a dark page gets the light fill. */ --skeleton-fill: color-mix(in srgb, var(--text-primary) 8%, transparent); /* Text */ --text-primary: var(--color-z-09); /* #141414 */ --text-secondary: var(--color-z-07); /* #5C5C5C */ --text-muted: var(--color-z-06); /* #707070 — 4.74:1 */ --text-inverse: var(--color-z-00); --text-accent: var(--color-z-09); /* monochrome: accent = ink */ --text-accent-strong: var(--color-pure-black); /* peak emphasis = pure black */ --text-success: var(--color-success-600); --text-danger: var(--color-danger-600); /* Fills the gap next to --text-success / --text-danger. Reach for this, not --state-warning, whenever a warning has to be legible against the page: --state-warning is amber-500, which is 2.38:1 in light. */ --text-warning: var(--color-amber-600); /* Same gap again: --state-info is info-500, the mark, which is 2.92:1 as small text on its own tint here. Reach for this whenever info has to be read rather than merely seen. */ --text-info: var(--color-info-600); --text-link: var(--color-z-09); --text-link-hover: var(--color-pure-black); /* Brand accents — ink-on-paper */ --accent-primary: var(--color-z-09); --accent-primary-fg: var(--color-z-00); --accent-secondary: var(--color-z-07); --accent-secondary-fg: var(--color-z-00); /* Borders — Z ramp gives crisper edges than the alpha-ink approach. */ --border-subtle: var(--color-z-04); /* #DCDCDC — 1.31:1 on the page; Z-03 was 1.19:1, invisible as a hairline */ --border-default: var(--color-z-05); /* #B8B8B8 — 1.90:1, beside dark's 1.81:1 */ --border-strong: var(--color-z-06); /* #707070 — 4.74:1 */ /* The boundary of an interactive control (input, checkbox, toggle, combobox) is a UI component boundary, so WCAG 1.4.11 wants 3:1 against the surface behind it — a bar --border-subtle (1.31:1) and --border-default (1.90:1) do not clear. Those two stay what they are: decorative dividers, where no ratio is required. Reach for --border-control whenever the line IS the control's visible edge. Z-06 = #707070, 4.74:1 page / 4.95:1 raised. */ --border-control: var(--color-z-06); --border-focus: var(--color-z-09); /* high-contrast ink */ --border-inverse: var(--alpha-cream-12); /* States — color-coded, not part of the monochrome ramp */ --state-success: var(--color-success-500); /* Amber-500 is 2.28:1 on the light page — it fails even the 3:1 floor for a non-text mark, so a light-mode warning dot or bar drawn in it is a mark nobody with low vision can find. 600 (#826200, 5.44:1) is the same hue. Dark keeps 500: it is 7.34:1 there. */ --state-warning: var(--color-amber-600); --state-danger: var(--color-danger-500); --state-info: var(--color-info-500); /* Shadows */ --shadow-xs: var(--shadow-light-xs); --shadow-sm: var(--shadow-light-sm); --shadow-md: var(--shadow-light-md); --shadow-lg: var(--shadow-light-lg); --shadow-xl: var(--shadow-light-xl); --shadow-focus: var(--shadow-focus-light); --shadow-sticky: var(--shadow-sticky-light); --shadow-sticky-hover: var(--shadow-sticky-light-hover); /* Scrim */ --scrim: rgba(20, 20, 20, 0.5); /* ---------- BOARDS CANVAS / STICKY SEMANTIC LAYER — LIGHT ---------- */ /* Boards canvas itself — slight off-white so frames and stickies sit on a surface, not a void. Dot grid carries the structural load. */ --canvas-bg: var(--color-z-01); /* #FAFAFA */ --canvas-grid-dot: var(--color-z-04); /* #DCDCDC */ --canvas-frame: var(--color-z-08); /* #2E2E2E */ /* Sticky palette — 8 colors × bg / fg / tint. */ --sticky-clay-bg: var(--color-clay-fill-light); --sticky-clay-fg: var(--color-clay-ink-light); --sticky-clay-tint: var(--color-clay-tint-light); --sticky-rust-bg: var(--color-rust-fill-light); --sticky-rust-fg: var(--color-rust-ink-light); --sticky-rust-tint: var(--color-rust-tint-light); --sticky-ochre-bg: var(--color-ochre-fill-light); --sticky-ochre-fg: var(--color-ochre-ink-light); --sticky-ochre-tint: var(--color-ochre-tint-light); --sticky-sage-bg: var(--color-sage-fill-light); --sticky-sage-fg: var(--color-sage-ink-light); --sticky-sage-tint: var(--color-sage-tint-light); --sticky-teal-bg: var(--color-teal-fill-light); --sticky-teal-fg: var(--color-teal-ink-light); --sticky-teal-tint: var(--color-teal-tint-light); --sticky-slate-bg: var(--color-slate-fill-light); --sticky-slate-fg: var(--color-slate-ink-light); --sticky-slate-tint: var(--color-slate-tint-light); --sticky-plum-bg: var(--color-plum-fill-light); --sticky-plum-fg: var(--color-plum-ink-light); --sticky-plum-tint: var(--color-plum-tint-light); --sticky-iron-bg: var(--color-iron-fill-light); --sticky-iron-fg: var(--color-iron-ink-light); --sticky-iron-tint: var(--color-iron-tint-light); /* Default sticky color = clay (warmest neutral, paper-adjacent). */ --sticky-default-bg: var(--sticky-clay-bg); --sticky-default-fg: var(--sticky-clay-fg); --sticky-default-tint: var(--sticky-clay-tint); /* Calendar events — meetings and events on a calendar. Teal from the canvas palette: far from every task status hue (violet to do, blue in progress, red blocked, amber pending, green done), so an event never reads as a task. tint = resting card, fill = hover, rule = the card's left edge, ink = its time text. */ --event-tint: color-mix(in srgb, var(--color-teal-tint-light) 70%, var(--surface-page)); --event-fill: var(--color-teal-tint-light); --event-rule: color-mix(in srgb, var(--color-teal-ink-light) 55%, var(--color-teal-fill-light)); --event-ink: var(--color-teal-ink-light); /* ---------- COLLABORATOR PRESENCE SEMANTIC LAYER — LIGHT ---------- */ /* Eight indexed slots for multi-user presence — remote carets, the gutter presence rail, the facepile. Consumers assign by index (user index modulo 8), never by color name, so the Nth collaborator in a doc reads the same on every surface. The three roles are NOT interchangeable, and the split is not the sticky split: fill — label and avatar backgrounds only. Canvas fills measure 1.35–2.35 against the page in light and 1.84–2.56 in dark, so every one of them fails the 3:1 floor for a non-text UI indicator. A fill drawn straight onto the page is invisible by the numbers; never use it for a bare mark. ink — text sitting on that fill, AND any mark drawn directly on the page surface: caret stem, gutter tick, cursor flag border. Inks measure 6.65–12.53 against the page in light and 9.27–12.53 in dark, clearing the floor everywhere. tint — remote selection ranges, the one role that sits behind body text. --text-primary over tint measures 11.19–15.42 in light and 9.62–11.89 in dark. It earns its slot: the alternative is a consumer dropping opacity on fill, which resolves to a different color in each theme and compounds wrongly where two selections overlap. Ink-on-fill runs 4.20–5.26 in light and 4.65–5.76 in dark. Ochre (4.20) and rust (4.33) fall under the 4.5 small-text floor in light, so label text on a presence fill must be at least the floor step, --text-2xs — not the 9.5px a mockup proposed. Written as the token rather than a number on purpose: the floor moved 11px → 12px in ADR-0033's follow-up and this rule did not have to change. Slot order is by hue separation, not palette declaration order, so early collaborators get maximally distinct hues before the set converges. Sage 80° / slate 212° / plum 334° hold a 106° minimum gap across the first three, and rust 23° keeps 49° across the first four — the widest minimum any four of these eight can hold. Teal 174° and ochre 44° follow. Iron and clay land last on purpose: iron is nearly achromatic and clay sits closest to the page surface (1.35 fill contrast, the weakest in the palette). Tomato is deliberately excluded. It is the escape hatch for presence/live *system* signals, and a person's color must never read as one. */ /* 0 — sage */ --presence-0-fill: var(--color-sage-fill-light); --presence-0-ink: var(--color-sage-ink-light); --presence-0-tint: var(--color-sage-tint-light); /* 1 — slate */ --presence-1-fill: var(--color-slate-fill-light); --presence-1-ink: var(--color-slate-ink-light); --presence-1-tint: var(--color-slate-tint-light); /* 2 — plum */ --presence-2-fill: var(--color-plum-fill-light); --presence-2-ink: var(--color-plum-ink-light); --presence-2-tint: var(--color-plum-tint-light); /* 3 — rust */ --presence-3-fill: var(--color-rust-fill-light); --presence-3-ink: var(--color-rust-ink-light); --presence-3-tint: var(--color-rust-tint-light); /* 4 — teal */ --presence-4-fill: var(--color-teal-fill-light); --presence-4-ink: var(--color-teal-ink-light); --presence-4-tint: var(--color-teal-tint-light); /* 5 — ochre */ --presence-5-fill: var(--color-ochre-fill-light); --presence-5-ink: var(--color-ochre-ink-light); --presence-5-tint: var(--color-ochre-tint-light); /* 6 — iron */ --presence-6-fill: var(--color-iron-fill-light); --presence-6-ink: var(--color-iron-ink-light); --presence-6-tint: var(--color-iron-tint-light); /* 7 — clay */ --presence-7-fill: var(--color-clay-fill-light); --presence-7-ink: var(--color-clay-ink-light); --presence-7-tint: var(--color-clay-tint-light); } /* ----------------------------------------------------------------------------- 3. SEMANTIC LAYER — dark mode ----------------------------------------------------------------------------- */ [data-theme="dark"] { /* Z ramp flips. Z-00 is warm-tilted near-black (#1A1A18, NOT pure black); Z-09 is bone (#ECEBE3, NOT pure white). Pure values stay at Z-10 / --color-pure-* for accent peaks only. */ --color-z-00: #1A1A18; --color-z-01: #222220; --color-z-02: #2A2A28; --color-z-03: #34342F; --color-z-04: #45453F; --color-z-05: #5C5C55; /* Same reasoning as light Z-06: #7A7A72 was 4.03:1 on the dark page and 3.32:1 on hover. #95958D is 5.78:1 page / 5.28:1 raised / 4.77:1 hover (4.15:1 on --surface-active — same caveat as light). */ --color-z-06: #95958D; --color-z-07: #A0A097; --color-z-08: #C8C8C0; --color-z-09: #ECEBE3; --color-z-10: #FFFFFF; /* Surfaces — slight elevation in dark mode (raised steps off page). */ --surface-page: var(--color-z-00); --surface-raised: var(--color-z-01); --surface-sunken: var(--color-z-00); --surface-overlay: rgba(26, 26, 24, 0.92); --surface-hover: var(--color-z-02); /* Weekend columns: between page (Z-00) and hover (Z-02), as in light. */ --surface-weekend: #20201E; --surface-active: var(--color-z-03); --surface-input: var(--color-z-01); --surface-inverse: var(--color-z-09); --skeleton-fill: color-mix(in srgb, var(--text-primary) 8%, transparent); --text-primary: var(--color-z-09); /* #ECEBE3 — bone */ --text-secondary: var(--color-z-07); /* #A0A097 */ --text-muted: var(--color-z-06); /* #95958D — 5.78:1 */ --text-inverse: var(--color-z-00); --text-accent: var(--color-z-09); --text-accent-strong: var(--color-pure-white); --text-success: var(--color-forest-300); --text-danger: var(--color-tomato-300); /* Amber-500 is already 7.34:1 on the dark page — no darkening needed. */ --text-warning: var(--color-amber-500); /* Info-500 is NOT already fine here: 3.93:1 as small text on its own tint. Lightened for the dark page, the way success and danger are. */ --text-info: var(--color-info-300); --text-link: var(--color-z-09); --text-link-hover: var(--color-pure-white); --accent-primary: var(--color-z-09); --accent-primary-fg: var(--color-z-00); --accent-secondary: var(--color-z-07); --accent-secondary-fg: var(--color-z-00); --border-subtle: var(--color-z-03); --border-default: var(--color-z-04); --border-strong: var(--color-z-05); /* See light. Z-05 is only 2.59:1 here, so control edges take Z-06 (#95958D) — 5.78:1 page / 5.28:1 raised. */ --border-control: var(--color-z-06); --border-focus: var(--color-z-09); --border-inverse: var(--alpha-ink-12); --state-success: var(--color-forest-400); --state-warning: var(--color-amber-500); --state-danger: var(--color-tomato-400); --state-info: var(--color-info-500); --shadow-xs: var(--shadow-dark-xs); --shadow-sm: var(--shadow-dark-sm); --shadow-md: var(--shadow-dark-md); --shadow-lg: var(--shadow-dark-lg); --shadow-xl: var(--shadow-dark-xl); --shadow-focus: var(--shadow-focus-dark); --shadow-sticky: var(--shadow-sticky-dark); --shadow-sticky-hover: var(--shadow-sticky-dark-hover); --scrim: rgba(0, 0, 0, 0.6); /* Boards canvas — slightly elevated off page in dark mode. */ --canvas-bg: var(--color-z-01); /* #222220 */ --canvas-grid-dot: var(--color-z-04); /* #45453F */ --canvas-frame: var(--color-z-08); /* #C8C8C0 */ /* Sticky tokens flip to dark variants — fill darkens, ink brightens, tint goes darker than fill. Identity of each color preserved. */ --sticky-clay-bg: var(--color-clay-fill-dark); --sticky-clay-fg: var(--color-clay-ink-dark); --sticky-clay-tint: var(--color-clay-tint-dark); --sticky-rust-bg: var(--color-rust-fill-dark); --sticky-rust-fg: var(--color-rust-ink-dark); --sticky-rust-tint: var(--color-rust-tint-dark); --sticky-ochre-bg: var(--color-ochre-fill-dark); --sticky-ochre-fg: var(--color-ochre-ink-dark); --sticky-ochre-tint: var(--color-ochre-tint-dark); --sticky-sage-bg: var(--color-sage-fill-dark); --sticky-sage-fg: var(--color-sage-ink-dark); --sticky-sage-tint: var(--color-sage-tint-dark); --sticky-teal-bg: var(--color-teal-fill-dark); --sticky-teal-fg: var(--color-teal-ink-dark); --sticky-teal-tint: var(--color-teal-tint-dark); --sticky-slate-bg: var(--color-slate-fill-dark); --sticky-slate-fg: var(--color-slate-ink-dark); --sticky-slate-tint: var(--color-slate-tint-dark); --sticky-plum-bg: var(--color-plum-fill-dark); --sticky-plum-fg: var(--color-plum-ink-dark); --sticky-plum-tint: var(--color-plum-tint-dark); --sticky-iron-bg: var(--color-iron-fill-dark); --sticky-iron-fg: var(--color-iron-ink-dark); --sticky-iron-tint: var(--color-iron-tint-dark); --sticky-default-bg: var(--sticky-clay-bg); --sticky-default-fg: var(--sticky-clay-fg); --sticky-default-tint: var(--sticky-clay-tint); /* Calendar events — meetings and events on a calendar. Teal from the canvas palette: far from every task status hue (violet to do, blue in progress, red blocked, amber pending, green done), so an event never reads as a task. tint = resting card, fill = hover, rule = the card's left edge, ink = its time text. */ --event-tint: color-mix(in srgb, var(--color-teal-tint-dark) 70%, var(--surface-page)); --event-fill: var(--color-teal-tint-dark); --event-rule: color-mix(in srgb, var(--color-teal-ink-dark) 55%, var(--color-teal-fill-dark)); --event-ink: var(--color-teal-ink-dark); /* Presence slots flip to dark variants. Slot index keeps its color identity across modes, so a collaborator does not change hue when the reader flips theme. Role split is unchanged: fill backs labels, ink draws on the page, tint sits behind selected text. */ /* 0 — sage */ --presence-0-fill: var(--color-sage-fill-dark); --presence-0-ink: var(--color-sage-ink-dark); --presence-0-tint: var(--color-sage-tint-dark); /* 1 — slate */ --presence-1-fill: var(--color-slate-fill-dark); --presence-1-ink: var(--color-slate-ink-dark); --presence-1-tint: var(--color-slate-tint-dark); /* 2 — plum */ --presence-2-fill: var(--color-plum-fill-dark); --presence-2-ink: var(--color-plum-ink-dark); --presence-2-tint: var(--color-plum-tint-dark); /* 3 — rust */ --presence-3-fill: var(--color-rust-fill-dark); --presence-3-ink: var(--color-rust-ink-dark); --presence-3-tint: var(--color-rust-tint-dark); /* 4 — teal */ --presence-4-fill: var(--color-teal-fill-dark); --presence-4-ink: var(--color-teal-ink-dark); --presence-4-tint: var(--color-teal-tint-dark); /* 5 — ochre */ --presence-5-fill: var(--color-ochre-fill-dark); --presence-5-ink: var(--color-ochre-ink-dark); --presence-5-tint: var(--color-ochre-tint-dark); /* 6 — iron */ --presence-6-fill: var(--color-iron-fill-dark); --presence-6-ink: var(--color-iron-ink-dark); --presence-6-tint: var(--color-iron-tint-dark); /* 7 — clay */ --presence-7-fill: var(--color-clay-fill-dark); --presence-7-ink: var(--color-clay-ink-dark); --presence-7-tint: var(--color-clay-tint-dark); } /* ----------------------------------------------------------------------------- 3b. LIGHT SCOPE INSIDE DARK — the light Z ramp, restated The light ramp lives on :root, so `[data-theme="light"]` alone only re-pointed the semantic layer at whatever ramp it inherited. Under a dark that was the dark ramp, and a light-scoped surface (the whiteboard's white paper, CollaboratorsSidebar) read dark-mode tokens: bone ink on a white page. The dark block above flips only the Z ramp, so restating it is enough. Keep in sync with the ramp in section 1. ----------------------------------------------------------------------------- */ [data-theme="light"] { --color-z-00: #FFFFFF; --color-z-01: #FAFAFA; --color-z-02: #F4F4F4; --color-z-03: #EBEBEB; --color-z-04: #DCDCDC; --color-z-05: #B8B8B8; --color-z-06: #707070; --color-z-07: #5C5C5C; --color-z-08: #2E2E2E; --color-z-09: #141414; --color-z-10: #000000; } /* ----------------------------------------------------------------------------- 4. SYSTEM PREFERENCE — auto-apply dark when [data-theme] is unset Mirrors [data-theme="dark"] block — duplicated to avoid selector specificity issues. Keep in sync with the dark block above. ----------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-z-00: #1A1A18; --color-z-01: #222220; --color-z-02: #2A2A28; --color-z-03: #34342F; --color-z-04: #45453F; --color-z-05: #5C5C55; --color-z-06: #95958D; --color-z-07: #A0A097; --color-z-08: #C8C8C0; --color-z-09: #ECEBE3; --color-z-10: #FFFFFF; --surface-page: var(--color-z-00); --surface-raised: var(--color-z-01); --surface-sunken: var(--color-z-00); --surface-overlay: rgba(26, 26, 24, 0.92); --surface-hover: var(--color-z-02); --surface-weekend: #20201E; --surface-active: var(--color-z-03); --surface-input: var(--color-z-01); --surface-inverse: var(--color-z-09); --skeleton-fill: color-mix(in srgb, var(--text-primary) 8%, transparent); --text-primary: var(--color-z-09); --text-secondary: var(--color-z-07); --text-muted: var(--color-z-06); --text-inverse: var(--color-z-00); --text-accent: var(--color-z-09); --text-accent-strong: var(--color-pure-white); --text-success: var(--color-forest-300); --text-danger: var(--color-tomato-300); --text-warning: var(--color-amber-500); --text-info: var(--color-info-300); --text-link: var(--color-z-09); --text-link-hover: var(--color-pure-white); --accent-primary: var(--color-z-09); --accent-primary-fg: var(--color-z-00); --accent-secondary: var(--color-z-07); --accent-secondary-fg: var(--color-z-00); --border-subtle: var(--color-z-03); --border-default: var(--color-z-04); --border-strong: var(--color-z-05); --border-control: var(--color-z-06); --border-focus: var(--color-z-09); --border-inverse: var(--alpha-ink-12); --state-success: var(--color-forest-400); --state-warning: var(--color-amber-500); --state-danger: var(--color-tomato-400); --state-info: var(--color-info-500); --shadow-xs: var(--shadow-dark-xs); --shadow-sm: var(--shadow-dark-sm); --shadow-md: var(--shadow-dark-md); --shadow-lg: var(--shadow-dark-lg); --shadow-xl: var(--shadow-dark-xl); --shadow-focus: var(--shadow-focus-dark); --shadow-sticky: var(--shadow-sticky-dark); --shadow-sticky-hover: var(--shadow-sticky-dark-hover); --scrim: rgba(0, 0, 0, 0.6); --canvas-bg: var(--color-z-01); --canvas-grid-dot: var(--color-z-04); --canvas-frame: var(--color-z-08); --sticky-clay-bg: var(--color-clay-fill-dark); --sticky-clay-fg: var(--color-clay-ink-dark); --sticky-clay-tint: var(--color-clay-tint-dark); --sticky-rust-bg: var(--color-rust-fill-dark); --sticky-rust-fg: var(--color-rust-ink-dark); --sticky-rust-tint: var(--color-rust-tint-dark); --sticky-ochre-bg: var(--color-ochre-fill-dark); --sticky-ochre-fg: var(--color-ochre-ink-dark); --sticky-ochre-tint: var(--color-ochre-tint-dark); --sticky-sage-bg: var(--color-sage-fill-dark); --sticky-sage-fg: var(--color-sage-ink-dark); --sticky-sage-tint: var(--color-sage-tint-dark); --sticky-teal-bg: var(--color-teal-fill-dark); --sticky-teal-fg: var(--color-teal-ink-dark); --sticky-teal-tint: var(--color-teal-tint-dark); --sticky-slate-bg: var(--color-slate-fill-dark); --sticky-slate-fg: var(--color-slate-ink-dark); --sticky-slate-tint: var(--color-slate-tint-dark); --sticky-plum-bg: var(--color-plum-fill-dark); --sticky-plum-fg: var(--color-plum-ink-dark); --sticky-plum-tint: var(--color-plum-tint-dark); --sticky-iron-bg: var(--color-iron-fill-dark); --sticky-iron-fg: var(--color-iron-ink-dark); --sticky-iron-tint: var(--color-iron-tint-dark); --sticky-default-bg: var(--sticky-clay-bg); --sticky-default-fg: var(--sticky-clay-fg); --sticky-default-tint: var(--sticky-clay-tint); /* Calendar events — meetings and events on a calendar. Teal from the canvas palette: far from every task status hue (violet to do, blue in progress, red blocked, amber pending, green done), so an event never reads as a task. tint = resting card, fill = hover, rule = the card's left edge, ink = its time text. */ --event-tint: color-mix(in srgb, var(--color-teal-tint-dark) 70%, var(--surface-page)); --event-fill: var(--color-teal-tint-dark); --event-rule: color-mix(in srgb, var(--color-teal-ink-dark) 55%, var(--color-teal-fill-dark)); --event-ink: var(--color-teal-ink-dark); --presence-0-fill: var(--color-sage-fill-dark); --presence-0-ink: var(--color-sage-ink-dark); --presence-0-tint: var(--color-sage-tint-dark); --presence-1-fill: var(--color-slate-fill-dark); --presence-1-ink: var(--color-slate-ink-dark); --presence-1-tint: var(--color-slate-tint-dark); --presence-2-fill: var(--color-plum-fill-dark); --presence-2-ink: var(--color-plum-ink-dark); --presence-2-tint: var(--color-plum-tint-dark); --presence-3-fill: var(--color-rust-fill-dark); --presence-3-ink: var(--color-rust-ink-dark); --presence-3-tint: var(--color-rust-tint-dark); --presence-4-fill: var(--color-teal-fill-dark); --presence-4-ink: var(--color-teal-ink-dark); --presence-4-tint: var(--color-teal-tint-dark); --presence-5-fill: var(--color-ochre-fill-dark); --presence-5-ink: var(--color-ochre-ink-dark); --presence-5-tint: var(--color-ochre-tint-dark); --presence-6-fill: var(--color-iron-fill-dark); --presence-6-ink: var(--color-iron-ink-dark); --presence-6-tint: var(--color-iron-tint-dark); --presence-7-fill: var(--color-clay-fill-dark); --presence-7-ink: var(--color-clay-ink-dark); --presence-7-tint: var(--color-clay-tint-dark); } }