The design system behind this site.

Everything you see on pieterdekroon.com is rendered from the tokens on this page — color, type, spacing, motion. So this is not documentation about the brand; it is the brand. If something here drifts, the site drifts with it.

Color

bg

#ffffff
fg

#1b1b1b
muted

#666666
border

#e6e6e6
accent

#1b1b1b

Dark theme

The same five tokens, re-pointed when data-theme="dark" is set on <html>. Every utility that reads a --color-* variable flips automatically — no per-component dark classes.

bg

#101010
fg

#ededed
muted

#9a9a9a
border

#2a2a2a
accent

#ededed

Typography

Display

Funnel Display

Used for headings and emphasis. Variable weight 300–800.

Body

Manrope

Used for body, UI, and labels. Variable weight 200–800.

Type scale

Display · 4xl Think before you build
Display · 3xl Selected work
Display · 2xl How I help
Display · xl Product Design
Body · lg Helps founders move from idea to launch-ready product.
Body · base Body text uses Manrope at a comfortable reading size.
Body · sm Smaller text — used for meta and footer copy.
Body · xs Tiny utility text — captions, fine print.

Balanced headings

All headings carry text-wrap: balance, so multi-line titles split into even lines instead of leaving a lone short word stranded on the last row.

Motion

Hero reveal

Words animate in left-to-right on first paint. Played once per session, skipped under prefers-reduced-motion.

Think before you build.

View transitions

Visit /work and click a project. The cover and title morph into their position on the detail page using the native View Transitions API.

Components

Button

Outline pill, inverts on hover. Used as the primary CTA across the site.

Say hello Say hello

Dark mode

Most of the site flips for free because every color reads from a token. A handful of bespoke set-pieces don't map cleanly onto the five tokens, so each one gets a deliberate dark treatment — anchored locally so it can't drift from the rest of the theme.

Pricing band: The near-black band stays inverted in dark mode by re-anchoring its local --color-fg/bg — pinned to the canvas so it reads as the same dark background as the page, with the tiers as outlined cards.
Scroll scenes: The fog-to-focus and friction tints shift from panel-grey to a subtle dark lift so the pinned scenes stay dark. The scroll-progress bar is token-driven: near-black on light, white on dark.
Product Design card: The green gradient build card becomes a dark surface with a retained green tint on its final frame, instead of a bright white card.
Long-form prose: Tailwind Typography tokens are remapped to light-on-dark so Work, Thoughts and the doc/legal pages stay readable on the dark canvas.