Card
Padded surface with radius + tone. Replaces 50+ hand-rolled "shape" divs.
Trac Optics · Design System v3
Design System
Live reference for the primitives, archetypes, and section building
blocks that compose the Trac Optics marketing site. Edit components
in src/components/primitives/ or src/components/archetypes/
and reload — every consumer updates automatically.
Primitives
9 building blocks
Container · Section · Stack · Cluster · Grid · Heading · Eyebrow · Card · MediaSlot.
Stack
Vertical rhythm. Gap = sm | md | lg | xl. The most-used primitive.
Cluster
Horizontal flex with wrap. For chip rows, button groups, inline meta.
Archetypes
7 section patterns
Hero · CardGrid · DarkFeature · AsymmetricSplit · Accordion · Carousel · ModularContent.
Archetype · Hero
Get your head in the game.
The training goggle that builds Head Trajectory into every rep, until the puck has nowhere to go.
Status
v3 consolidation — Phase 2
Phase 1 ✅ Astro 5 → 6.3.8 upgrade landed in feat/v3-consolidation branch.
Phase 2 🟡 Design system lifted from v0-fresh/site (9 primitives + 7 archetypes + 16 sections + ProductStoryShell + motion-tokens.css).
Phase 3 ⏳ scroll-state engine + motion-lab skeleton — next.
Phase 4 ⏳ 3D scene from render-lane Claude (waiting on RENDER_DELIVERY_*.ts in agent-bridge outbox).
Phase 5 ⏳ Square → Stripe migration (waiting on Keith's Stripe keys).
Phase 6 ⏳ Video carousel per locked spec.
Phase 7 ⏳ tracoptics.vision domain + launch polish.