Huisstijlgids 2025
Visuele identiteit, ontwerptaal en componenten voor een consistente uitstraling op alle kanalen.
01 — Kleurenpalet
Het palet is compact en krachtig. Rood staat voor urgentie en hart, donkerblauw voor vertrouwen en diepgang, lichtgrijs als rustgevende achtergrond. Van grijs zijn twee tinten beschikbaar voor hiërarchie.
Gebruik rood uitsluitend als accent en nooit als grote achtergrondvlakken. Donkerblauw en lichtgrijs vormen de visuele basis van elke pagina of publicatie.
02 — Typografie
Barlow Condensed geeft kracht en karakter aan titels. Merriweather brengt warmte en leesbaarheid voor introductieteksten. Work Sans verzorgt heldere, vriendelijke leesteksten.
Gebruik: paginatitels (H1/H2), navigatie, knoppen, labels, eyebrows. Gewichten: 700 voor koppen, 600 voor navigatie en knoppen, 800 voor display-koppen. Letter-spacing: 0.02em voor grote titels, 0.1–0.15em voor navigatie en labels.
Gebruik: lead-teksten, intro-alinea's, citaten, subkoppen met emotionele lading. Gewichten: 300 (licht) voor intro-alinea's, 400 voor leesbaar proza, cursief voor citaten en accenten.
Gebruik: alle doorlopende leestekst, bijschriften, formulieren, metadata. Gewichten: 300 voor subteksten, 400 voor reguliere leestekst, 500 voor subkoppen en nadruk in lopende tekst.
Gebruik: paginatitel, herokoppen. Altijd in kapitalen.
Gebruik: sectietitels, kaartkoppen. Altijd in kapitalen.
Gebruik: ondertitels, kaartkoppen niveau 3.
Gebruik: inleidende citaten, emotionele accenten.
Gebruik: eerste alinea van een tekst, teaser-tekst bij artikelen.
03 — Knoppen
Alle knoppen hebben een volledige afronding (border-radius: 999px). Het lettertype is altijd Barlow Condensed in kapitalen. Drie varianten: primair (rood gevuld), secundair (blauw outline) en wit (voor donkere achtergronden).
Op lichte achtergrond
Primaire knop: rood gevuld, witte tekst. Secundaire knop: blauwe rand en tekst, lege achtergrond.
Op donkere achtergrond
Op donkere achtergronden: rode knop als primaire actie, witte outline-knop als secundaire actie.
Groot
Padding: 18px 44px • Lettergrootte: 16px • Letter-spacing: 0.12em
Standaard
Padding: 14px 32px • Lettergrootte: 14px • Letter-spacing: 0.12em
Klein
Padding: 10px 22px • Lettergrootte: 12px • Letter-spacing: 0.12em
Hover
Primair: background #B02C21 + shadow. Secundair: achtergrond wordt blauw. Overgang: 0.2s ease.
04 — Labels
Labels markeren categorieën, verlangnummers en statussen. Ze krijgen een lichte ronding (border-radius: 6px) om ze te onderscheiden van de volledig afgeronde knoppen.
Labelstijlen
Rood gevuld: primaire categorieën, verlangennummers, nieuwsberichten.
Blauw gevuld: organisatorische categorieën, structuurlabels.
Grijs gevuld: neutrale informatie, archief, datering.
Rode outline: secundaire accentlabels, subtiele nadruk.
Gebruik in context
05 — Kaarten
Kaarten zijn de bouwstenen voor nieuwsoverzichten, verlangens en uitgelichte inhoud. Ze zijn altijd wit of donkerblauw, met zachte schaduw en subtiele hover-animatie.
De Agenda voor het Hart is één agenda voor Nederland waarin verlangens rondom grote uitdagingen in de samenleving zijn uitgewerkt. Binnen deze agenda bundelen organisaties en gemeenschappen hun krachten.
Meer lezen06 — Componenten in context
Hieronder staan de voornaamste pagina-elementen zoals ze in de praktijk worden ingezet: navigatie, heroblok en het 'Hoe kun jij meedoen?'-blok.
Primaire navigatie
Navigatie: donkerblauwe achtergrond, Barlow Condensed 600 in kapitalen, 0.1em letter-spacing. Logo links, navigatie-items rechts.
Herocomponent
Agenda voor het Hart
Samen vorm geven aan een gezamenlijke droom voor de samenleving in Nederland.
Hero: donkerblauw vlak, titel in Barlow Condensed 800, subtitel in Work Sans 300. Rode eyebrow-tekst. Twee knoppen: rood + wit outline.
CTA-sectie: Hoe kun jij meedoen?
Doe mee
De Agenda voor het Hart is een uitnodiging om krachten te bundelen en samen de transformatie van betekenis vorm te geven.
CTA-sectie op rode achtergrond: witte outline-knoppen. Dit is de enige context waarin een rode achtergrond over een groter vlak is toegestaan.
07 — Ruimte & Structuur
Een consistent raster van acht punten geeft ritme en overzicht. Gebruik altijd veelvouden van 8px voor margins, paddings en gaps.
Afronding (border-radius)
Knoppen
999px
Labels
6px
Kaarten
12px
09 — Implementatie
Alle stijlwaarden staan als CSS custom properties. Gebruik altijd de variabelen en nooit de hexadecimale waarden direct, zodat aanpassingen overal automatisch doorwerken.
10 — Logo
Het logo bestaat uit het beeldmerk (het hartvormige icoon) en de woordcombinatie "Agenda voor het Hart". Beide elementen kunnen zelfstandig worden ingezet, maar het volledige logo geniet de voorkeur voor alle primaire communicatie.
Primaire versie — op lichte achtergrond
Eenkleurige versie — volledig donkerblauw
Witte versie — op donkere achtergrond
Het beeldmerk kan zelfstandig worden gebruikt wanneer de naam van de organisatie al in de context aanwezig is, zoals als favicon, app-icoon of profielfoto op sociale media.
Rood
Op lichte achtergronden
Donkerblauw
Eenkleurige versie
Wit
Op donkere achtergronden
Wel
Niet
11 — Fotografie
Fotografie is voor de Agenda voor het Hart geen illustratie van een tekst, maar een zelfstandige drager van het verhaal. Beelden laten zien wat de beweging is: mensen die elkaar ontmoeten, in gesprek gaan en samen bouwen aan verandering.
Stijl en sfeer
Foto's zijn warm, authentiek en herkenbaar. Ze tonen echte mensen in echte situaties: een gesprek tijdens een bijeenkomst, twee mensen die luisteren, een zaal vol betrokkenen, handen die elkaar vasthouden. De sfeer is licht en open, zonder te poseren. Geen stockfoto-esthetiek, maar beelden die voelen alsof je erbij was.
Inhoud en focus
De mens staat altijd centraal. Foto's tonen ontmoeting, verbinding en samenwerking: mensen die met elkaar in gesprek zijn, lachen, luisteren of samen iets doen. Beelden van individuen zijn portretmatig en respectvol. Groepsbeelden laten de diversiteit van de beweging zien, van professionals tot buurtbewoners.
Positief en hoopvol
De Agenda voor het Hart communiceert vanuit hoop, niet vanuit problematiek. Beelden verbeelden wat mogelijk is: een samenleving in beweging, mensen die geloven in verandering. Vermijd beelden van leed, conflict of abstracte symbolen. Kies altijd voor het perspectief van energie en verbinding.
Technische richtlijnen
Gebruik fotografie met een natuurlijke belichting en een warme kleurtemperatuur. Bewerking is subtiel: geen zware filters of hoge contrasten. Minimale resolutie voor digitaal gebruik is 1920 px breed, voor print 300 dpi. Formaten: 16:9 voor hero-afbeeldingen, 4:3 of 1:1 voor kaarten en sociale media.
Wel gebruiken
Niet gebruiken