styleguide
The tokens, scale, and rules this site is built from, rendered live from the same CSS. The written reference lives in the repo as docs/design-system.md.
Background
Text
Border
Brand
Status
headings 1.1–1.3 · body 1.5–1.7 · labels 1.0–1.2. 6xl and 7xl are display extensions above the guide's 48px cap; xl (20px) is not a step.
4px base unit. Every margin, padding, and gap is a multiple of 4.
button — hover, press, and tab to it
view work ↓tags — static, two text tiers
links — underline slides in, 44px tap area
a small linkfocus — 2px brand ring, 3px offset, keyboard only
states: default, hover, active, focus-visible. no disabled elements exist on this site, so no disabled state is designed.
ease-out
enter / appear
ease-glide
scroll-linked entrances
ease-in
exit / leave
ease-in-out
move / resize
ease-spring
magnetic settle
enters ease out, exits ease in, interactions cap at 300ms. the 800/900ms entrances are scroll-proportional and never block input — the documented exception. everything obeys prefers-reduced-motion.