Grid, spacing & radius
A consistent spacing system, grid, and border-radius scale make layouts predictable and faster to build. All spacing values use a 4px base unit.
Spacing system guides
These spacing steps are useful for annotating designs and communicating intent to developers. Every value is a multiple of 4px.
NameSize (16px base)Pixels
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
328rem128px
4010rem160px
4812rem192px
5614rem224px
6416rem256px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px
128px
160px
192px
224px
256px
Containers
Pre-defined container widths keep layouts consistent across breakpoints and avoid ad-hoc max-width values.
NameSize (16px base)Pixels
sm40rem640px
md48rem768px
lg64rem1,024px
xl80rem1,280px
640px
768px
1,024px
1,280px
Grid layouts
Responsive column grids for the three primary viewports. Desktop and tablet use a 32px column gap; mobile uses 16px.
Desktop1,280px • 12 columns • 32px gap • content 1,216px
Tablet768px • 6 columns • 32px gap • content 704px
Mobile375px • 4 columns • 16px gap • content 343px
Container grid layouts
Common column presets for content areas. All use auto column sizing with a 24px gap.
12 columns
6 columns
5 columns
3 columns
2 columns
Border radius
A unified radius scale ensures rounded corners are consistent across every component. Values range from radius-none (sharp) to radius-full (pill / circle).
NameSize (16px base)PixelsRadius
radius-none0rem0px
radius-xxs0.125rem2px
radius-xs0.25rem4px
radius-sm0.375rem6px
radius-md0.5rem8px
radius-lg0.625rem10px
radius-xl0.75rem12px
radius-2xl1rem16px
radius-3xl1.25rem20px
radius-4xl1.5rem24px
radius-full∞9999px