Le Rythme Unique

7 variables. Rien de plus.
Pas de système de design. Juste des règles.

Le problème

Tout le monde fait la même erreur. On défini 12 tailles de police. On défini 8 niveaux d'espacement. On défini 6 états pour les boutons. Puis personne ne s'en souvient. Puis chacun met ce qu'il veut. Puis ça devient le bordel.

Il n'y a aucune raison d'avoir 12 tailles de police. Personne ne voit la différence entre 14px et 15px. Personne ne sent la différence entre 28px et 32px.

Tu n'as besoin que de 3 valeurs. C'est tout.

:root {
--step: 8px;
--base: 1rem;
--ratio: 1.25;
}

C'est tout. Tout le reste se calcule. Tu ne définis plus jamais de valeur en dur. Jamais.

1. Typographie

Pas de h1 à 3rem, h2 à 2.5rem, h3 à 2rem etc. C'est stupide. C'est arbitraire. Tu fais simplement une puissance du ratio.

h1 { font-size: calc(var(--base) * pow(var(--ratio), 3)); }
h2 { font-size: calc(var(--base) * pow(var(--ratio), 2)); }
h3 { font-size: calc(var(--base) * pow(var(--ratio), 1)); }
small { font-size: calc(var(--base) * pow(var(--ratio), -1)); }

Si un jour tu trouves que c'est trop grand ou trop petit, tu changes juste --ratio de 0.05. Tout le site s'ajuste proportionnellement. Rien ne casse. Rien ne se déphase.

Tu ne te poses plus jamais la question.

2. Espacements

Même principe. Pas de mt-1, mt-2, mt-3 jusqu'à mt-12. Pas de 4px, 8px, 12px, 16px, 20px, 24px, 32px. Juste des multiples.

--s-1: calc(var(--step) * 1);
--s-2: calc(var(--step) * 2);
--s-3: calc(var(--step) * 4);
--s-4: calc(var(--step) * 8);

C'est tout. 4 niveaux. Pas plus. Tu ne peux pas faire de marge de 12px. Tu ne peux pas faire de padding de 20px. Tu choisis entre 16px et 32px.

Au début ça paraît dur. Puis tu réalises que personne ne s'en rend compte. Par contre tout le monde sent que c'est cohérent.

Le truc magique : Si tu changes --step de 8px à 6px, tout le site respire plus. Si tu le passes à 10px, tout devient plus solide. Tu changes UNE SEULE VALEUR.

3. Tous les états en 3 règles

Tu ne définis jamais de nouvelle couleur pour un état. Jamais. Tu ne fais que modifier la luminosité et la chroma.

button:hover {
background: oklch(from var(--clr-brand) calc(l - 0.1) c h);
}

button:active {
background: oklch(from var(--clr-brand) calc(l - 0.2) c h);
transform: translate(2px, 2px);
}

button:disabled {
background: oklch(from var(--clr-brand) l 0.05 h);
}

C'est tout. Ça marche pour n'importe quelle couleur de base. Ça marche en thème clair comme en thème sombre. Tu ne l'écris qu'une seule fois dans ta vie.

Pas de transition douce. Pas de ease-in-out de 300ms. C'est immédiat. C'est honnête. L'utilisateur sait exactement quand il a cliqué.

La checklist

1

Choisis ton step

8px c'est bien. 6px c'est plus aérien. 10px c'est plus brutal. Pas autre chose.

2

Choisis ton ratio

1.2 est discret. 1.25 est parfait. 1.33 c'est dramatique. Pas autre chose.

3

Jamais de valeur en dur

Si tu écris un nombre qui n'est pas un multiple, tu as perdu.

Les inconvénients

Il faut être honnête. Ce système a un défaut majeur :

Tu ne peux plus faire de pixel perfect. Tu ne peux plus reproduire exactement la maquette du graphiste. Tu ne peux plus mettre cette marge de 17px que quelqu'un a décidé pour une raison inconnue.

Et c'est précisément pourquoi c'est mieux.