№ 01 — Colophon

How this is made

The type, the ink, the press, and the practices. Everything on this page is checkable against the repository — that is the point.

// The type

Spectral

The display and long-form voice — a serif drawn for screens with the temper of a broadsheet. Weights 400/600/700, self-hosted at build via next/font.

Geist Sans

Interface text. Geist Mono sets the folios, eyebrows, and code. Both ship from the npm package — no font CDN, no layout shift.

// The ink

Navy ink

oklch · deep navy-ink

Champagne gold

oklch · the accent

Paper

oklch · warm card stock

Muted text

holds ≥4.5:1 contrast

The palette is defined in OKLCH — perceptually uniform, so the gold stays gold and the contrast math stays honest in both the day edition and the night edition.

// The press

Next.js 16 · App Router · React 19
Server-first rendering: every page is static HTML; client JS is reserved for genuine interactivity.
Turbopack — dev and production
Single toolchain; full production build in well under a minute.
Tailwind CSS v4 + shadcn/ui
Design tokens in OKLCH; components owned in-repo, not imported as a kit.
MDX + constants-as-content
Writing lives in version-controlled files; page copy is typed data. No CMS between me and the words.
Framer Motion, behind MotionConfig
One or two animated beats per view, all neutralized for reduced-motion readers.
Self-hosted, twice over
Deployable as a non-root Docker container or to serverless hosts; fonts and analytics are first-party.

// The practices

The evidence ladder
Every claim on this site sits at an honest rung: a verifiable system fact, or explicit design-goal language ("designed for", "built to sustain"). Unverifiable metrics are hidden behind a verified flag in code — they render only when they can be backed.
Empty over fake
No testimonials are shown until a real, attributable one exists. Sections render nothing rather than placeholders.
Generative covers
Case studies without shareable screenshots get deterministic guilloché cover art — the engraved-curve idiom from banknote printing, seeded per page.
Accessibility as a floor
Visible keyboard focus everywhere, WCAG-checked contrast tokens, reduced-motion as a first-class path, real landmarks. Target: WCAG 2.1 AA (not independently audited — see the ladder above).

An honest admission: this site is frankly over-engineered for a portfolio — deliberately. It is the demo unit. The case study on how it is built lives at Engagement № 05.

// loading

// The press

Next.js 16 · App Router · React 19

Server-first rendering: every page is static HTML; client JS is reserved for genuine interactivity.

Turbopack — dev and production

Single toolchain; full production build in well under a minute.

Tailwind CSS v4 + shadcn/ui

Design tokens in OKLCH; components owned in-repo, not imported as a kit.

MDX + constants-as-content

Writing lives in version-controlled files; page copy is typed data. No CMS between me and the words.

Framer Motion, behind MotionConfig

One or two animated beats per view, all neutralized for reduced-motion readers.

Self-hosted, twice over

Deployable as a non-root Docker container or to serverless hosts; fonts and analytics are first-party.

// The practices

The evidence ladder

Every claim on this site sits at an honest rung: a verifiable system fact, or explicit design-goal language ("designed for", "built to sustain"). Unverifiable metrics are hidden behind a verified flag in code — they render only when they can be backed.

Empty over fake

No testimonials are shown until a real, attributable one exists. Sections render nothing rather than placeholders.

Generative covers

Case studies without shareable screenshots get deterministic guilloché cover art — the engraved-curve idiom from banknote printing, seeded per page.

Accessibility as a floor

Visible keyboard focus everywhere, WCAG-checked contrast tokens, reduced-motion as a first-class path, real landmarks. Target: WCAG 2.1 AA (not independently audited — see the ladder above).