How This Site Is Built

Current best practices for AI-first web design in 2026.

Most websites in 2026 are still built for one audience: humans with browsers. Some optimize for two — humans and search engines. Almost none are built for the four audiences that actually matter now.

This site is designed from the ground up to serve all four simultaneously: humans reading on screens, search engines crawling for rankings, AI answer engines synthesizing citations, and AI agents consuming structured data programmatically. Every HTML element, CSS class name, structured data block, and content decision on this site reflects that philosophy.

This page explains how — not as theory, but as a working implementation you can view-source and inspect. If you're building websites, advising clients on AI readiness, or just curious about what "AI-first" actually means in practice, this is our current thinking. The field is nascent and the best practices will evolve — but this is where we are today.


The Four Audiences

Every page on this site is optimized for four consumers. Here's what that means in practice and how it's implemented.

SEO — Search Engine Optimization

How traditional search engines (Google, Bing) find, index, and rank this site.

GEO — Generative Engine Optimization

How AI-powered search results work — Google AI Overviews, Perplexity, ChatGPT search. These systems synthesize answers from web content and cite sources. Getting cited requires specific content patterns.

AEO — Answer Engine Optimization

How AI assistants extract and present content when people ask questions conversationally. Overlaps with GEO but focuses on the conversational query pattern — the user asking "should I invest in this AI project?" rather than searching "AI project evaluation."

E-E-A-T — Experience, Expertise, Authoritativeness, Trustworthiness

Google's quality framework. The first E (Experience) is the hardest to fake — and the most important in 2026.

LLM Discoverability

How this site makes itself directly readable by AI language models — not just crawlable, but structurally parseable.


The Editorial Pipeline

Every Shifting Ground dispatch goes through a structured editorial process. The AI assists with research, structure, and fact-checking. The voice is human. The process is transparent — every dispatch includes a "How this dispatch was made" section showing the original seed alongside the pipeline output.

Five Stages

  1. Sift — Decompose the seed into threads. Find the arc. Identify what's missing.
  2. Forge — Expand the sifted threads into a full draft.
  3. Thrash — Adversarial review. For philosophical dispatches: voice, honesty, and audience value (3 lenses). For thematic dispatches: claim rigor (single lens).
  4. Rattle — Post-draft coherence check. Does it land? Is it complete? Would you send it to someone you respect?
  5. Lint — Publish-readiness checklist. 13 items covering SEO, GEO, accessibility, metadata, and attribution.

Content Types

Dispatches are long-form essays — philosophical (personal, associative, walking-and-thinking) or thematic (argument-driven, evidence-backed, structured). They go through all five stages.

Cairns are short technical trail markers — observations from building production AI. They skip Sift, Thrash, and Rattle. Light Lint only.

Seeds and Provenance

Every dispatch starts from a seed — a raw idea captured live, often as a voice memo or a stream-of-consciousness paragraph. The seed is preserved and published alongside the final version so readers can see what the pipeline changed, what it kept, and where the human voice lives in the finished piece.


The Design System

Color Palette

Warm earth tones. No tech blue. No startup gradient. Grounded.

RoleNameHexCSS VariableSample
PrimaryBurnt Umber#8B4513--color-earth
SecondarySlate#4A5568--color-slate
AccentOchre/Gold#8B5E0A--color-ochre
BackgroundWarm White#FAF8F5--color-paper
TextNear Black#1A1A2E--color-ink

Typography

One editorial serif family. Readable, not trendy.

Source Serif 4 (Variable)

Regular (400): The quick brown fox jumps over the lazy dog.

Semibold (600): The quick brown fox jumps over the lazy dog.

Bold (700): The quick brown fox jumps over the lazy dog.

JetBrains Mono (Code)

const assessment = await groundTruth.analyze(artifact);
// Claim Register, Gap Map, Campaign Plan, Velocity Check
console.log(`Findings: ${assessment.findings.length}`);

Type Scale

text-4xl (2.441rem) — Page titles

text-3xl (1.953rem) — Section headings

text-2xl (1.563rem) — Subsection headings

text-xl (1.25rem) — Subtitles, emphasis

text-lg (1.125rem) — Lead paragraphs

text-base (1rem) — Body text

text-sm (0.889rem) — Meta, captions, dates

text-xs (0.8rem) — Tags, labels

Components

Audience Signal

Tells humans and AI who a page is for. Ochre left border.

For non-technical decision makers — founders, executives, PE/VC partners.

Quotable Claim

Designed for AI citation extraction. Earth left border.

A second opinion on your AI project — from someone who builds production AI systems, not someone who sells them.

Cited Statistic

AI summarizers extract these preferentially.

Only 5–12% of organizations achieve significant financial impact from AI (McKinsey 2025, BCG 2025, PwC 2026) — converging across three independent methodologies.

Persona CTA

Targeted call to action with data-audience attribute.

Cairn Entry

Trail marker with tags.

Example cairn title

Short technical note, lesson learned, or observation from production AI work.

example-tag another-tag

CSS as Documentation

CSS class names on this site are semantic and self-documenting. Reading the source is reading the design decisions. A class named .geo-quotable tells you what the element is FOR (AI citation extraction), not just how it looks.

Layout

.site-header, .site-footer, .site-nav
.wayfinder-brand, .wayfinder-nav, .wayfinder-contact
.page-hero, .page-hero__subtitle

Content Types

.dispatch, .dispatch-hero, .dispatch-byline, .dispatch-body, .dispatch-meta
.dispatch-forward-pointer, .dispatch-footnotes
.cairn-entry, .cairn-datestamp, .cairn-tags

Ground Truth

.ground-truth-offering, .ground-truth-claim
.ground-truth-proof, .ground-truth-deliverable, .ground-truth-findings
.ground-truth-intake

GEO / AI Optimization

.geo-quotable          — content designed for AI citation extraction
.geo-statistic         — cited statistic with source
.geo-audience-signal   — "who this is for" block

Persona Targeting

.persona-cta[data-audience="exec"]       — enterprise decision maker
.persona-cta[data-audience="fog-person"] — professional navigating disruption
.persona-cta[data-audience="builder"]    — practitioner building AI tools