Design System

Kleurpaletten

OKLch kleurschalen uit het Figma design system. Gebruik semantische tokens (hieronder) in componenten, niet direct deze schalen.

Brand

Primary brand blue — used for interactive elements and emphasis

100

200

300

400

500

600

700

800

900

950

Gray

Neutral gray — used for text, backgrounds, borders

100

200

300

400

500

600

700

800

900

950

Error

Red — destructive actions, errors, alerts

100

200

300

400

500

600

700

800

900

950

Warning

Orange/amber — caution states, pending actions

100

200

300

400

500

600

700

800

900

950

Success

Green — confirmations, positive states

100

200

300

400

500

600

700

800

900

950

Yellow

Yellow — highlights, attention

100

200

300

400

500

600

700

800

900

950

Semantische tokens

Gebruik deze tokens in Tailwind classes. Voorbeeld: text-text-primary, bg-bg-secondary

Brand

Token	Tailwind class	Bron	Gebruik
--brand-primary	brand-primary	brand-600	Primary interactive elements, links, focus rings
--brand-secondary	brand-secondary	brand-700	Hover states on primary elements
--brand-bg	brand-bg	brand-50	Light brand background, active states

Text

Token	Tailwind class	Bron	Gebruik
--text-primary	text-primary	gray-900	Primary text content, headings
--text-secondary	text-secondary	gray-700	Secondary text, descriptions
--text-tertiary	text-tertiary	gray-600	Tertiary text, labels, metadata
--text-placeholder	text-placeholder	gray-500	Placeholder text in inputs

Backgrounds

Token	Tailwind class	Bron	Gebruik
--bg-primary	bg-primary	white	Main page background, cards
--bg-secondary	bg-secondary	gray-50	Sidebar, secondary areas
--bg-hover	bg-hover	gray-100	Row/item hover state
--bg-active	bg-active	brand-25	Active/selected row background

Borders

Voorbeeld	Token	Tailwind class	Bron	Gebruik
	--border-primary	border-primary	gray-300	Input borders, dividers
	--border-secondary	border-secondary	gray-200	Subtle dividers, card borders

Status — Error

Token	Tailwind class	Bron	Gebruik
--error-text	error-text	error-900	Error message text
--error-text-primary	error-text-primary	error-500	Error icon/accent color
--error-bg	error-bg	error-50	Error banner/alert background
--error-border	error-border	error-300	Error input/alert border

Status — Success

Token	Tailwind class	Bron	Gebruik
--success-text	success-text	success-800	Success message text
--success-text-primary	success-text-primary	success-500	Success icon/accent color
--success-bg	success-bg	success-50	Success banner background
--success-border	success-border	success-300	Success alert border

Status — Warning

Token	Tailwind class	Bron	Gebruik
--warning-text	warning-text	warning-800	Warning message text
--warning-bg	warning-bg	warning-50	Warning banner background
--warning-border	warning-border	warning-300	Warning alert border

Laden...

Kleurpaletten

OKLch kleurschalen uit het Figma design system. Gebruik semantische tokens (hieronder) in componenten, niet direct deze schalen.

Brand

Primary brand blue — used for interactive elements and emphasis

100

200

300

400

500

600

700

800

900

950

Gray

Neutral gray — used for text, backgrounds, borders

100

200

300

400

500

600

700

800

900

950

Error

Red — destructive actions, errors, alerts

100

200

300

400

500

600

700

800

900

950

Warning

Orange/amber — caution states, pending actions

100

200

300

400

500

600

700

800

900

950

Success

Green — confirmations, positive states

100

200

300

400

500

600

700

800

900

950

Yellow

Yellow — highlights, attention

100

200

300

400

500

600

700

800

900

950

Semantische tokens

Gebruik deze tokens in Tailwind classes. Voorbeeld: text-text-primary, bg-bg-secondary

Brand

Token	Tailwind class	Bron	Gebruik
--brand-primary	brand-primary	brand-600	Primary interactive elements, links, focus rings
--brand-secondary	brand-secondary	brand-700	Hover states on primary elements
--brand-bg	brand-bg	brand-50	Light brand background, active states

Text

Token	Tailwind class	Bron	Gebruik
--text-primary	text-primary	gray-900	Primary text content, headings
--text-secondary	text-secondary	gray-700	Secondary text, descriptions
--text-tertiary	text-tertiary	gray-600	Tertiary text, labels, metadata
--text-placeholder	text-placeholder	gray-500	Placeholder text in inputs

Backgrounds

Token	Tailwind class	Bron	Gebruik
--bg-primary	bg-primary	white	Main page background, cards
--bg-secondary	bg-secondary	gray-50	Sidebar, secondary areas
--bg-hover	bg-hover	gray-100	Row/item hover state
--bg-active	bg-active	brand-25	Active/selected row background

Borders

Voorbeeld	Token	Tailwind class	Bron	Gebruik
	--border-primary	border-primary	gray-300	Input borders, dividers
	--border-secondary	border-secondary	gray-200	Subtle dividers, card borders

Status — Error

Token	Tailwind class	Bron	Gebruik
--error-text	error-text	error-900	Error message text
--error-text-primary	error-text-primary	error-500	Error icon/accent color
--error-bg	error-bg	error-50	Error banner/alert background
--error-border	error-border	error-300	Error input/alert border

Status — Success

Token	Tailwind class	Bron	Gebruik
--success-text	success-text	success-800	Success message text
--success-text-primary	success-text-primary	success-500	Success icon/accent color
--success-bg	success-bg	success-50	Success banner background
--success-border	success-border	success-300	Success alert border

Status — Warning

Token	Tailwind class	Bron	Gebruik
--warning-text	warning-text	warning-800	Warning message text
--warning-bg	warning-bg	warning-50	Warning banner background
--warning-border	warning-border	warning-300	Warning alert border