Development guide

Color Palette

Primary

De roze en bruin van Vektis zijn samen met wit altijd aanwezig en onmisbaar / beeldbepalend.

Primary-100
#6A4B47

Primary-300
#5D3F3B

Primary-500
#4B2A25

Accent-500
#EB6670


Secondary

Secondary-100
#6A4B47

Secondary-500
#F59E77

Secondary-700
#DD8F6B


Tertiary

Tertiary-100
#F8CBCF

Tertiary-300
#eb6670

Tertiary-500
#EB6670

Tertiary-700
#B3464D

Tertiary-900
#7C2B30


Grijstinten

Wit is beeldbepalende steunkleur. Zwart geschikt voor leestekst. Grijs is aanvullend.

gray-100
#F5F5F5

gray-300
#E6E6E6

gray-500
#777777

gray-700
#333333

gray-900
#000000

White
#FFFFFF

Box-shadow
#FFFFFF


States

Onderstaande kleuren worden gebruikt voor de verschillende states van componenten.

State-succes
#5CB85C

State-info
#5BC0DE

State-warning
#F0AD4E

State-danger
#D9534F


Grafiek kleuren

Deze aanvullende kleuren zijn geschikt voor het helder weergeven van data in grafieken.
Dit wordt nooit beeldbepalend gebruikt, maar speelt meer een rol in binnenwerk.

Data-primary-100
#E8E3B8

Data-primary-300
#C6B577

Data-primary-500
#A4893A

Data-primary-700
#7B6C34

Data-primary-900
#53522D


Data-secondary-100
#D9E1F3

Data-secondary-300
#B9BBDF

Data-secondary-500
#8B89BE

Data-secondary-700
#655F96

Data-secondary-900
#413B72