Fase 1 · richting
Stijlgids
Eén set kleuren, één lettertype, één vormtaal. Alle waarden hieronder staan als CSS-variabele in :root en gaan één op één naar theme.json.
01 · Kleur
Merkkleuren en tekstkleuren
De oude afwijkende waarden (#F49600, #31BAD9, #BDBF01) en paars vervallen. Merkkleuren zijn voor vlakken, bollen en knoppen. Voor tekst op wit en lichtgrijs zijn er donkere varianten.
5,6:1 op wit · 4,9:1 op grijs
5,7:1 op wit · 5,1:1 op grijs
5,5:1 op wit · 4,8:1 op grijs
6,5:1 op wit
02 · Contrast
De regel: inkt op kleur, nooit wit op kleur
Wit op oranje, cyaan of groen haalt 2:1 en valt af, ook voor koppen. Alle tekst op een merkkleur is inkt (#2E3026): dat haalt 5,9:1 of hoger en werkt dus ook voor lopende tekst. Wit is alleen voor tekst op donker.
03 · Typografie
Open Sans, koppen in gewone schrijfwijze
Kapitalen alleen nog voor korte labels boven een kop. Koppen zijn extra vet in zinsvorm, zodat lange titels als “Inschrijving Bindingkampen 2026 geopend!” leesbaar blijven. Groottes schalen vloeiend van mobiel (375) naar desktop (1440). Regellengte maximaal 68 tekens.
32 → 52px · 1,1
--fs-h1Bindingkampen 2027
26 → 36px · 1,2
--fs-h2Wat houdt een Bindingkamp in?
20 → 22px · 1,3
--fs-h3Vertrek- en aankomsttijden Bindingkampen
17 → 18px · 1,4
--fs-h4Voorinschrijving
13px · kapitalen · +12%
--fs-labelZomer 2027
19 → 21px · 1,5
--fs-leadEen week zomerkamp voor kinderen van 11 t/m 17 jaar uit Aalsmeer en omgeving.
17 → 18px · 1,65
--fs-bodyDe Binding is een stichting die zich sinds 1971 richt op welzijnswerk voor jeugd en jongeren in Aalsmeer en Kudelstaart. Voornamelijk bekend van de kampen, maar zoveel meer.
15px · 1,5
--fs-smallPost: t.a.v. Bindingkamp · P/A Kortenkampseweg 3 · 8161 BH Epe
beeld, geen font
alleen home-hero
04 · Ruimte en hoeken
Afstanden op een raster van 4 en 8
Sectie-padding: sp-8 mobiel, sp-9 desktop. Kantlijn: --rand 20 → 48px. Inhoudsbreedte max 1200px. Hoeken: --r-s 6 (velden, labels), --r-m 14 (tegels), --r-l 28 (kaarten, panelen), --r-pil (knoppen).
05 · Knoppen en links
Pilvormig, minimaal 48px hoog
Knoptekst in zinsvorm. Primair is oranje met inkt en is voorbehouden aan de belangrijkste actie op het scherm (meestal inschrijven). Hover: iets donkerder; focus: dikke inktrand.
06 · Labels en kruimelpad
Doelgroep, soort en status
07 · Vormtaal
Bollen, penseelrand, golflijn
Bollen zijn CSS-cirkels met mix-blend-mode: multiply, zodat de mengkleur van het logo vanzelf ontstaat waar ze overlappen. Ze staan langs randen en rond foto's, nooit onder tekst. De penseelrand is één SVG die elke sectie onderaan krijgt, in de kleur van de volgende sectie.
Bollen · vier maten, max. vier per groep, één grote oranje als anker.
Penseelrand · 14 → 32px hoog, twee lagen (45% en 100%). Instelling per sectie: aan/uit.
Agenda
Komende activiteiten
Golflijn · onder sectiekoppen, oranje (decoratie, geen tekst), links uitgelijnd.
08 · Formuliervelden
Nieuwsbrief en WPForms
Label altijd boven het veld, niet als placeholder. 52px hoog, 2px rand. Fout: rode rand en melding onder het veld. Bevestiging vervangt het formulier.