Vyrtex Starterkit

Styleguide

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

Kleuren

Semantische tokens — geen rauwe hex in components.

background
foreground
primary
secondary
accent
muted
card
destructive

Radii

Afgeleid van --radius (globale rondingsschaal).

rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl

Typografie

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

Alle varianten, maten en states.

Badges

DefaultSecondaryOutlineDestructive

Inputs & Select

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

We reageren binnen 1 werkdag.

Card

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

Motion

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

hover