Kleuren

Het Pantalytics-kleurenpalet is gebouwd rond een donkere, professionele basis met een herkenbaar paars accent. Gebruik deze kleuren consistent in alle uitingen.

Logokleuren

Het primaire Pantalytics-logo is navy blue. De goud variant is beschikbaar voor speciale toepassingen.

Aa
Navy Blue
#1b3a5c · rgb(27, 58, 92)
Logo tekst & icoon
Aa
Gold
#e8a317 · rgb(232, 163, 23)
Logo accent & tagline

Primaire kleuren

Aa
Accent Purple
#9b99ff · rgb(155, 153, 255)
--color-accent
Aa
Accent Hover
#7370ff · rgb(115, 112, 255)
--color-accent-hover
Aa
Dark Teal
#001d21 · rgb(0, 29, 33)
--color-bg-primary
Aa
Dark Teal Light
#002328 · rgb(0, 35, 40)
--color-bg-secondary

Tekst & achtergrond

Aa
White
#ffffff
--color-text-primary / --color-bg-inverse
Aa
White 60%
rgba(255, 255, 255, 0.6)
--color-text-secondary
Aa
Dark Teal (op wit)
#001d21
--color-text-inverse

Dark mode & Light mode

Het Pantalytics-kleurenpalet heeft twee varianten voor app-ontwikkeling. Dark mode is de primaire merkomgeving; light mode is de lichte variant voor dagelijks gebruik.

Dark mode

Pantalytics

Slimme bedrijfssoftware die orde brengt in je processen.

Accent knop

Light mode (default)

Pantalytics

Slimme bedrijfssoftware die orde brengt in je processen.

Accent knop

Dark mode

Donkere variant voor feature-secties en brand visuals. Donkere teal achtergrond met wit en accent paars (#9b99ff).

Aa
Accent
#9b99ff
--color-accent
Aa
Accent Hover
#7370ff
--color-accent-hover
Aa
BG Primary
#001d21
--color-bg-primary
Aa
BG Secondary
#002328
--color-bg-secondary
Aa
Text Primary
#ffffff
--color-text-primary
Aa
Text Secondary
rgba(255,255,255,0.6)
--color-text-secondary

Light mode (default)

De standaard voor alle apps en interfaces. Witte achtergrond met donkerder accent (#5b58d8) voor WCAG AA compliance.

Aa
Accent
#5b58d8
--color-light-accent
Aa
Accent Hover
#4a47c4
--color-light-accent-hover
Aa
BG Primary
#ffffff
--color-light-bg-primary
Aa
BG Secondary
#f4f5f7
--color-light-bg-secondary
Aa
Text Primary
#001d21
--color-light-text-primary
Aa
Text Secondary
rgba(0,29,33,0.6)
--color-light-text-secondary

WCAG Contrast ratio's

Onderstaande tabel toont de contrastverhoudingen voor veelgebruikte combinaties. Zorg dat tekst altijd aan de WCAG AA-norm voldoet.

Combinatie Ratio AA AAA
#ffffff op #001d21 17.65:1 Pass Pass
rgba(255,255,255,0.6) op #001d21 7.06:1 Pass Pass (groot)
#9b99ff op #001d21 5.84:1 Pass Pass (groot)
#001d21 op #ffffff 17.65:1 Pass Pass
#9b99ff op #ffffff 3.02:1 Fail (normaal) Fail

WCAG Contrast ratio's — Light mode

Contrastverhoudingen voor de light mode kleurcombinaties.

Combinatie Ratio AA AAA
#001d21 op #ffffff 17.65:1 Pass Pass
rgba(0,29,33,0.6) op #ffffff 7.06:1 Pass Pass (groot)
#5b58d8 op #ffffff 5.20:1 Pass Pass (groot)
#4a47c4 op #ffffff 6.36:1 Pass Pass (groot)
#5b58d8 op #f4f5f7 4.82:1 Pass Pass (groot)

Gebruiksrichtlijnen

  • Gebruik accent paars (#9b99ff) nooit als bodytekst op een witte achtergrond — het contrast is onvoldoende (3.02:1).
  • De accentkleur is bedoeld voor interactieve elementen, eyebrows en decoratieve highlights.
  • Donkere teal achtergronden zijn de primaire merkomgeving.
  • Witte secties worden spaarzaam gebruikt voor nadruk en contrast.