/* ============================================================================ mµ — Design System ---------------------------------------------------------------------------- Source of truth: "Mu Brand Guide", June 2026 — Bailey Elder. Token tiers: 1. PRIMITIVES — raw brand values. Taken verbatim from the guide. 2. DERIVED — tints/shades/alphas computed off primitives. A UI needs more than five colors; these extend the palette without inventing new hues. 3. EXTENSIONS — values the guide does not cover but the product requires. Each is flagged. These need design sign-off. 4. SEMANTIC — role-based aliases (surface, ink, accent…). Components should consume ONLY these, never tiers 1–3 directly. Surface model — "light page, dark data cards" (Brand Guide p.7): The page is Silver Gray with Mute Black type. Quantitative surfaces (charts, tables, modals) invert to Mute Black panels. Editorial and summary surfaces stay light. ========================================================================= */ :root { /* ========================================================================== 1. PRIMITIVES — brand-exact, from Brand Guide p.6 ====================================================================== */ --mu-silver-gray: #E6E4DB; /* Silver Gray */ --mu-mute-black: #1F201F; /* Mute Black */ --mu-very-green: #55B62F; /* Very Green */ --mu-electric-blue: #1594ED; /* Electric Blue */ --mu-neon-yellow: #EAFF00; /* Neon Yellow */ /* ========================================================================== 2. DERIVED — tints and shades of the two brand neutrals ====================================================================== */ /* Light ramp — warm, tinted off Silver Gray */ --paper-raised: #EFEEE7; /* cards sitting above the page */ --paper: #E6E4DB; /* = Silver Gray, the page itself */ --paper-sunken: #DAD8CD; /* inputs, wells, inset areas */ /* Dark ramp — warm, tinted off Mute Black */ --slate-raised: #2A2C2A; /* raised elements inside a dark panel */ --slate: #1F201F; /* = Mute Black, the dark panel itself */ --slate-sunken: #171817; /* chart wells, inputs inside dark panels */ /* Ink on light surfaces */ --ink: #1F201F; /* = Mute Black */ --ink-secondary: rgba(31, 32, 31, 0.64); --ink-tertiary: rgba(31, 32, 31, 0.42); /* Ink on dark surfaces */ --ink-inverse: #E6E4DB; /* = Silver Gray */ --ink-inverse-secondary: rgba(230, 228, 219, 0.62); --ink-inverse-tertiary: rgba(230, 228, 219, 0.40); /* Hairlines on light surfaces */ --line-subtle: rgba(31, 32, 31, 0.10); --line: rgba(31, 32, 31, 0.17); --line-strong: rgba(31, 32, 31, 0.30); /* Hairlines on dark surfaces */ --line-inverse-subtle: rgba(230, 228, 219, 0.09); --line-inverse: rgba(230, 228, 219, 0.17); --line-inverse-strong: rgba(230, 228, 219, 0.30); /* Translucent layers — alpha variants of the two brand neutrals, used where content must show through (sticky nav, scrims, overlays). */ --veil-page: rgba(230, 228, 219, 0.78); /* Silver Gray @ 78% */ --veil-card: rgba(239, 238, 231, 0.62); --veil-card-dense: rgba(239, 238, 231, 0.90); --scrim: rgba(31, 32, 31, 0.62); /* Mute Black @ 62% */ /* Accent tints — for fills, chart bands, tag backgrounds */ --green-wash: rgba(85, 182, 47, 0.12); --green-edge: rgba(85, 182, 47, 0.30); --blue-wash: rgba(21, 148, 237, 0.12); --blue-edge: rgba(21, 148, 237, 0.30); --yellow-wash: rgba(234, 255, 0, 0.18); --yellow-edge: rgba(234, 255, 0, 0.45); /* Accent shades legible as TEXT on light surfaces. The brand accents are tuned for dark grounds — Very Green and Electric Blue both fall under 3:1 against Silver Gray, and Neon Yellow is unreadable. These darkened variants clear 4.5:1 on --paper. Use the primitives on dark panels; use these on light ones. */ --green-ink: #35760F; --blue-ink: #0A6098; /* ========================================================================== 3. EXTENSIONS — not in the brand guide. Flagged for sign-off. ====================================================================== */ /* [EXTENSION] The guide defines no negative/loss colour, but a finance product cannot signal a drawdown with green, blue or yellow. This is a warm brick red chosen to sit with the palette rather than fight it. --loss-ink is the light-surface-legible variant. */ --loss: #D2402B; --loss-ink: #B02F1C; /* legible as text on Silver Gray (4.6:1) */ --loss-bright: #F2634A; /* legible as text on Mute Black (4.7:1) */ --loss-wash: rgba(210, 64, 43, 0.12); --loss-edge: rgba(210, 64, 43, 0.32); /* ========================================================================== 4. SEMANTIC — the only tier components should reference ====================================================================== */ /* Surfaces */ --surface-page: var(--paper); --surface-card: var(--paper-raised); --surface-inset: var(--paper-sunken); --surface-data: var(--slate); /* charts, tables, modals */ --surface-data-raised: var(--slate-raised); --surface-data-inset: var(--slate-sunken); /* Text */ --text-primary: var(--ink); --text-secondary: var(--ink-secondary); --text-tertiary: var(--ink-tertiary); --text-on-data: var(--ink-inverse); --text-on-data-secondary: var(--ink-inverse-secondary); --text-on-data-tertiary: var(--ink-inverse-tertiary); /* Borders */ --border-subtle: var(--line-subtle); --border-default: var(--line); --border-strong: var(--line-strong); --border-on-data: var(--line-inverse); --border-on-data-subtle: var(--line-inverse-subtle); /* Accent roles */ --accent-interactive: var(--mu-electric-blue); /* links, primary CTA, focus */ --accent-positive: var(--mu-very-green); /* gains, live, confirmed */ --accent-highlight: var(--mu-neon-yellow); /* emphasis, markers */ --accent-negative: var(--loss); /* [EXTENSION] */ /* Accent roles rendered as text on LIGHT surfaces */ --accent-interactive-text: var(--blue-ink); --accent-positive-text: var(--green-ink); --accent-negative-text: var(--loss-ink); /* ========================================================================== TYPOGRAPHY -------------------------------------------------------------------------- Brand specifies: Display / hero ...... Perfectly Nineties (commercial — Displaay) Body / UI ........... Alte Haas Grotesk (no web licence) Logo & taglines ..... Helvetica Regular Neither brand face is licensed for web yet, so --font-display and --font-sans currently resolve to the closest freely-licensed matches. TO SWAP IN THE REAL FACES: add @font-face blocks and change the first family in each stack. Nothing else in the codebase needs to change. --font-logo is NOT a substitute: Helvetica Neue ships on macOS and iOS, so the wordmark renders in genuine Helvetica for most viewers, with Arial as the metric-compatible fallback elsewhere. ====================================================================== */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* sub → Perfectly Nineties */ --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* sub → Alte Haas Grotesk */ --font-logo: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* brand-exact where installed */ /* Type scale */ --text-3xs: 10px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; --text-display: clamp(22px, 4vw, 34px); --text-hero: clamp(84px, 16vw, 168px); /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* Line height */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing — the guide calls for tightened tracking on display type and wide tracking on the all-caps label style. */ --tracking-tighter: -0.05em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.12em; --tracking-widest: 0.18em; /* ========================================================================== SPACE — 2px grid, 4px preferred. Replaces 32 ad-hoc values. ====================================================================== */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-96: 96px; /* ========================================================================== RADIUS — the guide's illustration language is circular and blobby, so the UI leans generously rounded. ====================================================================== */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --radius-circle: 50%; /* ========================================================================== ELEVATION — warm-tinted, never neutral black ====================================================================== */ --shadow-sm: 0 1px 2px rgba(31, 32, 31, 0.06); --shadow-md: 0 4px 16px -6px rgba(31, 32, 31, 0.16); --shadow-lg: 0 18px 50px -20px rgba(31, 32, 31, 0.30); --shadow-data: 0 18px 50px -22px rgba(0, 0, 0, 0.55); /* under dark panels */ --shadow-modal: 0 40px 120px -30px rgba(0, 0, 0, 0.55); /* ========================================================================== MOTION ====================================================================== */ --duration-fast: 120ms; --duration-base: 150ms; --duration-slow: 200ms; --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1); /* ========================================================================== LAYOUT ====================================================================== */ --max-width: 1240px; /* Breakpoints are documented here for reference only — custom properties cannot be used inside @media queries. Keep these three in sync with the media queries in styles.css. sm 560px — single column, compressed padding md 720px — two-column grids collapse lg 920px — nav links hide, side-by-side layouts stack ====================================================================== */ } /* ============================================================================ DATA SURFACE ---------------------------------------------------------------------------- Applying .on-data remaps the semantic text and border tokens to their inverse variants, so any component nested inside a dark panel restyles itself without needing its own override. ========================================================================= */ .on-data { --text-primary: var(--ink-inverse); --text-secondary: var(--ink-inverse-secondary); --text-tertiary: var(--ink-inverse-tertiary); --border-subtle: var(--line-inverse-subtle); --border-default: var(--line-inverse); --border-strong: var(--line-inverse-strong); --surface-card: var(--slate-raised); --surface-inset: var(--slate-sunken); /* On a dark ground the pure brand accents are legible again, so the "-text" roles snap back to the primitives. */ --accent-interactive-text: var(--mu-electric-blue); --accent-positive-text: var(--mu-very-green); --accent-negative-text: var(--loss-bright); --accent-negative: var(--loss-bright); color: var(--text-primary); } /* ============================================================================ REDUCED MOTION ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }