Référence
Les jetons, les composants et les règles qui tiennent l’ensemble. Tout ce qui est affiché ici est lu dans le code, pas recopié.
Fondations
Un canvas encre de nuit, des accents bleu ciel, des pilules et des cartes très arrondies. La palette part des teintes de marque : #0EA5E9, #38BDF8, #BAE6FD et #0F172A.
01
--brand est le bleu qui se lit — lien, icône, valeur — mesuré à 8,8:1 sur le canvas. --brand-surface (#0EA5E9) est le bleu qui se remplit, et il porte l’encre de nuit : mesuré, le blanc tombe à 2,8:1 quand l’encre monte à 6,4:1. Le ciel clair (#38BDF8) est --brand-pop : décoratif, jamais de texte dessus.
02
Boutons, champs, pastilles, navigation : tout ce qui s’actionne est rond. Les contenus — cartes, panneaux — gardent des angles courts. C’est le contraste entre les deux qui fait le motif : des cartes elles aussi très arrondies l’effaceraient et donneraient un site mou.
03
Décision de marque — pas de mode clair, pas de bascule, pas de préférence système. Un seul jeu de jetons, soigné une seule fois, dans globals.css. Si un second thème doit renaître un jour, il renaîtra là.
04
Les couleurs de sens sont indépendantes de l’accent — aucune n’est jamais un bleu. Sur une plateforme d’achat, une baisse de prix est une bonne nouvelle : elle est verte, et une hausse est rouge.
Fondations
Vingt jetons, pas une palette ouverte. Chaque couleur a un rôle nommé ; une valeur écrite en dur dans un composant est un défaut, pas un raccourci.
Valeurs lues dans le document, jamais recopiées. Si une couleur change dans globals.css, cette page change avec elle.
Quatre plans, du plus enfoncé au plus saillant. Aucun composant n’invente une teinte de fond.
Le trait sépare les plans quand l’ombre ne suffit pas. `strong` sert aux éléments qui doivent se détacher.
Trois niveaux seulement. Un quatrième gris finit toujours par être choisi au jugé.
Deux bleus pour deux métiers. `--brand` est le bleu qui se lit ; `--brand-surface` (#0EA5E9) est le ciel qui se remplit — et il porte l’encre de nuit, jamais du blanc. `--brand-pop` (#38BDF8) est purement décoratif : halos, accents sérif, jamais de texte dessus.
Le voile plus posé (#BAE6FD) : étiquettes-curseurs, surlignages, cartes teintées. Jamais en concurrence avec l’aplat ciel de l’action principale.
Indépendantes de l’accent — aucune n’est jamais un bleu. Sur une plateforme d’achat, une baisse de prix est une bonne nouvelle : elle est verte.
Fondations
Trois familles, trois usages qui ne se recouvrent pas. Le mélange est le motif : un titre signalétique, un texte lisible, une donnée alignée.
Inter
font-display · font-sansTitres serrés en grands corps, texte courant en petit. Une seule grotesque pour les deux rôles : c’est l’accent sérif qui fait le contraste, pas un changement de famille.
Vois ce que tu achètes, avant de payer.
Instrument Serif
.serif-accentL’accent calligraphié : UN mot en italique au milieu d’un titre en grotesque, jamais plus. Au-delà d’un mot, il cesse d’être un accent.
avant · mieux · récemment
Geist Mono
font-monoÉtiquettes, références, unités, horodatages. Tout ce qui se lit comme une donnée saisie à la machine.
1688:1049179417188 · 2026-08-01 13:05:04
Petites capitales monospace très espacées, posées au-dessus d’une valeur. C’est le motif qui donne son identité à l’ensemble — fiche produit, bordereau de colis, panneau de prix.
Prix de référence
¥73,00
Chiffres à chasse fixe. Obligatoire dès que des nombres se superposent en colonne : sans lui, une colonne de prix ondule et devient impossible à comparer d’un coup d’œil.
Sans
1 407
338
19
Avec
1 407
338
19
Fondations
La pilule pour ce qui se touche, des angles courts pour ce qui contient. Le contraste entre les deux est le motif : un bouton parfaitement rond posé sur une carte à peine adoucie. L’échelle est monotone — le mauvais choix se voit immédiatement.
rounded-xs
0.25rem
Vignette, petit aperçu
rounded-sm
0.375rem
Petite carte, cellule
rounded-md
0.5rem
Carte, panneau courant
rounded-2xl
1.25rem
Grand contenant, encart, FAQ
.graph-paper
Trame de papier millimétré, 8 px, en --grid. Purement décorative, donc toujours aria-hidden. Sert de fond de héros et de substitut d’image manquante.
Focus
Anneau de 2 px en --ring avec 2 px de décalage, appliqué globalement sur :focus-visible. Il suit le fond : lisible sur toutes les surfaces de la nuit. Ne jamais le retirer sans le remplacer.
.cursor-tag
L’étiquette-curseur des outils collaboratifs, détournée en porte-donnée qui dérive autour du héros. Décorative (aria-hidden) : sa donnée existe toujours ailleurs en clair.
352 lots de QC
.halo
Deux nappes de ciel très diluées derrière un bloc. Sur .midnight, elles deviennent la lueur bleue de la nuit. Toujours aria-hidden.
Composants
Six variantes, et une seule action principale par écran. Deux boutons pleins côte à côte annulent la hiérarchie qu’ils sont censés porter.
brandAction principale — aplat ciel, une par écran
solidContraste maximal, hors zone de marque
outlineDéfaut, action secondaire
ghostTertiaire, barres d’outils
dangerDestructif, jamais en action principale
linkNavigation dans un paragraphe
Tailles
Composants
Une pastille porte un fait, pas une décoration. Si elle ne répond pas à une question qu’on se pose devant la fiche, elle n’a pas lieu d’être.
neutralMétadonnée sans jugement : agent, source
brandFait mesuré au contrôle, distinctif du site
downBonne nouvelle : en stock, baisse, livré
upMauvaise nouvelle : rupture, hausse, à l’arrêt
outlineClassement, provenance : marketplace, rayon
Composants
Filet vertical de 2 px et fond teinté. Le ton dit la nature du message ; « error » porte en plus role=alert, les autres non — annoncer une information neutre interromprait la lecture d’écran pour rien.
Composants
Le panneau est le contenant par défaut : un filet, un en-tête, un corps. C’est la transposition directe du bordereau — un titre en haut, des champs étiquetés en dessous.
Chargement
Le squelette reprend la géométrie exacte de ce qu’il remplace. Un squelette de la mauvaise taille produit un saut de mise en page à l’arrivée des données — pire que pas de squelette du tout.
Composants
Les avatars sont générés à partir du pseudo — palette et motif dérivés d’un hachage FNV-1a. Aucun envoi de fichier : c’est une surface d’attaque et un coût de stockage pour un gain nul.
nathan
asmrhauler
qc_hunter
louis
mei
Motifs
Décrites plutôt que simulées : les rendre ici demanderait des appels sortants ou des données inventées, et une fausse donnée dans un guide finit toujours par être prise pour la vraie.
Fiche produit, pleine largeur
Une seule piste horizontale, les lots comme segments séparés par un filet. Vignettes de 240 px, clic ouvre la visionneuse — jamais une redirection. C’est le cœur du site : elle passe avant l’historique de prix et les commentaires.
Catalogue, étagères, boards
Image carrée, titre sur deux lignes, prix en chiffres tabulaires, compteur de lots QC en surimpression. La largeur est fixée par la piste du carrousel, jamais par la carte.
Fiche produit, sous la galerie
SVG sans dépendance, pastilles posées en HTML par-dessus. Un seul point donne une ligne pointillée jusqu’au prix actuel, avec sa mention — une ligne pleine laisserait croire à un historique qui n’existe pas.
Tableau de bord colis
En-tête d’état, barre d’avancement, fil d’étapes à pastilles. La barre passe en couleur d’alerte quand le suivi est à l’arrêt : figée à 15 % en couleur de marque, elle se lirait « ça avance lentement ».
Structure
La largeur du conteneur porte une intention : plus la page est faite pour être regardée, plus elle est large ; plus elle est faite pour être lue ou remplie, plus elle est étroite.
| Route | Largeur | Structure et intention |
|---|---|---|
/ | max-w-5xl / 6xl | Héros centré étroit pour le texte, sections en 6xl. L’aperçu téléphone défile avec la page. Aucun appel sortant : une visite d’accueil coûte zéro requête vers les agrégateurs. |
/articles | max-w-6xl | Filtres en puces, grille à défilement infini. Les facettes portent leur effectif — une catégorie vide n’est jamais proposée. |
/p/[marketplace]/[productId] | max-w-7xl | La plus large du site. En-tête compact en deux colonnes (vignette 22 rem + décision), puis la galerie QC sur toute la largeur, puis prix et commentaires. L’ordre suit celui de l’acheteur. |
/parcels | max-w-4xl | Liste de bordereaux. Le rafraîchissement est déclenché par la consultation — sans worker, c’est la visite qui met à jour. |
/u/[handle] | max-w-6xl | Profil et boards réunis. Les vendeurs suivis restent privés ; l’adresse e-mail n’est jamais exposée. |
/u/[handle]/[slug] | max-w-6xl | Board en mosaïque façon Pinterest, colonnes CSS. Un board privé répond 404, jamais 403 — un 403 confirmerait son existence. |
/s/[platform]/[externalId] | max-w-6xl | Fiche vendeur : ses articles, son nombre de contrôles. Pas de boards. Un vendeur inconnu obtient une page d’explication en noindex plutôt qu’un 404 sec. |
/account | max-w-2xl | Formulaires empilés. Étroite parce qu’on la remplit, pas parce qu’on la regarde. |
/login · /signup | max-w-md | Une tâche, un champ après l’autre, aucune distraction latérale. |
/bienvenue | max-w-xl | Prise en main d’un compte neuf, en trois écrans : ce que ça fait, l’agent, les alertes. Une décision par écran, chacune passable, aucune irréversible. Reprend le parcours de l’app mobile (A2 → A4) — l’écran d’ouverture y sert à choisir comment se connecter, rôle que /signup tient ici. |
/style | max-w-5xl | Cette page. En noindex : utile à l’équipe, sans intérêt pour un moteur, et elle diluerait le référencement des fiches. |
Règles
Ces règles ne sont pas des préférences graphiques : chacune corrige une erreur déjà commise, ou protège une donnée.
Le bleu n’entre jamais dans un graphique
Il signifie « interactif » partout ailleurs. Une courbe bleue laisserait croire qu’elle porte un sens qu’elle n’a pas.
L’aplat ciel ne porte que de l’encre de nuit
bg-brand-surface va toujours avec text-brand-foreground. Le blanc sur le ciel tombe à 2,8:1 — c’est le piège que la séparation en deux jetons existe pour éviter. Et --brand-pop, le ciel clair, ne porte jamais de texte.
Une baisse est verte, une hausse est rouge
L’inverse d’une place boursière, parce qu’ici on achète. Les jetons de sens ne dépendent pas de l’accent, donc changer la marque ne retourne pas la sémantique.
Aucun compteur n’est arrondi à la hausse
Sur une plateforme jeune, un chiffre gonflé est la première chose qu’un utilisateur vérifie et la première qui le fait partir.
Une donnée illustrative est étiquetée
Un nombre inventé placé dans l’habillage d’une vraie donnée se lit comme une vraie donnée. D’où la pastille « exemple » sur la courbe de démonstration : trois mots contre une promesse fausse.
Une section vide est masquée, jamais remplie
Une étagère sans contenu disparaît plutôt que d’afficher des articles sans rapport pour donner le change.
Les photos de contrôle ne sont jamais réhébergées
Elles restent servies par les agents ; le projet ne stocke que des empreintes. C’est une contrainte juridique et de coût, pas un choix d’affichage — d’où les balises image brutes plutôt que le composant optimisé de Next.
Le mouvement est toujours annulable
Défilements continus, révélations et entrées échelonnées passent tous par la règle globale prefers-reduced-motion. Un mouvement perpétuel est précisément ce que ce réglage vise.
Le focus reste visible
Anneau global sur :focus-visible, en ciel clair. Un composant qui le retire doit fournir un équivalent au moins aussi lisible.