Het design system achter deze site.
Alles wat je op pieterdekroon.com ziet wordt gerenderd uit de tokens op deze pagina — kleur, type, spacing, motion. Dus dit is geen documentatie óver de brand; dit is de brand. Als hier iets afdrijft, drijft de site mee.
Kleur
bg
#ffffff
fg
#1b1b1b
muted
#666666
border
#e6e6e6
accent
#1b1b1b
Donker thema
Dezelfde vijf tokens, opnieuw gericht wanneer data-theme="dark" op <html> staat. Elke utility die een --color-* variabele leest, klapt automatisch om — geen dark-classes per component.
bg
#101010
fg
#ededed
muted
#9a9a9a
border
#2a2a2a
accent
#ededed
Typografie
Display
Funnel Display
Gebruikt voor koppen en nadruk. Variabel gewicht 300–800.
Body
Manrope
Gebruikt voor body, UI en labels. Variabel gewicht 200–800.
Type scale
- Display · 4xlThink before you build
- Display · 3xlSelected work
- Display · 2xlHow I help
- Display · xlProduct Design
- Body · lgHelps founders move from idea to launch-ready product.
- Body · baseBody text uses Manrope at a comfortable reading size.
- Body · smSmaller text — used for meta and footer copy.
- Body · xsTiny utility text — captions, fine print.
Uitgebalanceerde koppen
Alle koppen dragen text-wrap: balance, zodat titels over meerdere regels in gelijke regels worden gesplitst in plaats van één kort woord op de laatste regel te laten stranden.
Motion
Hero-reveal
Woorden animeren van links naar rechts binnen bij de eerste render. Wordt eenmaal per sessie afgespeeld, overgeslagen bij prefers-reduced-motion.
Think before you build.
View transitions
Bezoek /work en klik op een project. De cover en titel vervormen naar hun positie op de detailpagina met de native View Transitions API.
Componenten
Button
Outline pill, keert om bij hover. Wordt overal op de site als primaire CTA gebruikt.
Donkere modus
Het grootste deel van de site klapt vanzelf om omdat elke kleur uit een token wordt gelezen. Een handvol op maat gemaakte set-pieces past niet netjes op de vijf tokens, dus elk daarvan krijgt een bewuste donkere behandeling — lokaal verankerd zodat het niet kan afdrijven van de rest van het thema.
- Prijzenband
- De bijna-zwarte band blijft omgekeerd in donkere modus door de lokale --color-fg/bg opnieuw te verankeren — vastgezet op het canvas zodat het dezelfde donkere achtergrond leest als de pagina, met de tiers als omlijnde kaarten.
- Scroll-scènes
- De fog-to-focus- en frictie-tinten verschuiven van panel-grijs naar een subtiele donkere lift zodat de vastgezette scènes donker blijven. De scroll-voortgangsbalk is token-gestuurd: bijna-zwart op licht, wit op donker.
- Product Design-kaart
- De groene gradient-buildkaart wordt een donker vlak met een behouden groene tint op het laatste frame, in plaats van een felwitte kaart.
- Long-form tekst
- Tailwind Typography-tokens worden opnieuw gemapt naar licht-op-donker zodat Work, Thoughts en de doc-/juridische pagina's leesbaar blijven op het donkere canvas.