Kleurenoverzicht voor branding organisaties

Basis
Basic

Tekst
Font

Licht
Light

#F8F9FA

• Standaard lichte tekstkleur

Donker
Dark

#343A40

• Standaard donkere tekstkleur

Identity

Achtergrond
Background

#007BFF

• Achtergrond identity omgeving (Inloggen en identificeren)

Logobalk tekst
Header font

• Light

• Dark

• Taalselectie in identity omgeving

Platform

Achtergrond
Background

#F2F6FC

• Achtergrond platform

Logobalk
Header

#007BFF

• Achtergrond van de balk (header) waarin het logo wordt weergegeven

Logobalk tekst
Header font

• Light

• Dark

• Gebruikersnaam menu

• Verzoektitel (acties uitvoeren)

• Taalselectie (acties uitvoeren)

Primair
Primary

#007BFF

• Navigatie knoppen

• Pagina navigatie

• Menu items (zweven)

• Zoom knoppen (negatief)

• Ondertekenveld geplaatst

• Workflow stappen

• Actie navigatie

• Document headers

• Active font (hyperlinks en breadcrumb active)

• Select (radio, checkbox en switches)

• Spinners en voortgangsbalken

Primair zweven
Primary hover

#0069D9

• Navigatie knoppen (zweven)

• Pagina navigatie (zweven)

Primair uitgeschakeld
Primary disabled

#58AAFF

• Navigatie knoppen uitgeschakeld

• Pagina navigatie uitgeschakeld

• Workflow stappen uitgeschakeld

• Select (radio, checkbox en switches) uitgeschakeld

Primair tekst
Primary Font

• Light

• Dark

• Tekstkleur voor alle primaire elementen

E-mail
Email

Knop
Button

#007BFF

• Knop in e-mailuitnodigningen en notificaties

Knop tekst
Button font

• Light

• Dark

• Tekstkleur voor knop in e-mailuitnodigningen en notificaties

Geavanceerd
Advanced

Platform

Secundair
Secondary

#6C757D

• Optie knoppen (Instellingen, hamburgermenu bij acties uitvoeren)

• Selecteer knoppen (Mijn verzoeken / Alle verzoeken)

Secundair zweven
Secondary hover

#5A6268

• Optie knoppen (zweven)

• Selecteer knoppen (zweven)

• Selecteer knoppen (actief)

Secundair uitgeschakeld
Secondary disabled

#B0B6BA

• Optie knoppen (uitgeschakeld)

Secundair tekst
Secondary font

• Light

• Dark

• Tekstkleur voor alle secundaire elementen

Succes
Success

#28A745

• Success knoppen (Toevoegen, Verzenden, Ga naar verzoek, Acties uitvoeren, etc)

• Toast success

• Status afgerond

• Premium badges actief (instellingen)

• Ondertekenveld actief

• Badges services integraties - productie (instellingen)

Succes zweven
Success hover

#218838

• Success knoppen (zweven)

Succes uitgeschakeld
Success disabled

#74C686

• Success knoppen (uitgeschakeld)

Succes tekst
Success font

• Light

• Dark

• Tekstkleur voor alle succes elementen

Waarschuwing
Warning

#FFC107

• Status: verzonden

• Toast degraded performance en partial outage

• Badges services integraties - test (instellingen)

• Waarschuwings kaders

Waarschuwing zweven
Warning hover

#E0A800

• Waarschuwingskaders (border)

Waarschuwing uitgeschakeld
Warning disabled

#FFD75E

• Waarschuwingskaders (uitgeschakeld)

Waarschuwing tekst
Warning font

• Light

• Dark

• Tekstkleur voor alle waarschuwing elementen

Gevaar
Danger

#DC3545

• Delete/disable knoppen

• Foutmelding kaders

• Toast major incident

• Toast fout

• Status: fout/verlopen/ingetrokken, etc

Gevaar zweven
Danger hover

#C82333

• Delete/disable knoppen (hover)

• Foutmelding kaders (border)

Gevaar uitgeschakeld
Danger disabled

#E97B86

• Delete/disable knoppen (disabled)

• Foutmelding kaders (uitgeschakeld)

Gevaar tekst
Danger font

• Light

• Dark

• Tekstkleur voor alle gevaar elementen

Info

#17A2B8

• Info kaders

• Placeholders (Specifieke documenten en personen toevoegen in specialist verzoektypen)

• Toast maintanance

• Toast info

• Status concept

Info zweven
Info hover

#138496

• Info kaders (border)

• Placeholders (border)

Info uitgeschakeld
Info disabled

#67C3D0

• Info kaders (uitgeschakeld)

• Placeholders (uitgeschakeld)

Info tekst
Info font

• Light

• Dark

• Tekstkleur voor alle info elementen