Impact Vandaag

Kleuren (Brand Tokens)

Primary (Purple)

Secondary (Orange)

Secondary (Green)

Neutralen & Status

Typografie

UI Componenten

Onderstaande knoppen zijn de échte AppButton-component. Pas 'm één keer aan en zowel de website als deze stijlgids veranderen mee. Hover/focus zijn live — beweeg met de muis over de knoppen.

PRIMARY / SECONDARY / TERTIARY

ACCENT (GROEN / PAARS)

TERTIARY LINKS (ORANJE / GROEN / PAARS)

Tekst-links met pijl. Bij hover schuift de héle link mee (zoals de hero-links): vooruit naar rechts, terug-links naar links. Kleuren komen uit de style-guide tokens (oranje / green-status / primary-purple). Beweeg met de muis over de links.

MATEN (SM / MD / LG / XL)

Button-regels: padding L/R 45px · T/B 15px · hoogte 56px · radius 0 (scherpe hoeken) · Montserrat SemiBold 16px / line-height 1.6. Alle kleuren via tokens (--color-orange / -hover / -focus).

MOTION / MICRO-INTERACTIES

Beweging loopt via één easing-token --ease-brand en één canonieke .animate-fade-in-up. Content die in beeld scrollt gebruikt de v-reveal-directive (fade + slide-up), afbeeldingen faden in met v-img-fade, en routes wisselen met een zachte fade. Kaarten liften subtiel bij hover. Alles schakelt automatisch uit bij prefers-reduced-motion: reduce.

Selectoren & Navigatie

Iconen (lucide · token-kleuren)

Eén icon-set (lucide) door de hele site; kleur via tokens (currentColor). Merk-logo's (Google/LinkedIn/WhatsApp) blijven simple-icons.

Lijsten

Formulier Velden (echte componenten)

Alle formulieren gebruiken één token-gedreven component-set (AppInput / AppTextarea / AppSelect): scherpe hoeken, border grey-200, subtiele schaduw en een paarse focus-ring. Labels zijn coolgray-60.

Componenten (in gebruik)

Echte, herbruikbare componenten die live op de site staan — hier getoond zodat wijzigingen centraal te zien zijn.

STAPPENTELLER (StepTimeline)

1

Solliciteren

2

Kennismaken

3

Voorbereiding gesprek

4

Uitslag

Zie je een interessante vacature? Klik op solliciteren en stuur je cv mee. Binnen 48 uur neemt één van onze adviseurs contact met je op. We kijken daarbij:

• • Of jouw profiel geschikt is voor de functie op basis van de gevraagde eisen, wensen en competenties.
• • Of je past bij de organisatie.

Past het? Dan bespreken we samen welke rol en welk project het beste bij jou aansluit, altijd met Impact Vandaag als veilige thuisbasis.

KAARTEN

Hoge verdiensten

Aantrekkelijke verdiensten met de zekerheid van een vast dienstverband.

1

Solliciteren

Klik op solliciteren en stuur je cv mee.

FAQ-ACCORDEON

FILTERS & SLIDER

UPLOAD (CV)

PAGINA- / DATA-GEDREVEN COMPONENTEN

Deze componenten hebben live data of context nodig; ze zijn te zien op de pagina waar ze worden gebruikt (allemaal token-gedreven volgens dezelfde stijl):

• • VacancyCard — /vacatures
• • AdvisorCard / Advisors — /ons-team
• • VacancySearchBar — home
• • VacancyMapView — /vacatures (kaartweergave)
• • StepTimelineVacancies — vacature-detailpagina
• • Rekentool — /hoe-werkt-het
• • Volledige formulieren — /contact, /adviesopgave, /profiel, /registreren
• • AppHeader / AppFooter / MOTD — globaal op elke pagina
• • Toast & AppNotifications — verschijnen bij acties (opslaan, fouten)

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.