// STYLEGUIDEFIG. 00 — TOKENS

Styleguide

Tokens + componenten + states, live. Alles erft van de token-laag (src/styles/tokens.css) — swap die om te re-branden.

// Kleuren

Kleuren

Semantische tokens — geen rauwe hex in components.

01
background
foreground
primary
secondary
accent
muted
card
destructive
// Radii

Radii

Afgeleid van --radius (globale rondingsschaal).

02
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
// Typografie

Typografie

03

Heading 1

Heading 2

Heading 3

Body — de details waar andere bureaus op afhaken.

Muted / secundaire tekst voor context en hulp.

mono · 52.09°N — 5.12°E

// Buttons

Buttons

Alle varianten, maten en states.

04
// Badges

Badges

05
DefaultSecondaryOutlineDestructive
// Inputs & Select

Inputs & Select

06
// Form — met validatie (react-hook-form + zod)

Form — met validatie (react-hook-form + zod)

07

We reageren binnen 1 werkdag.

// Card

Card

08
Card-titel
Beschrijving onder de titel.
Inhoud van de card. Gebruik voor features, projecten of content.
Accent-card
Dezelfde component, merk-kleur.
Tokens maken varianten triviaal.
// Dialog & Toast

Dialog & Toast

09
// Motion

Motion

150–300ms, ease-tokens, respecteert prefers-reduced-motion.

10
hover