Spacing
Base unit: 4px. Each token is a multiple of that unit.
Use CSS variables; never hardcode pixel values.
Spacing Scale
Visual representation of every spacing token. Bar width corresponds to the actual pixel value.
Usage Principles
All spacing (margin, padding, gap, inset) should use a token. If a value doesn't exist in the scale, use the nearest token or request a new one.
Use --spacing-1–--spacing-3 for tight internal padding (icon buttons, table cells). Use --spacing-4–--spacing-6 for component padding. Use --spacing-8+ for section gaps.
Page-level gaps between sections: --spacing-12 or --spacing-16. Between related groups: --spacing-6 or --spacing-8. Between items in a list: --spacing-2 or --spacing-3.
Border Radius Scale
Two families, and the split matters more than the numbers. Surfaces are tight — cards sit at 8px and never grow, because a card in this system is defined by its hairline border, not by rounding. Controls are pills — anything that reads as a button, badge, or chip uses --radius-full. There is no middle ground; a 16px floating card is not part of this language.
Shadow Scale
Cards carry no shadow at rest — they are separated by their border and the page background. The only brand-shaped shadow is the button's: a warm accent-tinted lift over a forest-tinted contact shadow. Everything else is a neutral utility for overlays and hover affordances.