Playground
Token System & Components
Everything on this site is built on a three-tier CSS custom property system. Open DevTools and inspect any element — you'll see the token architecture directly in the inspector. Toggle dark mode to watch the semantic tokens update in real time.
Semantic Color Tokens
Light mode values shown. Semantic tokens resolve to different primitives in dark mode.
--color-bg-baseBackground Base#ffffff--color-bg-subtleBackground Subtle#f9f9f9--color-bg-mutedBackground Muted#f0f0f0--color-text-primaryText Primary#1a1a1a--color-text-secondaryText Secondary#525252--color-text-tertiaryText Tertiary#a8a8a8--color-border-defaultBorder Default#e4e4e4--color-accent-defaultAccent Default#2563eb--color-accent-greenAccent Green#16a34a--color-accent-amberAccent Amber#d97706Type Scale
Major Third ratio (1.25×) from a 16px base. Nine steps, all defined as CSS custom properties.
Caption text, token labels, metadata
Secondary body copy, nav links, tags
Primary body copy
Lead paragraph, intro text
Section tagline, subheading
Card title, section heading
Page subheading
Page heading
Hero heading
Display / name
Spacing Scale
Base-4 system (4px increments). Named semantic aliases — --space-section, --space-gutter — are what components actually use.
Components
Each component defines its own component-level tokens that reference semantic tokens. No component ever reaches for a primitive value directly.
Button — variant
Button — size
Button — state
Tag — color
Tag — size
Theme Toggle