The spacing scale, the grid, the breakpoints and the sizes of controls and the shell.
Spacing scale
The scale and where each step is used.
Every step a multiple of 4 px: --space-1 … --space-24.
Token
Value
Size
Where
--space-1
4px
An icon and its word in a badge; a label and its hint.
--space-2
8px
Inside a chip; a field’s label and the field; buttons side by side.
--space-3
12px
Rows of a list; the photo and the text of a row.
--space-4
16px
Fields of a form; a card’s padding on a phone.
--space-5
20px
A card’s padding.
--space-6
24px
Between cards; the grid’s gutter.
--space-8
32px
The page’s margin on a desktop; a dialog’s padding.
--space-10
40px
Between the sections of a screen.
--space-12
48px
Between the parts of a long page.
--space-16
64px
Above and below a band of the home page.
--space-20
80px
Between the home page’s bands on a wide screen.
--space-24
96px
The opening of the home page.
Grid and breakpoints
Columns, gutters, the widths the layout changes at.
123456789101112
Token
Value
What it is
--grid-columns
12
Columns of the grid, on every width; a phone groups them by 6 or 12.
--grid-gutter
24px
The gap between columns and between cards.
--grid-gutter-sm
16px
The gap on a phone.
--grid-margin
32px
The page’s margin left and right.
--grid-margin-sm
16px
The margin on a phone.
--size-page
1280px
The widest the content grows; past it the margins grow.
Breakpoint
From
Typically
What changes
—
0
Phone
One column; a listing grid of 2; filters in a sheet; the main action of a listing fixed at the bottom.
--breakpoint-sm
640px
Large phone, small tablet
A listing grid of 3; forms keep their width.
--breakpoint-md
900px
Tablet, small laptop
Photos and the buy panel side by side; filters in a column beside the results; the admin sidebar shows.
--breakpoint-lg
1200px
Desktop
A listing grid of 4; the featured selection in one row.
--breakpoint-xl
1440px
Wide desktop
Nothing new: the content stops at the page width and the margins grow.
Sizes
Controls, the shell, the form width.
Token
Size
Value
Where
--size-control-sm
Small control, 32
32px
A chip, a table row’s action, the pager (--control-height-sm).
--size-control
Control, 40
40px
Every input, Select and button by default (--control-height-md); 12 px inside a field, 16 px inside a button. On the phone fields and buttons stand at 44.
--size-touch
Touch target
44px
The smallest thing a finger is given; a small control gets the space around it.
--size-control-lg
Large control, 44
44px
The back office’s rare emphasised action; the phone’s buttons. The web has none.
--padding-form-card
Form card’s inside
24px
24 px, 16 px under 640 px; a field grows to 420 px at most, 16 px from the next, its label 6 px above it.
--size-topline
Web: top line
32px
The dark line over the editorial header.
--size-masthead
Web: masthead
72px
Search, wordmark, account; from 768 px up.
--size-admin-header
Admin: top bar
64px
The address, the theme, Sign out.
--size-header
Phone: top bar
56px
The app’s bar (52); the web’s drawer head (56).
--size-admin-sidebar
Admin: sidebar
256px
The back office’s menu. The web has no sidebar.
--size-form
Form
384px
Sign-in, a single-column form.
--size-drawer
Drawer
400px
Filters on a tablet, an order’s detail in the admin.