Wat hoort er in een design system?
Drie lagen: basiswaarden, onderdelen en patronen. Plus bij alles de afspraak wanneer je het gebruikt.
Die laatste is het deel dat mensen overslaan, en juist het deel dat het systeem laat werken.
Begin onderaan; zonder basis heeft de rest geen houvast.
De basiswaarden
Je kleuren met exacte codes, je lettergroottes, je afstanden, je hoekafrondingen en je schaduwen.
Leg ze vast als variabelen, niet als losse waarden. Dan verandert alles mee als je iets aanpast. Meer daarover lees je bij css.
De onderdelen
Knoppen in hun varianten, invoervelden inclusief foutmelding, koppen, links, kaarten, meldingen en je paginering.
Vergeet de toestanden niet: hoe ziet een knop eruit als hij uitgeschakeld is, of als de muis erboven hangt.
De patronen
Combinaties die je vaker gebruikt: een compleet contactformulier, een productblok, een blok met veelgestelde vragen.
Die bouw je uit de onderdelen, zodat een wijziging in een knop overal doorwerkt.
Mijn vuistregels
- Neem alleen op wat je echt gebruikt.
- Beschrijf per onderdeel wanneer je het inzet en wanneer niet.
- Leg ook de toestanden vast: hover, focus, uitgeschakeld, fout.
- Zet je contrastwaarden erbij.
Die derde wordt vrijwel altijd vergeten en levert de meeste losse eindjes op.
Wat er ook in hoort
Je toegankelijkheidsafspraken: minimale contrastverhouding, zichtbare focus en minimale klikgrootte.
Vastgelegd in je systeem hoef je die niet elke keer opnieuw te bespreken. Meer daarover lees je bij accessibility.
En je schermformaten
Op welke breedtes je indeling verspringt, en hoe onderdelen zich op een klein scherm gedragen.
Meer daarover lees je bij breakpoint.
Leg die breedtes één keer vast en gebruik ze overal. Drie sets breedtes naast elkaar is een van de hardnekkigste vormen van rommel.