Couleurs

Système de couleurs

La palette est structurée pour garantir lisibilité, hiérarchie visuelle et reconnaissance de marque sur desktop et mobile.

Dernière mise à jour: février 2026

Ratio recommandé 60-30-10

Utiliser majoritairement des tons neutres, renforcer la structure avec les couleurs primaires et réserver les accents aux actions clés.

60% neutres
30% primaires
10%

Palette cœur de marque

Ces teintes constituent le socle de la charte. Les usages sont donnés à titre de référence produit.

Émeraude

Couleur primaire action et confiance

hsl(var(--client-brand-emerald))--primary

Bleu nuit

Texte principal et structures fortes

hsl(var(--client-brand-night))--foreground

Ambré

Accent conversion et CTA secondaire

hsl(var(--client-brand-amber))--accent

Blanc cassé

Fond principal et zones de respiration

hsl(var(--client-brand-offwhite))--background

Terracotta

Alerte modérée et signal éditorial

hsl(var(--client-brand-terracotta))--warning

Sauge

Surfaces douces et sections informatives

hsl(var(--client-brand-sage))--muted

Correspondance avec les tokens UI

Les couleurs de marque sont implémentées via les variables CSS et les thèmes disponibles dans l application.

Thème par défaut

Base
Fond--background
Texte--foreground
Bordure--border
Entrée--input
Marque
Primaire--primary
Secondaire--secondary
Accent--accent
Ring--ring
Statut
Succès--success
Erreur--destructive
Alerte--warning
Info--info
Source: DEFAULT ENGINE

Variante Ocean

Base
Fond--background
Texte--foreground
Bordure--border
Entrée--input
Marque
Primaire--primary
Secondaire--secondary
Accent--accent
Ring--ring
Statut
Succès--success
Erreur--destructive
Alerte--warning
Info--info
Source: OCEAN ENGINE

Variante Forest

Base
Fond--background
Texte--foreground
Bordure--border
Entrée--input
Marque
Primaire--primary
Secondaire--secondary
Accent--accent
Ring--ring
Statut
Succès--success
Erreur--destructive
Alerte--warning
Info--info
Source: FOREST ENGINE