Visuele taal

Kleuren

Layoutkleuren

De layoutkleur wordt toegepast in de header van de applicatie en bepaald in grote mate de branding van de applicatie. Binnen het CIBG is besloten dat in principe alle applicaties gebruik maken van de kleur robijnrood. Wordt er gebruik gemaakt van een footer dan is de kleur hier ook zichtbaar.

Activeren van nieuwe layoutkleur

Omdat de producten moeten overstappen op deze kleur is de standaardkleur van de header blauwtint --ro-brand. Wanneer je de nieuwe kleur wilt gebruiken dan moet je in de applicatie de waarde van de design token --ro-layout overschrijven met de waarde --ro-brand-robijn.

Accentkleuren

De accentkleuren worden onder meer toegepast in de knoppen, wizards en paginering. Er is binnen de CIBG huisstijl voor gekozen om de layoutkleur en de accentkleuren.

Grijstinten

Grijstinten worden gebruikt voor tekst, achtergronden, lijnen en randen. Let er bij het gebruik op dat er voldoende contrast is tussen de achtergrond en de tekst.

Meldingkleuren

Voor feedback meldingen in de applicatie worden kleuren gebruikt die overeenkomen met de impact van de melding. Meer informatie hierover vind je bij het feedback meldingen element.

Root variabelen

Sinds versie 2.2.0 van de CIBG Huisstijl zijn er CSS root variabelen toegevoegd, zodat je als afnemer van het CIBG Design System invloed uit kunt oefenen op de kleuren. Dit worden ook wel design tokens genoemd. In het algemeen zul je alleen de variabele --ro-layout overschrijven, zodat je de header en footer consistent kunt maken met een bijbehorende Platform Rijksoverheid website (PRO).

In de volgende tabel worden nog een aantal van de variabelen getoond die je kunt overschrijven. Inspecteer deze pagina in je browser om alle CSS variabelen in te zien.

Tabel met CSS root-variabelen

Variabele	Gebruikt in componenten
--ro-layout	Header en footer
--ro-brand-primary	Primaire knop, links, tabs, laadindicatie e.a.
--ro-brand-secondary	Secundaire knop, accentkleur dashboard e.a.
--ro-form-accent-color	Formuliervelden, checkboxes, radio-buttons, helptekst-toggle, stapnummer in stepper, hr e.a.
--ro-inquery-instruction-icon-color	Instructieiconen voorafgaand aan aanvraag.