// design
Living styleguide
The production home of the “Quiet dev-native” system — tokens, components, type, and voice, read straight from the source that ships.
01 · tokens
Color tokens
Every swatch below is a live var() read from globals.css — not a copy-pasted hex.
--background
--foreground
--card
--card-foreground
--popover
--popover-foreground
--primary
--primary-foreground
--secondary
--secondary-foreground
--muted
--muted-foreground
--accent
--accent-foreground
--destructive
--border
--input
--ring
--surface-2
--primary-soft
--positive
--positive-soft
--code-bg
--code-text
--link
02 · radius
Radius scale
One --radius (0.45rem) drives every corner in the system via calc().
rounded-sm
0.5×
rounded-md
0.8×
rounded-lg
1× (base --radius)
rounded-xl
1.5×
03 · shadow
Elevation
Cards combine shadow-card with edge-highlight's 1px inner top edge; overlays float on shadow-overlay.
shadow-card
default card elevation (paired with edge-highlight)
popovers, hover-cards, dialogs