/* ========================================================================== FONTS -------------------------------------------------------------------------- Perfectly Nineties, the brand display face. Commercial, licensed from Jen Wagner Co. on their Desktop + Web 10k tier — the files they supply are shipped as-is rather than converted (Regular as .woff, Bold as the .otf it came as), and the licence file is deliberately not served. The web licence covers Bold: the brand guide pairs Perfectly Nineties Bold with Alte Haas Regular for captions and callouts. Alte Haas Grotesk, the brand body face. Freeware; see fonts/AlteHaasGrotesk-LICENSE.txt, which is served alongside the .woff2 files because the licence requires them to travel together. The family ships two faces, Regular and Bold, but the type scale uses four weights. The ranges below hand 500 to Regular and 600 to Bold so the browser never synthesises a weight — faux-bold smears the outline and reads badly at nav and button sizes. Paths are relative to this file: dist/fonts/ for the marketing build, bundled by webpack for apps/web. A surface that does not serve fonts/ falls back to Helvetica Neue, which is closer to the brand than Inter was. ========================================================================== */ @font-face { font-family: 'Perfectly Nineties'; src: url('fonts/PerfectlyNineties-Regular.woff') format('woff'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Perfectly Nineties'; src: url('fonts/PerfectlyNineties-Bold.otf') format('opentype'); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Alte Haas Grotesk'; src: url('fonts/AlteHaasGrotesk-Regular.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Alte Haas Grotesk'; src: url('fonts/AlteHaasGrotesk-Bold.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; } /* ============================================================================ 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 — Jen Wagner Co.) Body / UI ........... Alte Haas Grotesk (freeware — Yann Le Coroller) Logo ................ Helvetica Regular — the "mµ" mark only; titles, taglines and labels use the two faces above Both brand faces are now the real thing, served from fonts/ beside this file. Nothing here is a substitute any more. --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: 'Perfectly Nineties', Georgia, 'Times New Roman', serif; --font-sans: 'Alte Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif; --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; } }