Colors

Color system

The palette is structured to keep readability, visual hierarchy, and brand recognition on desktop and mobile.

Last update: February 2026

Recommended 60-30-10 ratio

Use neutral tones as the main base, reinforce structure with primary colors, and reserve accents for key actions.

60% neutrals
30% primary
10%

Core brand palette

These tones are the foundation of the identity. Usage notes reflect current product conventions.

Emerald

Primary action and trust color

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

Night blue

Main text and strong structural surfaces

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

Amber

Conversion accent and secondary CTA

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

Off white

Main background and breathing space

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

Terracotta

Moderate warning and editorial signal

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

Sage

Soft surfaces and informational sections

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

Mapping to UI tokens

Brand colors are implemented through CSS variables and available themes in the app.

Default theme

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

Ocean variant

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

Forest variant

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