Layout & grid
Five breakpoints from the kit, a 48px grid the site is drawn on, and the page layouts built between them. The breakpoints are tokens, but a token cannot drive a media query, so this page also shows what to write instead.
Breakpoints
Read from globals.scss and matched to the kit's Breakpoint modes. Resize the window and the marker follows.
Measuring your viewport…
| Token | Width | Range | Kit mode |
|---|---|---|---|
--graphite-breakpoint-sm | 320px | 320 to 671 | SM (320px) |
--graphite-breakpoint-md | 672px | 672 to 1055 | MD (672px) |
--graphite-breakpoint-lg | 1056px | 1056 to 1311 | LG (1056px) |
--graphite-breakpoint-xl | 1312px | 1312 to 1583 | XL (1312px) |
--graphite-breakpoint-max | 1584px | 1584 and up | Max–Max plus (1584–1784px) |
lg and xl are two tokens, not one. The kit keeps them in a separate Breakpoint LG–XL collection that the main one aliases into, and collapsing them would flatten that.
Tokens and media queries
The breakpoint tokens give the numbers one home. They cannot enforce them.
Never matches
@media (max-width: var(--graphite-breakpoint-md)) {
/* ... */
}What to write
@media (max-width: 671px) {
/* ... */
}What changes where
Read from the stylesheets of the two page layouts the site builds on. Widths in px; padding is top / sides / bottom.
Docs shell
| From | Columns | Content padding |
|---|---|---|
| Base | one column | 20 / calc(var(--graphite-space-06) / - / 4px) / 40 |
| md (672px) | one column | 28 / calc(var(--graphite-space-06) / - / 4px) / 56 |
| lg (1056px) | 256 · fluid | 40 / 48 / 80 |
| xl (1312px) | 256 · fluid · 240 | 40 / 48 / 80 |
The shell is capped at 96rem (1536px) and centred. The sidebar arrives at lg; below it the docs links move into the header menu. The on-this-page rail is the third column, and only pages that have one get it. Prose on these pages is held to 44rem.
Create page
| From | Columns | Page padding |
|---|---|---|
| Base | stacked, controls as a bar | 20 / 16 / 64 |
| md (672px) | stacked, controls as a bar | 28 / 24 / 64 |
| xl (1312px) | 392 · fluid (controls beside preview) | 36 / 48 / 80 |
The lede is held to 47.5rem. Inside the preview, the Desktop / Tablet / Mobile toolbar sets a frame width (tablet 520px, mobile 344px) and the examples lay out by the frame’s own width, not the window’s. Type also changes at one boundary: below 672px the text scale switches to the kit’s Mobile mode (see Typography).
The 48px grid
The backdrop behind the home page and Create is one 3rem cell drawn with 1px rules, the same length as --graphite-space-09.
| Where | Rule | Cell |
|---|---|---|
| Home page hero | .hero__grid-lines | 3rem 3rem |
| Home page bands | .page-bands__grid | 3rem 3rem |
| Create page | .grid | 3rem 3rem |
The home page grid drifts with scroll and pointer, and the bands version fades at both ends. The Create page grid is static on purpose, so nothing moves under the controls while someone is dragging a slider. The grid is decorative: no component snaps to it, and content widths above come from the page stylesheets, not from a column count.
The kit’s frames
The kit draws each site page at three widths. The page stylesheets cite the frames they were built from.
| Frame | Width | Create page node |
|---|---|---|
| X-Large | 1312px | 11835:286204 |
| Medium | 672px | 11853:2067 |
| Small | 320px | 11856:2238 |
None of the page stylesheets cites a Large frame. Between md and xl the layouts are the code’s own reading of the two frames either side, which is why the docs sidebar arriving at lg has no frame to point to.
Usage rules
Quoted from the Breakpoint contract (1.3.0).
Rules
- lg and xl are two tokens, not one lg-xl. The kit keeps them in a separate collection the main one aliases into per mode; collapsing them would flatten a distinction the kit makes.
- A max-width bound sits one below the next breakpoint up: 671px is md minus one, or 671.98px, md minus 0.02, the sub-pixel-safe form. token-drift knows this convention and accepts all three forms, in px, rem or em (rem and em at 16px).
Never
- These cannot drive a media query. A custom property does not resolve in an @media condition; a rule written as
@media (max-width: var(--graphite-breakpoint-md))silently never matches. - Do not add the Modal sizing variables from the same collection. They are modal geometry keyed by breakpoint, not breakpoints.
- Do not silence a media-query failure by moving the width to the nearest kit stop. If the number is set by content rather than by the scale, mark it
token-drift-allow: <reason>; if it is not, fix the number.
Next steps
The scale the gutters are built from, and the page that shows the layouts at every width.
- Spacing
The rem scale every gutter and padding above resolves through.
- Typography
The text scale, and its Mobile mode below md.
- Create
The preview’s device toolbar, on the 48px grid.