# Bayou — Design System · Alligators Group

> Le brand book raconte le *pourquoi*. Ce design system donne le *comment*, concret et implémentable.
> « Un business. Un système. Un centre. »

Bayou est le socle visuel centralisé du groupe Alligators. Il transforme la doctrine du
brand book v6 (« le point d'eau », « 200 millions d'années d'avance », la règle des deux
verts) en **tokens**, **composants** et **matières** que designers et développeurs
consomment directement.

**Source de vérité :** brand book Bayou v6 (le *pourquoi*) — `brand-book.html` ; et surtout,
pour le design system (le *comment*), la vitrine complète `bayou.html` (hero, mâchoire,
menu, footer, familles, matières vivantes, l'Œil animé). `styles.css` en est l'entrée unique.
(pas de codebase ni de Figma fournis pour ce chantier : le système est dérivé de ces documents.)

---

## Contexte produit

L'Alligators Group édite une famille de produits « Croco- » autour d'une seule thèse : le
**système centralisé**. Chaque produit se présente comme « le centre de quelque chose ».

| Produit | Rôle | Matière (thème) |
|---|---|---|
| **CrocoClick** | Vaisseau amiral | `bayou-crococlick` — électrique, blanc + marais + néon |
| **CrocoForge** | La voix éditoriale (machine à contenu) | `bayou-crocoforge` — sable, encre, vert classique |
| **CrocoClub · AES** | Communauté de l'Accélérateur | `bayou-crococlub` — feu de camp, accent bleu-vert |
| **CrocoBrain** | Le sage (IA) | `bayou-crocobrain` — papier chaud, violet IA |
| **CrocAssist** | Réseau d'intégrateurs | `bayou-crocassist` — blanc chaud, accent soleil |
| **CrocoLive** | Live & webinaires | `bayou-live` — plateau sombre, rouge « on air » |
| **CrocoTools / AES + cockpit interne** | Labo IA · dark officiel | `bayou-godmode` — noir + néon + grille (CrocoTrack/Forge vivent ici) |
| **CrocoLive** | Live & webinaires | `bayou-live` — plateau sombre, rouge « on air » |
| **Baptiste Lorreyte** | Marque perso (à part) | `bayou-baptiste` — dark néon multicolore |

Le cœur transverse (tokens sémantiques + composants) est **neutre / clair éditorial** ;
chaque matière ne surcharge qu'une poignée d'alias. Les composants ne lisent QUE les alias
sémantiques → ils héritent automatiquement de la matière du conteneur.

---

## CONTENT FUNDAMENTALS — comment on écrit

Voix = **Carnegie** (l'intérêt sincère) + **Sutherland** (le recadrage drôle) + **Orelsan**
(le rythme oral). Chaque surface règle son « pourcentage de Sutherland » : sobre côté
CrocoBrain/emails, joueur côté Instagram/Clovis.

**Invariants (partout) :**
- **Tutoiement complet** — « tu as », jamais « vous ».
- **Phrases courtes**, une idée par contenu.
- **Contre-doxa d'abord** : on nomme l'idée reçue, puis on la retourne.
- **La preuve avant la promesse** ; le logiciel n'est jamais le héros.
- **Un seul CTA calme** par surface.
- **Pas d'emoji en ouverture**, pas d'emoji décoratif (hors surfaces fun / Clovis).

**Casse & type de copy :** titres en phrase courte affirmative (« Le centre de ton
business. »), labels techniques en mono minuscules, eyebrows en mono capitales espacées.

**Kill-list** (mots qui cachent le manque d'idée) : game-changer, révolutionnaire,
optimiser, crucial, synergie, levier, incontournable, booster, sans effort,
emoji en ouverture, « t'as / t'es » à l'écrit formel.

**Anti AI-slop** — les tics du texte généré sont des interdits au même titre que la
kill-list : « il ne s'agit pas seulement de… », « pas qu'un simple… », « n'a jamais été
aussi simple », « libérer ton potentiel », « dans un monde où… », « c'est là que X entre
en jeu », « dites adieu à… », « en toute simplicité », la fausse question rhétorique
(« La bonne nouvelle ? »), et le **tiret long (—)** : signature n°1 du texte généré —
deux-points, parenthèses ou deux phrases courtes à la place. Le texte entre « guillemets »
est une parole citée, exemptée : un témoignage client peut vouvoyer.

- ❌ « Une nouvelle fonctionnalité a été lancée pour améliorer votre efficacité. » (corporate passif)
- ✅ « On vient de sortir un petit fix qui rend des heures à ton équipe chaque semaine. »

**Taglines** (patron « monogame » — une promesse comportementale par produit) :
« 200 millions d'années d'avance. » (groupe) · « Le logiciel qui va te rendre monogame. »
(CrocoClick) · « Le cerveau qui ose te contredire. » (CrocoBrain).

**L'étalon-or** : le corpus approuvé [`voice/few-shots.md`](voice/few-shots.md) — des
paires ❌/✅ par surface (tagline, hero, LinkedIn, Instagram/Clovis, email, UI copy, CTA)
avec le curseur Sutherland de chacune. `bayou_check_copy` attrape les interdits et renvoie
la rubrique de jugement (contre-doxa, preuve avant promesse, CTA unique, rythme) : c'est
la relecture contre les few-shots qui valide la voix, pas le PASS mécanique.

---

## VISUAL FOUNDATIONS

**Couleur.** Un seul vert, deux états : `--croco-500 #05AB45` porte la marque (≈90 % de la
surface), `--croco-neon #00EB79` porte l'attention (≈10 %, **jamais en aplat** — glow, focus,
donnée vivante). Fonds : `sable` (clair chaud) et `marais-950` (sombre signature). Neutres
qui penchent vert (`encre`). Accents à usage **réservé** : `tension` terracotta (danger — la
tension n'est jamais rouge), `sun` (CrocAssist), `ia` violet (CrocoBrain), `live` rouge
(CrocoLive uniquement). Le cœur n'a **pas de rouge** : `--danger` = terracotta.

**Type.** Display = **Bricolage Grotesque** 600–800, tracking −0.02em, titres/wordmarks/
chiffres héros, jamais en corps. Body = **Plus Jakarta Sans** — base **15px regular** ; règle de
graisse : **≥15px regular, ≥16px medium (500)** pour compenser la légèreté de Plus Jakarta en
grand, **sauf** en `--text-subtitle` (encre-500) qui reste regular. Mono = **Red Hat Mono**,
tabular-nums, pour la donnée.
« Les titres parlent, les notes murmurent » : un seul niveau d'emphase par écran. Règle
d'usage : display + sous-titre → le sous-titre passe en `--text-subtitle` (encre-500).
Les **héros** partagent un token unique responsive `--display-hero` (`clamp(40–60px)`) — tous les
H1 de hero (brand book, design system) s'y branchent pour rester cohérents.

**Espacement & layout.** Base 4px. Grille 12 colonnes, gutter 24, contenu 1200 (lecture 720).
Surface volontairement dense et calme (un cockpit, pas une affiche).

**Rayons.** Contrôles 10px, cartes 14px, modales 20px, capsules 999px. Tactile, jamais bulleux.

**Ombres & lueur.** Ombres basses **teintées marais** (`rgba(1,13,11,…)`), calmes. La **lueur
néon** (`--glow-neon`) est réservée au vivant (focus, enregistrement, donnée à jour) — jamais
décorative. Focus ring = néon (« l'œil qui s'allume ») ; il devient violet/soleil/rouge selon
la matière.

**Cartes.** Fond `--surface-card`, bordure `--border-subtle`, `--shadow-2`, coins 14px.
Interactives : montent de 2px au survol + `--shadow-3`. Vivantes : `glow` néon.

**Motion.** « Patient, puis décisif. » Ambiant lent (respirations 4s, `bayou-breathe`).
Interaction sèche (~130ms, `--ease-snap` — le snap de mâchoire) : montée +2px puis retour à
plat. **Aucun bounce mou.** `prefers-reduced-motion` coupe tout.

**CTA.** Le bouton d'action porte le **néon** (fond `--cta-bg`, texte marais `--cta-text`) —
exception sanctionnée à « jamais en aplat ». Chaque matière remplace le néon par SON accent
(violet IA, soleil CrocAssist, rouge CrocoLive…).

**Ponctuation de marque.** La **mâchoire** (`bayou-teeth`) marque les transitions dark ⇄ light
entre sections ; les **écailles/scutelles** (`bayou-scales`) marquent les respirations (héros,
clôtures) — jamais un papier peint. Le **wordmark fantôme** (`bayou-watermark`) est le murmure à
l'échelle typo : le mot-marque géant qui se dissout (masque de dégradé), RARE — fonds sombres,
clôtures/héros, un seul par page, derrière le contenu. L'alternance sombre/clair est un outil de
rythme.

**La signature de fin.** Le footer n'est pas une zone de liens : c'est la signature du groupe.
Toute surface se termine par les **quatre pièces**, dans cet ordre :
1. **Le logo** — **Clovis** si la surface porte un nom d'entreprise (CrocoClick, CrocAssist,
   CrocoBrain, CrocoLive, CrocoClub), **l'Œil** pour le groupe et les outils internes (voir la
   règle logo en ICONOGRAPHY). Jamais l'Œil sur un footer de produit-entreprise.
2. **La baseline** — une phrase display deux-tons, l'emphase sur `--accent`.
3. **Le wordmark fantôme** (`bayou-watermark`) — au **nom de la surface** (« CrocAssist » sur
   CrocAssist), jamais « Bayou » par défaut : il se dissout dans sa propre bande et prend la
   couleur de la matière.
4. **Le sceau** (`bayou-seal`) — la **dent** (▽, une dent de la mâchoire pointe en bas : le
   sceau du groupe), puis `Nom · by Alligators Group · Un business. Un système. Un centre.`
   Séparateur = point médian, jamais un tiret long. L'attribution **by Alligators Group** et le
   slogan ne sautent jamais : c'est ce qui rattache le produit au point d'eau.

**Toujours sur fond sombre**, écailles en calque : c'est la condition des écailles et du
wordmark fantôme. La classe `bayou-footer` pose ce sol marais ; la **matière du produit** garde
la main sur `--accent`. Une matière claire (CrocAssist, CrocoBrain…) garde donc SON accent sur
un footer sombre : `<footer class="bayou-crocassist bayou-footer">`.
Gabarit copiable : `guidelines/brand-footer.card.html` (les deux variantes, produit et groupe).

**Hover / press.** Hover : montée 2px + (primary) lueur néon / (secondary) bordure verte /
(ghost) fond `--surface-hover`. Press : retour à `translateY(0)`, immédiat.

**Transparence & blur.** Réservés au scrim de modale (marais 55 % + blur 2px) et aux surfaces
sombres (bordures en `rgba` néon/blanc). Pas de glassmorphism décoratif.

**Imagerie.** « L'image est une preuve » : vraies captures, vrais comptes, vrais visages. Pas
de stock générique, pas de mockup menteur. Là où une image manque, utiliser un placeholder
sobre + explication mono, jamais un dégradé décoratif.

---

## ICONOGRAPHY

- **Set d'icônes : Lucide** (trait 2px, géométrique, arrondi) — **substitution assumée** : le
  brand book ne fixe pas de librairie d'icônes. Lucide colle au trait calme et géométrique du
  système. Chargé via CDN dans les cartes (`unpkg.com/lucide`). ⚠️ À valider / remplacer si le
  groupe possède déjà un set maison.
- **L'Œil** est la marque géométrique : une **amande à pupille verticale** néon (reprise fidèle du
  brand book v6). Fournie en asset : `assets/eye-neon.svg` (éveillé), `assets/eye-active.svg`
  (**actif — il regarde**, animation embarquée : utilisable tel quel en `<img>`) et
  `assets/eye-resting.svg` (au repos). L'Œil est la marque des surfaces **hors nom d'entreprise**
  (groupe, outils internes) et reste la marque **fonctionnelle** partout : favicon, loader (l'œil
  qui s'ouvre — il cligne + pulse), point de statut « vivant ». Pour les logos d'entreprise, c'est
  **Clovis** (voir la règle logo ci-dessous). Un illustrateur pourra l'affiner, mais la forme est
  arrêtée.
- **L'Œil ISOLÉ regarde ; l'Œil accolé se contente de pulser.** Posé seul — hero, page de garde,
  écran d'auth, hub — il n'a rien à côté de lui pour dire que le système est vivant : c'est le
  **regard** qui le dit. Il prend alors l'état **actif** : la pupille balaie droite → gauche →
  centre, puis cligne (`bayou-look`, 4.2s, `--ease-snap`), le halo continuant de pulser sur le
  `<svg>` (`bayou-eyepulse`). Dès qu'il **coiffe un titre ou se pose à côté d'un wordmark**
  (footer signature, navbar, lockup), il redevient **éveillé** — pulse seul : le texte porte déjà
  le message, deux mouvements se disputeraient l'œil du lecteur. En inline, on enveloppe iris +
  pupille dans un `<g class="lid">` et on anime ce groupe (`transform-origin: 100px 60px`) ;
  en `<img>`, on sert `assets/eye-active.svg`, qui embarque son animation et son garde
  `prefers-reduced-motion` (les tokens de la page ne cascadent pas dans un SVG embarqué).
- **Clovis** (mascotte cartoon) : **fourni** — `assets/clovis-head.png` (tête de croco +
  engrenage : les systèmes + le fun). Asset original à forte valeur sentimentale : **on ne le
  redessine pas**. Roi des surfaces fun (onboarding, empty states, Instagram, CrocoClub).
- **Les glyphes alchimiques sont des ASSETS DE MARQUE**, pas des puces. Fournis en SVG
  (`assets/glyph-air.svg` · `glyph-feu.svg` · `glyph-eau.svg` · `glyph-terre.svg`, trait 1.9,
  `currentColor` → ils suivent la matière). Ils portent les quatre valeurs — Air 🜁 Liberté,
  Feu 🜂 Ambition, Eau 🜄 Transparence, Terre 🜃 Unité — et restent **réservés au registre
  corporate** (brand book, page groupe, deck), jamais à l'UI produit.
- **La TERRE (🜃) est le sceau du groupe** — et à ce titre elle est un asset de marque au même
  rang que l'Œil et Clovis. C'est elle qui ouvre la dernière ligne de chaque surface
  (`bayou-seal`, cf. §ADHÉRENCE #10), parce qu'elle dit exactement ce que dit le slogan :
  l'unité, tout converge au même endroit. **Ne jamais signer avec l'Eau** (▽ sans barre) : la
  transparence est une valeur, pas une signature. Le sceau n'est pas non plus « une dent de la
  mâchoire » — c'est un contresens qui a circulé, il est mort.
- **Pas d'emoji** dans l'UI (hors surfaces fun / Clovis).
- **Logo — la règle : Clovis pour les entreprises, l'Œil pour le reste.** Les **produits-
  entreprises** (CrocoBrain, CrocoLive, CrocoClick, CrocoClub, CrocAssist) portent **Clovis**
  comme marque de logo (`assets/clovis-head.png`, ou le wordmark complet
  `assets/crococlick-logo.png`). Les surfaces **hors nom d'entreprise** — outils internes
  (CrocoTrack, CrocoTools) et le **groupe** Alligators/Bayou — portent **l'Œil**. Ne jamais
  reconstruire un logo à la main.
- **Le lockup — la tête se proportionne au nom, elle ne se dimensionne pas.** Dès que la marque
  (Clovis ou l'Œil) se pose **à côté d'un wordmark**, la proportion appartient au système. Elle
  est **mesurée sur `assets/crococlick-logo.png`**, le lockup de référence : **tête = 1,68 × la
  hauteur de capitale du mot**, **écart = 0,17 × cette capitale**. Une seule primitive la porte,
  en `em`, à toute échelle : **`bayou-lockup`** (`tokens/base.css`). Le seul réglage laissé à la
  surface est le `font-size` **du conteneur**. Une tête posée en **px** dérive dès que le wordmark
  change de corps — c'est **la faute du lockup CrocAssist**, où la tête finit à 2,4 × la capitale
  et avale le nom. Specimen : `guidelines/brand-lockup.card.html`. Gate : `lockup-needs-primitive`.

---

## INDEX — manifeste

**Entrée globale :** `styles.css` (uniquement des `@import`).

**Tokens** (`tokens/`) : `fonts.css` · `colors.css` (palette SSOT) · `typography.css` ·
`spacing.css` · `radii.css` · `elevation.css` · `motion.css` · `semantic.css` (le cœur, alias)
· `themes.css` (les 7 matières) · `base.css` (reset + helpers de type).

**Composants** (`components/`) :
- `actions/` — **Button**, **IconButton**
- `forms/` — **Input**, **Select**, **Choice** (Checkbox · Radio · Switch)
- `surfaces/` — **Card** (+ CardHeader/Footer), **Badge**, **Tag**
- `overlays/` — **Dialog**
- `navigation/` — **Tabs**, **Navbar**
- `data/` — **Table** (+ Delta)
- `feedback/` — **Loader** (l'Œil), **Spinner**, **EmptyState** (+ RestingEye)

**Specimens** (`guidelines/*.card.html`) : cartes de l'onglet Design System (Colors, Type,
Spacing, Brand). Côté **Brand** : l'Œil (éveillé/loader/actif/spinner/repos), **les glyphes &
le sceau** (les quatre valeurs + la Terre qui signe), les matières (deux-tons + CTA accent),
Clovis, la mâchoire (séparateurs dentés), le hero, le footer signature, le menu (sidebar).
`_swatches.js` = helper clic-pour-copier.

**Assets de marque** (`assets/`, fournis — **on ne les redessine pas**) : `eye-neon.svg` /
`eye-active.svg` / `eye-resting.svg` (l'Œil — éveillé / actif / au repos ; **isolé, on sert
l'actif**), `clovis-head.png` + `crococlick-logo.png` (Clovis), et les quatre
glyphes `glyph-air.svg` · `glyph-feu.svg` · `glyph-eau.svg` · `glyph-terre.svg` — **la Terre
étant le sceau du groupe**, à égalité de rang avec l'Œil et Clovis.

**Pages de référence** (racine, non compilées) : `bayou.html` (vitrine du design system —
la référence visuelle), `brand-book.html` (le pourquoi), `clovis-explorations.html` /
`clovis-nouveaux.html` (recherches mascotte).
`templates/brand-book/` est **dérivé** de `brand-book.html`, jamais édité à la main :
`npm run sync:templates` le régénère (seuls les chemins relatifs changent). Une copie tenue
à la main diverge — on corrige la source, on oublie le gabarit, et les projets consommateurs
partent de la version périmée.

**UI kits** (`ui_kits/`, vitrines dans l'onglet Design System) :
- `crocotrack/` — le **cockpit** God Mode (dark néon) : sidebar, KPIs, MRR, table affiliés, flux vivant.
- `crococlick/` — la **landing** vaisseau amiral (matière électrique claire) : hero marais, mâchoire, comparaison honnête, un seul CTA.

**Slides** (`slides/`, groupe « Slides » — 1280×720) : titre, section, contenu, citation,
données. Reprennent les motifs (hero marais, mâchoire, titres deux-tons, chiffres du marais).

**Templates** (`templates/`, copiables par les projets consommateurs) : `crococlick-landing/`
— version prête-à-partir de l'UI kit landing ; `brand-book/` — page éditoriale long-format
(manifeste, Open Startup) : sidebar TOC, sections alternées clair/sombre séparées par la
mâchoire, footer à wordmark fantôme.

**Intentional additions** (au-delà du brand book) : jeu complet de tokens (espacement, radii,
élévation, motion), tokens de feedback sémantique (success/warning/danger/info), et la
librairie de composants — le brand book ne les précisait pas. `Navbar` ajoute un en-tête
produit type ; l'iconographie Lucide comble l'absence de set maison.

**Caveats :** fonts servies par CDN (Bricolage Grotesque, Plus Jakarta Sans, Red Hat Mono —
tous Google Fonts). General Sans et Avenir Next abandonnées. Clovis et le logo CrocoClick sont
fournis en assets. Le set d'icônes Lucide est une substitution à confirmer.

## ADHÉRENCE — le contrat (à respecter sur chaque écran)

Toute surface Bayou tire ses valeurs des **tokens** ; elle n'invente jamais un hex, une taille
ou un rayon. La checklist :

1. **Couleur** — jamais de hex brut : uniquement les alias sémantiques (`--brand`, `--surface-*`,
   `--text-*`, `--accent`). Le composant hérite ainsi de la matière.
2. **Les deux verts, 90/10** — `--brand` structure, `--accent` néon signale le vivant. Le néon
   n'est jamais un aplat décoratif (l'exception sanctionnée : le **CTA**, via `--cta-*`).
3. **Emphase display** — sur fond clair = vert de marque (`--brand-text`) ; sur fond **sombre** =
   **néon** (`--accent`). L'**eyebrow n'est jamais néon**, nulle part (ni son texte, ni sa barre) :
   sur fond sombre elle passe en `--croco-300`, lisible. Le néon est réservé au **titre** — si
   l'eyebrow brille aussi, plus rien ne brille.
4. **Danger = terracotta**, jamais rouge. Le vrai rouge (#F04438) est réservé au thème CrocoLive.
5. **Type** — H1 de héro = `--display-hero` (source unique). Corps ≤15px regular, ≥16px medium,
   sauf `--text-subtitle` (encre-500) qui reste regular. Display = Bricolage, jamais en corps.
6. **Rayons** — boutons/contrôles = `--radius-control` (10px), cartes = `--radius-card` (14px),
   modales = `--radius-modal`. La capsule (`--radius-pill`) est réservée badges/pills, pas aux CTA.
7. **Motion** — hover monte (+2px), clic **enfonce** (`translateY(+2px) scale(.97)`, ~70ms), sans
   bounce. Ambiant = respiration 4s.
8. **Ponctuation** — scutelles (`bayou-scales`) : fonds sombres, héros/clôtures seulement. La
   mâchoire (`bayou-teeth`) uniquement aux bascules dark ⇄ light.
   Le **wordmark fantôme appartient au système**, pas à la surface. Il vit dans SA bande —
   `<div class="bayou-wm-band"><div class="bayou-watermark">Nom</div></div>` — qui ne contient
   **rien d'autre** : c'est elle qui garantit mécaniquement la règle d'or « jamais de texte ni
   d'élément par-dessus ». Sa couleur (`--accent` à 14 %), sa graisse, son masque de dissolution
   et sa taille (`--wm-size`) sont définis une fois dans `tokens/base.css`. **Aucune règle CSS
   locale ne doit viser `.bayou-watermark`** : c'est par ces surcharges (« juste un font-size »)
   que la couleur et la taille se mettent à diverger d'une surface à l'autre. Un seul réglage est
   sanctionné, pour les cartes/specimens/footers compacts : `bayou-wm-band--sm`. Il porte le
   **nom de la surface** (« CrocAssist » sur CrocAssist), jamais « Bayou » par défaut, et reste
   **rare** : fonds sombres, héros/clôtures, un seul par page. Gates : `watermark-needs-band`,
   `watermark-no-overlay`, `watermark-owned-by-system`.
9. **Signature de fin** — le pied de page **d'une page** (`<footer>` et/ou la primitive de sol
   `bayou-footer` — pas un `.foot` interne à une modale ou à une slide) porte les quatre pièces,
   dans cet ordre : logo (**Clovis**
   si nom d'entreprise, l'**Œil** sinon), baseline, wordmark fantôme **au nom de la surface**, et
   le sceau `bayou-seal`. Le sceau, c'est le glyphe de la **TERRE (🜃)** — triangle pointe en bas,
   **barré** — suivi de `by Alligators Group` + le slogan. La Terre, c'est l'**Unité** : le glyphe
   et le slogan disent la même chose, d'où la même ligne. **Jamais l'Eau** (▽ sans barre : c'est la
   Transparence, une valeur, pas une signature), et ce n'est pas non plus « une dent de la
   mâchoire » — ce contresens a circulé, il est mort. Gabarit :
   `guidelines/brand-footer.card.html`. Gate exécutable : règle `footer-signature`.
10. **Le lockup** — Clovis posé **à côté du nom** ne se *dimensionne* pas, il se **proportionne**.
    La proportion appartient au système : elle est **mesurée sur le logo officiel**
    (`assets/crococlick-logo.png`, qui fait loi), pas décidée — **tête = 1,68 × la hauteur de
    capitale du wordmark**, **écart = 0,17 × cette capitale**. Elle vit en `em`, donc le lockup
    tient d'une nav en 18px à un hero en 64px sans qu'on y retouche. Pose la primitive, elle porte
    tout : `<a class="bayou-lockup" style="font-size:18px"><img src="assets/clovis-head.png"
    alt=""><b>Croco<em>Click</em></b></a>`. Le **seul** réglage de la surface est le `font-size`
    **du conteneur** — c'est lui qui donne son `em` au mot **et** à la tête. Deux fautes, toutes
    deux silencieuses : (a) une tête en **px** (`width: 30px`) ne suit plus le mot — le corps
    change, la tête reste, et on obtient le **lockup raté de CrocAssist** (tête à 2,4 × la
    capitale : le croco avale son propre nom) ; (b) reposer un `font-size` **sur le wordmark**
    désolidarise le mot de la tête, puisque l'`em` de la tête se résout sur le **conteneur**.
    Specimen : `guidelines/brand-lockup.card.html`. Gates : `lockup-needs-primitive`,
    `lockup-owned-by-system`.
11. **Voix** — tutoiement, phrases courtes, contre-doxa d'abord, un seul CTA calme, kill-list.

> **Partage :** pour que l'équipe voie ce système, règle le type de fichier sur
> **Design System** dans le menu Partager.