Design System

design-system — système de design web sous contrainte de marque

Vous produisez des systèmes de design complets : tokens sémantiques, style UI, palette, typographie, échelles. Les données de référence (styles, palettes, pairings) sont condensées dans references/ — elles servent de bibliothèque de fallback, jamais de source prioritaire.

Étape 0 — Charger les design tokens de la marque (OBLIGATOIRE)

Charger 01-brand/style-guide.md — la marque PRIME sur tout style générique de cette skill.

1. Lire 01-brand/style-guide.md : couleurs, police, radius, gradient, style d'illustration, interdits visuels.
2. Lire 01-brand/checklist-pre-composition.md si présent (règles anti-style-IA) et 01-brand/design-anti-generique.md (doctrine design anti-générique — elle gouverne les dimensions libres, jamais celles verrouillées par la marque : celles-là viennent de 01-brand/style-guide.md et, pour les valeurs exactes, de 01-brand/tokens.json).
3. Classer chaque dimension du système en deux catégories :
   • Verrouillée par la marque — le style-guide fournit une valeur (ex. couleur primaire, police). On l'utilise telle quelle. Interdiction de la remplacer par une valeur des références de cette skill.
   • Libre — le style-guide est muet (ex. couleur muted, échelle d'espacement, style des états d'interaction). C'est le seul espace où les références de cette skill s'appliquent.

Si 01-brand/style-guide.md est manquant ou contient des {{...}} : s'arrêter et proposer /start-cockpit. Ne jamais générer un système 100 % générique pour un projet configuré.

Étape 1 — Qualifier le besoin

Extraire du brief :

• Type de livrable : landing page, page produit, dashboard de reporting, page événement, espace client…
• Type de produit / secteur : SaaS, service B2B, agence, e-commerce, formation, communauté… (sert à choisir palette et style de fallback dans references/)
• Tonalité : sobre, premium, énergique, éditorial, technique…
• Contraintes : dark mode requis, contrainte de performance, audience accessibilité renforcée.

Étape 2 — Composer le système

Ordre de résolution pour chaque token : 01-brand/style-guide.md → dérivation depuis la marque (teintes, opacités) → references/ de cette skill → défaut neutre. Documenter la provenance de chaque valeur dans le livrable.

1. Style UI — choisir dans references/styles.md le style compatible avec la marque ET le type de produit. Vérifier la colonne « Ne pas utiliser pour ». Un seul style par site ; pas de mélange flat/glassmorphism aléatoire.

2. Palette sémantique — construire les 12 rôles à partir de la marque :

   Rôle	Source
   --primary / --on-primary	{{BRAND_COLOR_PRIMARY}} + contraste calculé
   --accent / --on-accent	{{BRAND_COLOR_ACCENT}} (CTA)
   --background / --foreground	{{BRAND_COLOR_LIGHT}} / {{BRAND_COLOR_DARK}}
   --card / --card-foreground	dérivés du background (élévation)
   --muted / --muted-foreground	dérivés neutres (texte secondaire ≥ 4.5:1)
   --border, --ring, --destructive	dérivés ou references/palettes.md

   Si la marque ne fournit que 2-3 couleurs, compléter les rôles manquants par dérivation (jamais en remplaçant les couleurs fournies). references/palettes.md sert uniquement de calibration (quel niveau de saturation pour tel secteur) ou de fallback si la marque n'a pas de couleurs du tout.

3. Typographie — {{BRAND_FONT_PRIMARY}} est la police de référence. Décider de son rôle (display, body ou les deux) et compléter si besoin avec un pairing de references/typographie.md compatible. Échelle type : 12 / 14 / 16 / 18 / 24 / 32 / 48 px, body ≥ 16 px, line-height 1.5–1.75.

4. Espacement et rythme — échelle 4/8 px (4, 8, 12, 16, 24, 32, 48, 64). Radius : {{BRAND_BORDER_RADIUS}} partout, décliné en échelle (sm/md/lg) cohérente.

5. Effets et états — ombres/blur/gradients alignés sur le style choisi (étape 2.1) et le {{BRAND_GRADIENT}} éventuel. Chaque interactif a 4 états : default, hover, active/pressed, disabled. Transitions 150–300 ms, transform/opacity uniquement.

6. Dark mode (si demandé) — variantes désaturées/éclaircies, jamais une simple inversion. Re-vérifier les contrastes séparément.

Étape 3 — Livrer les tokens

Livrer un bloc :root CSS prêt à coller, précédé d'un tableau récapitulatif (token, valeur, provenance : marque / dérivé / référence). Exemple de squelette :

cssCopy code
:root {
  /* Marque — 01-brand/style-guide.md (ne pas modifier) */
  --primary: {{BRAND_COLOR_PRIMARY}};
  --accent: {{BRAND_COLOR_ACCENT}};
  --background: {{BRAND_COLOR_LIGHT}};
  --foreground: {{BRAND_COLOR_DARK}};
  --radius: {{BRAND_BORDER_RADIUS}};
  --font-sans: '{{BRAND_FONT_PRIMARY}}', system-ui, sans-serif;
  /* Dérivés + fallbacks références (documenter chaque choix) */
  --muted: …; --muted-foreground: …; --border: …; --ring: …;
  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 48px;
}

Si le livrable appartient à un dossier de production (05-web-content/, 06-graphic-design/, 11-reporting/), enregistrer le système à côté du livrable (ex. 05-web-content/landing-pages/<slug>/design-tokens.md) pour réutilisation.

Garde-fous (non négociables)

• Contraste : texte normal ≥ 4.5:1, texte large et composants UI ≥ 3:1 (WCAG AA). Vérifier chaque paire fond/texte du système.
• Pas d'emoji comme icônes structurelles : SVG uniquement (Lucide, Heroicons, Phosphor), un seul set par projet, stroke cohérent.
• Tokens sémantiques, pas de hex brut dans les composants.
• Un seul CTA primaire par écran ; les actions secondaires sont visuellement subordonnées.
• Interdits visuels de la marque ({{BRAND_BANNED_VISUALS}}) : ils l'emportent sur toute recommandation des références. Si un style de references/styles.md entre en conflit avec un interdit, écarter le style.
• Passer le résultat par la skill design-review avant toute livraison de code UI.

Références embarquées

Source : données condensées et adaptées de ui-ux-pro-max v2.5.0, © 2024 Next Level Builder, licence MIT. Adaptations : recentrage web marketing (mobile natif, Flutter, SwiftUI, BI exclus), priorité absolue aux tokens 01-brand, suppression de la dépendance aux scripts Python. Registre : docs/vendored-design.md.