A 4px base unit at spacious density, fifteen spacing steps, and exactly two radii.
Spacing and shape
Everything steps off a 4px base unit at spacious density. Sections breathe at 68px or more, cards are padded at 36 to 48px, and elements inside them sit 20px apart.
Spacing scale
Every declared step, from element gap to full-section breathing room
Step
Value
12
12px
16
16px
20
20px
24
24px
28
28px
32
32px
36
36px
40
40px
48
48px
64
64px
80
80px
120
120px
140
140px
160
160px
164
164px
Border radius
Element
Value
cards
16px
small
6px
buttons
6px
Layout
Base unit: 4px
Density: spacious
Page max-width: 1440px
Section gap: 68px
Card padding: 36-48px
Element gap: 20px
Spacing and shape at a glance
4px
Base unit for every spacing step
1440px
Page max-width for contained content
68px
Section gap between full-width bands
16px
Card radius — 6px for buttons and small elements
Next
Put the next screen on the abyss.
Set the canvas, stack the surfaces, track the labels, and spend the color once. The guidelines are the whole system in two lists.
