Foundations4 of 7
Space and layout
Spacing in steps of eight, one family of grids for screens, slides, phones and print, three breakpoints, and a flat page.
Space
--ds-space-1 · 4
--ds-space-2 · 8
--ds-space-3 · 12
--ds-space-4 · 16
--ds-space-5 · 24
--ds-space-6 · 32
--ds-space-7 · 48
--ds-space-8 · 64
--ds-space-9 · 96
Grids
One family of grids, related by simple ratios, lets a figure move between a book, a slide and a page without being redrawn. This page is on the 12-column grid: the rail takes 3 columns, the content 9.
| Use | Columns | Margins and gutter | Notes |
|---|---|---|---|
| Screen | 12 | 32 px margins; 24 px gutter | A reading column of 688 px; content to 1280 px; full to 1440 px. |
| Phone | 4 | 20 px margins; 16 px gutter | One column of content. |
| Slide, 1280 × 720 | 12 | 72 px at the sides; 24 px gutter | Headline, body and footer zones. |
| Print, letter | 6 | 72 px, swapping in books; 24 px gutter | The books' grid: one book column is two screen columns. |
Breakpoints
| Width | What changes |
|---|---|
| Under 640 | One column; the top bar's sections drop to a row of their own; every grid span takes the full width. |
| 960 and up | The left list of pages appears. |
| 1280 and up | "On this page" appears on the right. |
Elevation and backgrounds
A flat page: paper, a sunk ground for wells and code, a hover gray, and one shadow for things that float over the page. No blur and no glass: they draw the eye to the frame. Recommended
Not in v2 yet: a dark stage for 3D scenes, maps and Exhibit displays, whatever the theme; a scrim, a dark tint behind captions laid over images and video, instead of blur; and a rule for full-bleed media. Open
Paper#ffffff · #181b1a
Sunk#f2f4f3 · #232826
Hover#f2f4f3 · #232826