On ne construit pas une marque. On creuse un point d'eau.
Le brand book raconte le pourquoi. Bayou donne le comment : tokens, composants et matières, dérivés d'une seule doctrine — le système centralisé.
Couleurs
Un seul vert, deux états. Le vert de marque structure (≈90 %), le néon signale (≈10 %). Quatre neutres portent tout le reste : le marais (sombre) et le sable (clair). Clique une couleur pour copier son hex.
La règle des deux verts
Rampe croco
Le sable · fonds clairs chauds
sable-100 (#F5EBE3) est l'une des 4 couleurs ratifiées — surfaces éditoriales, emails, print. Le fond de travail par défaut est sable-50, plus clair.
Le marais & l'encre · neutres qui penchent vert
Accents à usage réservé
Feedback sémantique
Règles d'usage couleur
« Les titres parlent, les notes murmurent. » Quand mettre quelle couleur — les six règles qui rendent le système reconnaissable à trois mètres.
Typographie
Display = Bricolage Grotesque (titres, −0.02em). Body = Plus Jakarta Sans. Mono = Red Hat Mono pour la donnée. Un seul niveau d'emphase par écran.
L'échelle · Body en Plus Jakarta Sans
Espacement & grille
Base 4px. Grille 12 colonnes, gutter 24, contenu 1200 (lecture 720). Dense et calme — un cockpit, pas une affiche.
Grille 12 colonnes
Rayons & élévation
Tactile, jamais bulleux. Ombres basses teintées marais ; la lueur néon est réservée au vivant.
Élévation
Motion & l'Œil
Patient, puis décisif. L'ambiant respire (4s) ; l'interaction claque (~130ms, ease-out sec). L'Œil ne s'affiche que réveillé.
Ponctuation de marque
Trois signes rythment la page sans jamais parler plus fort que le contenu : la mâchoire aux bascules dark ⇄ light, les écailles dans les respirations (héros, clôtures), le wordmark fantôme en murmure typographique. L'alternance sombre/clair est un outil de rythme.
La mâchoire · la ligne dentée
Uniquement aux bascules dark ⇄ light. Même ton de part et d'autre = pas de dent. La couleur des dents = la section qui suit ; le fond de la bande = la section au-dessus. Sur cette page, un script pose la mâchoire automatiquement à chaque transition.
Les écailles · scutelles
Une respiration, jamais un papier peint. Les écailles vivent dans le hero et le footer signature, en calque (opacité ≈ .5, pointer-events: none) — elles disparaissent dès que le contenu parle. Pas d'écailles derrière un bloc de texte dense.
Le wordmark fantôme
Le fantôme appartient au système ; la surface ne possède que son emplacement. On pose la primitive <div class="bayou-wm-band"><div class="bayou-watermark">Nom</div></div> : c'est la bande qui recadre le mot et qui tient la règle d'or — elle ne contient RIEN d'autre, donc jamais de texte par-dessus. Un fantôme plus petit (carte, specimen, footer compact) ? La seule variante sanctionnée : bayou-wm-band--sm. Aucune règle CSS locale ne vise .bayou-watermark — sa taille (--wm-size), sa couleur (l'accent de la matière à 14 %), sa graisse et son masque vivent dans tokens/base.css ; c'est par les surcharges locales que la marque dérive. La surface ne garde que la marge autour de la bande. Rare et cadré : fonds sombres, héros/clôtures, un seul par page, et il porte le nom de la surface — « CrocAssist » sur CrocAssist, jamais « Bayou » par défaut. Gate exécutable : règle watermark-owned-by-system.
La signature de fin
Le footer n'est pas une zone de liens : c'est la signature du groupe. Quatre pièces, toujours dans cet ordre — et le logo dépend de ce que porte la surface.
CrocAssist · by Alligators Group · Un business. Un système. Un centre.
Clovis pour les entreprises, l'Œil pour le reste. Une surface qui porte un nom d'entreprise (CrocoClick, CrocAssist, CrocoBrain, CrocoLive, CrocoClub) est logotée Clovis ; le groupe et les outils internes (CrocoTrack, Bayou) portent l'Œil. Le sceau (bayou-seal) ferme toujours la marche : la dent ▽, puis by Alligators Group, puis le slogan — jamais un tiret long. Gate exécutable : règle footer-signature.
Actions · Button & IconButton
Le CTA porte le néon (texte marais), et claque au survol — le snap de mâchoire. Un seul bouton primaire par zone.
Formulaires
Le focus allume l'anneau néon (l'œil qui s'allume). L'erreur est terracotta, jamais rouge.
Surfaces · Card, Badge, Tag
Carte calme par défaut ; carte vivante quand elle porte du néon (donnée à jour, focus). La lueur signale le vivant, jamais la décoration.
Modale · Dialog
Scrim marais + blur, surface xl, snap à l'ouverture. Un seul CTA calme, aligné à droite.
Tableau & données
« Les chiffres du marais » : dense, calme, mono tabulaire. Positif en vert, négatif en terracotta ; la donnée vivante porte le point néon.
| Affilié | Locations | MRR | Churn 90j | Santé |
|---|---|---|---|---|
| Direct | 128 | 8 940 € | ▲ −0.4 pt | vivant |
| @orelsan_reach | 41 | 3 110 € | ▼ +1.2 pt | stable |
| @systeme_pur | 22 | 1 480 € | ▲ −0.8 pt | stable |
| @baptiste.l | 9 | 673 € | — | < 3 loc. |
Feedback & vide
Le loader, c'est l'œil qui s'ouvre. Le vide parle avec la voix du groupe : contre-doxa d'abord, un seul CTA.
Les familles
Une famille, pas des clones. Chaque produit garde le vert famille, le regard de l'Œil et une obsession centrale — puis gagne sa matière et son accent. Chaque carte est rendue dans la sienne.
Les matières · le thème vivant
Le même composant, rendu dans chaque matière. Choisis un thème — la scène se re-skinne, accent et CTA compris. (Le cockpit a fusionné dans God Mode.)