↳ /colophon
how this site is built.
Stack
Typography
--font-display · Newsreader
The quick brown fox jumps over the lazy dog.
--font-sans · Hanken Grotesk
Regular 400. The quick brown fox jumps over the lazy dog.
Medium 500. The quick brown fox jumps over the lazy dog.
Semibold 600. The quick brown fox jumps over the lazy dog.
--font-mono · JetBrains Mono
const site = "kerkstra.dev";
Color tokens
Surface
Interactive
Muted
Chrome
Craft
- Fractal-noise grain overlay via inline SVG filter.
- CSS-first animations. Motion library only where it earns its weight.
- [01]-style section labels with hairline rules.
- Server components by default. 'use client' only for state or event handlers.
- No card chrome. Editorial flat layout with border-only containment.
- Two-tone palette (ink and cream) plus a single electric lime accent.
Performance
last audited April 12, 2026
Performance
Measures how fast your page loads and becomes interactive. The key metrics are Largest Contentful Paint (how long until the main content is visible), Cumulative Layout Shift (how much the page jumps around as it loads), and Interaction to Next Paint (how fast the page responds to user input).
Accessibility
Tests whether your site works for everyone, including people using screen readers, keyboard navigation, or high-contrast modes. Checks semantic HTML structure, color contrast ratios, ARIA labels, and focus management.
Best Practices
Validates security and modern web standards. Checks for HTTPS, no console errors, no deprecated APIs, correct image aspect ratios, and proper document structure.
SEO
Evaluates how discoverable your site is to search engines. Checks for crawlable links, valid meta tags, descriptive titles, a sitemap, and a robots.txt that doesn't block important content.
How this site builds accessibility in
These are the choices behind the 100.
Every section, heading, and navigation landmark uses the correct HTML element, not a styled div.
The cream/ink palette was chosen to exceed WCAG AA contrast ratios in both light and dark themes.
Every animation on this site respects prefers-reduced-motion and degrades to instant transitions.
A 'Skip to main content' link is the first focusable element, visible on keyboard focus.
Widgets and the grain overlay are aria-hidden so screen readers skip them entirely.
Every interactive element is reachable and operable via keyboard. The command palette opens with ⌘K.