--duration-micro
100msbutton, focus, and tag feedback
Foundations · Spacing
One scale. No orphan values.
Spacing follows a named rem scale shared by CSS tokens, component aliases, and Tailwind utilities. Add new distances only when they earn a named token.
Spacing scale
--space-14pxtight inline gap
--space-1-56pxcompact control gap
--space-28pxicon ↔ label inside a button
--space-312pxbadge padding · meta row gap
--space-416pxsmall card padding · stack gap
--space-624pxcard padding · sibling gap
--space-728pxcompact media and panel rhythm
--space-832pxsection internal padding
--space-936pxlarge avatar and dense hero rhythm
--space-1248pxbetween content groups
--space-1456pxnavbar and compact hero height
--space-1664pxsection ↔ section on desktop
Motion
Four durations, two easings. Use named tokens instead of raw ms in components.
--duration-short
180msindicators, toggles, and image color
--duration-medium
240mssheets and larger surfaces
--duration-long
360msdeliberate entry motion