VWA Design System

Kleuren

Het VWA kleurenpalet — primair blauw + paars als gradient

Primaire Kleuren

Primary Blue

--primary

#2563eb

Indigo

--secondary

#4f46e5

Purple

--accent

#9333ea

Gradient

--gradient

brand

Semantische Kleuren

Success

--success

#10b981

Warning

--warning

#f59e0b

Error

--error

#ef4444

Info

--info

#3b82f6

Channel Kleuren

Facebook

--channel-facebook

#1877f2

Instagram

--channel-instagram

#e4405f

Google

--channel-google

#f59e0b

Neutrale Kleuren

Slate 50

#f8fafc

Slate 100

#f1f5f9

Slate 200

#e2e8f0

Slate 500

#64748b

Slate 700

#334155

Slate 900

#0f172a

Typografie

Inter — hiërarchie en gewichten

Heading 1 / 4xl bold

Heading 1 / 4xl bold

Heading 2 / 3xl bold

Heading 2 / 3xl bold

Heading 3 / xl semibold

Heading 3 / xl semibold

Body tekst voor lopende content. Inter font op een leesbare grootte.

Body tekst / base

Small tekst voor labels en secundaire info.

Small / sm

Uppercase label

Uppercase label / xs

Buttons

Interactie knoppen in verschillende stijlen

Primary

Secondary

Destructive

Sizes

Navigatie

Tab-bar: pill-navigatie met links de tabs en rechts een actie

Tab-bar

Actieve tab = donkere pill; inactief = grijs met hover. Rechts uitgelijnd een secundaire actie (bijv. Instellingen).

Sub-navigatie

Zoekbalk + filter-pills met actieve staat (binnen een view)

Filter-bar

Actieve filter = donkere pill; overige = outline met hover. Zoekbalk = pill-input met icoon links. Een icoon-only actie (verwijderen) staat rechts.

Formulieren

Input velden en form controls

Tekst input

Email met icoon

Select

Checkbox

Account actief

Textarea

Cards

Content containers

Default Card

Met border en achtergrond.

Muted Card

Subtiel groeperen.

Highlight Card

Voor belangrijke info.

KPI Cards

Metric cards met vergelijking met vorige periode

Grafieken

Chart styling — gebaseerd op recharts

Voorbeeld lijn-chart

1 mrt15 mrt29 mrt

Stacked Bar Chart

Vergelijking actueel vs vorige periode, gestapeld per kanaal

Posts per uur vandaag

Vergelijking met normaal uurpatroon

ActueelNormaal

Facebook Instagram Google

Donut Chart

Cirkelvormige verdeling met centrum-label

Sessies per device

9.812

sessies

Desktop55%

Mobile30%

Tablet15%

Engagement type

238

likes

Likes70%

Comments20%

Shares10%

Channel Breakdown

Cards per kanaal met progress bar en percentage

Facebook

3.51362%

Instagram

1.56228%

Google

54710%

Top N Lijst

Geordende lijst met rang, percentage en trend

Period Selector

Tab-stijl tijdsperiode keuze

Compact (3 opties)

Date Range pill

📅 Mar 14, 2026 – Apr 12, 2026 ▾

Date Range Picker

Pill-trigger met popover: snelle presets, custom range, recent gebruikt

Standaard variant

14 mrt 2026 – 12 apr 2026 ▾

Features

✓ Snelle presets: Vandaag, Gisteren, Laatste 7/14/30/90 dagen, Deze/vorige maand, Dit/vorig jaar
✓ Custom range met VAN/TOT velden + maandkalender
✓ "Periode toepassen" knop voor handmatige selectie
✓ "Recent gebruikt" (max 4, opgeslagen in localStorage)
✓ Tijdzone footer met UTC offset
✓ Active preset highlight + check-icoon

Empty State

Voor lege lijsten en filters zonder resultaten

Geen data beschikbaar

Pas de filters aan of probeer een ander tijdvak.

Selecteer een onderwerp

Kies een item uit de lijst om details te zien.

Tabellen

Data-gerichte lijsten

Naam	Rol	Status
Dirk Visser	Admin	Actief
Monique	Client	Actief
Jan de Vries	Admin	Actief

Badges & Status

Korte status-indicatoren

Actief Inactief In behandeling Fout Admin Client Beta Premium

Iconen

Lucide — 24x24 outline icons

Alerts

Meldingen in 4 varianten

Succesvol opgeslagen

De wijzigingen zijn bewaard.

Informatie

Sync draait elk uur automatisch.

Let op

Meta API token verloopt binnen 7 dagen.

Fout

De API call is mislukt: permissie geweigerd.

Spacing & Radius

Ruimte en afgeronde hoeken

Border Radius

rounded-md

6px

rounded-lg

8px

rounded-xl

12px

rounded-2xl

16px

rounded-full

9999px

Shadows

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

Spacing Scale (Tailwind)

1

4px

2

8px

3