Horizontaal — kleur (lichte achtergrond)
Hoofdvariant. Leaf brand-primary, tekst ink. Overal te gebruiken op een lichte achtergrond.
Brand kit
Onze huisstijl
Logo's, kleuren, typografie. Deze pagina dient als referentie voor het Chargekeeper-team en als merkkit voor onze partners die onze visuals bij zich integreren.
Een vraag over het gebruik van het merk? Neem contact op.
Logo's
Belangrijkste varianten
Gebruik de variant die past bij het contrast van de achtergrond. Behoud altijd een beschermzone rond het logo gelijk aan de hoogte van het blad.
Horizontaal — signature (donkere achtergrond)
DNA-variant. Leaf signature-groen, witte tekst. Voorbehouden aan donkere achtergronden en momenten met veel impact.
Signature-variant — blad in #38E54D (DNA-groen). Voorbehouden aan donkere achtergronden.
Horizontaal — monochroom wit
Volledig wit. Voor zeer drukke donkere achtergronden (donkere foto's) of monochrome dragers.
Verticaal — signature (donkere achtergrond)
Verticale DNA-variant. Gebruikt in de footer van de site.
Signature-variant — blad in #38E54D (DNA-groen). Voorbehouden aan donkere achtergronden.
Verticaal — zwart (monochroom)
Verticaal monochroom zwart. Druk, fax, zwart-witdragers.
Pictogram
Het blad
Het pictogram alleen, te gebruiken voor favicons, sociale avatars, watermerken en handtekeningen.
Gebruik van het logo
Doen & vermijden
Doen
- Behoud een ademruimte rond het logo (≥ hoogte van het blad).
- Gebruik de variant die past bij het contrast van de achtergrond.
- Behoud de originele verhoudingen (niet uitrekken).
- Geef de voorkeur aan SVG voor web en druk.
Vermijden
- Wijzig de kleuren niet buiten het officiële palet.
- Voeg geen effecten toe (schaduwen, randen, verlopen).
- Draai of vervorm het logo niet.
- Plaats het logo niet op een achtergrond met weinig contrast.
Mascotte
Keeper
Merkfiguur dat wordt gebruikt voor gezellige illustraties, foutpagina's en interne communicatie.
Keeper is onze mascotte. Hij verschijnt vooral in speelse contexten (404-pagina, interne dragers, evenementen). Spaarzaam te gebruiken in commerciële communicatie — geef de voorkeur aan het logo in formele contexten.
Kleuren
Palet
Drie afzonderlijke rollen: een universeel groen voor dagelijks gebruik, een signature-groen voor het DNA op donkere achtergrond, en een lime-accent voor typografische markeringen. CSS-tokens gedefinieerd in global.css — verwijs altijd naar het token, nooit hardcoded de hex.
Op lichte achtergrond — werkkleuren
#27a273
Brand primary
--color-brand-primary Universeel. Knoppen, links, UI-accenten, leaf van het 'dag'-logo. Alle achtergronden, alle contexten.
#1a8a5e
Brand primary dark
--color-brand-primary-dark Hover / pressed van de brand primary.
#e1ffa0
Accent lime
--color-accent-lime Typografische markering alleen op lichte achtergrond ('gele markeerstift'-effect op trefwoorden). Geen merkkleur.
Op donkere achtergrond — signature-DNA
#38E54D
Vert signature
--color-signature Historisch DNA. Voorbehouden aan donkere achtergronden en momenten met veel impact: 'nacht'-logo, live badges, lopende sessies, hero-dark-accenten. Nooit op lichte achtergrond (leesbaarheid).
Groenschaal
#c8fbe7
green-50
--color-green-50 Zeer lichte achtergronden, hero-verlopen.
#a8eccc
green-100
--color-green-100 Getinte secundaire oppervlakken.
#5fc99c
green-300
--color-green-300 Illustraties en tussenstates.
#27a273
green-500
--color-green-500 Identiek aan de brand primary.
#32735f
green-600
--color-green-600 Tekst op lichte achtergrond, sobere accenten.
#1a3e39
green-700
--color-green-700 Donkere tertiaire oppervlakken.
#164038
green-800
--color-green-800 Donkere secundaire oppervlakken.
#143109
green-900
--color-green-900 Diepe donkere oppervlakken, premium secties.
#071412
green-950
--color-green-950 Footer, donkere signature-achtergronden, hero dark.
#071412
ink
--color-ink Hoofdtekst. Identiek aan green-950.
#ffffff
paper
--color-paper Hoofdachtergrond, oppervlakken.
#fafafa
paper-soft
--color-paper-soft Afwisselende secties, kaarten.
#e6e6e6
paper-mute
--color-paper-mute Randen, scheidingslijnen, uitgeschakeld.
Typografie
Lettertypen
Twee hoofdlettertypen — een display voor de titels, een sans-serif voor de lopende tekst. Mono-stack voor code.
Averta Std
Display — titels
--font-display EV-supervisie ontworpen voor professionals
Geometric sans, premium karakter. Voorbehouden aan H1–H6.
Fallback: General Sans, Inter, system-ui.
General Sans
Tekst — lopende tekst & UI
--font-sans De complete, interoperabele en schaalbare supervisieoplossing.
Neutrale sans-serif, uitstekende leesbaarheid op scherm. Gebruikt voor alle lopende tekst en de UI.
Fallback: Inter, system-ui, Segoe UI, sans-serif.
ui-monospace
Code, tokens
--font-mono OCPP 2.0.1 · API_KEY=ck_…
Systeemstack: SFMono-Regular, Menlo, Monaco, Consolas, monospace.
Geen custom lettertype — prestaties en OS-consistentie.
Typografische schaal
H1 — Display 6xl
H2 — Display 5xl
H3 — Display 4xl
H4 — Display 2xl
Introparagraaf — lg/xl, text-ink/80.
Lopende paragraaf — base, text-ink/70.
Notitie / bijschrift — sm, text-ink/60.
Eyebrow — xs, uppercase, tracking large, brand-primary
Bent u partner?
Download de logo's rechtstreeks vanaf deze pagina. Voor extra formaten (AI, EPS, vectorieel in hoge resolutie) of specifieke co-brandings, neem contact met ons op.