Type and scale
Reading rhythm, spacing steps, and the shapes behind the controls.
Typography
--font-display · --font-sans · --font-mono
Clear ideas, beautifully arranged.
A useful interface makes the next step obvious and gives every detail just enough room to breathe.
Supporting text should remain readable without competing with the main action.
const goodWork = thoughtfulDetails;Spacing
--space-1 … --space-10
--space-1…--space-2…--space-3…--space-4…--space-5…--space-6…--space-7…--space-8…--space-9…--space-10…Corner radius
--radius-1 … --radius-pill
--radius-1--radius-2--radius-3--radius-4--radius-pillElevation
--shadow over a tinted surface
A raised surface
Compare the border, shadow, tint, and text in both color modes.