Spacing and layout
The spacing scale, the grid, the breakpoints and the sizes of controls and the shell.
| 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. |
| 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. |
| Token | Size | Value | Where |
|---|
--size-control-sm | Small control | 32px | A filter, a button in a table row. |
--size-control | Control | 40px | Buttons and fields. |
--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 | 48px | Buy now, Pay: the main action of a listing or checkout. |
--size-header | Header | 56px | The top bar. |
--size-sidebar | Sidebar | 240px | The admin menu, a seller’s dashboard menu. |
--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. |
--size-dialog | Dialog | 480px | A confirmation, an offer. |
--size-prose | Prose | 680px | The longest line of running text. |
--size-page | Page | 1280px | The widest the content grows. |