À propos de Scale Composer

Scale Composer dérive tout un système de design — échelle typographique, rampes de couleur, espacement et grille — à partir d'une taille de base, d'un ratio et d'un nombre de notes. Changez le ratio et tout bouge ensemble, car tout est calculé à partir des mêmes trois nombres.

Pourquoi une seule échelle ?

La plupart des systèmes de design sont assemblés à partir d'outils séparés : un calculateur d'échelle typographique ici, un générateur de palette là, l'espacement au jugé. Chaque pièce peut être correcte seule et pourtant ne pas appartenir aux autres. Le principe de cet outil est que les relations sont le système — donc les nombres qui espacent vos titres devraient être ceux qui façonnent vos rampes de couleur et votre grille.

Comment ça marche

L'échelle est musicale : une valeur de base multipliée par un ratio constant, subdivisée en notes comme une octave se divise en tons. La typographie lit ses tailles directement sur l'échelle. Les rampes de couleur s'en servent pour façonner leurs courbes de luminosité. L'espacement et la grille de mise en page tirent leurs pas de la même suite. Les rôles sémantiques de couleur — texte, bordures, boutons, états — sont dérivés automatiquement, avec des planchers de contraste WCAG vérifiés au fil du travail, et le mode sombre généré comme sa propre dérivation plutôt qu'une inversion.

Tout s'exporte sans dépendance : propriétés personnalisées CSS, Tailwind (v4 et v3), thèmes shadcn/ui et Figma Variables. Les sessions se partagent par lien — l'état complet est encodé dans l'URL, sans compte.

Ce site tourne sur sa propre sortie

Les pages que vous lisez sont stylées par l'export de l'outil lui-même : base 16, ratio 1,333, deux notes. Les verts, les neutres, les rayons, les ombres et les tailles de texte viennent tous d'un seul fichier de tokens généré. Si le design tient debout, c'est l'argument qui fonctionne.

Qui le fait

Scale Composer est construit en Suède, dans le cadre d'une chaîne d'outils plus large pour bâtir des marques et des systèmes de design — l'outil est le visage public de la machinerie utilisée dans le vrai travail client. Les guides d'Apprendre sont écrits pour être utiles en eux-mêmes ; l'outil est là quand vous voulez essayer les idées avec vos propres nombres.

Ouvrir Scale Composer — gratuit, dans le navigateur, sans inscription.