The tokens, components, and content principles that hold the site together.

The design vocabulary is inherited from justmenotai.com, a daily-photo project. Warm cream paper, warm-black ink, and a single brick-red accent. That's the whole palette. Nothing decorative beyond it.

Type pairs Inter Tight (light + regular for body, medium for emphasis) with JetBrains Mono for eyebrow labels and metadata. The mono is small and uppercase by default. It does the work of small-caps without needing a separate face.

Photography appears throughout as breath. Black-and-white frames sit between paragraphs the way a deep inhale sits between two thoughts.

The accent has three jobs and nothing else: hover states on links and buttons, the active indicator under the current nav item, and the highlight on the currently-spoken paragraph during audio narration.

Two breakpoints. At 720px the gutter switches and the catalog list collapses to a single column. At 600px the nav goes behind a hamburger toggle, the credentials strip stacks vertically, and the hero text drops its 18ch cap to breathe across the full width.

Section overrides use padding-block exclusively. Never the three-value padding shorthand. That keeps vertical and horizontal axes from colliding when a section also has the .container class.

Header. Translucent paper with a saturate-blur backdrop filter, sticky to the top. Six text links plus a magnifying-glass icon for search. The active page picks up a brick-red underline. Below 600px, all of it collapses behind a hamburger toggle that morphs three bars into an X via aria-expanded.

Footer. Mono, small, uppercase. Echoes the nav plus an RSS link and the link back to this page. No social-proof badges or "as seen in" strip.

Anchor nav. The /essays page uses a sticky sub-nav for jumping between topic groups (On Founder Craft, On Leadership, On Noticing). The active section picks up the accent via an IntersectionObserver.

Eyebrow label. Mono, 11px, 0.18em tracking, uppercase, ink-2 color. Used above titles, in metadata strips, on sub-navigation.

CTA link. Inline-flex with an arrow that scoots right on hover. Underline-bottom inherits ink color, swaps to accent on hover. Visible on every page's close section.

Inline link. Underline-only (no color shift in rest state). Hover swaps the underline and text color to the brick-red accent. Subtle in body copy, distinct enough to spot when you're looking for one.

Catalog list. Vertical list with border-top separators. Hovering an item nudges it 6px right and turns the title accent. Used for the essays catalog and the search results.

Photo block. Centered image with a metadata strip below: location, year, camera body, sometimes a subject name. Mono caps, middot separators. Lives on the home page, about page, and the photography page (which pulls from JMA at build time).

Blockquote. 2px --rule-color left border, 22px left padding, italic, ink-2 color. Used for pulled quotes inside essays. Baldwin, Pasteur, Bezos, others.

Pipeline. Source markdown gets split into block-level chunks (paragraph, heading, blockquote, list). Plain text goes to ElevenLabs /with-timestamps with the cloned voice. Character-level alignment maps back to block-level start and end milliseconds. The mp3 and JSON timestamps upload to Vercel Blob; URLs land in the essay's frontmatter. The process is idempotent. Re-runs only regenerate when the essay body's SHA-256 changes.

Player. Inline at the top of each essay. Minimal play/pause, slim seek bar, elapsed and total time. Resources load lazily on first play. As audio advances, the current paragraph picks up a brick-red left border and a soft accent tint. Smooth scroll keeps the active block in view unless the reader scrolls manually.

Sticky mini-player. Once audio is playing and the inline player has scrolled out of view, a bottom-fixed pill follows the reader. Same play/pause, same seek, smaller footprint. Both players share one HTMLAudioElement so state stays in sync.

Privacy. The mp3s come from your domain via Blob CDN. No third-party tracking. Audio engagement events (audio_play, audio_25_percent, and so on) flow into Vercel Analytics. Same dashboard as page views.

Search. Powered by Pagefind. The build pipeline runs pagefind --site dist/client after Astro finishes. The result is a ~50KB index of essay bodies. The /search page loads it on demand and renders results with the essay's curated pull line as the blurb (italic) when present. When no pull exists, the fallback is a Pagefind excerpt truncated to the nearest sentence boundary, with brick-red <mark> highlights on matched terms.

Markdown mirror. Every page has a parallel /slug.md URL with the same content as plain markdown. The HTML page declares its mirror via <link rel="alternate" type="text/markdown"> in the head, so AI tools (ChatGPT browse, Claude, Perplexity) can fetch the cleaner version without parsing styled HTML. Try /about.md or /essays.md.

View transitions. Native browser @view-transition is enabled site-wide. Page navigations cross-fade instead of redrawing.

Hover affordances. Catalog items scoot 6px to the right on hover. CTA arrows scoot 4px. Title color fades to accent over 180ms. Nothing else moves.

Reduced motion. Anyone with prefers-reduced-motion: reduce gets a global rule that caps animation duration to 0.01ms. Every transition turns off.

Dark mode. Auto via prefers-color-scheme: dark. The OKLCH tokens swap to a low-luminance variant. The accent and the type scale stay identical.

Skip-to-content link. First focusable element in the body. Hidden until focused, then slides in. Lets keyboard and screen-reader users bypass the header on every page.

ARIA. The hamburger toggle uses aria-expanded and aria-controls. The audio player exposes role="slider" on the seek bar with aria-valuemin, aria-valuemax, aria-valuenow. The sticky anchor nav announces the active section via aria-current.

Focus rings. A 2px brick-red outline with 2px offset on every focusable element. Visible. Never removed.

One voice across the site. Every page reads as the same person — the one who shows up in the essays, on the coaching call, behind the camera. Sentences vary in length on purpose. Punchlines come from specifics, not rhetorical structure. Em-dashes get used where the rhythm asks for one, not because the line wants to sound writerly. Participle-phrase tail-offs are broken into separate sentences. Patterned triplets and negative parallelisms are loosened where they read as cadence rather than voice.

Restraint over proof. The credentials strip ("20 yrs · 6 companies · 4 exits · $350M raised · hundreds of founders coached") is the only quantitative claim on the site, and it's a single subdued mono line. No testimonials. No logo strips. No "as seen in" badges. The work is the proof.

Pull lines over windowed excerpts. Every essay has a curated pull in frontmatter, usually a sentence Micah actually wrote. Search and homepage previews surface that pull instead of a random window of body text. When no pull exists yet, the fallback is a Pagefind excerpt truncated at the sentence boundary so it never reads severed.

Markdown stays in markdown. Essays live as plain .md files in src/content/essays/. No CMS. No editor lock-in. Edit a file. Commit. Push. The search index, RSS feed, and audio narration regenerate from the source on the next deploy.