Je hebt een prachtige merkstijlgids. Prachtig ontworpen, met de juiste kleuren, de perfecte typografie en een duidelijke huisstijl.
▶Inhoudsopgave
Maar dan gebeurt het: mensen die je merkstijlgids gebruiken, maken er iets heel anders van. Logotypes worden uitgerekt. Kleuren worden aangepast. De spacing klopt niet meer. En plots ziet je merk eruit alsof het van een ander bedrijf komt.
Wat er dan misgaat? Niet het ontwerp zelf, maar de silo-structuur van je merkstijlgids. En daar komt Silo 8: 186-200 = 15 om de hoek kijken.
Wat is Silo 8: 186-200 = 15 eigenlijk?
Laten we even terug naar de basis. Een merkstijlgids bestaat uit meerdere lagen — of silos — die samen zorgen voor consistentie.
Denk aan silo's voor kleurgebruik, typografie, beeldtaal, tone of voice, en spacing.
Elke silo bepaalt een specifiek deel van hoe jouw merk eruitziet en voelt. Silo 8 gaat over de ruimtelijke relaties binnen je merkidentiteit. Specifiek: hoe elementen zich tot elkaar verhouden op een pagina, in een layout of binnen een digitaal product.
De formule 186-200 = 15 verwijst naar een concreet voorbeeld van spacing-logica: als je 186 pixels hebt als basisunit en 200 pixels als maximale breedte, dan is de ruimte die overblijft — 15 pixels — precies de marge die consistentie garandeert. Klinkt simpel?
Het is het ook. Maar juist die simpelheid is waar de meeste merkstijlgidsen op struikelen.
Waarom spacing het onderschatte wapen is van elke merkstijlgids
Veel designsystemen richten zich op kleuren en lettertypes. En terecht, want dat zijn de meest zichtbare elementen.
Maar spacing — de ruimte tussen elementen — is wat een merk ademt of juist verstikt. Stel je voor: je hebt een designsystem met 186 componenten. Van die 186 componenten zijn er 200 variaties in gebruik.
Dat betekent dat er 15 unieke spacing-regels nodig zijn om alles consistent te houden.
De 15 spacing-regels die ertoe doen
Die 15 regels vormen de ruggengraat van je visuele hiërarchie. Zonder die regels ontstaat er ruis. Knoppen staan te dicht bij tekst. Afbeeldingen overlappen met headings.
En je merk voelt onaf, ook al ziet het er visueel goed uit. Niet alle spacing is gelijk.
In een stevig designsystem onderscheid je minstens deze categorieën: Micro-spacing — de ruimte binnen een component, zoals de padding binnen een knop of de line-height van een paragraaf. Hier gaat het om waarden tussen 4 en 12 pixels.
Meso-spacing — de ruimte tussen gerelateerde elementen, zoals een kopje en de tekst eronder, of tussen een icoon en een label.
Typische waarden liggen tussen 16 en 32 pixels. Macro-spacing — de ruimte tussen grote blokken op een pagina, zoals secties of kaarten in een grid. Hier zie je waarden van 48 pixels en hoger.
Als je deze drie lagen helder definieert in je merkstijlgids, dan heb je al 80% van de consistentie geregeld. De overige 20%? Dat zijn de uitzonderingen — en die documenteer je ook.
Hoe je dit toepast in je eigen merkstijlgids
Begin met het inventariseren van je huidige componenten. Hoeveel unieke elementen gebruik je? Hoeveel variaties bestaan er?
Trek die twee cijfers van elkaar af, en je krijgt het aantal spacing-regels dat je nodig hebt.
Documenteer die regels niet alleen als getallen, maar ook als principes. Bijvoorbeeld: "Binnen een kaartcomponent is de interne ruimte altijd 24 pixels, tenzij de kaart een hero-element bevat, dan is het 32 pixels." Zo wordt spacing geen willekeurig getal, maar een bewuste ontwerpkeuze.
Van theorie naar praktijk: een voorbeeld
Tools zoals Figma en Sketch maken het makkelijk om spacing-tokens aan te maken. Gebruik ze. Maak een design token voor elke spacing-waarde en noem ze logisch — niet "spacing-1" en "spacing-2", maar bijvoorbeeld "spacing-tight", "spacing-default" en "spacing-loose". Stel: je ontwerpt een landingspagina voor een merk.
Je hebt een hero-sectie, drie feature-blokken en een call-to-action. Zonder spacing-regels zou elke ontwerper dit anders aanpakken.
Met een duurzame visuele basis weet iedereen: De afstand tussen de hero en de eerste feature is 80 pixels. De afstand tussen de feature-blokken onderling is 48 pixels. De afstand tussen het laatste feature en de call-to-action is 64 pixels.
En de interne ruimte van elke feature-blok is 32 pixels. Vier regels. Eén consistente pagina vol bouwstenen. Geen discussie.
Waarom dit ertoe doet voor jouw merk
Een merkstijlgids is geen statisch document. Het is een levend systeem dat moet meegroei met je merk.
En spacing is het onderdeel dat het snelst vervalst als je het niet structureert. De reeks van 25 artikelen staat symbool voor iets groters: de discipline om beperkingen te stellen zodat creativiteit kan floreren. Je team hoeft niet meer na te denken over hoeveel ruimte er tussen elementen zit.
Ze kijken naar de regels, passen ze toe, en richten hun energie op wat echt belangrijk is: het verhaal van het merk vertellen.
En dat is precies waar een goede merkstijlgids voor dient. Niet om creativiteit te begrenzen, maar om ervoor te zorgen dat elk ontwerp — of het nu gemaakt wordt door jou, een freelancer of een extern bureau — herkenbaar is als jouw merk. Dus de volgende keer dat je je merkstijlgids doorneem, kijk dan niet alleen naar de kleuren en lettertypes.
Kijk naar de ruimte ertussen. Want daar leeft je merk echt.