Compaytence
Guide de design

Non pas pour être beau. Pour qu’il soit impossible qu’il ait été installé.

Un audit mené en août 2026 a établi que 13 des 13 valeurs d’accent et de texte de l’ancien système é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 d’un secteur sans rapport partageait 9 de nos 12 procédés signature à des valeurs quasi identiques, parce que les deux sites avaient été assemblés à partir du même registre de composants.

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.

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 treize étapes, la teinte reste dans une plage de 3.1 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.

Pour 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.

N’introduisez jamais une seconde teinte d’accent. Le laiton a été essayé pour les chiffres 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 toutes deux doivent être auditables : 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.

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.

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.

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.

Le plus bas de ces quatre mesure 4.83:1 sur papier. Jusqu’au 21 septembre 2026, trois d’entre eux ne dépassaient le seuil que de 0.04 ou moins ; les deux ajustements de ce jour-là, consignés dans la note ci-dessus, ont apporté la marge dont le bandeau de note a besoin.

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.

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é.

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 seul mot en italique est l’accroche universelle des start-ups IA, et c’est le seul endroit où cette police d’affichage pourrait glisser de la signature à la fioriture. Ce qui en fait un signe révélateur, c’est qu’il s’agit généralement d’un choix par défaut, adopté une fois, pour la saveur, sans aucune raison derrière.

Dans les documents, un tel système n’existe pas ; trois rôles italiques autorisés constituent donc tout le vocabulaire, et il n’y en a pas de quatrième : .tag, .note-l et .quote. .doc-title em a quitté la liste le 21 septembre 2026. La seconde ligne en italique sous une première en romain, sur le H1 de chaque document, était le seul procédé qui se lisait comme l’accroche générée ; la seconde partie d’un titre est donc désormais en romain, dans le bleu : le geste que fait le logotype (un segment en bleu, rien d’autre ne change). L’emphase à l’intérieur d’un titre de document vient de la taille, de la graisse, de la couleur ou de la position. Le remplissage en dégradé sur du texte est banni partout, y compris sur le segment bleu du titre : la couleur le marque déjà, et la rampe n’ajoute qu’un signe révélateur.

Le surtitre, et ce qui a remplacé le libellé mono

Les documents ne portent plus aucun surtitre, depuis le 21 septembre 2026. Une centaine, sur l’ensemble des documents du hub, répétaient le titre placé en dessous, et la légende en filet-plus-italique au-dessus de chaque titre était devenue le marqueur de section généré. Le numéro porte la position d’une section ; le bloc Sommaire porte son type. La classe subsiste pour le site web, où les sections sont peu nombreuses : Instrument Serif italique, casse de phrase, graphite, avec un filet de 26px en préfixe. L’ancien surtitre mono en majuscules espacées est mort et ne doit revenir sous aucune forme.

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.

Les chiffres tabulaires sont ce qui rend 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, et le registre ci-dessous est l’endroit où vont les chiffres d’un document, avec leur source en dessous.

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.

Une échelle de formes à deux niveaux, une seule épaisseur de trait fin et, sur un document, un fond plat sans rien derrière ni rien par-dessus.

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.

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.

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

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.

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 registre, et le double filet

Les chiffres d’un document vont dans le registre : .card-row pour un seul, .card-total avec des rangées .mini pour plusieurs, et une ligne .ledger-src en dessous qui nomme la source et la date. Le nombre est ce qu’il est. La rangée de trois cartes statistiques est exclue des documents depuis le 21 septembre 2026 : trois chiffres ronds alignés était le signe révélateur de contenu le plus souvent cité, et le système l’avait livré sur quatre documents destinés aux clients. .card-stat subsiste pour un seul chiffre phare.

Un registre ne ferme jamais une colonne par une ligne simple. .total-line trace deux filets espacés de 4px au-dessus d’un total. Cela coûte un pseudo-élément, cela n’appartient à personne d’autre, et cela veut dire quelque chose. Utilisez-le uniquement au-dessus d’un véritable total, jamais comme décoration : un registre dont les rangées ne s’additionnent pas ne porte pas de ligne de total.

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 .n pour l’alignement à droite et .num pour afficher le chiffre dans la police serif.
• Note : une bande --paper-2 sur toute la largeur de colonne, avec l’intitulé dans la couleur sémantique et sans filet latéral, une par section au plus. Deux sémantiques seulement, risque et bon.
• Citation mise en exergue : serif d’affichage, italique, limitée à 28ch, sur un filet plutôt que dans un encadré.

Source : journal des modifications de design-system.md, 3 août et 12 août 2026.

Tout ce qui arrive de manière identique est décoratif. Varier selon l’importance donne du sens au mouvement.

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.

• N’animez que transform et opacity. Jamais width, height, padding ni margin. Les propriétés de mise en page représentent 5.7% de toutes les déclarations de transition du corpus, ce qui confirme cette règle.
• 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’IntersectionObserver ou dans un onglet masqué, tout est affiché immédiatement.

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.

Ratios par rapport à --paper dans chaque thème. Luminance relative WCAG 2.1, calculée à la compilation. Les seuils livrés du système sont 3.84:1 sur fond clair (--fig-display) et 5.07:1 sur fond sombre (--good).

• --fig-display à 3.84:1 n’est autorisé qu’au-delà d’environ 24px. Chaque usage livré y satisfait : le chiffre statistique à 51.9px, le numéro de section, le chiffre de rangée et le chiffre de total à 33.2px.
• Anneaux :focus-visible visibles, 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-link ne l’est pas.
• prefers-reduced-motion est 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.

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.

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-shadow créé à la main au lieu de --shadow ou --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 src dé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.

Six questions. Tout « non » est un défaut, pas une préférence.

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.