01
Logo
Het beeldmerk is een locatiepin die ook een tekstballon is: je stelt je vraag en vindt iets in je buurt. De drie koraalrode stippen zijn GidZ die antwoordt. Het woordmerk staat in Nunito Black.
Primair, op wit en papier
Op mint (hero)
Diapositief, op dennen en teal
App-icoon
Beeldmerk op mint, of wit op teal. Voor favicon, social avatar en een latere app.
Vrije ruimte
Houd rondom het logo minimaal de breedte van één stip vrij, keer drie. In de navigatie staat het logo links.
Minimale breedte
120 px met woordmerk. Daaronder alleen het beeldmerk. Op 32 px blijven de stippen zichtbaar. Let op: dit is een SVG-benadering van het concept, de definitieve vector volgt.
02
Kleur
Zes merkkleuren. Dennen is de tekstkleur, mint en zon zijn de grote vlakken, teal en koraal komen uit het logo. Per pagina hooguit drie gekleurde vlakken, de rest is papier. Elke doelgroep heeft een eigen kleur, die je als pin-icoon bij het label zet.
Merkkleuren
Ondersteunende kleuren
Doelgroepkleuren
Combinaties, met contrast
Vraag het GidZ.
10,2:1 · Hero
Vraag het GidZ.
12,4:1 · Hoe het werkt, footer
Vraag het GidZ.
8,6:1 · CTA, aanbieders
Vraag het GidZ.
6,1:1 · Gemeenten
Vraag het GidZ.
10,2:1 · Veilig, professionals
Vraag het GidZ.
8,6:1 · Accentwoord op donker
03
Typografie
Nunito voor koppen, omdat de ronde vormen aansluiten op het logo. Atkinson Hyperlegible Next voor tekst: die letter is gemaakt voor mensen die slecht zien, en dat past bij wat BuurtGids doet. De basisgrootte is 18 px.
Aa
Nunito
next/font/google · 700, 800, 900
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 €
Aa
Atkinson Hyperlegible Next
next/font/google · 400, 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € Il1 O0
- Display / H164 / 69 · Nunito Black 900
- Vertel wat je zoekt.
- H2 / sectietitel44 / 48 · Nunito Black 900
- Voor wie BuurtGids werkt
- H3 / kaarttitel26 / 30 · Nunito Black 900
- Gevonden worden zonder formulieren
- Tussenkop20 / 26 · Nunito ExtraBold 800
- Geen account, niets bewaard
- Lead21 / 33 · Atkinson Regular 400
- GidZ stelt een paar korte vragen en laat zien wat er in jouw wijk te doen is.
- Body18 / 29 · Atkinson Regular 400
- Een vrijwilliger fietst met je mee op een duofiets. Jij hoeft niet te sturen.
- Klein16 / 24 · Atkinson Regular 400
- Je locatie gebruiken we alleen om aanbod in de buurt te zoeken.
- Markering.markeer · zon onder het kernwoord
- Wij vinden het bij jou in de buurt.
04
Vormen en motief
De pin-ballon is het beeldmerk én de supergraphic. Zet hem groot, gekanteld tussen 8 en 22 graden en half buiten beeld. Rust is de regel: hooguit één grote pin per sectie, en niet in elke sectie. Op een pagina staan er maximaal drie.
Vol · teal op mint
Omlijnd · zon op dennen
Logo-variant · koraal
Uitgespaard · op zon
De drie stippen
Boven een h1, in de footer en als laadindicator van GidZ.
Stippenveld
Textuur in een hoek van een zacht vlak. Altijd op 25 t/m 30% dekking.
Genummerde stappen
Het cijfer in een zon-pin.
Ballonrand
De overgang tussen twee gekleurde secties: één rustige, bolle rand. Alleen gebruiken waar een gekleurd vlak overgaat in een ander vlak, niet tussen twee lichte secties.
Portret in pin-vorm
Voor team, aanbieders en verhalen van inwoners.
Kaart · 12 px
Zwevend · 20 px + schaduw
Knop · pil
05
Knoppen
Dennen is de standaardactie, zon de actie op donker en teal. Knoppen met een pijl leiden naar een volgende stap. Bij hover gaat de knop een fractie omhoog. Elke knop is minimaal 48 px hoog.
Pil met cirkel en pijl: hero, CTA en navigatie. Rand-variant voor een tweede keuze.
Antwoordknoppen in GidZ: wit met teal rand. ‘Laat ze mij bellen’ is de belangrijkste knop van het product.
06
Componenten
De bouwstenen van het GidZ-gesprek en de doelgroepblokken, zoals ze op de homepage staan.
Doe je het liever met één vast persoon, of met een groep?
Met één vast persoon
Tekstballonnen: GidZ links op mint licht, jij rechts op teal. Het typen is het enige dat beweegt.
Fietsmaatjes
Een vrijwilliger fietst met je mee op een duofiets. Jij hoeft niet te sturen.
- Waar
- Buurtcentrum De Linde
- Kosten
- Gratis
Er is een wachtlijst van ongeveer 6 weken
Laat ze mij bellenTipkaart: wat, waar, wanneer, kosten. Een waarschuwing in koraal tekst. Eén actie.
Aanbieders en vrijwilligers
Gevonden worden zonder formulieren
Doelgroepblok: witte kaart, label met een pin in de doelgroepkleur. Alleen gemeenten krijgen een vol vlak.
Gratis voor inwonersGeen account nodigOok voor een ander
Kernfeiten onder de hero: één regel, gescheiden door een teal stip.
07
Toegankelijkheid en toon
BuurtGids is er voor iedereen: ook voor wie slecht ziet, moeite heeft met lezen of weinig met computers doet. Dat zijn de regels waar elk ontwerp en elke tekst langs moet.
Tekst minimaal 18 px
En een knop ‘Tekst groter’ in de header die alles 17% groter maakt.
Contrast minimaal 4,5:1
Teal en koraal nooit als tekstkleur, gebruik teal tekst en koraal tekst.
Tikken in plaats van typen
Elke vraag van GidZ heeft knoppen. Typen en inspreken zijn een extra.
Knoppen minimaal 48 px
Ruim uit elkaar, zodat je niet per ongeluk de verkeerde raakt.
Focusring in koraal
3 px, altijd zichtbaar bij bediening met het toetsenbord.
Weinig beweging
Alleen de typ-stippen bewegen, en die stoppen bij ‘minder beweging’.
Taalniveau B1
Korte zinnen, gewone woorden. Niet ‘voorliggend veld’ maar ‘hulp en activiteiten in de buurt’.
GidZ zegt wat hij is
Een computer die meezoekt. Geen medisch advies, geen verzonnen aanbod, altijd een mens als uitweg.
08
Tokens
De kleuren en maten staan als CSS-variabelen in globals.css en zijn via @theme beschikbaar als Tailwind-klassen, zoals bg-mint, text-dennen en rounded-[var(--radius-card)].
:root {
--dennen: #0d3b36; --teal: #0a9a8a; --teal-ink: #0b6e62;
--mint: #c9f2e6; --zon: #ffd25e; --koraal: #f2704f;
--perzik: #ffe3d6; --papier: #fbf8f2; --lijn: #e3ddd2;
}
@theme inline {
--font-display: var(--font-nunito); /* 700 800 900 */
--font-sans: var(--font-atkinson); /* 400 700 */
--radius-card: 12px; --radius-float: 20px;
--shadow-float: 0 24px 60px -24px rgb(13 59 54 / .35);
--text-body: 1.125rem; --text-lead: 1.3125rem;
--text-h2: 2.75rem; --text-h1: 4rem;
}