Apprendre
Chaque guide se termine dans l'outil avec l'exemple déjà chargé — lisez la théorie, puis manipulez vous-même les curseurs.
Échelle typographique : le guide pratique
Ce qu'est une échelle typographique, comment choisir un ratio, et comment une seule échelle peut piloter tout votre système de design. Guides, exemples concrets et un outil interactif.
16 guidesSystèmes d'espacement et la grille 8pt : le guide pratique
Comment fonctionnent les systèmes d'espacement — la grille 8pt, les demi-paliers de 4pt, les grilles de ligne de base et les échelles d'espacement issues d'une seule formule. Des guides et un outil interactif.
14 guidesOKLCH et la couleur CSS moderne : le guide pratique
OKLCH expliqué aux designers et aux développeurs — luminosité, chroma, teinte, gamuts, et pourquoi les outils de couleur modernes génèrent leurs palettes dedans. Des guides et un outil en direct.
15 guidesÉchelles de couleur et palettes d'UI : le guide pratique
Comment fonctionnent les échelles de couleur — les paliers 50–900, les rampes issues d'une seule couleur de marque, les rôles sémantiques et les palettes qui passent le contraste par construction. Guides et outil interactif.
17 guidesContraste et couleur accessible : le guide pratique
Ratios de contraste WCAG, APCA, daltonisme et palettes accessibles — ce que les règles exigent, pourquoi elles existent, et comment les respecter par construction.
13 guidesDesign tokens : le guide pratique
Ce que sont les design tokens, le format DTCG, les couches de nommage, la gestion des thèmes et le chemin d'export depuis une source unique vers CSS, Tailwind et Figma. Des guides et un outil interactif.
12 guidesGrilles de mise en page et points de rupture : le guide pratique
Comment fonctionnent les grilles de mise en page — colonnes 4/8/12, gouttières, marges, points de rupture et largeurs de conteneur, construites avec le CSS moderne plutôt qu'avec des classes de framework.
9 guidesTypographie et espacement fluides : le guide pratique
La typographie fluide avec clamp() — des tailles qui évoluent en douceur avec la fenêtre d'affichage au lieu de sauter aux points de rupture. Les calculs, les règles d'accessibilité, les guides.
11 guidesLe mode sombre en design : le guide pratique
Comment le mode sombre fonctionne vraiment — des palettes dérivées plutôt qu'inversées, perte de chroma, élévation, pièges de contraste et tokens de thème. Des guides et un outil interactif.
11 guidesCouleurs de marque : d'une seule couleur à un système opérationnel
Comment les couleurs de marque deviennent des systèmes opérationnels — choisir une couleur, survivre à l'accessibilité, traduire de l'impression à l'écran, gérer refontes et audits. Des guides et un outil interactif.
12 guidesTypographie web : polices, association et lisibilité
Le côté artisanal de la typographie web — associer les polices, serif ou sans serif, longueur de ligne, lisibilité, et ce qu'une police signale. Des guides et un outil interactif.
13 guidesL'IA et les systèmes de design : le guide pratique
Les outils d'IA construisent interfaces et images rapidement, mais ne tiennent pas un système. Comment les design tokens et une palette nommée gardent le résultat de l'IA fidèle à la marque : des guides et un outil en ligne.
9 guides