Design system playground for tokens, components, and interaction patterns.
A preview-safe demo page for the design language defined in design.md. It keeps the same intent as the original web implementation, but is mounted in apps/site so it can be opened directly from feature preview.
12Sections
10Tokens
6Patterns
9States
Navigation
Preview tabs
Simple state switcher for the design demo.
Color tokens
Palette and semantics
Accent#14B8A6
Primary action / focus ring
Text#E2E8F0
High-contrast copy
Surface#0F172A
Card background
Border#334155
Cards / field outlines
Success#10B981
Positive confirmation
Warning#F59E0B
Gentle caution
Danger#F43F5E
Critical state
Info#38BDF8
Secondary highlight
Typography
Hierarchy and rhythm
Display
Design systems turn decisions into reusable interfaces.
36 / 44 · 700
Heading
Section headings stay compact, clear, and scannable.
24 / 32 · 650
Body
Body copy prioritizes reading comfort and contrast.
16 / 26 · 400
Caption
Caption text supports metadata, helper text, and states.