Système de design · Chrono · v3

La donnée d'abord, un seul signal.

Blanc, noir, grille de 12 colonnes, chiffres en mono tabulaires. Le vert chrono est réservé à l'action principale et aux états positifs ; il ne porte jamais de texte sur blanc. Tout est construit sur une grille de 4 px, des rayons de 6 à 12 px et deux durées de mouvement.

Couleurs · tokens

Blanc#FFFFFFfond

Surface#F5F6F8cartes plates, admin

Noir#0E0F11texte, panneaux

Encre 2#3F444Ctexte secondaire fort

Gris#5B6068texte secondaire

Trait#E3E6EAséparateurs

Vert chrono#2AE36Baction principale, positif

Vert foncé#0B7A3Bliens, accents sur blanc

Vert doux#E8FBEFétats en cours

Alerte#B42318erreurs

Contrastes mesurés : noir sur blanc 19,2:1 · vert foncé sur blanc 5,4:1 · noir sur vert 11,2:1 · gris sur blanc 6,3:1. Texte 4.5:1 minimum, interface 3:1.

Typographie

Inter Tight

Titres 800, interlettrage −2,5 à −3,5 %, interligne 0,92 à 1,05. Texte 400 à 600, interligne 1,55.

0:00:00

JetBrains Mono, chiffres tabulaires : temps, dossards, prix, étiquettes en capitales espacées.

Échelle 12 · 13 · 14 · 15 · 16 · 20 · 26-36 · 34-56 · 44-96

Espacement 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96

Rayons 6 · 8 · 12 · 16 · 50 %

Composants

Boutons · 48 px, 56 px pour l'action principale

Carte radio · chip · segment

Palier et compte à rebours · toujours sur une date réelle

Lancementterminé
Palier 2 · en coursjusqu'au 30 nov.
Palier 3dès le 1er déc.

—

jours

—

heures

—

min

—

sec

ConfirméeEn directEn attenteArchivéeErreur

Champs · 48 px · erreur en texte

Courriel

Date de naissance Format attendu : AAAA-MM-JJ, par exemple 1990-05-12.

Case à cocher, geste positif distinctInterrupteur

Messages · progression · jauge

Inscription enregistrée. Confirmation envoyée.

Pièce à votre nom : ni reprise ni échange.

Temps officiel importé.

Aucun résultat pour « Tremblay » sur le 5 km. Réclamer un résultat

Mouvement et accessibilité

Deux durées : 140 ms (états), 240 ms (déplacements). Courbe cubic-bezier(.2,.7,.2,1).
Apparition au défilement de 12 px, désactivée avec prefers-reduced-motion.
Focus visible : anneau vert foncé 2 px, décalé de 3 px.
Cibles tactiles 44 px minimum, 48 px pour les champs.
Chiffres tabulaires partout où des colonnes s'alignent.
Polices hébergées localement, préchargées, affichage immédiat (font-display: swap).

Règles d'écriture

Signé Patrick Mahony, jamais une agence.
Pas de point d'exclamation. Pas de « exceptionnel », « unique », « incroyable », « premium », « inoubliable ».
Camisole, jamais débardeur. Jamais « qualifiant pour Boston ».
Aucun nom ni temps d'un vrai coureur sur un visuel sans accord écrit : exemples fictifs, marqués.
Français d'abord. Prix tout inclus, taxes en sus, écrit à chaque prix.
Chaque urgence est une date réelle.