tmj-90/brand

Établir ou auditer la marque

Une usine qui livre une interface sans marque livre des templates. Cette compétence donne au produit une identité spécifique — visuelle et verbale — ou audite et étend celle qu'il possède déjà, et la consigne dans un formulaire que les agents de livraison peuvent consommer : BRAND.md plus des tokens. Elle possède l'identité (direction, palette, association typographique, voix). La structure des tokens appartient à la compétence design-system ; l'exécution de surface à la compétence frontend-design.

Profondeur	Référence
Niveaux de palette, tokens oklch, contraste, appariement typographique et échelle fluide	references/color-and-typography.md
Spectres vocaux, traits, hiérarchie des messages, liste de contrôle de cohérence	references/voice-and-messaging.md

Étapes

1. Détecter. Appelez search_lore pour la marque, le positionnement, la voix et les ADR de design. Dans le dépôt, recherchez BRAND.md, DESIGN.md, les fichiers de tokens (*.tokens.json, tokens.css, theme.ts), un bloc :root de propriétés personnalisées, les assets du logo et les textes marketing. Lisez le README du produit et le ticket pour connaître le public cible et l'objectif. Décidez : une marque existe-t-elle ?

2. Marque existante → auditer et étendre dans son idiome. Ne la remplacez pas par votre goût.

   • Évaluez-la par rapport aux qualités requises (étape 4) et à la liste interdite ci-dessous ; nommez chaque écart avec le fichier et la valeur.
   • Mesurez chaque paire texte/fond que la marque utilise, dans chaque thème, par rapport au contraste WCAG (4,5:1 pour le corps de texte, 3:1 pour les gros textes et l'interface) — calculez le ratio ; la luminosité oklch n'est pas un ratio de contraste. Une couleur de marque qui échoue en tant que texte reçoit une variante plus foncée et sécurisée pour le texte, pas une dérogation.
   • Comblez les lacunes de la direction existante : niveaux hover/actif, un niveau de surface manquant, une variante sombre, un accent sécurisé pour le texte, des rôles sémantiques manquants.

3. Pas de marque → s'engager sur une direction et expliquez pourquoi elle convient à ce produit et à son public : éditorial/magazine, suisse/international, néo-brutalisme, bento, vitromorphisme avec profondeur réelle, luxe clair ou foncé, rétro-futurisme. "Minimaliste propre" n'est pas une direction ; le mode sombre est choisi pour les utilisateurs, pas par habitude. Définissez ensuite :

   • Palette sous forme de tokens oklch avec un rôle déclaré par couleur : surfaces (au moins deux niveaux), texte (primaire, atténué), accent, et les rôles sémantiques succès / avertissement / danger / info — chacun avec une variante sécurisée pour le texte lorsque la couleur de remplissage échoue en tant que texte.
   • Appariement typographique — familles d'affichage + texte avec une raison (et mono si le produit affiche du code ou des données), une échelle fluide clamp(), et un plan de chargement : auto-hébergé, sous-ensemble, un poids critique préchargé, un substitut métrique assorti.
   • Voix — public cible, promesse en une ligne, 3 à 5 traits vocaux chacun avec une paire "nous disons / nous ne disons pas", et comment la voix change dans les erreurs et les états vides.

4. Vérifier les qualités requises. La marque doit permettre à l'interface livrée de montrer au moins quatre des dix qualités énumérées dans la compétence frontend-design (hiérarchie d'échelle, rythme d'espacement, profondeur, caractère typographique, couleur sémantique, états conçus, composition, atmosphère, mouvement clarificateur, data-viz dans le système). Nommez les quatre-plus dans BRAND.md.

5. Rédiger les artefacts. BRAND.md : direction et justification, tableau de la palette (token, valeur, rôle, résultat de contraste), appariement typographique et échelle, voix, qualités livrées, questions ouvertes. Lorsque le travail est visuel, un fichier de tokens dans le format du dépôt (DTCG JSON ou propriétés personnalisées CSS — voir la compétence design-system), par exemple :

   :root {
     --color-surface: oklch(98% 0.01 95);
     --color-text: oklch(22% 0.02 265);
     --color-accent: oklch(64% 0.19 28); /* remplissage uniquement ; le texte utilise --color-accent-text */
     --color-accent-text: oklch(50% 0.19 28);
     --text-display: clamp(2.5rem, 1rem + 6vw, 6rem);
     --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
     --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   }
   

6. Signaler, ne pas inventer, une stratégie inconnue. Si le positionnement ou le public cible est véritablement indécis et que le ticket ne le tranche pas, n'en inventez pas un. En tant que compétence de livraison, mark_ticket_blocked avec la question spécifique ; en tant que seed de lore, suggest_lore la marque avec les questions ouvertes nommées.

7. Livrer. En tant que compétence de livraison (vous êtes sur la branche de travail du ticket — vérifiez avec git branch --show-current), commitez, enregistrez les preuves par critère d'acceptation avec la compétence record-evidence (le diff de BRAND.md, le tableau de contraste, la liste des qualités), puis arrêtez-vous ; le coureur soumet pour révision. En tant que seed de lore, suggest_lore la marque ; elle reste une suggestion jusqu'à ce qu'un humain la ratifie.

Interdit (un audit doit détecter ces éléments)

• Grilles de cartes par défaut avec espacement uniforme et aucune hiérarchie.
• Le héros centré avec titre + dégradé blob et CTA générique.
• Les valeurs par défaut d'une bibliothèque/Tailwind/shadcn non modifiées présentées comme un design fini.
• Rayon, espacement et ombre identiques sur chaque composant.
• Gris sur blanc avec une seule couleur d'accent décorative.
• Piles de polices par défaut sans raison énoncée ; plus de deux familles sans raison.
• Une couleur d'accent utilisée pour du texte de taille corps lorsqu'elle échoue au ratio 4,5:1.
• Mode sombre réflexe choisi par habitude plutôt que par adéquation.

Terminé lorsque

BRAND.md énonce une direction avec sa justification ; chaque paire de palette a un résultat de contraste mesuré qui passe dans chaque thème ; l'appariement typographique, l'échelle et le plan de chargement sont définis ; la voix a des traits avec des exemples ; quatre qualités requises ou plus sont nommées ; les questions stratégiques ouvertes sont listées plutôt que devinées ; les tokens existent dans le format du dépôt.

Règles

• Engagez-vous sur une direction et énoncez pourquoi ; jamais "minimaliste propre".
• Des tokens, pas des littéraux, afin que les agents de livraison les réutilisent.
• Étendez une marque existante dans son idiome ; ne l'écrasez jamais avec vos préférences.
• Les tokens de mouvement sont destinés à transform/opacity ; n'intégrez jamais d'animation liée à la mise en page dans le système.
• Une stratégie inconnue est une question ouverte nommée, jamais une réponse inventée.