Design system

Eén plek voor kleuren, typography en componenten. Voor partners die mee-branden, en voor toekomstige Nostravino-bouwers.

Kleur-tokens

Alle kleuren zijn gevalideerd op WCAG AA-contrast tegen --bg (crème) voor kleine tekst (4.5:1) en grote tekst (3:1).

--bg

#f8f1e7 · achtergrond

--bg-card

#fffaf2 · card-achtergrond

--ink

#221912 · body-tekst

--ink-soft

#5b4a3f · secundaire tekst

--ink-muted

#6b5d4f · muted tekst (AA)

--wine

#7a2f3a · primair accent

--wine-deep

#5e2530 · hover/active

--gold

#c89b3e · decoratief

--gold-deep

#7a5a0c · eyebrow-tekst (AA)

--moss

#6b7a47 · positief

--sky

#4b6577 · neutraal-info

Typography

EYEBROW — gold-deep, 0.72rem, 0.22em letter-spacing

Hero display · Cormorant

Section heading · Cormorant

Card-titel · Cormorant

Body-tekst. Nostravino gebruikt twee fonts: Cormorant Garamond voor display + serif kopjes (wijn-gevoel), en system-ui voor UI-tekst (snelheid + leesbaarheid op alle devices).

Muted body — voor secundaire info, captions, helper-tekst.

Componenten

Knoppen

Tags / chips

Default Wine accent Quiet

Form-velden

Cards

Basis: .card · met hover-state: .card-hover · zonder padding: .card-loose · feature/hero: .card-feature. Bordered-left voor severity / accent via inline-style.

Principes

Toegankelijkheid eerst — alle kleurcombinaties tegen WCAG AA gevalideerd. Decoratieve elementen aria-hidden.
Geen lock-in op één lib — Leaflet, htmx, vanilla JS. Geen React, Vue of Angular. Bouw-onderdelen zijn vervangbaar.
Mobile-first — telefoon is primair. Desktop is verbreed-mobiel, niet andersom.
Geen layout-shift — fonts pre-loaded, images met expliciete dimensies, geen JS-only inhoud op kritieke paden.
Trots op data-transparantie — elke uitspraak heeft een 'Hoe is dit berekend?'-disclosure.