/* * Linda · Lumen Design System — Design Tokens * ───────────────────────────────────────────────────────────────────────────── * These tokens are the contract. Every surface in the Linda · Lumen product * family references these variables — never hardcoded hex values. Changing a * token here cascades correctly to every component that uses it. * * Provenance: audited from five hackathon outputs (2026-04-25). Variables with * unanimous agreement across all five files are "locked". Variables that * required a normative call are flagged with [NORMATIVE: reason]. * * Canon: Rams (less-but-better) · Vignelli (discipline) · Müller-Brockmann * (grid rhythm) · Tufte (data-ink) · Lumen's Luck (warm, clover-green, earnest) * ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── COLOR: PAPER SPECTRUM ───────────────────────────────────────────────── The background register. Warm, off-white — "well-lit workshop" not "clinical white". All five hackathon outputs converged exactly on these three values. The warmth comes from the yellow-orange undertone in the hex mix. --paper-deep adds a third step for active/pressed states. */ --color-paper: #faf6ef; /* base page background */ --color-paper-tint: #f3ecdf; /* sidebar, card backgrounds, recessed areas */ --color-paper-deep: #ede4d3; /* hover states, pressed surfaces, table headers */ /* ── COLOR: INK SPECTRUM ─────────────────────────────────────────────────── Text hierarchy. Three steps from near-black to muted. Warm-toned throughout — no blue-gray. The rule/hairline color closes the spectrum. */ --color-ink: #1a1815; /* primary text, headings — near-black with warm undertone */ --color-ink-soft: #3a3631; /* secondary text, body copy */ --color-ink-mute: #6b6359; /* labels, captions, placeholder text */ --color-rule: #e3dccd; /* hairlines, dividers, borders — matches paper warmth */ /* ── COLOR: EMBER ────────────────────────────────────────────────────────── CTA color. Warm orange-red. All five files converged on #c05b23. Used for primary CTAs, link hover states, and emphasis text. Not an error color — that's --color-danger. The name "ember" signals warmth, not alarm. [NORMATIVE: ember is CTA only. Do not use for error states.] */ --color-ember: #c05b23; /* primary CTA, active links, price emphasis */ --color-ember-tint: #fdf1ec; /* light ember background for crit alerts */ /* ── COLOR: DUSK ─────────────────────────────────────────────────────────── Gold accent. Used for secondary CTAs, warning states, and decorative accents. Pairs with clover-green without competing. */ --color-dusk: #d69b3d; /* gold accent, warning register */ --color-dusk-tint: #fdf8ec; /* light dusk background for warn alerts */ /* ── COLOR: CLOVER SPECTRUM ──────────────────────────────────────────────── The Lumen's Luck green. "Warm, alive, slightly saturated, not corporate-mint" per brand spec. Four steps for full range of use: solid green → dim/muted → tint background. [NORMATIVE: --color-moss (#4a6b3a) is the darker anchor used in prose and data contexts. --color-clover (#2f7f3e) is the brand green for marks, pills, and active states. Both were present across all five files.] */ --color-clover: #2f7f3e; /* primary brand green — active states, marks, badges */ --color-clover-dim: #c4e0bd; /* muted green for sparkline fills, subtle bg */ --color-clover-tint: #dff0d9; /* green background for success/active card areas */ --color-moss: #4a6b3a; /* darker green for prose, luck-strip text, deep UI */ /* ── COLOR: SLATE ────────────────────────────────────────────────────────── Cool-gray. Used for secondary UI chrome (avatars, cancel dots, meta text). Provides visual distance from warm tones when needed. */ --color-slate: #5b6670; /* secondary chrome, cancel states, avatar backgrounds */ /* ── COLOR: SEMANTIC — DANGER / WARN / OK ────────────────────────────────── Semantic state colors. Anchored to the brand palette to maintain warmth. [NORMATIVE: two files used #b03020 for danger, three used #b53232. Settled on #b53232 — slightly warmer, aligns with the ember family. The tint backgrounds use their respective light variants.] */ --color-danger: #b53232; /* error, loss, negative states */ --color-danger-tint: #fce8e8; /* error background */ --color-warn: #a06010; /* warning text on light bg */ --color-warn-tint: #fdf3df; /* warning background */ --color-ok: #2f7f3e; /* same as --color-clover; aliased for semantic clarity */ /* ── ALERT SEVERITY SPECTRUM ─────────────────────────────────────────────── Explicit four-level severity system extracted from team-5-poly-alerts.html. Crit/warn/info/dim. Each level has bg + border + label color triplet. [NORMATIVE: team-5 had the most fully-realized severity system; adopted it wholesale as the alert standard.] */ --color-crit-bg: #fdf1ec; --color-crit-border: #c05b23; /* ember for critical — serious but warm, not clinical red */ --color-crit-label: #9b3e12; --color-warn-bg: #fdf8ec; --color-warn-border: #d69b3d; --color-warn-label: #9b6c12; --color-info-bg: #f4f8f4; --color-info-border: #4a6b3a; /* moss for informational */ --color-info-label: #2f5228; --color-dim-bg: #f3ecdf; /* same as paper-tint */ --color-dim-border: #e3dccd; --color-dim-label: #6b6359; /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── Unanimous across all five files: three typefaces, no exceptions. Vignelli: use few typefaces. We use exactly three. - Newsreader: display / editorial / warmth / the cursive-L family - Inter: UI / body / functional prose - JetBrains Mono: numbers, code, labels, timestamps */ --font-display: 'Newsreader', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Type scale — Müller-Brockmann: the scale is a system, not a collection. Named by use, not by pixel size. The clamp() on large sizes ensures fluid scaling without a media query per step. */ --text-hero: clamp(42px, 5.8vw, 68px); /* h1 hero headline */ --text-display: clamp(36px, 4vw, 56px); /* section display headlines */ --text-h2: 32px; /* section titles */ --text-h3: 28px; /* card/panel titles */ --text-h4: 22px; /* subsection heads, step titles */ --text-h5: 18px; /* minor headings */ --text-body-lg: 18px; /* hero lede, prominent prose */ --text-body: 16px; /* default body */ --text-body-sm: 15px; /* secondary body */ --text-ui: 14px; /* UI labels, buttons */ --text-ui-sm: 13px; /* small UI, nav, captions */ --text-caption: 12px; /* table cells, card subtitles */ --text-label: 11px; /* all-caps mono labels */ --text-micro: 10px; /* badge text, tight mono */ /* Leading (line-height) */ --leading-tight: 1.07; /* display headlines */ --leading-snug: 1.2; /* h2–h4 */ --leading-normal: 1.55; /* body copy */ --leading-relaxed: 1.6; /* long-form prose */ /* Tracking (letter-spacing) */ --tracking-tight: -0.02em; /* large display type */ --tracking-snug: -0.01em; /* h2–h4 */ --tracking-normal: 0em; --tracking-wide: 0.04em; /* footer labels */ --tracking-wider: 0.08em; /* mono section labels */ --tracking-widest: 0.12em; /* all-caps micro labels */ /* ── SPACING SCALE ───────────────────────────────────────────────────────── Power-of-two base-4 system. Named by step, not by size. Consistent with Müller-Brockmann: rhythm over randomness. [NORMATIVE: team-3 defined --sp1 through --sp9 explicitly. Adopted and extended with named aliases for the most common semantic uses.] */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Semantic spacing aliases */ --gap-card: var(--space-5); /* internal card padding gap */ --gap-grid: var(--space-5); /* grid column gap, default */ --gap-section: var(--space-8); /* between page sections */ --gap-inline: var(--space-2); /* between inline elements */ /* ── BORDER RADIUS ───────────────────────────────────────────────────────── Restrained. Not pill-everything, not sharp corners everywhere. [NORMATIVE: files used 2px, 3px, 4px, 6px, and 100px (pill). Standardized to four steps. The 100px pill is reserved for status pills only.] */ --radius-sm: 2px; /* badges, tight elements */ --radius-md: 4px; /* buttons, small cards */ --radius-lg: 6px; /* larger cards, panels */ --radius-pill: 100px; /* status pills, live badges */ /* ── SHADOWS ─────────────────────────────────────────────────────────────── Minimal. Tufte: no decoration unless it carries information. Only used for hover lift on interactive cards. */ --shadow-hover: 0 1px 6px rgba(0, 0, 0, 0.06); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04); /* ── MOTION ──────────────────────────────────────────────────────────────── Short, ease-out. Never flashy. [NORMATIVE: files used 60ms–400ms. Three tiers standardized here.] */ --motion-fast: 60ms ease-out; /* micro-interactions (hover bg swap) */ --motion-base: 120ms ease-out; /* standard transitions (color, border) */ --motion-slow: 400ms ease; /* data fills, sparkline entrance */ /* ── LAYOUT ──────────────────────────────────────────────────────────────── Max-widths and column widths from the team outputs. */ --max-width: 1080px; /* editorial / marketing pages (landing, mentor) */ --max-width-wide: 1280px; /* app shells (Bridge, alerts) */ --sidebar-width: 220px; /* Bridge sidebar (team-1) */ --sidebar-wide: 240px; /* alerts sidebar (team-5) */ --topbar-height: 56px; /* app shell topbar */ --container-pad: var(--space-7); /* horizontal page padding */ }