Compaytence
Guide de design
Chaque jeton, composant et règle du système v2, présenté à sa taille d’utilisation. Cliquez sur n’importe quel nuancier pour copier son hexadécimal.
La feuille de style intégrée ici est system.css à l’identique, copiée lors de la compilation. Chaque remplissage de nuancier, ratio de contraste et lecture OKLCH est calculé à partir d’une valeur hexadécimale par build.py, afin qu’un libellé ne puisse pas diverger de la couleur au-dessus. Si le système change, relancez la compilation plutôt que de modifier ce fichier.
Pourquoi le système existe
Non pas pour être beau. Pour qu’il soit impossible qu’il ait été installé.
Un audit en août 2026 a constaté que 13 des 13 valeurs d’accentuation et de texte du système précédent étaient les valeurs par défaut littérales de Tailwind, et que notre propre site produit avait été initialisé avec shadcn ("style": "new-york"). Un concurrent dans un secteur sans rapport partageait 9 de nos 12 dispositifs distinctifs à des valeurs presque identiques, car les deux sites étaient assemblés à partir du même registre.
Chaque valeur doit remonter à une source. Si la seule réponse à « pourquoi ce nombre ? » est « cela semblait juste », c’est une dérive.
Ce test a remplacé l’ancien, « cela aurait-il pu être installé ? », parce que les listes noires se dégradent selon un cycle d’environ douze mois. Le signe révélateur de 2024 était un dégradé violet et Inter. Celui de 2026 est un crème chaud et une sérif d’affichage, qui constituait la porte de sortie du signe révélateur de 2024, adopté assez largement pour devenir le nouveau. La dérivation ne se dégrade pas.
Source : design-system.md §0, audit d’août 2026.
N’écrivez jamais une interdiction sans remplacement positif. Lorsqu’on lui dit « n’utilisez pas de crème », un modèle ne produit pas de variété, il se déplace vers une autre palette fixe. La négation déplace un attracteur au lieu de le dissoudre. Chaque règle de ce guide nomme le jeton, le nombre ou la police à utiliser à la place.
Une seule échelle bleue, une seule teinte
Le bleu PAY du logotype est la graine. Tous les autres bleus sont cette même couleur rendue plus claire ou plus foncée.
L’étape 50 est le bleu du logotype lui-même, mesuré à la teinte OKLCH 245.56. Sur l’ensemble des onze étapes, la teinte reste dans une plage de 1.6 degrés. Le chroma raconte une autre histoire : il atteint son maximum à la graine et diminue vers les deux extrémités, car sRGB ne peut pas maintenir la saturation à l’extrémité pâle. L’échelle est une échelle de luminosité dont la teinte est verrouillée, ce qui est la propriété qui compte.
Contraste mesuré par rapport à --paper dans chaque thème. Le vert dépasse 4.5:1, le gris dépasse 3:1, le rouge ne dépasse aucun des deux. Calculé le 13 août 2026.
#33A9FF mesure 2.42:1 sur le fond clair. Sur une surface claire, c’est un remplissage uniquement. Jamais du texte, jamais un filet que vous devez lire. Sur le fond sombre, le même hexadécimal atteint 7.51:1 et peut être utilisé comme texte. Cette asymétrie est toute la raison pour laquelle une échelle existe au lieu d’un seul hexadécimal.
Ce texte est #33A9FF sur papier. À 2.42:1, il ne respecte aucun seuil d’accessibilité.
Ne faites jamais celaLe même hexadécimal comme remplissage derrière du blanc, et comme graine de toute l’échelle.
C’est sa fonctionPour cette raison, personne ne choisit jamais une étape à la main. Six jetons de rôle correspondent au bon échelon selon le thème, et le balisage ne nomme que le rôle.
| Jeton | Fonction | Clair | Ratio | Sombre | Ratio |
|---|---|---|---|---|---|
--mark |
liens, accentuation | étape 70 #0077bd |
4.57 | étape 30 #81c5ff |
10.34 |
--mark-deep |
accentuation plus forte | étape 80 #005990 |
7.07 | étape 20 #b0daff |
13.02 |
--mark-solid |
REMPLISSAGE sur clair, texte sur foncé | étape 50 #33a9ff |
2.42 | étape 50 #33a9ff |
7.51 |
--mark-tint |
surfaces teintées | étape 05 #edf6ff |
1.04 | étape 95 #002e4d |
1.36 |
--fig |
figures d’affichage, >=24px uniquement | étape 60 #0089d9 |
3.59 | étape 40 #5fb7ff |
8.83 |
--fig-inline |
figures dans le texte courant | étape 70 #0077bd |
4.57 | étape 30 #81c5ff |
10.34 |
--fig est à 3.59:1 sur le fond clair, il n’est donc autorisé qu’au-dessus d’environ 24px. En faire la couleur par défaut d’une classe de figures à usage général signifie que chaque chiffre d’index et statistique en ligne échoue silencieusement à AA, ce qui est exactement arrivé une fois. Un système de figures à deux étapes doit utiliser par défaut l’étape sûre et rendre l’étape d’affichage facultative.
N’introduisez jamais une seconde teinte d’accentuation. Le laiton a été essayé pour les figures puis rejeté, avant de survivre inaperçu dans un lavis atmosphérique au chroma 0.086 pendant deux brouillons. Si une couleur est au-dessus d’environ 0.02 de chroma et n’est pas ce bleu, c’est un bug. Deux exceptions existent et doivent toutes deux être rendues auditables plutôt que laissées implicites : les marques de tiers conservent la couleur de leur propriétaire, balisée afin que l’audit place sur liste blanche l’attribut et jamais l’hexadécimal ; et une réplique de produit qui montre à un utilisateur ce qu’il voit réellement à la connexion conserve les propres jetons du produit, vérifiés dans les deux sens.
Papier chaud, accent froid
Les deux thèmes sont chauds. L’accent est la seule chose froide de la page.
Le bleu se situe à la teinte 245.56, son complément exact est donc 65.56. Les neutres sont dérivés de ce nombre, ce qui signifie qu’une mesure alimente les deux moitiés du système et que la réponse à « pourquoi cette teinte » relève de l’arithmétique plutôt que du goût. Le chroma et la luminosité portent le rôle de chaque neutre.
Mesurés, les douze neutres couvrent de 62.35 à 75.41 degrés. Ce n’est pas une dérive des couleurs. À un chroma de 0.005 à 0.013, sRGB 8 bits ne peut pas représenter la teinte : un pas sur un seul canal déplace la teinte mesurée de 3.5 à 15.8 degrés, de sorte que chaque valeur se situe déjà à un pas de quantification de la cible, et un nouvel encodage à exactement 65.56 renvoie le même hexadécimal ou un hexadécimal adjacent. La forme vérifiable de la règle est chroma égal ou inférieur à 0.013, teinte comprise entre 55 et 90. Les deux conditions sont respectées pour les douze, et les deux sont réfutables.
Faites passer chaque bordure par rgba(var(--rule-c), a). Le jeton n’est pas une couleur, mais un triplet RGB destiné à la composition : 31,27,22 sur clair, 233,230,225 sur foncé, à une opacité de 0.09 à 0.45. Ne codez jamais en dur un gris, ni une ombre noir neutre. La teinte de l’ombre claire est un chaud 44,32,21.
--paper-2 et --wash sont uniquement des teintes de surface. --graphite, --mark, --risk et --good tombent tous à environ 4.3:1 sur la première et 3.9:1 sur la seconde, ce qui est sous le seuil. Si vous peignez une bande avec l’une ou l’autre, le texte qui s’y trouve passe à --ink-soft ou plus foncé.
Deux rôles sémantiques, et deux seulement
Il n’y a délibérément aucun avertissement ambré. L’ambre se situe près de la teinte 70 et entre en collision avec le fond chaud, ce qui est précisément l’erreur commise par l’accent en laiton retiré. Tout ce qui aurait été un avertissement est soit un risque, soit une simple note d’accentuation.
Trois de ces quatre valeurs dépassent le seuil de 4.5:1 de 0.04 ou moins. Elles n’ont plus aucune marge. Ne les modifiez pas.
Trois polices, rôles fixes
Les rôles ne relèvent pas d’une préférence. Une police qui fait le travail d’une autre est un défaut.
Affichage, titres de section, surtitres, folio et tous les chiffres. Jamais pour le corps du texte, jamais pour un libellé d’interface.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 et son italique
Corps du texte, interface, titres de cartes, en-têtes de tableau, boutons. Jamais pour l’affichage, jamais pour les chiffres.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Chaînes techniques uniquement : code, identifiants, numéros de lot, libellés d’échantillons. Jamais un libellé, un surtitre ou un en-tête courant.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Geist et Geist Mono sont retirées : ce sont les polices maison de Vercel, et porter l’uniforme de la plateforme représentait la moitié du problème. Inter, Roboto, Arial, Poppins, Montserrat, Space Grotesk et toute pile de polices système pour l’affichage sont exclues pour la même raison, à plus grande échelle. Ce sont celles vers lesquelles un générateur se tourne quand personne n’a décidé.
C’est l’une des quatre polices les plus souvent signalées comme « police IA », et le crème chaud associé à une sérif d’affichage est le style maison documenté des modèles de pointe en 2026. La défense n’est pas la police, mais le rôle que nous lui attribuons : les chiffres. Une colonne de chiffres tabulaires en sérif, en bleu, est un procédé unique. Un mot en sérif italique glissé dans un titre pour donner du caractère est l’élément attracteur. Gardez le centre de gravité de la sérif sur les nombres.
L’échelle : 1.25 à partir d’une base de 17px
Neuf niveaux, et ils constituent tout le vocabulaire. La typographie se juge par comparaison, donc un ratio lent fonctionne ici. L’espace se juge isolément et utilise un ratio plus rapide.
Italique sérif : un système, ou rien
Une sérif surdimensionnée avec un mot en italique est le héros universel des startups IA, et c’est le seul endroit où cette police d’affichage pourrait passer de signature à fioriture. Ce qui en fait un indice, c’est qu’il s’agit généralement d’un choix par défaut, utilisé une fois, pour donner du caractère, sans aucune raison derrière.
Un mot en sérif italique glissé dans un titre parce qu’il y était esthétique. Isolé, inexplicable, décoratif.
Pas un systèmeUn procédé d’accent traçable à une source explicitement énoncée, appliqué systématiquement sur une surface et porté dans le modèle de contenu comme donnée plutôt que marqué à la main à chaque occurrence.
Un systèmeDans les documents, un tel système n'existe pas : quatre rôles italiques autorisés constituent donc tout le vocabulaire, et il n'y en a pas de cinquième : .doc-title em (une ligne de titre entière, jamais un mot isolé), .tag, .note-l et .quote. L'accentuation dans un titre de document vient de la taille, de la graisse, de la couleur ou de la position. Le remplissage dégradé sur le texte est interdit partout, y compris sur un mot d'accent autorisé : l'italique le signale déjà, et le dégradé n'ajoute qu'un indice.
Le surtitre, et ce qui a remplacé le libellé mono
Le surtitre est en Instrument Serif italique, en casse de phrase, graphite, avec un filet de 26px en préfixe. Il porte le type de la section ; le numéro porte sa position. Si un surtitre ne fait que répéter le titre, omettez-le. L’ancien surtitre mono en majuscules espacées est mort et ne doit revenir sous aucune forme.
.label — Archivo, --t-xs, graisse 600, espacement .09em, majuscules, graphite. Il s'agit du traitement table th promu en classe, et c'est le seul procédé autorisé restant en majuscules espacées. Utilisez-le pour un en-tête de colonne.
.tag — sérif italique, casse de phrase, graphite, lorsque le texte est une expression plutôt qu'un nom de champ. Utilisez celui-ci en premier.
Les chiffres sont la marque
Un procédé unique. Il ne peut pas être reproduit par reconnaissance de modèle, car personne d’autre ne le fait.
Chaque nombre est composé dans la sérif d'affichage, en bleu, avec font-variant-numeric: tabular-nums lining-nums, aligné à droite dès qu'il se trouve dans une colonne. Dans le texte courant, .fig-inline est légèrement plus grand que l'Archivo environnant afin d'attirer l'œil sans passer en gras.
Sans le traitement : nous avons récupéré 20 millions de dollars sur 450 blocages pour 2,500 entreprises, en travaillant avec 30 prestataires de paiement.
Avec lui : nous avons récupéré $20M sur 450 blocages pour 2,500 entreprises, en travaillant avec 30 prestataires de paiement.
Les chiffres tabulaires rendent une colonne lisible : chaque chiffre occupe la même largeur, de sorte que les nombres s’alignent verticalement quelle que soit leur valeur. L’alignement à droite fait le reste.
Même catégorie qu’un logo manquant. Un nombre dans une carte statistique est une affirmation : il comporte donc une valeur réelle, un dénominateur lorsqu’il existe, une date et sa provenance. Les chiffres ronds sans source — « 10,000+ marchands », « 99.9% de disponibilité », « 3x plus rapide » — sont l’indice de contenu le plus souvent cité. Des chiffres de remplacement peuvent exister dans un scaffold. Ils ne doivent jamais être livrés.
Tout dérive de 30px
Le corps est en 17px sur une ligne de base de 30px, donc une ligne correspond à une unité.
Chaque valeur d’espacement est une fraction ou un multiple de cette ligne, et chacune est un pixel entier. Un ratio géométrique a été envisagé puis rejeté : 1.25 nécessite quatorze niveaux pour couvrir 4 à 100px et place 24 à côté de 30, ce qui ressemble à un accident, et 1.5 devient fractionnaire au troisième niveau.
Les lignes bleues derrière ce paragraphe sont tracées tous les 30 pixels. Le texte s'y pose parce que --lh-body vaut 1.765, et que 17 × 1.765 vaut 30.005. Une ligne de texte courant correspond exactement à une unité de l'échelle d'espacement, raison pour laquelle l'échelle peut être exprimée en fractions d'une ligne plutôt qu'en un ensemble arbitraire de nombres que quelqu'un a appréciés.
L’espace entre les blocs de texte utilise des lignes de base entières : 30, 60, 90. Le remplissage à l’intérieur d’un composant utilise les fractions : de 6 à 24. La proximité porte du sens : faites donc varier les espaces lorsque les regroupements diffèrent. Une seule valeur d’espacement partout est un échec de regroupement.
Géométrie, verre, grain, halos
Une échelle de formes à deux niveaux, une seule épaisseur de trait fin et exactement deux éléments atmosphériques.
Coins : deux niveaux, jamais un troisième
Un contrôle situé un niveau plus serré que son conteneur paraît réfléchi plutôt que défini par défaut. Un seul rayon partout est l’indice de la forme molle, et la correction ne coûte rien.
--r-lgcartes, tableaux, notes, panneaux
--r-ctlboutons, champs, bascules
--r-xscode en ligne uniquement
Les quatre coins, toujours. Les coins elliptiques, chanfreinés, squircle, mis à l'échelle et asymétriques ont chacun été créés puis rejetés, et ils restent rejetés. --r-sm est retiré. N'utilisez jamais une valeur px brute : les deux jetons constituent tout le vocabulaire.
--hair vaut 1px partout, coloré de rgba(var(--rule-c), .09 à .45). Il n'existe pas de seconde épaisseur de bordure dans le système.
Une carte translucide sur le fond chaud, avec backdrop-filter: blur(16px) saturate(1.25). Conservée plutôt que supprimée, car le grain au-dessus et les halos derrière en font un empilement de matières, non un flou appliqué pour donner du brillant.
Y compris au-dessus des cartes, à z-index 9. En dessous, chaque carte l’effacerait et les deux s’opposeraient visiblement. Au-dessus, il se comporte comme du grain de film et unifie la surface. Une surface grainée par page plane, et jamais une boîte grainée imbriquée dans une autre.
C’est tout le budget atmosphérique. Ni troisième halo, ni champ d’aurore, ni dégradé maillé, ni orbe lumineux, quel que soit le traitement de bord. « Flou » n’en blanchit pas un.
Le grain doit suivre le calque qui peint la teinte, jamais la boîte de section. Dans un système de pont ou de fond perdu, la couleur d’une bande se prolonge au-delà de sa propre section : le grain limité à la section s’arrête donc alors que sa couleur continue, et trace une ligne dure à chaque limite : mesurée à Δ10/255 sur fond clair et Δ22/255 sur le fond sombre. La page se lit alors comme un empilement de dalles plutôt qu’une seule surface.
La carte, et quand ne pas en utiliser une
La carte est le conteneur maison. Ce n’est pas le choix par défaut de la maison.
Une carte dit « comparez-moi à mes semblables. »
Utilisez-en une lorsque les éléments constituent véritablement un ensemble de pairs que le lecteur met en balance : trois offres, trois approches, trois résultats. Tout ce que le lecteur lit dans l’ordre se place directement sur le fond, sans conteneur, sous la forme d’un titre, d’une ligne et d’un filet entre les rangées. Une page où chaque bloc est une grille de cartes se lit comme du bruit, quelle que soit la qualité des cartes. Sur une section de services à quatre parcours, cette application a fait passer la page d’environ 24 surfaces de carte à 9.
Il en va de même pour les visuels de preuve et les citations mises en exergue : une capture d’écran qui possède déjà son propre cadre et son ombre n’a pas besoin d’être entourée d’une carte, et une citation se lit mieux en typographie sur un filet que dans un encadré. Les quatre blocs de la section 07 ci-dessus sont des rangées sans carte, précisément pour cette raison.
Les quatre types de cartes
Libellé à gauche, chiffre à droite. La rangée de registre, encadrée.
64chUne étiquette, un titre, une ligne de texte et un lien dont la flèche se déplace avec la carte.
Retour en haut →Survolez n’importe quelle carte ci-dessus. Au repos, elle comporte un filet et aucune ombre. L’élévation n’apparaît qu’à l’interaction, et elle arrive en exactement deux couches.
La carte s’élève de 3px et acquiert --shadow-lift à partir de rien. Elle devient physiquement plus proche.
Une légère surbrillance suit le pointeur sur la surface, avec un alpha de .035. Les matériaux coûteux captent la lumière. C’est cette couche qui fait croire au matériau.
Cette valeur a été livrée à .14 et évoquait un projecteur suivant le curseur plutôt qu’un matériau captant la lumière. Le signe qu’elle est juste : vous la remarquez quand le pointeur bouge et ne parvenez pas vraiment à la désigner lorsqu’il s’arrête. Chaque surface partage un même bloc, donc ce seul nombre règle toute la page. Ne le réglez jamais à nouveau par composant.
Une troisième couche, un filet bleu balayant le bord supérieur, a été construite puis supprimée. Avec l’éclat qui portait déjà l’accent, cela faisait un signal de trop et amenait la carte à s’annoncer plutôt qu’à répondre. Livrer un filet et une ombre diffuse au repos a été abandonné pour la même raison : cela fait fonctionner deux systèmes d’élévation à la fois.
Le double filet
Un registre ne clôt jamais une colonne par une seule ligne. .total-line dessine deux filets espacés de 4px au-dessus d’un total. Cela coûte un pseudo-élément, n’appartient à personne d’autre et signifie quelque chose. Utilisez-le uniquement au-dessus d’un vrai total, jamais comme décoration.
Le reste du catalogue
- Liste de points : un filet de 6×1px marque chaque élément, jamais une puce.
- Tableau : les cellules numériques comportent à la fois
.npour l’alignement à droite et.numpour afficher le chiffre dans la police serif. - Note : deux sémantiques seulement, risque et positif.
- Citation mise en exergue : serif d’affichage, italique, limitée à 28ch, sur un filet plutôt que dans un encadré.
| Mesure | Avant v2 | Après |
|---|---|---|
| Valeurs par défaut de Tailwind | 13 | 0 |
| Polices de caractères Vercel | 2 | 0 |
| Teintes d’accent | 2 | 1 |
| Niveaux de rayon | 1 | 2 |
| Durées d’apparition | 1 | 2 |
Source : journal des modifications de design-system.md, 3 août et 12 août 2026.
Une carte dans une carte est du bruit visuel. Si le contenu d’une carte a besoin d’un cadre, il lui faut un filet ou une bande teintée, pas une seconde carte.
Deux intensités, et rien en dessous
Tout ce qui arrive de manière identique est décoratif. Varier selon l’importance donne du sens au mouvement.
| Classe | Déplacement | Durée | À utiliser sur |
|---|---|---|---|
.rise | 18 | 0.7 | Titres de section, tout ce qui ouvre un bloc |
.rise-sub | 10 | 0.5 | Cartes, grilles, tableaux au sein d’une section |
| aucun | — | — | Points, libellés, éléments en ligne, petits contrôles |
L’élément principal annonce le bloc ; l’élément suivant se pose dessous. N’ajoutez pas une troisième durée et n’appliquez pas d’apparition à un élément petit. Un élément qui arrive seul sans raison est le même échec que tout ce qui arrive de manière identique.
Les deux courbes d’accélération
Une seule paire, et aucun rebond ni effet élastique nulle part. Chaque courbe d’accélération choisie manuellement dans le corpus mesuré est une ease-out, ce que sont ces deux courbes.
cubic-bezier(.2,.7,.2,1)
Transitions de couleur, d’arrière-plan et de bordure.
cubic-bezier(.16,1,.3,1)
Apparitions, élévation de carte, flèche mobile.
La norme du corpus mesuré pour un survol est un changement de couleur : arrière-plan 33.8%, couleur 24.4%, bordure 12.3%, transformation seulement 6.6%. Notre élévation à deux couches est juste sur une carte et incorrecte sur un lien ou une rangée de tableau, qui demandent une couleur à environ 200ms. La transition médiane par site est de 250ms ; --dur-lead à 0.7s et --dur-sub à 0.5s sont donc des valeurs du décile supérieur : adaptées aux apparitions, inadaptées près d’un survol.
Source : motion-canon.md, CSS livré de 1,199 sites, 13 août 2026.
- Animez uniquement
transformetopacity. Jamaiswidth,height,paddingnimargin. Les propriétés de mise en page représentent 5.7% de toutes les déclarations de transition du corpus ; cette règle est donc confirmée plutôt qu’affirmée. - Aucun élément interactif ne doit modifier uniquement son opacité au survol.
- Aucun point décoratif pulsant, aucun faux curseur clignotant, aucun bandeau défilant automatiquement. N’animez que ce qui change réellement.
- Trois solutions de repli pour les apparitions, toutes obligatoires : avec un mouvement réduit, en l’absence d’
IntersectionObserverou dans un onglet masqué, tout est affiché immédiatement.
Les deux thèmes, mesurés
4.5:1 pour le texte, 3:1 pour les chiffres d’affichage au-delà d’environ 24px. Chaque valeur ci-dessous a été calculée à partir de l’hex livré, et non copiée depuis une note.
| Jeton | Fonction | Clair | Sombre | Seuil |
|---|---|---|---|---|
--ink |
titres | 16.31 | 17.74 | 4.5 |
--ink-soft |
corps de texte | 7.93 | 15.38 | 4.5 |
--graphite |
texte atténué, surtitre | 4.66 | 6.12 | 4.5 |
--mark |
liens, accentuation | 4.57 | 10.34 | 4.5 |
--fig-inline |
chiffres dans le texte | 4.57 | 10.34 | 4.5 |
--fig |
chiffres d’affichage >=24px | 3.59 | 8.83 | 3.0 |
--mark-solid remplissage uniquement |
REMPLISSAGE sur fond clair ; texte sur fond sombre | 2.42 | 7.51 | 4.5 |
--risk |
états d’erreur | 4.54 | 4.53 | 4.5 |
--good |
confirmations | 4.54 | 5.16 | 4.5 |
Rapports par rapport à --paper dans chaque thème. Luminance relative WCAG 2.1, calculée le 13 août 2026. Les seuils livrés du système sont de 3.59:1 en clair et de 4.53:1 en sombre.
--figà 3.59:1 n’est conforme qu’au-dessus d’environ 24px. Chaque usage livré est conforme : le chiffre statistique à 51.9px, le chiffre de section, le chiffre de rangée et le chiffre total à 33.2px.- Anneaux
:focus-visiblevisibles, 2px en--mark, décalage de 3px. Parcourez cette page avec la touche Tab pour les voir. - Les contrôles autonomes font au moins 44px. Les liens en ligne dans le texte courant sont exemptés ; un
.card-linkne l’est pas. prefers-reduced-motionest respecté et le thème est appliqué avant le premier rendu.- Le contenu ne doit jamais dépendre d’une image d’animation. C’est aussi une exigence de recherche : un crawler voit la page sans aucune interaction utilisateur ; le contenu repliable est donc rendu dans le DOM et replié par CSS, jamais monté au clic.
78.6% des sites mesurés écrivent outline:none au moins une fois, et 26.5% le font sans jamais définir :focus-visible. 12.7% n’ont aucun style de focus. Le mouvement réduit est pire : seuls 39.8% des sites comportent la requête, et par plateforme ce chiffre tombe à 14.4% sur Webflow et 2.3% sur Framer, soit deux sites sur 87. Toute surface Compaytence construite sur Framer ou Webflow nécessite cette requête écrite à la main.
Source : motion-canon.md, 13 août 2026.
Dans un onglet de prévisualisation masqué, getComputedStyle renvoie des valeurs obsolètes pour tout élément au milieu d’une transition, et forcer le reflow n’aide pas. Avant de mesurer le contraste, injectez *,*::before,*::after{transition:none!important}. Sinon, un changement de thème rapporte les couleurs du thème précédent et chaque lecture est erronée.
Pourquoi cela nous ressemble
Le 13 août 2026, 1,290 systèmes de design livrés ont été mesurés automatiquement à partir du CSS appliqué. Les chiffres ci-dessous sont les résultats obtenus.
Source : styles.refero.design, 1,290 systèmes mesurés à partir du CSS appliqué ; anti-patterns.md §9 et website-builder/references/design-canon.md, 13 août 2026.
Deux autres constats ont affiné le système plutôt que de le confirmer. Le gras est un signe plus révélateur que le rayon : 46.2% de ces sites ne dépassent jamais la graisse 600, et 36.6% énoncent une règle anti-gras. La hiérarchie repose sur la taille, l’espace et la couleur ; un titre en graisse 700 est donc un marqueur plus fiable d’un système non réfléchi que n’importe quel choix de palette. Et l’approche négative n’est pas une règle d’hygiène : environ la moitié du corpus n’en applique aucune, même en affichage. Ajustez l’approche par plage de taille avec une raison explicite, ou ne l’ajustez pas du tout.
Ne laissez jamais un accent chaud sur le papier chaud. Ni dans une illustration, ni dans une série de graphiques, ni dans une teinte de survol, ni dans un lavis atmosphérique. C’est le seul geste qui fait passer une position de 2.6% à une position de 77.3%, et c’est exactement le mode d’échec déjà consigné : le laiton est resté inaperçu dans un lavis à chroma 0.086 pendant deux versions. --risk est l’exception autorisée, limitée aux états d’erreur.
La plupart de ces signes étaient des tendances de design humain de 2022 à 2024, avec des exemples nommés, avant que les générateurs ne deviennent vraiment efficaces. Ce qui a changé, ce n’est pas le vocabulaire, c’est que produire la moyenne ne coûte plus rien. Le vrai diagnostic est « personne n’a décidé », pas « une machine l’a fait » : un humain qui livre le shadcn standard produit exactement le même artefact. Appliquez cette liste à notre propre travail.
La liste des interdits
Définitivement exclus. Si l’un d’eux apparaît, c’est une régression, pas une option.
- K-01Les valeurs de palette par défaut de Tailwind, et tout bleu qui n’est pas sur l’échelle
- K-02Geist, Geist Mono, Inter, Roboto, Arial, Poppins, Montserrat, Space Grotesk, typographie d’affichage utilisant la police système
- K-03Les surtitres en majuscules espacées en mono, et le mono pour toute étiquette ou tout titre courant
- K-04Une seconde teinte d’accent, y compris une teinte chaude saturée dissimulée dans l’atmosphère
- K-05Les superpositions de grille, les orbes lumineux quel que soit le traitement de bord, les champs d’aurore et les dégradés maillés
- K-06L’ambre comme sémantique
- K-07Les variantes d’angles de cartes : elliptiques, biseautés, squircle, asymétriques
- K-08Le survol avec filet bleu sur le bord supérieur
- K-09Des gris codés en dur au lieu de
rgba(var(--rule-c), a) - K-10Un
box-shadowcréé à la main au lieu de--shadowou--shadow-lift - K-11Du texte en dégradé dans un titre ou un chiffre
- K-12Une bande d’accent colorée sur un bord d’une carte
- K-13Un glyphe d’icône dans une tuile carrée arrondie teintée au-dessus d’un titre
- K-14Un surtitre en badge ou en pilule au-dessus d’un grand titre d’accroche
- K-15Des emojis n’importe où dans l’habillage de l’interface
- K-16Des grilles Bento utilisées comme style de mise en page plutôt que justifiées par un contenu inégal
- K-17Du texte de corps centré et des titres de section centrés empilés sur une page
- K-18Des cartes imbriquées
- K-19Des points pulsants décoratifs, de faux curseurs clignotants, des bandeaux défilants automatiquement
- K-20Des murs de logos en niveaux de gris « ils nous font confiance » et une preuve sociale en rangée d’avatars
- K-21Des statistiques sans attribution et des témoignages sans nom complet, entreprise ni résultat
- K-22« Commencer » et « En savoir plus » comme libellé de CTA sur la page
- K-23Des images génériques de stock, des formes 3D abstraites, des illustrations isométriques, tout espace réservé ou
srcdéfectueux - K-24Un état de survol qui ne modifie que l’opacité
- K-25L’animation de la largeur, de la hauteur, du remplissage ou de la marge, et l’accélération avec rebond ou élastique
- K-26Un
<div>avec un gestionnaire de clic là où un<button>est nécessaire
Le système v1 retiré est archivé et ne doit jamais être rendu : aucun canevas crème #fafaf7, aucun Geist, aucun #3b82f6, aucun surtitre mono, aucun orbe lumineux, aucune superposition de grille, aucune barre de navigation sombre.
L’audit, avant de présenter
Six questions. Tout « non » est un défaut, pas une préférence.
Remplacez le logotype par celui d’un concurrent. Faut-il modifier quoi que ce soit d’autre ?
Choisissez au hasard cinq valeurs rendues : une couleur, un rayon, un espacement, une taille, une durée. Chacune peut-elle être rattachée à un jeton ou à une dérivation énoncée sans dire « cela avait l’air juste » ?
La page montre-t-elle ce qui compte le plus, ou chaque bloc a-t-il le même poids ? Des nombres de mots identiques dans des cartes sœurs signifient que le texte a été rogné pour remplir les cases.
Chaque chiffre et chaque citation portent-ils une source réelle, une date et une attribution ?
Les états vide, de chargement, d’erreur et 404 existent-ils, et chacun dit-il quelque chose de précis ?
La page tient-elle la route lorsqu’on défile jusqu’en bas à 375px et à 1440px, dans les deux thèmes ? Une page vérifiée uniquement depuis sa première fenêtre d’affichage est vérifiée comme le ferait un générateur.
Si la réalisation est comparée à un site de référence, ajoutez une septième question : placez notre page, la référence et le modèle générique le plus proche côte à côte. Le caractère distinctif n’est visible que dans un alignement.
Cette page est destinée aux humains. La version évaluable, où chaque règle porte un identifiant, une valeur mesurée, un test et une ligne source, est .claude/skills/compaytence/references/design-system-spec.md. C'est ce vers quoi se résout le critique système de la compétence design-loop, et sa §15 est une checklist préconstruite de vingt lignes, prête à être dupliquée dans une exécution.