Le vrai sujet : pourquoi un site amateur sent l'amateur
Avant de parler de tokens, posons le problème. Pourquoi un site fait par un non-designer débrouillard se voit immédiatement, même quand le contenu est bon ? Ce n'est pas une faute évidente, c'est une accumulation de petites incohérences : la couleur du titre n'est pas exactement la même que celle du sous-titre, les espacements entre sections varient de 32px à 80px sans logique, il y a trois tailles de bouton presque identiques, deux types d'ombre différents, et quatre niveaux de gris incompatibles entre eux.
L'œil ne sait pas pointer la faute, mais il la perçoit. Le résultat : ça sent l'à-peu-près. Or l'à-peu-près est un signal commercial désastreux : si la landing est à-peu-près, le produit est probablement à-peu-près aussi.
La différence entre un site amateur et un site agence n'est presque jamais le talent visuel brut. C'est la rigueur du système sous-jacent. Et ce système porte un nom : les design tokens.
Ce qu'est un token, concrètement
Un design token est une variable nommée qui contient une décision esthétique. Au lieu d'écrire « couleur orange #FF6B35 » à 47 endroits dans votre CSS, vous définissez une fois `--color-brand-primary: #FF6B35`, et vous utilisez cette variable partout.
L'avantage immédiat : si vous voulez changer la couleur de marque, vous changez une ligne et tout le site s'aligne. Mais le vrai avantage est plus profond : vous êtes forcé de nommer vos décisions. Et une décision nommée est une décision réfléchie.
Une stack de tokens minimum pour une landing : 6-8 couleurs nommées (brand primary, brand secondary, background, surface, border, text primary, text secondary, accent), 6-8 espacements (4, 8, 12, 16, 24, 32, 48, 64), 4-5 tailles de texte (12, 14, 16, 20, 32, 56), 3-4 niveaux d'ombre (subtle, soft, elevated, modal), et 2-3 rayons de bordure (4, 8, 16). C'est tout. Avec ça, vous avez un système plus rigoureux que 80 % des sites du web.
Les trois niveaux : primitive, semantic, component
Un système de tokens propre se structure en trois couches. La première est primitive : les valeurs brutes. `--blue-500: #3B82F6`, `--space-16: 16px`. Ce sont des constantes, sans usage attribué.
La deuxième est semantic : les usages. `--color-action-primary: var(--blue-500)`, `--space-section-padding: var(--space-64)`. À ce niveau, on nomme à quoi ça sert, pas ce que c'est. Avantage : si on change la couleur de marque, on remappe au niveau sémantique sans toucher les primitives.
La troisième est component : les composants spécifiques. `--button-primary-bg: var(--color-action-primary)`. À ce niveau, on peut surcharger pour un composant sans casser le système.
Cette structure paraît overkill pour une landing simple, mais elle paie au premier refactor. Un changement de palette qui prendrait deux jours en mode CSS sauvage prend dix minutes en mode tokens propre.
Les espacements : la signature invisible
Si vous ne devez optimiser qu'une chose, optimisez les espacements. C'est l'élément le plus sous-estimé, et celui qui fait le plus de différence visuelle.
La règle : utiliser une échelle géométrique ou semi-géométrique, pas des valeurs random. Les échelles qui marchent : 4-8-12-16-24-32-48-64-96 (multiples de 4 avec progression) ou 4-8-16-32-64-128 (puissances de 2). Le principe : chaque espacement est lié au précédent par un ratio constant ou semi-constant. L'œil perçoit cette régularité comme de l'harmonie.
L'erreur classique : utiliser 30px par-ci, 35px par-là, 48px ailleurs, sans logique. Le résultat se voit comme une bouillie même si on ne sait pas pointer la faute. À chaque fois qu'on tape une valeur d'espacement, on devrait piocher dans l'échelle. Si la valeur n'y est pas, soit on enrichit l'échelle (de manière cohérente), soit on accepte que l'échelle dicte.
La typographie : moins de tailles, plus de hiérarchie
Les non-designers tendent à multiplier les tailles de police pour créer de la hiérarchie. Erreur. La bonne approche : peu de tailles, mais avec des contrastes francs entre elles.
Une stack typique : H1 (56-72px), H2 (32-40px), H3 (24px), body (16px), small (14px), caption (12px). Six tailles, point. Avec une échelle où chaque palier est environ 1.5x le précédent.
La hiérarchie vient ensuite par d'autres leviers : poids (regular, medium, semibold, bold), couleur (text-primary, text-secondary, text-muted), interligne (tight pour les titres, comfortable pour le body, loose pour les longues lectures). Une typo bien hiérarchisée avec quatre tailles et trois poids surpasse largement une typo avec dix tailles et zéro poids.
Bonus : choisir deux fonts max (une display pour les titres, une grotesque pour le body), avec deux poids chacune. Quatre weights chargés au total. Si vous chargez sept poids, vous chargez 280 KB de fonts pour rien et vous perdez 0.4s de LCP.
Les couleurs : restreindre pour signer
Une palette efficace n'a pas besoin d'être large, elle a besoin d'être cohérente. Trois familles suffisent : une couleur de marque (l'accent qui revient sur les CTAs, les états importants, les éléments à mémoriser), une couleur de surface (les backgrounds, déclinée en 2-3 nuances), et une couleur de texte (déclinée en 2-3 niveaux d'intensité).
Les couleurs sémantiques (success, warning, error) viennent par-dessus mais doivent rester sobres : un vert et un rouge suffisent, pas besoin de cinq variantes.
Le piège : sortir une palette en regardant Coolors et en piochant cinq couleurs harmonieuses. C'est joli en planche, mais c'est ingérable en site. La palette efficace est un système, pas une planche. Une couleur de marque + neutres + sémantiques. C'est ça qui produit la cohérence reconnaissable.
Une mini-stack de tokens à copier-coller
Voici la stack minimum qu'on utilise pour bootstrapper un projet. À adapter aux couleurs de votre marque, mais la structure reste la même.
Couleurs : --brand: #FF6B35; --bg: #FAFAF9; --surface: #FFFFFF; --border: #E5E5E3; --text: #1A1A1A; --text-muted: #6B6B6B; --success: #16A34A; --error: #DC2626.
Espacements : --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px.
Typo : --t-h1: 56px; --t-h2: 36px; --t-h3: 22px; --t-body: 16px; --t-small: 14px; --font-display: 'Söhne'; --font-body: 'Inter'.
Ombres : --shadow-sm: 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.08); --shadow-lg: 0 12px 32px rgba(0,0,0,.12).
Rayons : --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-pill: 999px.
Avec cette stack, vous avez de quoi faire une landing entière sans une seule décision esthétique ad hoc. Et c'est exactement ça qui fait la différence.