Impact Vandaag

Design System Documentation v1.0

Kleuren (Brand Tokens)

Primary (Purple)

100
200
300
400
500
600
700BASE #250066
800
900

Secondary (Orange)

100
200
300
400
500
600
700BASE #EB5E00
800
900

Secondary (Green)

100
200
300
400
500BASE #00CC66
600
700
800
900

Neutralen & Status

Grey 700 (Base)#333333
Status Error#FF0000
Status Warning#FFB800

Typografie

Level 1 - Montserrat Medium (80px)
Lorem Ipsum
Level 2 - Montserrat Medium (48px)
Lorem Ipsum
Level 3 - Montserrat Semibold (30px)
Lorem Ipsum
Level 4 - Montserrat Semibold (22px)
Lorem Ipsum Dolor Sit Amet
Paragraph L - Montserrat Medium (20px)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ea dolore.

Paragraph M - Montserrat Regular (18px)

Onze adviseurs helpen u graag verder bij het vinden van de juiste match.

Paragraph S - Montserrat Regular (16px)

Dit is de standaard body tekst die gebruikt wordt voor de meeste pagina's.

Link - Montserrat Medium Underline (16px)Links - Montserrat Medium (16px)
Labels / Error - Montserrat Medium (14px)
Verplicht
Cv is verplicht.

UI Componenten

BUTTONS PRIMARY

Button
Primary-Active
Button
Primary-Hover
Button
Primary-Focus
Button
Secondary-Active
Button
Secondary-Hover
Button
Secondary-Focus
➔ Button
Tertiary-Active
➔ Button
Tertiary-Hover

BUTTONS SECONDARY (ACCENT COLORS)

Button
Button
Button
➔ Button
➔ Button
Button
Primary-L-Disabled

Button Rules:
Padding Left/Right: 45px | Padding Top/Bottom: 15px | Border Radius: 0px (Straight edges)

Selectoren & Navigatie

Checkboxes
Toggle Switch (Tertiair Groen)
Toggle On
Toggle Off
Breadcrumbs
⭠Terug naar overzicht
Pagination
⟨
1
2
3
4
5
⟩
Status Labels / Pills
Sluit Vandaag
Sluit Morgen
Over 3 dagen
Artikel
Tabs / Sidebar items
👤Mijn gegevens
>
💼Baan voorkeuren
>

Iconen & Lijsten

Lijst met vinkjes (Standaard)
  • Standaard lijstitem met vinkje.
  • Gebruikt voor voordelen of opsommingen.

Formulier Velden (Standaard)

Alle formulieren gebruiken een uniforme stijl gebaseerd op het gebruikersprofiel. Labels zijn donkergrijs (black @ 70%) en inputvelden hebben een scherpe hoek met een subtiele paarse focus.

Focus staat: Border #250066 met subtiele ring.

Dit wachtwoord is te kort.

Layout Principes

  • Hero Secties: Vastgelegd op 546px hoogte voor hoofd- en overzichtspagina's, met een herkenbare ronde onderkant (SVG). Detail- en inschrijfpagina's gebruiken vaak ruime verticale padding (80-120px).
  • Spatiering: Brede containers met standaard px-20 voor desktop.
  • Randen: Knoppen en invoervelden hebben rounded-none voor een strakke, zakelijke uitstraling. Kaarten maken gebruik van rounded-[32px] voor een modern contrast.
  • Verplichte Velden: Geen asterisks (*), maar de tekst * in de labels om toegankelijkheid en duidelijkheid te vergroten.
  • FAQ / Accordions: Gebruiken een font-size van 18px (Paragraph M) en wisselen bij actieve staat naar font-semibold en kleur #250066.
© 2026 Impact Vandaag Design System. Gebouwd met Passie voor de Publieke Sector.