Zwart, wit en één woord dat afwijkt.

Vier regels waar de rest uit volgt.

• Geen accentkleur. De enige kleur op de site komt uit de foto's. Contrast maken we met vlakverdeling en typografie.
• Rechte hoeken. De radius staat op nul. Niets is afgerond — geen knop, geen kaart, geen beeld. Enige uitzondering is de muisaanwijzer, en die is geen paginameubilair.
• Eén accent per kop. Precies één woord in de serif. Twee accenten in dezelfde kop halen elkaar onderuit.
• Rust boven effect. Geen zoom, geen parallax, geen slider. Beweging is een subtiele reveal en kleur die ontkleurt.

Zes waarden, meer niet.

De achtergrond is off-white en geen puur wit: veel foto's hebben een lichte achtergrond en lopen tegen #ffffff weg in de pagina.

Het paneel is bewust lichter dan de tekstkleur. Op #111 leest een blok naast een foto als een gat in de pagina; op #232323 blijft het een vlak.

Contrast, zoals je het ziet

Het verschil tussen de tweede en de derde regel is klein op het oog en groot in de norm. #737373 haalt 4,51:1 en de AA-grens ligt op 4,5 — één klik lichter en je bijschriften zakken erdoorheen. Verander je de achtergrond, controleer dan het grijs, en omgekeerd.

Inter draagt alles. Playfair mag één woord.

Drie letters, strikt gescheiden van rol. Inter zet alles wat je leest. De serif markeert één woord per kop en zet de volgnummers, nooit lopende tekst. Geist Mono raakt uitsluitend micro-copy aan: labels, CTA's, aantallen — nooit een kop of een alinea. Die beperking is wat het technisch laat aanvoelen in plaats van modieus.

Onder de 13px gaan we niet. Kapitaal-labels werken alleen bij korte termen van twee of drie woorden — een hele zin in kapitalen leest hard. Kort dan de tekst in, verklein het lettertype niet.

Kleur, zwart-wit bij aandacht.

Alle foto's staan standaard in kleur en trekken weg naar zwart-wit bij hover, in 700ms. De kleur draagt de pagina, de hover legt de nadruk op wat je aanwijst. Beweeg over de foto.

Geen zoom bij hover — die is er bewust uit gehaald. Foto's zijn WebP, maximaal 1600px op de lange zijde, kwaliteit 82. Let op: een foto die aan de bron gedesatureerd is, blijft altijd grijs — daar doet de hover niets.

Eén constructie, twee formaten.

Kaarten zijn opgebouwd uit een foto met een blok dat naar rechtsonder verspringt, en tekst op de strook die daardoor vrijkomt. Bedrijven en mensen gebruiken dezelfde vorm, alleen anders geschaald.

Label links, inhoud rechts.

Elke sectie opent met een haarlijn en zet het label in de linkermarge. Deze pagina staat op datzelfde raster — de kolom links van deze tekst is hem.

Container 1280px, marge 24px op mobiel en 40px daarboven. Secties krijgen 80 tot 112px lucht boven en onder. Op mobiel klapt het label boven de inhoud.

Zes figuren, één raster.

Geen icoontjes die iets uitbeelden, maar geometrie: alles op een raster van 48, opgebouwd uit cirkels en rechte lijnen, overal dezelfde lijndikte. Daardoor horen ze zichtbaar bij elkaar zonder kader. Ze tekenen in currentColor, dus ze keren om op een donker vlak.

Eén merk draagt een blok — een propositie, een sectie-opening, een losse kaart. Niet één per regel in een opsomming: naast de volgnummers werd dat te druk, en dat is een keuze die we al een keer hebben teruggedraaid.

Twee effecten, allebei kort.

Secties komen binnen met een reveal van 0,6s. Verder zijn er precies twee dingen die bewegen, en allebei alleen als antwoord op de lezer.

De aanwijzer

Een vierkantje van 12px vervangt de muisaanwijzer. Het is wit met difference-blending, waardoor het op de lichte grond bijna zwart is en op een donker paneel wit — zonder dat er iets gedetecteerd hoeft te worden. Boven iets klikbaars vervormt het in 320ms naar een cirkel; een vorm leest sneller dan een formaat. Boven een foto gaat de blending uit, want difference inverteert daar de kleuren van het beeld zelf. Tekstvelden houden hun eigen I-balk, en op touch verschijnt het niet.

Labels klikken in

Sectielabels rollen door willekeurige tekens voor ze op hun plek vallen, als een vertrekbord — één keer bij in beeld komen, en opnieuw bij hover. De echte tekst staat gewoon in de HTML met een aria-label, dus zoekmachines en voorleessoftware zien altijd het juiste woord. Bij prefers-reduced-motion slaat het over.

Wat er níét is: zoom bij hover, parallax, sliders, doorlopende animatie. Rust boven effect blijft de regel; deze twee zijn de uitzondering omdat ze reageren in plaats van vanzelf te spelen.

Schrijf zoals je het zou zeggen.

Alle voorbeelden hieronder staan letterlijk op de site. Vlaams, informeel, concreet. Je spreekt één ondernemer aan, niet een markt — en je durft jezelf te relativeren.

Let op de tussenzinnen. "Handig:", "even concreet:", "weet je nog?" — dat is iemand die praat, niet een merk dat zendt. En op de zelfrelativering: Geen theoretische nonsens, weet je nog? staat er als knipoog naar een belofte twee alinea's eerder.

• Je, niet u. Ook in mail en op LinkedIn.
• Eén idee per zin. Kort mag. Een zin van vier woorden mag ook.
• Concreet boven abstract. "Geen saaie handboeken" zegt meer dan "pragmatische aanpak".
• Geen jargon, geen Engels als het Nederlands bestaat. Goesting mag. Bokes ook.
• Zeg het er zelf bij als iedereen het beweert. "Pragmatisch en menselijk. Dat beweert zowat iedereen, dus even concreet:" — en dan word je concreet.
• Nadruk is cursief, nooit de serif. De displayletter blijft voor koppen.