Colophon

How this site was built, the technology behind it, and the design decisions that shaped its aesthetic. A technical and creative reference for those interested in the details.

Technology Stack

Framework

Next.js 16React framework with App Router
React 19UI library with client components
TypeScriptType-safe JavaScript

Styling

Tailwind CSS v4Utility-first CSS framework
PostCSSCSS processing
Custom CSS VariablesDesign system tokens

Animation

Framer MotionProduction-ready motion library
LenisSmooth scroll library

Typography

InterSans-serif for body text
Playfair DisplaySerif for display text

Design Principles

Swiss Design Influence

Grid-based layouts, generous whitespace, strong typography hierarchy, and limited color palette focusing on grays and blacks.

Typography-First

Custom .text-display and .text-meta utility classes for consistent typographic rhythm. Ultra-tight tracking for headlines, wide tracking for metadata.

Performance-Focused

Optimized images, minimal JavaScript, CSS-in-Tailwind, and smooth scroll with proper cleanup to ensure fast load times.

Accessible Motion

Respectful animations using viewport-triggered entrance effects, consistent easing curves, and proper reduced-motion support.

Mobile-First Responsive

Designed for mobile first, with thoughtful breakpoints and touch-friendly interactions. Dedicated mobile navigation experience.

Color System

A refined neutral palette built on custom CSS variables. Grays from 50 to 950 provide subtle depth while maintaining the minimalist aesthetic. Dark mode support via prefers-color-scheme ensures accessibility across environments.

50
100
200
300
400
500
600
700
800
900
950

Built With

This site was designed and developed by Kerry Morrison in 2025. Built in about an hour, over two coffees...what a time we live in.

Hosted on Vercel. Lives on GitHub.

Last updated: November 2025