Design system
Layout
Widths, margins, grids, templates and breakpoints of the site.
--large · 1400px
--mesure · 42rem
A wide page for looking, a narrow column for reading.
Widths and margins
| Token | Value | Role |
|---|---|---|
--large | 1400px | Maximum content width |
--mesure | 42rem | Reading column |
--marge | clamp(16px, 4vw, 56px) | Side margin, from 16 px on phones to 56 px |
--r-m | 8px | Surface radius (fact sheets, notes) |
--r-pill | 999px | Pill buttons |
Templates
| Template | Composition |
|---|---|
| Article | One 42rem column; images at column width, the following ones widened up to 72rem |
| Entropy | Two columns: fixed image (65%) and text (35%), yellow highlight |
| Portfolio case | One column; fact sheet in two balanced columns (role and client, period and context, deliverables in the shorter one) |
| Section | Centred title, grid of cards in 3, 2 then 1 column |
| Home | Full-width hero, latest texts as cards, Novum / Entre-aperçu pair, excerpt from the Manifesto, quote banner |
| Brandbook | Fixed left navigation, content on the right |
Breakpoints
| Width | What changes |
|---|---|
| 1024 px | The map of ideas gives way to a fixed excerpt |
| 900 px | Grids go from 3 to 2 columns |
| 640 px | Menu in a panel, one column everywhere |
Vertical rhythm
Sections are separated by a rule (1px, --filet) and 3 to 5rem of space. Paragraphs have a 1.1rem bottom margin; h2 subheadings, 2.6rem above.
Avoid: running text across the full width, cards of unequal heights in the same row, decorative shadows.