Documentation de Scale Composer

Scale Composer dérive un système de design complet — échelle typographique, rampes de couleur, espacement, grille de mise en page et effets système — à partir de trois nombres : une base, un ratio et un nombre de notes. Changez l’un des trois et tout ce qui en découle se recalcule ensemble. Cette page explique la théorie et le raisonnement ; le reste de la documentation parcourt l’outil vue par vue.

Un peu de théorie des échelles

Une échelle modulaire est un ensemble fixe de valeurs où chaque valeur est la précédente multipliée par un ratio constant :

size(i) = base × ratio^i

Avec une base de 16 et un ratio de 1,5, l’échelle donne 16 · 24 · 36 · 54 … L’idée est ancienne — elle vient de la typographie d’imprimerie et, avant cela, de la musique. Les ratios eux-mêmes sont empruntés aux intervalles musicaux : 1,5 est une quinte juste (le rapport de fréquences 3:2), 1,333 une quarte juste (4:3), 1,618 le nombre d’or. Ce n’est pas de la numérologie — cela reflète le fonctionnement de la perception. Nous jugeons les tailles (et les intervalles sonores) de manière proportionnelle : le saut de 16 à 24 ressemble au saut de 24 à 36, car les deux sont ×1,5. Une échelle construite sur la multiplication produit des pas qui semblent réguliers, ce que des valeurs de pixels choisies à la main réussissent rarement.

La formule pure a un défaut pratique : les écarts croissent trop vite précisément là où les interfaces ont besoin de précision. Avec une base de 16 et un ratio de 1,333, il n’y a rien entre 16 et 21 — alors qu’une vraie interface a constamment besoin d’un 18. Scale Composer subdivise donc chaque saut de ratio en notes, comme une octave se divise en tons :

size(i) = base × ratio^(i/notes)

Avec deux notes par intervalle, les tailles intermédiaires vivent toujours sur l’échelle — ce sont des demi-tons, pas des exceptions — de sorte que la cohérence proportionnelle est préservée tandis que l’échelle devient assez dense pour être réellement utilisable. C’est le contrôle central de l’outil : ratio prédéfini ou personnalisé, nombre de notes et base, toujours visibles dans la barre supérieure.

Les quatre vues : Couleur, Typographie, Grille et Système

Pourquoi une seule échelle pour tout

La plupart des systèmes de design sont assemblés à partir d’outils séparés — un calculateur d’échelle typographique, un générateur de palette, l’espacement par convention. Chaque partie peut être raisonnable prise isolément et l’ensemble semble malgré tout décousu, car rien ne relie les parties les unes aux autres.

Le postulat de Scale Composer est que ce sont les relations qui constituent le système. Les trois mêmes nombres pilotent :

  • Typographie — chaque taille de police est un pas de l’échelle ; les interlignes reposent sur une grille de ligne de base dérivée de la base (ligne de base = base ÷ 2).
  • Couleur — le ratio façonne la courbe de luminosité de chaque rampe, de sorte que la distance entre les pas de couleur suit la même progression que la distance entre les tailles typographiques.
  • Espacement et grille — les marges, les gouttières et les pas d’espacement sont des valeurs de l’échelle ; ajuster une gouttière atterrit sur la valeur d’échelle suivante, jamais sur un pixel arbitraire.
  • Effets système — les rayons d’angle, les largeurs de bordure, l’élévation et les durées d’animation sont dérivés de la même base et du même ratio (une durée vaut base × ratio^n millisecondes).

La cohérence cesse d’être une affaire de discipline pour devenir une propriété du système : ce n’est pas que quelqu’un a pensé à aligner les parties — elles ne peuvent pas diverger.

Une sémantique dérivée, pas des couleurs choisies

Vous ne choisissez pas dix-sept couleurs ; vous en choisissez une (ou quelques-unes) et le reste est dérivé. À partir de chaque couleur de départ, l’outil génère une rampe OKLCH complète, et à partir des rampes il dérive des rôles sémantiques — texte sur fond, texte atténué, bordures, états de bouton, anneau de focus, les quatre couleurs fonctionnelles — avec des seuils de contraste WCAG imposés et l’APCA affiché à côté. Le mode sombre est généré comme sa propre dérivation, avec sa propre courbe de luminosité, et non comme une inversion du thème clair. La documentation couleur couvre les mécanismes ; la théorie se trouve dans la section apprentissage.

Comment l’outil est construit, et pourquoi

Deux décisions façonnent tout le reste :

L’échelle est primordiale. Les contrôles de l’échelle se trouvent dans la barre supérieure, au-dessus des quatre vues, car ce n’est pas un réglage de typographie — c’est le réglage. Tout le reste ne fait qu’éditer des interprétations de l’échelle.

Le client présente ; le serveur calcule. Chaque rampe, chaque dérivation sémantique, chaque export est calculé côté serveur à partir de l’état de votre session. Votre navigateur reçoit des valeurs finies. Cela conserve une source de vérité unique pour les calculs — les nombres dans l’outil, dans les exports et dans les captures d’écran de la documentation ne peuvent jamais se contredire, car ils proviennent tous du même moteur. Votre travail ne quitte jamais votre navigateur, si ce n’est sous forme de requêtes de calcul : les sessions sont enregistrées et partagées sous forme de liens, l’état complet étant encodé dans l’URL elle-même (voir partage).

Une convention à connaître dès le départ : presque tout se règle par pas avec les touches fléchées, et chaque pas se déplace toujours le long de l’échelle. Sélectionnez un bloc de texte et appuyez sur ↑/↓ — la taille passe à la valeur d’échelle suivante. Sélectionnez une gouttière — même chose. La référence clavier se trouve sous le bouton ? dans la barre supérieure.

Où aller ensuite