Als ik tegen mensen zeg dat ik designsystemen bouw, zie ik vaak een beleefd knikje dat eigenlijk betekent: “geen idee wat dat is, maar het klinkt duur.” Begrijpelijk. “Designsysteem” klinkt als iets voor bedrijven met een eigen afdeling en een budget met veel nullen. Maar het idee erachter is doodgewoon, en juist voor kleinere merken vaak het meest waardevol. Het is het recept onder je merk. En zonder recept wordt elke koek een gok.

Wat een designsysteem eigenlijk is

Allereerst wat het níet is: een mooi PDF’je met je logo, een paar kleuren en de regel “gebruik het logo niet op een drukke achtergrond”. Dat is een stijlgids, en die belandt meestal binnen een maand onder in een map waar niemand meer kijkt.

Een designsysteem is iets levends. Het is een set vastgelegde beslissingen — kleuren, afstanden, lettergroottes, knoppen, kaarten, hele paginadelen — die je telkens opnieuw gebruikt in plaats van telkens opnieuw bedenkt. Het is geen document dat je merk beschrijft; het is het gereedschap waarmee je je merk maakt.

Je kunt het zien als het verschil tussen losse ingrediënten en een recept. Iedereen heeft bloem, suiker en boter in huis. Het recept is wat ervoor zorgt dat er elke keer hetzelfde — en lekkere — resultaat uitkomt, ook als er een andere bakker aan de slag gaat.

Variabelen: één bron van waarheid

Het hart van elk designsysteem zijn variabelen, ook wel tokens genoemd. In plaats van overal “dat oranje” met de hand in te vullen, leg je het één keer vast: accent = #E2533B. Overal waar je merk dat accent gebruikt, verwijst het naar diezelfde variabele.

Het voordeel klinkt klein maar is enorm: verander je die ene variabele, dan verandert hij overal mee. Geen zoek-en-vervang door honderd bestanden, geen vergeten hoekje waar het oude oranje nog staat. Eén bron van waarheid.

Neem dit portfolio. De hele site draait op een handvol semantische variabelen: een achtergrond, een oppervlak, een tekstkleur, een accent, een rand. Daar bovenop liggen acht thema’s — vier “koekjes” in licht en donker. Hoe kan dat met zo weinig regels? Omdat niets een vaste kleur heeft. Alles verwijst naar een variabele, en per thema krijgen die variabelen andere waarden. Het recept blijft hetzelfde; alleen de ingrediënten wisselen.

Componenten: bouwstenen die je hergebruikt

De tweede pijler zijn componenten: herbruikbare bouwstenen. Een knop, een kaart, een paginakop, een sectie. Je ontwerpt en bouwt ze één keer goed, en gebruikt ze daarna overal.

Dat klinkt vanzelfsprekend, maar in de praktijk wordt het vaak vergeten. Zonder componenten bouwt iedereen elke knop net iets anders: andere padding, andere ronding, andere hover. Vermenigvuldig dat met een paar jaar en een paar mensen, en je merk is langzaam uit elkaar gevallen zonder dat iemand precies kan aanwijzen wanneer.

Met componenten gebeurt het omgekeerde. Verbeter je de knop op één plek, dan verbetert hij overal. Je merk wordt beter onderhouden naarmate het ouder wordt, in plaats van slechter.

Waarom het geld bespaart

Hier wordt het concreet, want uiteindelijk is dit de vraag die telt. Een designsysteem bespaart op een paar manieren tegelijk:

Snelheid. Een nieuwe pagina bouw je uit bestaande onderdelen in plaats van vanaf nul. Wat eerst dagen kostte, kost uren.
Consistentie. Omdat alles uit dezelfde bron komt, klopt je merk vanzelf — zonder dat iemand er bij elke uiting bewust op moet letten.
Minder fouten. Beslissingen die één keer goed zijn genomen, hoef je niet telkens opnieuw te nemen (en dus ook niet telkens opnieuw verkeerd).
Makkelijker samenwerken. Een nieuwe ontwerper of bouwer stapt in een systeem dat zichzelf uitlegt, in plaats van in een wildgroei die alleen de maker begrijpt.
Schaalbaarheid. Groeit je merk, dan groeit het systeem mee, zonder dat het instort onder zijn eigen gewicht.

Een designsysteem is dus geen kostenpost die je je veroorlooft als het goed gaat. Het is de investering die ervoor zorgt dat het goed blíjft gaan.

Licht, dark én koekjes

Een goed voorbeeld van wat een systeem mogelijk maakt is iets wat zonder systeem een nachtmerrie zou zijn: meerdere thema’s. Donkere modus is niet “dezelfde site met omgekeerde kleuren”. Een achtergrond wordt tekst, een rand moet net anders, een accent dat licht genoeg was op wit is ineens te fel op donker.

Als elke kleur los in je ontwerp staat, betekent een donkere modus dat je je hele merk een tweede keer met de hand inkleurt. Met semantische variabelen betekent het dat je per thema één set waarden invult, en de rest volgt vanzelf. Daarom kon dit portfolio acht thema’s krijgen voor bijna dezelfde moeite als één — inclusief een knipoog naar verschillende koekjessmaken.

Een systeem is geen keurslijf

De grootste angst die mensen bij “designsysteem” voelen, is dat het creativiteit doodt. Alles in hokjes, alles voorspelbaar, geen ruimte meer om te verrassen. Ik snap die angst, maar hij klopt niet — en vaak precies andersom.

Een systeem neemt je niet de creatieve beslissingen uit handen; het neemt je de saaie beslissingen uit handen. Hoeveel ruimte zit er tussen deze twee blokken? Welke grijstint gebruik ik voor bijschriften? Hoe groot is een knop? Dat zijn vragen die je niet vijftig keer opnieuw wil beantwoorden. Door ze één keer goed vast te leggen, houd je je hoofd vrij voor de vragen die er echt toe doen: het idee, het beeld, de toon.

Vergelijk het met een goede bakker. Die meet niet elke keer opnieuw uit wat de basisverhouding van bloem tot boter is — dat zit in het recept. Juist daardoor heeft hij ruimte om te spelen met de vulling, de vorm, de afwerking. Het recept is geen rem op zijn vakmanschap; het is de bodem waarop het kan staan.

Een goed systeem laat bovendien bewust ruimte voor uitzonderingen. Niet elke pagina hoeft identiek te zijn; een campagne mag best uit de band springen. Het verschil is dat je dan bewust afwijkt van een basis die staat, in plaats van dat alles toevallig anders is. Afwijken van een systeem is een keuze. Geen systeem hebben is een ongeluk dat staat te wachten.

Wanneer je er aan toe bent

Niet elk merk heeft vandaag een volledig systeem nodig. Maar er zijn signalen dat het tijd wordt:

Je uitingen lijken steeds minder op elkaar, zonder dat iemand dat zo bedoeld heeft.
Elke nieuwe pagina of post kost onevenredig veel tijd.
Je legt dezelfde keuzes telkens opnieuw uit aan iedereen die meewerkt.
Je durft je merk niet te vernieuwen omdat je geen overzicht hebt van waar het overal staat.

Herken je er één, dan ben je het systeem eigenlijk al aan het missen. Je hebt het alleen nog niet opgeschreven.