Warm amber on charcoal, mono-forward, tight radii: the visual language of the site itself. Every token below is read live from the running stylesheet, so this page can't drift. Snippets never touch these; they ship plain Tailwind.
Color
Surfaces
Lines
Text
Accent
Typography
Type ramp
The Mono-Heading Rule
Section headings stay 1rem mono and are never scaled up. Their hierarchy is carried by the bottom rule and the accent tick, not by size. The<h2> reading “Typography” above is one.
Radii
Motion
hover me
Not formalized yet
There is no motion token. The de-facto easing is0.2s ease, inlined across the chrome. Tellingly, .s-btntransitions on var(--ease, 0.2s), referencing an--ease token that was reached for butnever defined. Documented here rather than papered over.
Buttons
Primary carries the amber; ghost is a hairline that fills to surfaceon hover. Both use radius-md.
Controls
The custom “Terminal” prop controls that interactive playgrounds use instead of native inputs. Zero deps, self-styled. Live: drag, flip, and pick.
Amount48%
Enabledon
Densitymid
Easingease
Linear
Ease
Spring
Label7 ch
Accent#F5B544
Stops3 stops
API render-kinds
How the API table depicts a prop's type & default: the shape of the value, echoing the controls, not just its text.