Design

The design system used to build this site.

Type

Hero · Signifier 400

The road is life.

Body · Söhne 500

I had nothing to offer anybody except my own confusion. So I got on with my plans for the journey, and was up at four in the morning to take a bus across the bridge.

Page title / Section heading · Söhne Mono 400

Part One

Highlighted heading · Söhne Mono 400

Part One

Page intro · Söhne 400

Nothing behind me, everything ahead of me, as is ever so on the road.

Item title · Söhne 400

All of life is a foreign country

Meta · Söhne Mono 400

Summer 1947 · Denver

Type scale

--text-sm: 0.875rem / 14px mono labels, meta, timestamps
--text-md: 1rem / 16px section headings, page titles, button labels
--text-lg: 1.125rem / 18px body copy, list links

Color

--color-text-primary h1, hero, primary links
--color-text-body body copy
--color-text-muted h2, page-title, dates, captions, footer
--color-border link underlines, soft icons
--color-border-subtle input/card borders
--color-accent purple, hover and highlight
--color-accent-hover accent pressed/hover
--color-highlight selection, mark

Spacing

--space-3xs 0.25rem / 4px tight pairs (h1 → subtitle)
--space-2xs 0.5rem / 8px inline gaps, list item gaps
--space-xs 0.75rem / 12px label → content
--space-sm 1rem / 16px default block gap
--space-md 1.5rem / 24px card padding, nav gaps
--space-lg 2rem / 32px edge padding, column gap
--space-xl 3rem / 48px hero → body
--space-2xl 4rem / 64px section breaks (mobile)
--space-3xl 6rem / 96px section breaks, subtitle → hero

Components

Newsletter form

Copy button

Pill button LinkedIn

Link row

Notes on a quiet interface

Images

Photograph sample — Photograph Sharp corners for editorial photo content.