Design systeem voor de Klimaat en Energie Koepel
Magenta (#DD1768) is het hero-accent — spaarzaam gebruikt voor maximale impact op CTA's, links en belangrijke UI-elementen.
Oranje (#F16A2C) verschijnt alleen bij interactie (hover-states) en creëert een energieke respons op gebruikersacties.
Grijstinten doen het zware werk — bodytekst gebruikt warm grijs voor comfortabel lezen, terwijl bijna-zwarte koppen hiërarchie bieden.
Witruimte is ook een kleur — ruime marges en de gebroken witte achtergrond houden het ontwerp luchtig en modern.
Vuistregel: Als alles magenta is, is niets magenta. Reserveer accentkleuren voor elementen die aandacht nodig hebben.
Gradients worden gebruikt om visuele diepte en dynamiek toe te voegen. Gebruik ze consistent voor dezelfde doeleinden.
Fraunces is een display-lettertype in de traditie van "wonky" fonts — speels, warm en vol persoonlijkheid. Deze stijl ontstond begin twintigste eeuw als tegenwicht voor de strakke efficiency van traditionele drukletters. Perfect voor oversized koppen die opvallen en karakter uitstralen.
Poppins is een strakke sans-serif die uitstekende leesbaarheid brengt. De cleane, moderne uitstraling past bij een netwerk van young professionals.
Open-source fonts zijn beschikbaar via Coollabs Fonts, een privacy-vriendelijk alternatief voor Google Fonts zonder tracking. Dit stelt ons in staat ze zonder beperkingen, licentiekosten of privacy-concessies te gebruiken voor zowel online als geprinte publicaties.
Vuistregel: Fraunces voor aantrekkelijke koppen, Poppins als body voor modern gevoel en leesbaarheid.
KEK is het cross-sectorale netwerk van young professionals die werken aan de energie- en klimaattransitie in Nederland. Wij geloven in de kracht van jonge professionals om innovatie te brengen in het huidige systeem.
Poppins Semi-bold wordt gebruikt voor nadruk binnen bodytekst, subkoppen in contentblokken en navigatie-items.
Consistente spacing zorgt voor ritme en hiërarchie in het ontwerp. KEK gebruikt een 8px-gebaseerd spacing systeem met rem-eenheden (1rem = 10px door 62.5% html font-size).
De spacing schaal is gebaseerd op vermenigvuldigingen van de basis-eenheid (0.8rem = 8px). Gebruik deze tokens consequent voor marges, padding en gaps.
Cards vormen de basis van onze content-presentatie. Dit diagram toont de interne spacing structuur.
Het grid is gebaseerd op een 12-koloms systeem met responsieve breakpoints. De gap tussen kolommen past zich aan op basis van viewport grootte.
| Breakpoint | Min-width | Container | Kolommen |
|---|---|---|---|
| Mobile | 0px | 100% - 4rem padding | 1 |
| Tablet | 768px | 100% - 4rem padding | 2 |
| Desktop | 1024px | max 1140px | 3-4 |
| Wide | 1280px | max 1140px | 4 |
| Context | Token | Waarde | Toepassing |
|---|---|---|---|
| Sectie padding | --gap | clamp(2rem, 4vw, 4rem) | Verticale ruimte tussen secties |
| Container padding | inline padding | 2rem (20px) | Horizontale buffer aan randen |
| Card padding | padding | 2rem - 3rem | Interne ruimte in cards |
| Grid gap | gap | 2rem - 3rem | Ruimte tussen grid items |
| Button padding | padding | 1.4rem 2.8rem | Interne knop ruimte |
| Paragraaf spacing | margin-bottom | 1.5rem | Ruimte na paragrafen |
| Heading spacing | margin-bottom | 1rem - 2rem | Ruimte na koppen |
Knoppen, tags, kleine elementen
Cards, modals, grote containers
Infoboxen (links plat)
Avatars, iconen
Rust / Default
box-shadow: 0 4px 20px rgba(0,0,0,0.08)
Hover / Actief
box-shadow: 0 12px 40px rgba(0,0,0,0.12)
Subtiel
box-shadow: 0 2px 8px rgba(0,0,0,0.1)
Vaste navigatiebalk met wit achtergrond en subtiele schaduw. Logo in magenta, navigatielinks in donkergrijs die magenta worden bij hover. CTA-knop rechtsboven.
Het netwerk van young professionals
Een cross-sectoraal netwerk van 1200+ young professionals die werken aan de energie- en klimaattransitie in Nederland.
Word ambassadeurHero sectie met subtiele gradient achtergrond (#FAFAFA → #FFF5F8). Eyebrow tekst in magenta uppercase, grote kop, beschrijvende subtitel en prominente CTA.
Young professionals pleiten voor ambitieuze circulaire doelen in het nieuwe regeerakkoord.
Cards hebben subtiele schaduwen, afgeronde hoeken (8px) en liften bij hover. Afbeeldingsgebied gebruikt de merkgradient als placeholder.
Wij geloven in de kracht van young professionals om innovatie te brengen in het huidige systeem. KEK verbindt jonge talenten uit alle sectoren.
Door netwerken, kennisdeling en een actieve bijdrage aan het publieke debat over de energietransitie.
Acht sectorteams bieden community functies, organiseren events en bedrijfsbezoeken.
Energie infrastructuur & innovatie
Verduurzaming van gebouwen
Industriële transitie
Duurzaam transport
Word ambassadeur en maak impact op de energie- en klimaattransitie. Verbind met 1200+ young professionals in heel Nederland.
Word ambassadeurGhost CMS installatie en thema-aanpassing met nieuwe huisstijl.
Migratie van publicaties en ledenbestand naar nieuwe infrastructuur.
Discourse forum actief met SSO-koppeling naar Ghost.
Feedback ophalen en optimalisaties doorvoeren.
Sectorlead Energie
Sectorlead Industrie
Voorzitter
Penningmeester
Deze elementen zijn ontworpen voor gebruik in Ghost-publicaties zoals position papers, nieuwsberichten en rapporten.
Gebruik de kernpunten box bovenaan position papers om de belangrijkste conclusies samen te vatten. Zorgt voor snelle scanbaarheld voor drukke lezers.
Dit is een standaard infobox voor aanvullende context of achtergrondinfomatie. Gebruik deze om lezers te helpen de context te begrijpen zonder de hoofdtekst te onderbreken.
Gebruik deze variant voor positieve aanbevelingen, best practices of tips. De groene kleur communiceert direct dat dit iets is om te doen of te onthouden.
Deze variant is voor waarschuwingen of belangrijke kanttekeningen. Gebruik spaarzaam om de aandacht niet te verdunnen.
Voor kritieke informatie die de lezer absoluut niet mag missen. Zeer spaarzaam gebruiken — maximaal één per artikel.
"De energietransitie is niet alleen een technische uitdaging, maar vooral een maatschappelijke transformatie die vraagt om nieuwe vormen van samenwerking."
— Zeker niet Marien, Sectorlead EnergiesystemenCitaten worden gebruikt om externe bronnen of belangrijke uitspraken van KEK-ambassadeurs uit te lichten. De serif-font creëert visuele distinctie van de bodytekst.
Plaats de auteurkaart onderaan publicaties om context te geven over wie het stuk heeft geschreven. Meerdere auteurs krijgen elk een eigen kaart.
De Nederlandse industrie is verantwoordelijk voor ongeveer 30% van het nationale energieverbruik[1]. Dit maakt industriële verduurzaming essentieel voor het behalen van de klimaatdoelen[2].
Voor gedrukt materiaal gelden aanvullende technische specificaties om kwaliteit te waarborgen.
Voor drukwerk moeten RGB-kleuren worden omgezet naar CMYK. Gebruik onderstaande waarden:
Specificaties: 85 × 55 mm, 350 gsm, mat gecoat
Opmerking: Visitekaartjes zijn optioneel en alleen voor bestuursleden en sectorleads die deze nodig hebben voor externe vertegenwoordiging.
Gebruik magenta spaarzaam voor CTA's, links en belangrijke accenten. Laat grijstinten en witruimte het zware werk doen.
Gebruik magenta niet voor grote achtergrondvlakken of bodytekst. Gebruik oranje alleen voor hover-states, nooit als zelfstandige kleur.
Gebruik Fraunces alleen voor koppen en tags. Houd koppen vet (700-900 gewicht) en oversize voor impact.
Gebruik Fraunces niet voor bodytekst of UI-elementen. Gebruik geen lichte gewichten van Fraunces voor koppen.
Gebruik infoboxen om belangrijke informatie te highlighten. Beperk tot maximaal 3 per artikel. Kies de juiste variant voor de boodschap.
Overlaad artikelen niet met callouts. Gebruik niet meerdere "belangrijke" infoboxen in één stuk — dan is niets meer belangrijk.
Kopieer deze variabelen naar het Ghost theme om de huisstijl consistent door te voeren. De variabelen zijn ontworpen om eenvoudig aan te passen — wijzig één waarde en het hele theme volgt.
:root {
/* Typografie */
--font-heading: "Fraunces", Georgia, serif;
--font-body: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
/* Merkkleuren */
--color-primary: #DD1768;
--color-secondary: #F16A2C;
--color-text: #5F5F5F;
--color-text-dark: #2D2D2D;
--color-text-light: #FBDBC9;
--color-bg: #FAFAFA;
--color-bg-warm: #FFF8F5;
--color-bg-dark: #2D2D2D;
--color-white: #FFFFFF;
/* Ghost accent (voor members portal etc.) */
--ghost-accent-color: #DD1768;
/* Gradients */
--gradient-hero: linear-gradient(135deg, #FAFAFA 0%, #FFF5F8 100%);
--gradient-cta: linear-gradient(135deg, #DD1768 0%, #C01358 100%);
--gradient-card: linear-gradient(135deg, #DD1768 0%, #F16A2C 100%);
--gradient-warm: linear-gradient(135deg, #FAFAFA 0%, #FFF8F5 100%);
/* Layout */
--max-width: 1100px;
--gap: clamp(2rem, 4vw, 4rem);
}
Social media templates
Consistente templates voor alle sociale kanalen zorgen voor herkenbaarheid en professionaliteit. Alle formaten gebruiken de merkgradient als achtergrond met wit tekstoverlay.
LinkedIn post
Circulaire economie: Onze visie voor 2030
Formaat: 1200 × 627 px
Gebruik: Link previews, standaard posts
LinkedIn carousel
5 actiepunten voor de industrie
Formaat: 1080 × 1350 px
Gebruik: PDF carrousels, meerdere slides
EventBrite banner
KEK Jaarevent: De Transitie Versnellen
Formaat: 2160 × 1080 px
Gebruik: Evenementheader op EventBrite
Instagram story
Position paper gepubliceerd
Formaat: 1080 × 1920 px
Gebruik: Stories, verticale content
Richtlijnen social content
Gebruik altijd de merkgradient of -kleuren. Houd tekst kort en scanbaar. Voeg altijd het KEK-logo toe. Gebruik de Fraunces-font voor koppen.
Geen stockfoto's zonder bewerking. Geen andere lettertypes. Geen overvolle slides. Geen kleuren buiten het palet.