Fondations

Principes & tokens

Ce que dicte le design system, qui en est la source de vérité, et comment les tokens se résolvent du brut au métier.

Source de vérité

Ce repo design-system EST la source de vérité. Figma reflète le code, jamais l’inverse. En cas d’écart, on aligne Figma sur ce qui est défini ici.

Fichier source	Rôle
`src/colors.ts`	Palettes exportées pour les consumers npm
`src/index.ts (uiColors)`	Mapping sémantique slot → palette
`app/assets/css/nuxt-ui.css`	Variables CSS @theme + palettes :root + dark mode

Les 4 principes directeurs

Le repo fait foi

Les valeurs définies ici et dans les fichiers sources priment. Figma s’adapte au code, jamais l’inverse.

Tokens avant valeurs brutes

Jamais de #hex hardcodé dans un composant — toujours var(--ui-*) ou var(--gs-*).

Composition via GS*

Toujours utiliser les composants GS* ; jamais un U* NuxtUI brut quand l’équivalent existe.

Accessibilité AA non négociable

Tout écran produit vise WCAG 2.1 niveau AA minimum (contraste, focus, clavier, ARIA).

Architecture des tokens

3 couches hiérarchiques, du brut au métier.

--color-*

L1 — Primitives

Palettes brutes (fuchsia, blue, slate, cloud…). Jamais utilisées directement dans un composant produit.

--ui-*

L2 — Sémantiques

Tokens d’intent gérés par Nuxt UI v4 (primary, success, text, bg…). Gèrent automatiquement light/dark.

--gs-*

L3 — Domaine

Tokens métier Guest Suite (sentiment d’avis : positive/neutral/negative…).

Règle simple

Dans un composant partagé → --ui-*. Dans une feature métier (avis, sentiment, réputation) → --gs-*. Jamais --color-* directement dans une page produit.

Chaîne de résolution

GSButton.bg     → --ui-primary      → --color-primary-500 → #e94b82
GSSpaceContent  → --ui-bg-surface   → --color-cloud-50    → #f3f7ff
GSBadge.success → --ui-success      → green/500           → (palette Tailwind)