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