One scale. A whole design system.
Choisissez une base, un ratio et le nombre de notes pour le diviser. Scale Composer dérive le reste — tailles de police, rampes de couleur, espacement et grille — à partir de ces mêmes trois nombres, pour que tout aille ensemble.
Ouvrir le composeur — gratuit, sans inscription Voir comment ça marche
Un ratio. Chaque panneau répond en même temps — c'est toute l'idée.
Trois outils, trois logiques, un système qui ne tient pas ensemble
Une échelle typographique d'un calculateur, une palette d'un autre, l'espacement au feeling. Chaque choix peut être raisonnable seul et l'ensemble dérive quand même — parce que rien ne relie les parties entre elles. Quand les tailles, les rampes et les espaces viennent d'une seule échelle, la cohérence cesse d'être une affaire de discipline et devient une propriété du système.
Trois vues, une seule échelle en dessous
-
Couleur
Partez d'une couleur de marque et obtenez des rampes OKLCH complètes — marque, neutres teintés et les quatre couleurs fonctionnelles — avec des rôles sémantiques et des planchers WCAG dérivés automatiquement.
Essayer une rampe en direct ↗ -
Typographie
Chaque taille de police vient de l'échelle, les interlignes reposent sur la grille de ligne de base, et l'espacement entre éléments utilise les mêmes pas — un seul rythme vertical de bout en bout.
Essayer une échelle en direct ↗ -
Grille
Points de rupture, colonnes, gouttières et marges parcourent la même échelle. Poussez une gouttière avec les flèches et elle atterrit sur une valeur d'échelle, jamais sur un pixel arbitraire.
Essayer une grille en direct ↗
Pour approfondir : échelles de couleur · échelle typographique · grilles de mise en page
Vous ne choisissez pas 17 couleurs. Vous en choisissez une — le reste est dérivé.
Texte sur fond, texte atténué, bordures, états de bouton, anneaux de focus, les quatre couleurs fonctionnelles : autant de rôles nommés, dérivés de votre couleur de départ avec des planchers de contraste WCAG imposés et l'APCA affiché à côté. Le mode sombre est généré comme sa propre dérivation — sa propre courbe de luminosité, pas une inversion. Comment fonctionne le calcul du contraste · pourquoi le mode sombre est une dérivation.
Une session, tous les formats que lit votre stack
Les mêmes tokens sortent de l'outil sous chacune de ces formes — générées, complètes et cohérentes entre elles :
CSS custom propertiesTailwind v4 @themeTailwind v3 configshadcn/ui themeFigma VariablesGrid CSS
Plus sur la couche de tokens : guide des design tokens
La théorie derrière l'outil, en 152 guides
échelle typographique
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ème d'espacement
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
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échelle de couleur
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 guidesratio de contraste wcag
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
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 guidesgrille 12 colonnes
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 fluide
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 guidesconception mode sombre
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
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 guidesassociation de polices
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 guidessystème de design ia
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 guidesQuestions courantes
Est-ce gratuit ?
Oui. L'outil est gratuit et ne demande aucun compte. Votre travail vit dans votre navigateur, et une session se partage en copiant un lien — l'état complet voyage dans l'URL.
Qu'est-ce qu'un design token ?
Une décision de design nommée — comme color.brand.500 ou spacing.md — stockée comme donnée pour que chaque outil et plateforme lise la même valeur. Notre guide des design tokens approfondit l'idée.
Quels formats puis-je exporter ?
Propriétés personnalisées CSS, Tailwind v4 @theme et configuration Tailwind v3, un thème shadcn/ui, Figma Variables, et du CSS de grille avec media queries — le tout généré depuis la même session.
En quoi est-ce différent d'un générateur de palette ?
Un générateur de palette vous donne des couleurs ; ceci dérive un système. Une seule échelle façonne ensemble les rampes de couleur, les tailles de police, l'espacement et la grille, et les rôles sémantiques avec planchers de contraste WCAG sont dérivés de vos choix au lieu d'être choisis à la main.
Est-ce que ça marche pour le mode sombre ?
Oui — le mode sombre est généré comme sa propre dérivation avec sa propre courbe de luminosité, pas comme une inversion du thème clair. Le guide du mode sombre explique pourquoi cette distinction compte.
Puis-je l'utiliser pour une marque existante ?
Oui. Amorcez la palette avec votre couleur de marque exacte et les rampes, neutres et rôles sémantiques sont dérivés autour d'elle — l'échelle s'adapte à votre couleur, pas l'inverse.