Kleuren

Kleursysteem

Het palet is opgebouwd voor leesbaarheid, visuele hiërarchie en merkherkenning op desktop en mobiel.

Laatste update: februari 2026

Aanbevolen 60-30-10 verhouding

Gebruik neutrale tonen als basis, primair voor structuur en accenten alleen voor belangrijke acties.

60% neutraal
30% primair
10%

Kernpalet van het merk

Deze kleuren vormen de basis van de identiteit. De gebruiksrollen volgen de huidige productconventies.

Smaragd

Primaire actie- en vertrouwenskleur

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

Nachtblauw

Hoofdtekst en sterke structurele vlakken

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

Amber

Conversie-accent en secundaire CTA

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

Gebroken wit

Hoofdachtergrond en visuele rust

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

Terracotta

Gematigde waarschuwing en redactioneel signaal

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

Salie

Zachte vlakken en informatieve secties

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

Koppeling met UI-tokens

Merkkleuren zijn geïmplementeerd via CSS-variabelen en beschikbare thema s in de applicatie.

Standaardthema

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