Zo gebruik je je nieuwe huisstijl voor je website

TL;DR

• Een huisstijl vertalen naar een website is geen kwestie van kleurcodes overnemen. Print en web hebben andere eisen.
• Werk in deze volgorde: kleur en contrast, typografie, logo en favicon, beeld, componenten, en dan pas de pagina’s.
• Contrast is de grootste struikelblok. Tekst heeft minimaal 4,5:1 nodig, knoppen en randen minimaal 3:1.
• Je accentkleur is meestal niet geschikt voor lopende tekst. Wel voor knoppen, iconen en highlights.
• Leg je keuzes vast als design tokens. De W3C-werkgroep bracht daar in oktober 2025 de eerste stabiele specificatie voor uit.
• Bezoekers vormen hun eerste indruk binnen tienden van een seconde. Consistentie in kleur en typografie is dus geen detail.

Je nieuwe huisstijl is klaar. Het logo staat, het kleurenpalet is af, de lettertypes zijn gekozen. Nu moet het op je website. En daar loopt het vaak vast: de kleur die op papier prachtig is heeft op een scherm te weinig contrast, het lettertype heeft geen weblicentie, en het logo dat op een visitekaartje mooi staat wordt in je header een onleesbaar vlekje.

Je huisstijl gebruiken voor je website is dus een vertaalslag, niet een copy-paste. In deze blog lopen we die vertaalslag stap voor stap door: van kleur en contrast tot typografie, logo, beeld en herbruikbare componenten. Met de normen erbij, zodat je site er niet alleen goed uitziet maar ook goed werkt.

Waarom kun je een huisstijl niet zomaar overnemen op je website?

Omdat een website andere eisen stelt dan drukwerk. Print is vast en heeft geen interactie; een website moet leesbaar zijn op elk schermformaat, moet snel laden, moet werken met toetsenbord en schermlezer en moet gebruikers laten inzoomen. Kleuren, lettertypes en beeld die op papier kloppen halen die eisen niet automatisch.

Vier verschillen die er het meest uitmaken:

• Kleur werkt anders. CMYK is voor drukwerk, HEX en RGB zijn voor scherm. Een diepe steunkleur op papier kan op een scherm dof of juist schreeuwend uitpakken.
• Tekst is variabel. Op een website bepaalt de bezoeker mede hoe groot je tekst is, en dat mag hij ook. Een strak uitgelijnd printontwerp valt daardoor snel om.
• Alles moet laden. Elk lettertypebestand en elke afbeelding kost laadtijd. Een huisstijl met vijf lettergewichten en zware fotografie maakt je site langzaam.
• Er zijn interactieve staten. Een knop heeft een normale staat, een hover, een focus en een uitgeschakelde staat. Die staan zelden in een huisstijldocument, maar je hebt ze wel nodig.

Dat betekent niet dat je moet inleveren op je uitstraling. Het betekent dat je per onderdeel een webvariant vaststelt en die vastlegt, zodat je merk overal hetzelfde blijft. Meer over de basis van dat document lees je in onze blog over wat er in een brandbook staat.

Hoe zet je je kleurenpalet om naar je website?

Begin met het bepalen van rollen in plaats van kleuren. Wijs aan welke kleur je basiskleur is, welke je accentkleur, welke je tekstkleur en welke je achtergrondkleur. Test daarna elke combinatie op contrast. Pas als de combinaties goedgekeurd zijn, ga je aan het ontwerp beginnen. Doe je het omgekeerd, dan moet je halverwege je hele palet omgooien.

De harde eisen die je moet halen:

• Lopende tekst en kleine tekst: minimaal 4,5:1 contrast met de achtergrond, volgens succescriterium 1.4.3 van het W3C. Voor grote tekst (vanaf 18 punt, of 14 punt vet) mag het 3:1 zijn.
• Knoppen, randen, iconen en formuliervelden: minimaal 3:1 contrast, volgens succescriterium 1.4.11. Dit criterium wordt het vaakst gemist, want mensen testen wel hun tekst maar niet hun knopranden.
• Kleur mag nooit de enige aanwijzing zijn. Een verplicht veld dat alleen rood wordt, of een link die alleen aan de kleur te herkennen is, werkt niet voor iedereen. Voeg een streepje, een icoon of tekst toe.

Hier komt bijna altijd dezelfde conclusie uit: je felle accentkleur is niet geschikt voor lopende tekst. Fel oranje, geel of lichtgroen halen op wit de 4,5:1 niet. Dat is geen reden om de kleur te schrappen, wel om hem een duidelijke rol te geven: knoppen, iconen, cijfers, highlights en accenten. Met een donkere tekstkleur of wit erover, afhankelijk van wat wél haalt.

Nog een praktisch punt: bepaal ook je hover- en focusstaten. Een knop die bij hover een tint donkerder wordt en bij focus een duidelijke rand krijgt, voelt afgewerkt en is bovendien een toegankelijkheidseis. Meer over de werking van kleur lees je in onze blog over de psychologie van kleur.

Wat doe je met je lettertypes uit je huisstijl?

Controleer eerst of je huisstijllettertype een weblicentie heeft. Zo niet, kies dan een webvariant die er qua vorm en x-hoogte op lijkt en leg die vast als officieel webalternatief. Bepaal daarna welke gewichten je echt gebruikt, host de bestanden zelf en zet een fallback-lettertype klaar voor het geval het bestand nog niet geladen is.

Drie dingen om af te vinken:

1. Licentie. Printlicenties dekken web vaak niet. Webfont-licenties zijn soms gebonden aan een aantal pageviews of aan één domein. Gebruik je Google Fonts, dan zit je goed: die zijn open source en gratis zakelijk te gebruiken.

2. Aantal gewichten. Elk gewicht is een bestand. Drie is meestal genoeg: regular voor bodytekst, semibold voor tussenkoppen, bold voor koppen. Veel WordPress-themes laden er standaard acht of tien. Loop dat na en zet de rest uit, want fonts beïnvloeden direct je Core Web Vitals: je tekst verschijnt later en je pagina verspringt tijdens het laden.

3. Hiërarchie. Leg per kopniveau de grootte en de regelafstand vast, en houd bodytekst op minimaal 16 pixels met een regelafstand van ten minste 1,5. Houd je tekstkolom op 50 tot 75 tekens per regel.

Host je lettertypes op je eigen server in plaats van rechtstreeks bij Google. Dat is beter voor de privacy van je bezoekers en scheelt een externe verbinding. Alle details over die keuze staan in onze blog over typografie kiezen voor je webdesign.

Hoe gebruik je je logo uit je huisstijl in je website?

Gebruik je logo als SVG, in de kleurversie die bij de achtergrond past, met genoeg vrije ruimte eromheen en met een leesbaar minimumformaat. Zet in je header een versie die op elk schermformaat werkt, en maak voor mobiel eventueel een compactere variant, bijvoorbeeld alleen het beeldmerk. Vervorm het logo nooit om het passend te maken.

Waarom SVG: dat is een vectorformaat, dus het blijft scherp op elk formaat en op elk scherm, en het bestand is klein. Houd wel een PNG achter de hand voor plekken waar SVG niet werkt, zoals sommige e-mailtemplates.

Let op deze punten:

• Minimumformaat. Staat er in je huisstijl een minimum, houd je daaraan. Wordt het logo in je mobiele header kleiner dan dat, kies dan de compacte variant in plaats van het volledige logo te verkleinen.
• Vrije ruimte. Ook in een drukke header. Plak je logo niet tegen je menu-items aan.
• Kleurversie per achtergrond. Donkere versie op licht, witte versie op je basiskleur of op een donkere foto. Eén logo dat op alles moet passen bestaat niet.
• Alt-tekst. Geef het logo in je header de bedrijfsnaam als alt-tekst. Dat is beter voor schermlezers en voor je vindbaarheid.

En vergeet de favicon niet. Dat is het kleine icoontje in de browsertab, en het is het enige merkelement dat je bezoeker ziet als je site niet in beeld is. Waarom dat uitmaakt lees je in onze blog over waarom je website een favicon nodig heeft.

Zo pas je je beeldtaal toe uit je huisstijl

Beeld is het onderdeel waar een nette huisstijl het vaakst alsnog uit elkaar valt. Je hebt een beeldstijl afgesproken, maar de eerste keer dat er snel een pagina bij moet komt er een stockfoto in die er niet bij past. Voor je het weet staat je site vol beelden uit drie verschillende werelden.

Wat helpt:

• Leg de stijl concreet vast. Niet “warm en menselijk”, maar bijvoorbeeld: eigen fotografie, natuurlijk licht, mensen in beeld, geen geposeerde stockbeelden. Voeg drie goede en drie foute voorbeelden toe.
• Bepaal vaste beeldverhoudingen. Bijvoorbeeld 16:9 voor hero-afbeeldingen en 4:3 voor overzichtskaarten. Zo blijven je overzichtspagina’s rustig, ook als iemand anders een item toevoegt.
• Spreek een bewerking af. Een vast filter, een overlay in je basiskleur of een consistente bijsnijding maakt beeld van verschillende bronnen toch één geheel.
• Optimaliseer voor snelheid. Je grote afbeelding bovenaan is vaak je Largest Contentful Paint, dus die bepaalt hoe snel je pagina voelt. Optimaliseer die als eerste: moderne formaten zoals WebP of AVIF, de juiste afmetingen en geen lazy loading op je hero.

Ook je grafische merkelementen horen hier: vormen, patronen, illustraties of iconen. Houd iconen in één stijl en één lijndikte, en gebruik ze consequent. Liever herkenbaar dan gedetailleerd.

Waarom leg je je huisstijl vast als design tokens?

Design tokens zijn benoemde variabelen voor je designkeuzes: een kleur, een tekengrootte, een afstand of een hoekradius krijgt een naam en één plek waar de waarde staat. Verander je die waarde, dan verandert hij overal. Zonder tokens staan dezelfde kleurcode en dezelfde tekengrootte op tientallen plekken in je site, en dan is één merkwijziging een dagtaak.

Dit is de stap die de meeste mkb-websites overslaan en die zich het snelst terugbetaalt. Praktisch komt het neer op CSS-variabelen: één plek met je kleuren, je tekengroottes en je afstanden, en de rest van je site verwijst daarnaar.

Het is inmiddels ook geen los idee meer. De Design Tokens Community Group van het W3C bracht in oktober 2025 de eerste stabiele versie van de specificatie uit, waarmee ontwerptools en code dezelfde taal kunnen spreken.

Wat je minimaal in tokens zet:

• je kleuren, met hun rol in de naam (bijvoorbeeld tekst, achtergrond, accent) in plaats van hun kleur;
• je tekengroottes per kopniveau en voor bodytekst;
• je regelafstanden;
• je afstandenschaal (bijvoorbeeld 4, 8, 16, 24, 32 pixels);
• je hoekradius en je schaduwen.

Noem een kleur dus niet “groen” maar bijvoorbeeld “accent”. Bij een rebranding verandert de kleur namelijk wel en de rol niet.

Van huisstijl naar pagina’s: de volgorde

Bouw van klein naar groot. Zet eerst je tokens vast, bouw dan je componenten, en zet daarna pas je pagina’s in elkaar. Begin je bij de homepage, dan neem je onderweg tientallen kleine beslissingen die je later op elke andere pagina opnieuw moet maken, met net iets andere uitkomsten.

Een werkbare volgorde:

1. Tokens. Kleuren met hun rollen, typografische schaal, afstanden.
2. Basiselementen. Koppen, bodytekst, links, lijsten, citaten.
3. Componenten. Knoppen (met alle staten), formuliervelden, kaarten, tabellen, meldingen, je header en je footer.
4. Secties. Hero, uitgelichte diensten, reviews, call-to-action-blok, FAQ.
5. Pagina’s. Die zet je samen uit bestaande secties.
6. Controle. Contrast, inzoomen tot 200%, toetsenbordnavigatie, laadsnelheid en een blik op je site op een echte telefoon.

Die laatste stap is niet optioneel. Bezoekers vormen hun eerste indruk van een website binnen tienden van een seconde, en die indruk kleurt daarna hoe ze de rest beoordelen. Een site die er goed uitziet maar traag laadt of niet werkt met een toetsenbord verspeelt dat voordeel meteen. Sinds 28 juni 2025 gelden er via de European Accessibility Act bovendien strengere toegankelijkheidseisen voor onder andere webshops. Meer daarover op onze pagina over een digitaal toegankelijke website.

Wat als je huisstijl nieuw is en je website oud?

Dan kies je tussen doorvoeren op je huidige site of meteen een redesign. Doorvoeren is goedkoper en sneller, maar werkt alleen als de opbouw van je huidige site nog klopt. Zit je met een verouderd thema, een rommelige structuur of pagina’s die niet converteren, dan poets je met een nieuwe huisstijl alleen de buitenkant.

Hoe je die keuze maakt:

• Doorvoeren is logisch als je site technisch in orde is, je structuur klopt en je alleen kleur, typografie en beeld wilt vernieuwen. Reken op een controleronde over je belangrijkste pagina’s, want een ander lettertype verandert je opmaak.
• Redesign is logisch als je site langzaam is, niet toegankelijk is, slecht converteert of op een verouderd thema staat. Dan is een nieuwe huisstijl het perfecte moment om het onderliggende ook aan te pakken. Kijk daarvoor op onze pagina over een website redesign.

Wat je in beide gevallen doet: houd je URL’s intact. Een nieuwe huisstijl is geen reden om je adressen te wijzigen, en doe je dat toch, zorg dan voor goede redirects zodat je je posities in Google niet weggooit.

Wil je hulp bij het doorvoeren van je huisstijl of het opzetten van je site erop? Ons team als webdesign bureau pakt dat op, en heb je nog helemaal geen huisstijl, dan kun je die bij ons laten ontwerpen. Vooraf weet je wat we doen en wat het kost.