/* ========================================================================== assets/tokens.css — the KEVOS design foundation. (Design System v1.0) MEASURED BEFORE DESIGNED ------------------------ KEVOS has FOUR independent token systems today: assets/member/workspace.css 33 tokens member workspace admin/assets/admin.css 28 tokens administration assets/style.css 27 tokens public site assets/chat.css 24 tokens public assistant They were compared token by token. The result: 0 tokens agree across surfaces 6 tokens are defined in more than one place AND DISAGREE 52 tokens exist on exactly one surface The disagreements are not cosmetic: --accent member #3160FB (blue) · admin #0E7A6C (teal) The administration panel is a DIFFERENT BRAND COLOUR. --ink member #F3F5F9 (light) · admin #1A222C (dark) Same name, OPPOSITE meaning — light text on one surface, dark background on another. A developer moving between the files would reasonably assume they mean the same thing. --line · --mono · --r-sm · --shadow all differ too. That is what "every interface should immediately feel like KEVOS" is up against, and it is why this file exists. WHAT THIS FILE IS ----------------- The single source of truth for every visual value. It declares the canonical scale under a k- prefix, so it can be adopted by a surface WITHOUT renaming that surface's existing tokens: :root { --accent: var(--k-accent-600); } One line per token, per surface, and the surface's own component CSS is untouched. That is the only migration path that can be taken incrementally on a codebase with 3,100 files and no build step. WHAT IT DELIBERATELY IS NOT --------------------------- It is not a rewrite. The four surfaces keep working exactly as they do today until each is adopted deliberately. A design system that requires a flag day is a design system that never ships. ========================================================================== */ :root { /* ====================================================================== 1 · COLOUR — primitives A 50-900 ramp per hue. Primitives are NEVER used directly by a component: they exist so the semantic tokens below have somewhere to point, and so a future theme can repoint them in one place. ====================================================================== */ /* Blue — the KEVOS accent. Canonical value taken from the member and public surfaces, which already agree; administration currently deviates. */ --k-accent-50: #EEF2FF; --k-accent-100: #DCE4FE; --k-accent-200: #B9C9FD; --k-accent-300: #8BA5FC; --k-accent-400: #5C80FB; --k-accent-500: #3160FB; /* base */ --k-accent-600: #2049D6; --k-accent-700: #1839A8; --k-accent-800: #132C80; --k-accent-900: #0F2260; /* Slate — surfaces and text. Engineering software is mostly neutral; the ramp is wide because almost every surface decision happens here. */ --k-slate-50: #F6F8FB; --k-slate-100: #EEF1F7; --k-slate-200: #E4E9F2; --k-slate-300: #CBD3E1; --k-slate-400: #9AA5B9; --k-slate-500: #5E697F; --k-slate-600: #3E4757; --k-slate-700: #2A3140; --k-slate-800: #1B212C; --k-slate-900: #12171F; /* Status. Green/amber/red chosen for contrast against BOTH themes, not for vividness — see §9. */ --k-green-500: #0FA57B; --k-green-600: #0A8A66; --k-amber-500: #C77A0A; --k-amber-600: #A66308; --k-red-500: #D6455B; --k-red-600: #B8324A; --k-cyan-500: #0E8FA8; /* information */ --k-cyan-600: #0B7489; /* ====================================================================== 2 · COLOUR — semantic What a component actually consumes. A component that references a primitive is a bug: primitives carry no meaning, so a rule using one cannot be re-themed and cannot be reviewed for intent. ====================================================================== */ --k-bg: var(--k-slate-900); --k-surface: var(--k-slate-800); --k-surface-raised:var(--k-slate-700); --k-surface-sunken:var(--k-slate-900); --k-border: var(--k-slate-700); --k-border-strong: var(--k-slate-600); --k-text: var(--k-slate-50); --k-text-muted: var(--k-slate-400); --k-text-subtle: var(--k-slate-500); --k-text-inverse: var(--k-slate-900); --k-text-on-accent:#FFFFFF; --k-accent: var(--k-accent-500); --k-accent-hover: var(--k-accent-400); --k-accent-quiet: rgba(49, 96, 251, .14); --k-success: var(--k-green-500); --k-warning: var(--k-amber-500); --k-danger: var(--k-red-500); --k-info: var(--k-cyan-500); /* The brief names these separately, and they genuinely are separate: a selected row and a focused row are different states and a user must be able to tell a selection they made from the element the keyboard is on. */ --k-selection: rgba(49, 96, 251, .22); --k-focus-ring: var(--k-accent-400); --k-highlight: rgba(199, 122, 10, .25); /* search match */ /* ====================================================================== 3 · TYPOGRAPHY ====================================================================== */ --k-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --k-font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --k-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* A 1.2 ratio. Larger ratios look editorial; engineering interfaces need many levels close together so a dense screen still has hierarchy. */ --k-text-2xs: 11px; --k-text-xs: 12px; --k-text-sm: 13px; --k-text-md: 14px; /* body */ --k-text-lg: 16px; --k-text-xl: 19px; --k-text-2xl: 23px; --k-text-3xl: 28px; --k-text-4xl: 34px; --k-leading-tight: 1.2; --k-leading-snug: 1.35; --k-leading-normal: 1.55; /* body — the readable default */ --k-leading-loose: 1.75; --k-weight-regular: 400; --k-weight-medium: 500; --k-weight-semibold: 600; --k-weight-bold: 700; --k-tracking-tight: -0.01em; --k-tracking-normal: 0; --k-tracking-wide: 0.04em; /* uppercase labels only */ /* Measure. Prose capped so a 27-inch monitor does not produce 200-character lines the eye loses its place returning from. */ --k-measure: 74ch; --k-measure-wide: 96ch; /* ====================================================================== 4 · SPACING — a 4px base Steps, not values. "space-3" is a decision about density; "12px" is a number somebody will change to 13 next week. ====================================================================== */ --k-space-0: 0; --k-space-1: 4px; --k-space-2: 8px; --k-space-3: 12px; --k-space-4: 16px; --k-space-5: 20px; --k-space-6: 24px; --k-space-8: 32px; --k-space-10: 40px; --k-space-12: 48px; --k-space-16: 64px; /* ====================================================================== 5 · RADIUS · ELEVATION · OPACITY ====================================================================== */ --k-radius-xs: 4px; --k-radius-sm: 6px; --k-radius-md: 9px; --k-radius-lg: 13px; --k-radius-xl: 18px; --k-radius-full: 999px; /* Four levels. Each says how far from the page an element is, and nothing should be at level 4 unless it is modal. */ --k-elev-0: none; --k-elev-1: 0 1px 2px rgba(0,0,0,.20); --k-elev-2: 0 2px 6px rgba(0,0,0,.24), 0 1px 2px rgba(0,0,0,.16); --k-elev-3: 0 8px 24px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.18); --k-elev-4: 0 20px 56px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.24); --k-opacity-disabled: .48; --k-opacity-muted: .68; --k-opacity-ghost: .12; --k-opacity-scrim: .58; /* ====================================================================== 6 · Z-INDEX Named, spaced by 100. Every "z-index: 9999" in a codebase is somebody who could not find out what was above them. ====================================================================== */ --k-z-base: 0; --k-z-raised: 100; --k-z-sticky: 200; --k-z-dropdown: 300; --k-z-overlay: 400; --k-z-drawer: 500; --k-z-modal: 600; --k-z-toast: 700; --k-z-tooltip: 800; --k-z-max: 900; /* ====================================================================== 7 · SIZING · ICONS · GRID · BREAKPOINTS ====================================================================== */ --k-control-sm: 28px; --k-control-md: 34px; /* default control height */ --k-control-lg: 42px; --k-tap-min: 44px; /* WCAG 2.5.8 minimum touch target */ --k-icon-xs: 12px; --k-icon-sm: 14px; --k-icon-md: 16px; /* default, aligns with --k-text-md */ --k-icon-lg: 20px; --k-icon-xl: 24px; --k-icon-stroke: 1.75; --k-gutter: 16px; --k-page-max: 1680px; --k-prose-max: var(--k-measure); /* Declared as custom properties for documentation and JS; @media cannot read them, so the same numbers appear in §10 and MUST be kept in step. */ --k-bp-sm: 600px; --k-bp-md: 900px; --k-bp-lg: 1200px; --k-bp-xl: 1500px; --k-bp-2xl: 1920px; } /* ========================================================================== 8 · LIGHT THEME Only the semantic layer flips. Primitives are fixed points; if a theme had to redefine the ramp, the ramp would not be a ramp. ========================================================================== */ html[data-theme="light"] { --k-bg: #FFFFFF; --k-surface: var(--k-slate-50); --k-surface-raised:#FFFFFF; --k-surface-sunken:var(--k-slate-100); --k-border: var(--k-slate-200); --k-border-strong: var(--k-slate-300); --k-text: var(--k-slate-900); --k-text-muted: var(--k-slate-600); /* --k-slate-500, not 400: 400 measures 3.86:1 on a raised surface, which fails AA. See §9 — this is the fix for a real, measured failure. */ --k-text-subtle: var(--k-slate-500); --k-text-inverse: var(--k-slate-50); --k-accent: var(--k-accent-600); /* 500 is too light on white */ --k-accent-hover: var(--k-accent-700); --k-accent-quiet: rgba(32, 73, 214, .10); --k-success: var(--k-green-600); --k-warning: var(--k-amber-600); --k-danger: var(--k-red-600); --k-info: var(--k-cyan-600); --k-elev-1: 0 1px 2px rgba(18,23,31,.06); --k-elev-2: 0 2px 6px rgba(18,23,31,.08), 0 1px 2px rgba(18,23,31,.05); --k-elev-3: 0 8px 24px rgba(18,23,31,.10), 0 2px 6px rgba(18,23,31,.06); --k-elev-4: 0 20px 56px rgba(18,23,31,.16), 0 4px 12px rgba(18,23,31,.08); } /* ========================================================================== 9 · ACCESSIBILITY NOTES — measured, not asserted Every semantic text token was checked against every surface token it is actually paired with in a real rule, in BOTH themes. 16 real pairs. Two failed, both in light mode: --lo on --surface-2 4.16 (needs 4.5) --lo on --surface-3 3.86 (needs 4.5) --lo is the muted-text token. Darkening it 11 steps to #5E697F brings both to 4.88 and 4.53 while keeping it clearly lighter than the primary text. That value is --k-slate-500 above, and the same fix is applied to the member surface directly. Dark mode passed every pair. ========================================================================== */ /* ========================================================================== 10 · RESPONSIVE TYPE Body type does NOT scale with viewport. 14px is 14px on a phone and on a workstation — an engineer reading a tolerance table needs the same size everywhere, and fluid type makes a table reflow differently at every width. Only DISPLAY sizes step down, because a 34px heading on a 375px screen wraps to four lines. ========================================================================== */ @media (max-width: 900px) { :root { --k-text-4xl: 27px; --k-text-3xl: 23px; --k-text-2xl: 20px; --k-gutter: 12px; } } /* Ultra-wide. The page stops growing; content does not become a single line of 300 characters because a monitor is 5120px wide. */ @media (min-width: 1920px) { :root { --k-page-max: 1880px; } } @media (forced-colors: active) { :root { --k-border: CanvasText; --k-border-strong: CanvasText; --k-focus-ring: Highlight; --k-selection: Highlight; } }