02 — Lexique design (Adrien → rendu)

Un terme d’Adrien = un rendu précis et déterministe, sorti d’un coup. Le lexique encode des structures et gestes (cross-projet) ; les valeurs (couleurs, radius, polices, conteneur) se branchent TOUJOURS sur la charte du projet actif — jamais importées d’un autre.

Protocole

Adrien parle court, Claude traduit. Adrien dit le mot court (« bloc gauche/droite », « CTA cards ») ; c’est Claude qui écrit le Tailwind verbeux. Tout combo verbeux récurrent → on lui donne un nom court (nouvelle entrée).
Alias multiples : un même item peut avoir plusieurs noms. Toutes les variantes → même rendu. Format : nom principal (alias : …).
Vivant : enrichi à chaque échange. Nouveau pattern → on le baptise. Les noms sont une v1, à renommer avec le vocabulaire d’Adrien.

1. Blocs / sections (structures)

hero photo plein écran → section 100vh qui bleed sous le header, photo object-cover + scrim ~40 %, triplet eyebrow+titre+sous-titre centré, nav header inversée tant qu’on n’a pas scrollé.
hero bento → header 2 colonnes (eyebrow+titre / sous-titre+CTA, justify-between) + bento d’images dessous. Toujours dans la flottaison.
CTA cards (alias : callout cards, cartes CTA) → N cartes encre, question/titre centré en haut + bouton tertiary en bas (space-between), hover-flip accent.
bloc performance → header gauche pinné (sticky) + contenu à droite qui scrolle ; le header suivant prend la place quand la section finit.
galerie sticky → bloc performance appliqué à des portraits/cartes.
timeline → jalons sur une ligne tracée au scroll (scrub : trait qui se remplit, pastilles + texte qui s’allument).
teaser → bloc court qui ponte vers une autre page (triplet + bouton + média).
bento (générique) → grande image + colonne de petites, gap serré, radius charte.
bandeau logos → strip horizontal de logos.

2. Gestes / règles (transversaux, non négociables)

geste italique → dernier mot (ou mot-clé) de tout titre en italique léger. Jamais un titre tout roman nu.
flottaison → le hero tient entièrement dans l’écran (≤ 100svh − header), vérif mesurée.
triplet header → eyebrow + titre + sous-titre groupés, jamais séparés en deux colonnes.
pin / sticky → colonne/header fixe pendant le scroll voisin.
hover-flip accent → au survol, fond en accent + texte/bouton en encre.
alternance des tons → sections alternant papier / papier-2, jamais deux mêmes tons adjacents.
eyebrow / bouton canonique → tag de section signature / système de bouton unique. Jamais d’ad hoc.

3. Layout / alignement

hor = horizontal, vert = vertical (en contexte layout — pas la couleur). Qualifie aussi un flex : flex hor = flex-row, flex vert = flex-col.
eb = eyebrow ; col = colonne (grille 12). « s’arrête à la 4 col » = lg:col-span-4.
⭐ TOUT SNAPPE SUR LA GRILLE 12 — RIEN DANS LES GUTTERS : chaque bord tombe pile sur une ligne de colonne. Cards et blocs texte = colonnes pleines (spans entiers), pas de max-w/mx-auto arbitraire. Construire en grid-cols-12 + col-span-*/col-start-*. Vérif à l’overlay grille (touche G).
« A à gauche, B à droite » (alias : aux extrémités, collés aux bords) → max-width + justify-between, les deux blocs huggent les bords opposés. À distinguer d’un grid à colonnes fixes.
GAP jamais arbitraire → toujours le gutter de la grille du projet (gap-[var(--gutter)]), jamais gap-4/clamp au pif.

4. Vocabulaire Webflow → Tailwind (Adrien parle Webflow)

Adrien vient de Webflow ; son lexique layout = le Style panel Webflow (mapping 1:1 sur flexbox/grid/box-model). Il peut parler 100 % technique Webflow. Repères :

Display : Block→block · Flex→flex · Grid→grid · None→hidden.
Direction : horizontal→flex-row · vertical→flex-col.
Align : Space between→justify-between · Center→…-center · Start/End→…-start/…-end.
Spacing/Size : m/p{t,r,b,l}-…, w-/h-/min-/max-. Position : static/relative/absolute/fixed/sticky + offsets.
Container Webflow = notre .wrap (wrapper centré max-width).

5. Couleurs / tokens — branchés sur la charte du projet

Le lexique nomme les rôles ; les hex viennent du brand du projet (reference_{projet}_brand). Ne jamais réutiliser les tokens d’un autre projet.

6. Verbes d’action

reprends [X] → reproduis la structure de X à l’identique, habillée charte. Si X = une réf externe, « reprends » implique « dissèque » d’abord (extraire avant de reproduire — c’est le même flux, dissèque en est la 1re moitié). Si X = notre propre code, je relis le composant existant.
dissèque [URL] → l’étape d’extraction (DOM + computed styles au browser MCP, specs auditables) qui précède un « reprends » sur une réf. Jamais à l’œil.
« comme la home / le bloc valeurs » → pointe un rendu existant comme gabarit ; le relire avant de reproduire. Si c’est le MÊME bloc → il devient un composant réutilisable (factorisé, réutilisé tel quel). Sinon → reprendre le bloc et l’adapter au contenu ciblé.
remonte au nouveau langage → applique les gestes raffinés récents à une section restée dans l’ancien registre.
compacte → réduis pour tenir (flottaison / espace imposé). varie → casse l’uniformité.