Phase 10: Design System & Component Library
src/index.css and flipped by html.light.1. Token Primitive Layer — @theme (src/index.css:5-44)
html.light remaps them.| Token group | Dark value | Light remap |
|---|---|---|
| Surface | --color-bg-0 #05070d, bg-1 #0a0f1e, bg-2 #10182e, panel #0e1428, panel-soft rgba(14,20,40,.8) | light-bg-0 #f4f6fb, light-panel #ffffff, panel-soft rgba(255,255,255,.85) |
| Border | border #1e2a4a, border-strong #2a3a62 | light-border #dde3f0, light-border-strong #c2cbe0 |
| Text | text #e6eaf5, muted #9aa3c2, dim #93a0bf | light-text #141826, light-muted #4d5670, light-dim #5d6580 |
| Brand | primary #fbbf24, primary-2 #d97706, accent #34d399, warn #f59e0b | light-primary #d97706, light-accent #059669 |
| Type | font-sans Inter, font-mono JetBrains Mono, font-serif Newsreader | — |
| Radius | sm 10px, md 14px, lg 20px | — |
| Boarding pass | --bp-bg gradient dark, --bp-border rgba(251,191,36,.28), --bp-text-white #fff | html.light --bp-bg → white gradient, --bp-text-white #0f172a |
| Lifecycle accent | :root --amber #F5A623, --teal #2DD4BF, --violet #A78BFA, --rose #fb7185 | — |
| Lifecycle surface | .lifecycle-root --bg #0A0E14, --surface #10151D, --line #232B38, --lc-* | html.light .lifecycle-root remaps to #f3f5fa / #ffffff / #d3dbea |
src/index.css:57-88:theme-store.ts:15 does document.documentElement.classList.toggle("light") + style.colorScheme. No CSS-in-JS, no re-mount. html.light .bp-wrap adds paper shadow; html.light .substrate flips grid line.2. Global Foundations
* { box-sizing:border-box }, html { scroll-behavior:smooth }, custom scrollbar (11px, transparent track, padding-box thumb).body { background: var(--color-bg-0); color: var(--color-text); font-family: var(--font-sans) }.:focus-visible { outline: 2px solid var(--color-primary) }, ::selection amber.3. Primitive Components
3.1 Boarding Pass — .bp-* (src/index.css:121-182)
showcase.css. .bp-wrap (22px radius, bp-border, bp-bg gradient, 18px shadow), .bp-head striped gold, .bp-body flex column→row @900px, .bp-stub dashed border, .bp-notch circular cutouts. Used in Hero.3.2 CTA Circle — src/components/ui/cta-circle.tsx
SIZES: sm h-9 w-9, md h-11 w-11 (44px touch safe). HOVER = group relative rounded-full transition active:scale-95 hover:scale-105. Inner .cta-sheen::after skewed gradient sweep on group:hover. CTACircle (anchor) vs CTACircleLink (react-router Link), variant: solid (emerald) | ghost (border dim).3.3 Frontend Flip Cards — .fe-flip (§03, src/index.css:433-552)
perspective:1400px, transform-style:preserve-3d. Faces share backface-visibility:hidden, transition: transform .8s cubic(.4,.08,.16,1) + opacity .3s. fe-front rotateY(0), fe-back absolute inset-0 rotateY(180deg). Hover toggles is-flipped class (pointerType mouse only). Motif animations paused by default, running on hover. Light overrides: html.light .fe-front {bg: var(--color-bg-0); border: var(--color-border)}.3.4 Lifecycle Chrome — .lifecycle-root (§01 orbit trace page, src/index.css:199-431)
--bg/--surface/--line/--text/--muted/--lc-line/--lc-ink. Components: .lc-topbar fixed top:20px left/right:6vw (→ 4vw @640px, ellipsis on trace-log), .rail fixed right 1.25vw with ::before line + ::after progress (--rail-pct), .progress-edge fixed top 2px, .section-grid 0.9fr/1.1fr → 1fr @900px, .panel bg:var(--surface), .hero-composition flex with absolute hero-art. Mobile safe-center: section align-items:flex-start + .section-grid margin:auto 0. scroll-cue absolute bottom with amber crawl bar.3.5 Stack Hover Singleton — .stack-pop (§02, src/index.css:554-623)
position:fixed, width:264px, opacity:0 → is-open opacity 1, sp-body border rgba(251,191,36,.25), sp-child stagger .07s/.13s via translateY(9px). Sheen ring gated by @supports (mask-composite) to avoid solid block fallback; sp-sheen-spin 2.8s conic gradient.3.6 Hardening Vault — .hard-bento-grid (§04, src/index.css:673-726)
background-image 40px grid rgba(16,185,129,.05), perimeter-bg::before radial radar-pulse 6s. Motif keyframes: fill-up, shield-flash, countdown 301 dashoffset, move-dot, pulse-glow. Light overrides bump grid to .1 opacity and recolor <pre> to white/emerald-800.4. Typography Scale
hero-title clamp(2.4rem,6vw,5rem); Stage section-title clamp(1.9rem,3.4vw,3rem); Outro clamp(2.2rem,5vw,4rem).JetBrains Mono for all captions/chips (10-11px, tracking .14-.22em), stage-tag uppercase, artifact-tag 11.5px.section-desc 1rem/1.7, max 44ch; hero-sub 1.05rem/1.6.5. Breakpoints & Spacing
max-width queries: 640px (topbar), 900px (rail/hint, section-grid, panel), 1023px (hero-art portal/float), 1280px (hero-art width). No sm: md: Tailwind breakpoints in CSS — homepage sections use Tailwind sm:grid-cols-2 lg:grid-cols-4 in JSX, lifecycle uses pure CSS. Spacing: 6vw outer gutter, 26px chip gaps, 34px panel padding (16px @900px), 14px topbar gap (8px @640px).6. Motion Tokens
cta-sheen 0.55s cubic(.22,1,.36,1), fe-face 0.8s cubic(.4,.08,.16,1), stack-pop .28s cubic(.34,1.45,.64,1).trace-flow 1.4s linear, hero-marquee 24s linear, portal-travel 6.3s linear.lc-pulse 2s, lc-rail-pulse 2s, lc-cue 1.6s, lc-dash-slow 9s. Paused on #lc-hero.is-idle.7. Token Flow Diagram
8. Principles
1.
(--color-x, --color-light-x) and one html.light remap — no per-component theme props.2.
var(--color-panel) / var(--line); dark vs light is a root var change, not a Tailwind dark: branch.3.
.lifecycle-root defines its own --surface/--line/--lc-* so homepage edits never regress the trace page.4.
substrate --grid-line adapts per theme; hard-bento-grid 40px grid is a functional vault signal, not decoration.Modified at 2026-08-25 22:41:45