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.