Een vastgelegde set kleuren helpt ons een unieke en uniforme uitstraling te creëren in al onze digitale producten. Kleur draagt bij aan de merkidentiteit, ondersteunt de visuele hiërarchie en geeft gebruikers visuele cues voor interactie.
Kleurkeuze
De kleuren in dit design system zijn afgestemd op de richtlijnen van het Vlaamse Overheidsmerkbeleid. Dit zorgt voor consistentie over verschillende toepassingen heen. De kleuren zijn samengesteld uit een primaire kleur, neutrale grijstinten en functionele kleuren.
Primaire kleur
De primaire kleur vormt de visuele identiteit van de Vlaamse Overheid en dient als basis voor het design system. Voor alle communicatie op niveau 1 is geel (HEX-code #FFED00) steeds de primaire kleur.
Niveau 2 en 3 kunnen een eigen primaire kleur kiezen voor elk specifiek beleidsthema. Bepaal deze kleur in samenwerking met het merkbeleid.
Functionele kleuren
Actiekleur
De actiekleur duidt interactieve elementen aan zoals button, links en aanklikbare componenten. In het Vlaams Design System is de actiekleur functioneel blauw, met HEX-code #0055CC.
Dit functionele blauw blijft behouden in de 3 niveaus van de Vlaamse overheid. Enkel op niveau 4 (lokaal bestuur) kan hier een andere kleur gekozen worden.
Statuskleuren
Statuskleuren geven gebruikers feedback over de status van een actie of element.
- Error: #D2373C
- Warning: #FFA10A
- Success: #009E47
Grijstinten
Grijstinten worden gebruikt voor tekst, iconen, borders en achtergronden.
Tekst
- Grey 1000, HEX #333332: wordt vooral gebruikt voor titels, body tekst,…
- Grey 800, HEX #687483: wordt gebruikt voor annotations, light form messages,…
- Grey 600, HEX #8695A8: voornamelijk in gebruik voor iconen
Achtergrond, borders
- Grey 600, HEX #8695A8
- Grey 300, HEX #CFD5DD
- Grey 100, HEX #F7F9FC
Contextuele kleuren
Design
Selecteer contextuele kleurtokens en pas deze toe op specifieke functies of gebruiksdoelen.
Development
Toegankelijkheid
Onze kleuren zijn ontworpen met toegankelijkheid in gedachten en voldoen aan de WCAG 2.1-richtlijnen voor contrast.
- Normale tekst (kleiner dan 24px of 19px vet) moet een minimaal contrast van 4.5:1 hebben.
- Grote tekst (24px of 19px vet en groter) moet een minimaal contrast van 3:1 hebben.
- UI-componenten (zoals knoppen en invoervelden) moeten een minimaal contrast van 3:1 hebben.