Couleur
On code avec des tokens sémantiques, pas des hex. Cliquez sur un token pour le copier — son usage est juste à côté. Les palettes primitives ne sont qu’une référence.
Couleurs d’intent
Les tokens d’action et de statut. Cliquez pour copier var(--ui-…).
Surfaces & texte
Fonds, bordures et niveaux de texte. Ils basculent automatiquement en dark mode.
Surfaces
Texte
Palettes primitives (référence)
Les valeurs brutes (src/colors.ts). À ne pas utiliser directement dans un composant produit — préférez toujours un token d’intent ci-dessus. Cliquez pour copier le hex.
Brand ≠ Primary
brand et primary partagent le même fuchsia aujourd'hui, mais sont deux entités distinctes. brand est l'identité Guest Suite invariante : pour un marquage « Diffusé par Guest Suite », consommez var(--ui-color-brand-500) — jamais --ui-primary / --ui-color-primary-*, qui peuvent être re-thémés (opt-in berkeley).
Brand — Identité Guest Suite (invariante)
Primary — Fuchsia (action, thémable)
Neutral — Slate
Cloud — Surface (signature)
Pourquoi ces choix
- Fuchsia #e94b82 comme brand : rose-framboise chaud, différenciant, distinct du fuchsia violet Tailwind standard.
- Cloud #f3f7ff comme fond d’app : bleuté froid → fait ressortir la carte blanche GSSpaceContent, crée la profondeur signature.
- Slate comme neutral : gris bleuté cohérent avec le fond cloud froid. Le gris pur jurerait.
Dark mode
- Les tokens
--ui-*basculent automatiquement (gérés par Nuxt UI sur la palette slate). - Exception :
--ui-bg-surfaceest hardcodé hors collection slate → light#f3f7ff, dark#060b18.
Règles d’usage
À faire
var(--ui-primary)pour un CTA.var(--ui-color-brand-*)pour un marquage « Diffusé par Guest Suite ».var(--gs-positive)pour un avis 5★.- Limiter le fuchsia à ~10 % de la surface.
À éviter
- Hardcoder
#e94b82. - Brancher un tampon de marque sur
--ui-primary(suivrait un re-thème). - Inventer une couleur métier hors token.
- Saturer l’écran de fuchsia.