WinkelHub Styleguide

Het complete design handboek voor het WinkelHub merk. Gebruik deze richtlijnen voor consistente communicatie over alle kanalen.

Versie 1.0 — Februari 2026
Basis
Brand story
WinkelHub is dé WordPress plugin voor woonwinkels. We helpen zowel jonge ondernemers als gevestigde winkeleigenaren om lokaal gevonden te worden — zonder technische kennis.
🎯
Toegankelijk
Technologie moet voor iedereen werken. Van de 28-jarige starter tot de 55-jarige winkeleigenaar. Simpel, duidelijk, geen jargon.
🏠
Woonbranche-first
Alles is specifiek ontworpen voor woonwinkels. Geen generiek platform — elke feature is gemaakt voor meubels, verlichting en interieur.
🚀
Betrouwbaar & schaalbaar
Professioneel genoeg voor enterprise, simpel genoeg voor een eenmanszaak. Groeit mee met je business.
Basis
Kleurenpalet
Het WinkelHub palet combineert dopamine-kleuren met warme, professionele tinten. De primaire kleuren worden gebruikt voor het merk, de neutrals voor tekst en achtergronden.
Primaire kleuren
Lavender
Primair · rust & sfeer
#C4A1FF
Bubblegum
Primair · warmte & welkom
#FF6BB5
Sky Blue
Primair · frisheid & ruimte
#6BE0FF
Accent & secondary
Lime
Accent · energie & highlights
#C8FF46
Purple Deep
CTA · links & interactie
#8B5CF6
Peach
Accent · warmte & hout
#FFB86B
Neutrals
Dark
Achtergrond donker
#0C0816
Ink
Headings & tekst
#1A1430
Text
Body tekst
#443D56
Muted
Subtekst & labels
#857E96
Cream
Pagina achtergrond
#FDFBF8
Warm
Card & sectie achtergrond
#F8F5F0
Gradients
Primary CTA135deg, #8B5CF6 → #FF6BB5
Brand / Logo135deg, LAV → PINK → SKY
Soft accent135deg, #C4A1FF → #6BE0FF
Dark sections135deg, #0C0816 → #1C1530
Basis
Typografie
Drie fonts met duidelijke rollen. Baloo 2 voor het logo-wordmark, Plus Jakarta Sans voor headings en UI, DM Sans voor body tekst.
Baloo 2 — Logo & Wordmark
Weight: 800 · Google Fonts
WinkelHub
Gebruik
Alleen voor het logo-wordmark. Niet gebruiken voor headings of body tekst. De bubbly, afgeronde vormen geven het merk zijn speelse karakter zonder dat de hele site "casual" aanvoelt.
Plus Jakarta Sans — Headings & UI
Weights: 600, 700, 800 · Google Fonts
  • 50px / 800 Hero H1 Jouw woonwinkel
  • 34px / 800 Section title Gebouwd voor winkels
  • 18px / 700 Card title Geo-landingspagina's
  • 14px / 700 Button / Label Download voor WordPress →
  • 12px / 700 Overline WAAROM WINKELHUB
DM Sans — Body & Interface
Weights: 400, 500, 600 · Google Fonts
WinkelHub is dé WordPress plugin die woonwinkels helpt met lokale vindbaarheid, producten tonen en klanten binnenhalen. Installeer, configureer, groei.
Regular 400
Body tekst en lange content
Medium 500
Nav links en metadata
SemiBold 600
Emphasis en labels
Systeem
Spacing & Design Tokens
Consistente spacing en border-radius waarden voor een samenhangend design. Gebaseerd op een 4px grid.
Spacing schaal
xs
4px
sm
8px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
80px
5xl
100px
Border radius
8px
Inputs
10px
Nav CTA
12px
Buttons
16px
Small card
20px
Cards
100px
Pills
Shadows
sm
md
lg
Systeem
Buttons
Vier button-varianten voor verschillende situaties. Primaire buttons gebruiken de brand gradient, secundaire zijn subtiel wit.
Primary
Secondary
Dark fill
Ghost
Systeem
Card componenten
Cards zijn de bouwblokken van de UI. Altijd wit op cream achtergrond, subtiele border, en hover-lift effect.
📍
Feature card
Standaard card voor features en content blokken. Witte achtergrond, 1px border, 20px radius.
📊
Dark card
Voor donkere secties. Subtiele border met lage opacity. Dezelfde radius en padding.
⚡
Hover effect
translateY(-4px) met box-shadow vergroting. Cubic-bezier(.34,1.56,.64,1) voor bounce.
Richtlijnen
Tone of voice
WinkelHub communiceert helder, warm en direct. We spreken woonondernemers aan als gelijken — niet neerbuigend, niet te casual.
✓ Wel
Helder & direct
Zeg het in één zin. Vermijd jargon. Als een 55-jarige winkeleigenaar het niet snapt, is het te complex.
Voorbeeld
"Installeer de plugin, doorloop de wizard, en je eerste geo-pagina's zijn binnen 10 minuten live."
✕ Niet
Te technisch
Vermijd termen als "canonical URLs", "REST API endpoints" of "server-side rendering" in marketing materiaal.
Vermijd
"Onze plugin implementeert Schema.org LocalBusiness structured data met dynamische canonical URL-resolutie."
✓ Wel
Warm & persoonlijk
Gebruik "je" en "jouw". Schrijf alsof je een collega-ondernemer helpt, niet een klant bedient.
Voorbeeld
"Klanten in jouw regio vinden je winkel via Google — zonder dat je iets aan SEO hoeft te doen."
✕ Niet
Hype & buzzwords
Geen "revolutionair", "disruptief", "game-changing" of overdreven superlatieven. Laat het product spreken.
Vermijd
"De revolutionaire AI-powered plugin die de woonbranche compleet zal transformeren!"
Richtlijnen
Do's & Don'ts
Snelle referentie voor veelvoorkomende designbeslissingen.
✓ Do
Gebruik altijd de driekleur voor "Hub": H (lavender), u (bubblegum), b (sky). Dit is de brand DNA en mag nooit afwijken.
✕ Don't
Gebruik "Hub" nooit in één kleur. Ook niet in plain zwart of wit. De driekleur is verplicht in alle toepassingen.
✓ Do
Houd het lime sparkle-element altijd aanwezig op het logo mark. Het is de brand signature en maakt het logo herkenbaar.
✕ Don't
Verander de kleuren van het logo, draai het, maak het scheef, of voeg effecten toe zoals drop shadows of outer glow.
✓ Do
Gebruik de cream (#FDFBF8) achtergrond als standaard. Wissel af met witte secties en donkere secties voor contrast.
✕ Don't
Gebruik pure wit (#FFFFFF) als pagina-achtergrond. De cream tint geeft warmte en is prettiger voor de ogen.
✓ Do
Gebruik maximaal 3 kleuren tegelijk in een sectie. Eén dominant, één accent, één neutral. Overig uit de palette mag als subtiele tint.
✕ Don't
Gooi alle kleuren door elkaar in één sectie. Het palet is breed, maar moet altijd met restraint worden ingezet.
✓ Do
Gebruik cubic-bezier(.34,1.56,.64,1) voor hover animaties. De lichte bounce geeft een tactiel, modern gevoel.
✕ Don't
Gebruik lineaire of te langzame transities. De bounce easing is onderdeel van het merk-gevoel en moet consistent zijn.