DESIGN.md preview
Iterate on root DESIGN.md, run design:prepare, and refresh. The top toggle changes this page; preview Light/Dark only affects the frame below.
Usage
Run from the repo root before UI work. Tokens sync into packages/ui/src/styles/design-md-shadcn.css.
Preview
Frame theme is independent of site theme
Design System — AGENCY FTW.
Enterprise Miami Vice identity for Agency FTW with premium neon accents, disciplined structure, dual light/dark mode support, and Bet Factory / Lab Mode components.
Colors
Semantic palette from DESIGN.md front matter. Shadcn tokens sync via pnpm run design:sync-shadcn.
Brand & neon
primary
#ff5f9e
neon-pink
#ff5f9e
neon-cyan
#3dd6ff
neon-purple
#7b61ff
Light surfaces
light-canvas
#f7f9ff
light-surface
#ffffff
light-ink
#161f38
light-muted
#5e6b8a
border-light
#d9e2fb
Dark surfaces
dark-canvas
#070b18
dark-surface
#11172b
dark-ink
#f4f7ff
dark-muted
#97a2bf
border-dark
#2a3658
Signals
capacity
#34d399
capacity-soft
#d1fae5
drag
#fb5f7a
drag-soft
#ffe7ed
destructive
#b4234a
Typography
display-xl
Agency FTW — proof before scale. Same team, more capacity, less chaos.
heading-lg
Agency FTW — proof before scale. Same team, more capacity, less chaos.
body-md
Agency FTW — proof before scale. Same team, more capacity, less chaos.
label-caps
Agency FTW — proof before scale. Same team, more capacity, less chaos.
Cards
Current state
AI tools, prompt sharing, scattered pilots
Bottlenecks
Approvals, handoffs, rework, reporting, QA
FTW outcome
One workflow redesigned, gated, measured, ready to scale
Responsive
Grid scales 1 → 2 → 4 columns. Spacing tokens from DESIGN.md.
spacing.xs
6px
spacing.sm
12px
spacing.md
20px
spacing.lg
34px
spacing.xl
60px
Shadcn new-york · semantic tokens · ui.shadcn.com/create compatible (CLI-managed components, not create preset output)