Colophon

A colophon is a designer's word for 'how this site was built'

I designed and built this site myself. Rather than another portfolio optimised for quick impressions, I wanted a space that could hold work over time—where notes sit beside projects, experiments live next to case studies, and thinking can evolve in public.

Design Philosophy

The site is shaped by what I call exhibition thinking—inspired by the work of Charles and Ray Eames, who treated information as material to explore rather than content to consume. Their approach to creating exhibitions, films, and publications felt closer to archives than interfaces.

This philosophy manifests in an editorial design system that prioritises metadata-first presentation, archival warmth, and navigation that feels more like browsing a collection than clicking through screens.

I've written about this approach in more depth: Why I Built an Editorial Design System for My Practice.

Editorial Design System

The visual language uses warm cream backgrounds, near-black text, and terracotta accents—an archive aesthetic that feels timeless rather than trendy. All design tokens are namespaced under --ed-* and documented in the Editorial Lab.

Typography is serif-led: Cormorant for headings with light weights and generous leading, system UI sans-serif for labels and metadata. The contrast creates clear hierarchy while maintaining editorial elegance.

Key patterns include:

  • Three-column cards with metadata sidebar, body content, and decorative rail
  • Eames-inspired images with grayscale processing, technical captions, and specimen framing
  • Bidirectional navigation implying a curated sequence through content
  • Field notes sidebars for marginalia and asides
  • Tag taxonomy organised by discipline, sector, and method

Technical Foundation

Astro does the heavy lifting. It's a static site builder that excels at content-heavy sites. Astro delivers excellent performance through its islands architecture—minimal JavaScript to the browser while keeping interactive elements where needed.

The foundation combines HTML, CSS, and TypeScript with React components for interactivity. All content is written in MDX—enhanced Markdown that lets me embed custom components directly in case studies and essays.

Tailwind CSS provides the utility layer, extended with semantic colour variables and fluid typography from Utopia. The editorial design system adds a parallel CSS layer with its own tokens and patterns.

Framer Motion powers animations that respect prefers-reduced-motion. Motion is restrained and purposeful—signalling interactivity without demanding attention.

Content Structure

Content is organised in Astro collections: projects/ for case studies, essays/ for long-form writing, and notes/ for shorter reflections. Each collection has a schema that validates frontmatter and provides type safety.

Essays use a "digital garden" approach with growth stages: Seedling, Budding, and Evergreen. Ideas can be published early and refined over time, rather than waiting for completion.

Explore Further

This site is continuously evolving. The goal is not a polished portfolio but a space where work can exist without being compressed into updates, case studies, or personal branding—a place that grows alongside the practice.