Elke Webflow-site ziet er bij livegang strak uit. Het echte examen komt een jaar later: na tientallen nieuwe pagina’s, campagnes en wijzigingen door verschillende mensen. Een goed design system is het verschil tussen een site die groeit en een site die verrommelt.
1. Begin bij tokens
Design tokens zijn de kleinste bouwstenen: kleuren, lettergroottes, spacing, radii. In Webflow leggen we ze vast als variabelen. Wijzig je een merkkleur, dan verandert die overal tegelijk.
- Primitieven: de ruwe waarden (bijvoorbeeld
peach-400). - Semantische tokens: de betekenis (
color-accent,text-muted).
Componenten verwijzen alleen naar semantische tokens. Zo kun je later zelfs een dark mode toevoegen zonder alles om te bouwen.
2. Een consistente class-structuur
Een heldere naamgeving voorkomt dat je na een jaar honderd varianten van dezelfde knop hebt. We werken met een combinatie van:
- Utility-classes voor spacing en layout.
- Component-classes voor herbruikbare elementen.
- Combo-classes spaarzaam, alleen voor varianten.
3. Componenten met properties
Webflow-componenten met properties laten je team tekst, beelden en varianten aanpassen zonder de structuur te breken. Een sectie “Cases-highlight” kan zo op elke pagina terugkomen met andere inhoud.
4. Secties als bouwblokken
We ontwerpen een bibliotheek van secties: hero’s, feature-grids, testimonials, CTA’s. Een nieuwe pagina is daarna een kwestie van combineren. Dat maakt marketing écht zelfstandig.
5. Documenteer het
Een style guide-pagina in Webflow zelf — met alle tokens, typografie en componenten — is de beste documentatie. Iedereen die aan de site werkt, ziet direct wat er beschikbaar is.
6. Bewaak het
Een design system is nooit af. Plan periodiek een korte audit: welke componenten worden gebruikt, welke zijn overbodig en waar ontstaan uitzonderingen?
Wil je een design system dat met je meegroeit? Bekijk onze dienst Visual Design of start je project.