Design system
Typography
IBM Plex Sans for text and headings, DM Mono for labels and the interface; Poppins and Caveat Brush for the boards.
IBM Plex Sans · Bold 700
Make what connects readable
Light 300: body text, for reading at length without fatigue. Medium 500 for bold and subheadings.
DM Mono · Regular 400
Entre-temps · 8 min read
Spaced capitals for labels, dates, menus and filters.
Two families on the site, served by the site itself (no call to a third-party service), and two more for boards and infographics.
Families
| Family | Role | Weights |
|---|---|---|
| IBM Plex Sans | Body text, subheadings, headings | Light 300 (text), Medium 500 (subheadings, bold), Bold 700 (page titles) |
| DM Mono | Labels, kickers, dates, menus, filters | Regular 400, in capitals, tracking .06em |
| Poppins | Boards and infographics (Who am I?, LinkedIn series) | 300 to 700 |
| Caveat Brush | Handwritten mottos, on the boards | 400 |
Scale
| Token | Value | Use |
|---|---|---|
--t-label | 12px | Labels, kickers, menus (DM Mono) |
--t-meta | 14px | Metadata, captions |
| body | 16px, line height 1.65 | Body text |
--t-intro | clamp(21px, 2.1vw, 28px) | Standfirst, mobile menu entries |
| h3 | 1.12rem | Level 3 subheadings |
| h2 | 1.45rem | Subheadings |
| h1 | clamp(1.9rem, 4.5vw, 2.8rem) | Page title |
--t-titre | clamp(30px, 3vw, 40px) | Section titles |
--t-une | clamp(42px, 6.4vw, 96px) | Large titles (footer) |
Headings use tight line spacing (1.12) and slightly negative tracking (-0.025em).
Do: a reading column of 42rem at most (65 to 75 characters per line); the yellow highlight for a key sentence.
Avoid: bold for whole paragraphs, italics for emphasis (reserved for titles of works and foreign words), more than two weights in the same block.