Design system
Mise en page
Largeurs, marges, grilles, gabarits et points de rupture du site.
--large · 1400px
--mesure · 42rem
Une page large pour regarder, une colonne étroite pour lire.
Largeurs et marges
| Jeton | Valeur | Rôle |
|---|---|---|
--large | 1400px | Largeur maximale du contenu |
--mesure | 42rem | Colonne de lecture |
--marge | clamp(16px, 4vw, 56px) | Marge latérale, de 16 px sur téléphone à 56 px |
--r-m | 8px | Rayon des surfaces (fiches, notes) |
--r-pill | 999px | Boutons en pilule |
Gabarits
| Gabarit | Composition |
|---|---|
| Article | Une colonne de 42rem ; images à la largeur de la colonne, les suivantes élargies jusqu’à 72rem |
| Entropie | Deux colonnes : image fixe (65 %) et texte (35 %), surlignage jaune |
| Cas du portfolio | Une colonne ; fiche en deux colonnes équilibrées (rôle et client, période et contexte, livrables dans la plus courte) |
| Rubrique | Titre centré, grille de cartes en 3, 2 puis 1 colonne |
| Accueil | Héros pleine largeur, derniers textes en cartes, duo Novum / Entre-aperçu, extrait du Manifeste, bandeau citation |
| Brandbook | Navigation gauche fixe, contenu à droite |
Points de rupture
| Largeur | Ce qui change |
|---|---|
| 1024 px | La carte des idées laisse place à un extrait fixe |
| 900 px | Les grilles passent de 3 à 2 colonnes |
| 640 px | Menu en panneau, une colonne partout |
Rythme vertical
Les sections se séparent par un filet (1px, --filet) et 3 à 5rem d’espace. Les paragraphes ont 1,1rem de marge basse ; les intertitres h2, 2,6rem au-dessus.
À éviter : du texte courant sur toute la largeur, des cartes de hauteurs inégales dans une même rangée, des ombres décoratives.