Design System
Dix-huit slides sur la couleur, la typographie, le layout, le motion, l'accessibilité et la voix, rendus depuis le DESIGN.md avec lequel le site est construit.
Version localisée du projet, préservant stack, liens, code et les principaux détails techniques.
Every interface decision on this site — the type scale, the spacing rhythm, the nav anatomy, the shimmer above a translated post — lives in one in-app deck. Writing the system as a presentation forced each choice to earn its slide.
The deck reads from DESIGN.md, the contract the site is built against. Updating the contract updates the deck, so the slides and the stylesheet cannot drift apart quietly.
What's in the deck
Eighteen slides:
- Foundations — "Purpose before decoration", and the reading space the site is for
- Color — neutral by default, semantic color where it carries meaning, editorial accents, and a dedicated accessibility slide: "Readable. Reachable. Recoverable."
- Typography — one familiar voice. Geist Sans carries every type role, Geist Mono the code, shown at actual size rather than as a specimen chart
- Layout — a 720px reading measure, padding included, inside a 1040px content area, with spacing used to describe relationships
- Components and motion — control states that explain themselves; motion that responds before it decorates
- Application — nav wayfinding, honest evidence and comparison, SEO and GEO, voice, one thought across six locales, and a maintenance slide
Why a deck and not a doc
The deck lives in the product: one keystroke away at /_dev/design-system?mode=presentation, screenshottable at 16:9, rendered in both light and dark. Because it renders DESIGN.md instead of restating it, there is one place to change a rule and one place to read it.
Stack
Next.js 16 · React 19 · Tailwind CSS 4 · container queries · @radix-ui/react-icons · Geist Sans and Geist Mono via next/font/google