---
name: bayou-design
description: Use this skill to generate well-branded interfaces and assets for the Alligators Group (Bayou design system — CrocoClick, CrocoBrain, CrocoLive, CrocAssist, CrocoTrack…), either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, tokens, and UI components for prototyping the "point d'eau" / système centralisé brand.
user-invocable: true
---

Read `readme.md` first — it holds the full doctrine (voix, foundations, iconography) and the
manifest of what's here. Then explore the other files as needed.

**How the system is built**
- `styles.css` is the single entry point (only `@import`s). Link it once and every token +
  webfont is available.
- Tokens live in `tokens/`. Components read ONLY semantic aliases (`--brand`, `--surface-card`,
  `--text-strong`, `--accent`…), never raw hexes — so they inherit the active *matière*.
- The product themes (*matières*) are classes in `tokens/themes.css`
  (`bayou-crococlick`, `bayou-crocoforge`, `bayou-crocobrain`, `bayou-crocassist`,
  `bayou-crococlub`, `bayou-godmode`, `bayou-live`, `bayou-baptiste`). Wrap any subtree in one
  and it re-skins itself — each matière is self-contained (surfaces AND text). (The old
  `bayou-cockpit` was merged into `bayou-godmode`; `bayou-blog` is now `bayou-crocoforge`.)

**Non-negotiable brand rules**
- Two greens, 90/10: `--brand` (#05AB45) structures; `--accent` neon (#00EB79) signals the
  *living* (focus, recording, fresh data). The **CTA** carries the neon fill with marais text
  (`--cta-bg` / `--cta-text`); each *matière* swaps the neon for its own accent.
- Danger is terracotta, not red. True red (#F04438) is reserved to the CrocoLive theme.
- Display = Bricolage Grotesque (titles only, −0.02em); body = Plus Jakarta Sans; data = Red Hat
  Mono (tabular). One level of emphasis per screen; display + subtitle → subtitle in encre-500.
- Motion: ambient slow (4s breathe), interaction snap (~130ms ease-out, no bounce).
- Voice: tutoiement, short sentences, counter-doxa first, proof before promise, one calm CTA.
  Respect the kill-list AND the anti AI-slop interdicts in readme.md (no "il ne s'agit pas
  seulement de", no "libérer ton potentiel", no em dash, no fake rhetorical questions).
  Before writing copy, read the approved ❌/✅ corpus: `voice/few-shots.md` — it sets the
  Sutherland dial per surface and is the gold standard the checker can't measure.
- **Logo — Clovis for companies, l'Œil for the rest.** A surface carrying a *company* name
  (CrocoClick, CrocAssist, CrocoBrain, CrocoLive, CrocoClub) is logo'd with **Clovis**
  (`assets/clovis-head.png`). The **group** (Alligators, Bayou) and **internal tools**
  (CrocoTrack, CrocoTools) carry **l'Œil** (`assets/eye-neon.svg`). Never draw either from
  scratch, and never put l'Œil on a product-company footer.
- **A LONE eye LOOKS; an attached eye only pulses.** Standing on its own — hero, cover, auth
  screen, hub — l'Œil takes the **active** state: the pupil sweeps right → left → centre, then
  blinks (`bayou-look`, 4.2s, `--ease-snap`), the halo still pulsing on the `<svg>`
  (`bayou-eyepulse`). The moment it **caps a title or sits beside a wordmark** (footer signature,
  navbar, lockup) it goes back to **awake** — pulse only: the text already carries the message,
  two motions would fight for the reader. Inline, wrap iris + pupil in a `<g class="lid">` and
  animate that group (`transform-origin: 100px 60px`). As an `<img>`, serve
  `assets/eye-active.svg` — it ships its own animation and `prefers-reduced-motion` guard (page
  tokens do not cascade into an embedded SVG).
- **The lockup — the head is PROPORTIONED to the wordmark, never sized in px.** The moment the
  mark sits *next to* a name, the proportion belongs to the system. It is **measured on the
  official logo** (`assets/crococlick-logo.png`, which is the law), not chosen: **head = 1.68 ×
  the wordmark's CAP-HEIGHT**, **gap = 0.17 × that cap-height**. One primitive carries it, in
  `em`, at every scale — **`bayou-lockup`**:
  `<a class="bayou-lockup" style="font-size:18px"><img src="assets/clovis-head.png" alt=""><b>Croco<em>Click</em></b></a>`
  The **only** knob a surface gets is the `font-size` **on the container** — it is what gives its
  `em` to both the word and the head. Two silent ways to break it: (a) a head in **px**
  (`width: 30px`) stops tracking the word — change the wordmark's size and the head stays put,
  which is exactly **the broken CrocAssist lockup** (head at 2.4 × cap-height, swallowing the
  name); (b) re-setting `font-size` **on the wordmark** decouples word from head, because the
  head's `em` resolves against the *container*. Specimen: `guidelines/brand-lockup.card.html`.
  Enforced by `lockup-needs-primitive` and `lockup-owned-by-system`.
- **Every surface ends with the signature de fin** — four pieces, in order: the logo (per the
  rule above), a two-tone display baseline, the ghost wordmark (`bayou-watermark`) bearing **the
  name of THIS surface** (« CrocAssist » on CrocAssist — never « Bayou » by default), and the
  seal: `<p class="bayou-seal">Nom · by Alligators Group · Un business. Un système. Un centre.</p>`
  — the ▽ tooth, the attribution and the slogan are never dropped. Copy the template:
  `guidelines/brand-footer.card.html`. Enforced by the `footer-signature` adherence rule.

**When invoked**
If building visual artifacts (slides, mocks, throwaway prototypes): copy the assets you need
and produce static HTML that links `styles.css`. If working in production code: copy assets
and read the rules here to design on-brand.

If invoked with no other guidance, ask what they want to build, ask a few focused questions,
then act as an expert designer who outputs HTML artifacts or production code as needed.