Colophon

Typography

Body and UI in Geist by Vercel — a clean neo-grotesque with optical balance that's hard to fault. Headlines in Fraunces by Undercase Type, loaded with the opsz and SOFT variable axes for warmer, editorial-grade display sizes.

Monospace in Geist Mono, with ligatures off.

Colour

Neutrals carry the contrast budget; one accent — basil green, the brand colour — appears subtly in tag pills, the avatar ring, focus moments. Background is warm paper (#fbfaf7), not pure white. Dark mode follows prefers-color-scheme.

• Foreground
• Background
• Surface muted
• Basil accent
• Pine accent
• Young basil

Stack

• Next.js (App Router, static export)
• Tailwind CSS with CSS-variable semantic tokens
• MDX via next-mdx-remote/rsc for blog posts and project case studies
• TypeScript across the board
• Deployed as plain static HTML — no runtime, no API

Accessibility

Every interactive element has a visible :focus-visible ring. A skip-to-content link is the first tab stop on every route. Motion respects prefers-reduced-motion — translates, lifts, and the parallax avatar all turn off when the OS asks. Body text targets WCAG AA contrast; tap targets meet the 24×24 minimum (most exceed it).

Performance

Site is a fully static export. Blog and project pages prerender at build time. Only the home page avatar is a client island (for the subtle parallax); everything else is Server Components. priority is reserved for above-the-fold imagery only.

Process

Built in public. The redesign that produced this version is documented post-by-post in the blog, and the full audit lives at docs/ux-audit.md in the repo.