Example cairn title
Short technical note, lesson learned, or observation from production AI work.
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.
Every page on this site is optimized for four consumers. Here's what that means in practice and how it's implemented.
How traditional search engines (Google, Bing) find, index, and rank this site.
<article>, <section>, <nav>, <time>, <address><h1> through <h6>, no skipped levelsfont-display: swap<lastmod> freshness signalsHow 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.
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."
Google's quality framework. The first E (Experience) is the hardest to fake — and the most important in 2026.
knowsAbout, technical depth in cairns, code-level analysis in dispatches@id references, LinkedIn sameAs, verifiable work historyHow this site makes itself directly readable by AI language models — not just crawlable, but structurally parseable.
/llms.txt — LLM-friendly site overview (the emerging standard for AI-readable site summaries)/llms-full.txt — extended version with dispatch summaries and cairn contentrobots.txt explicitly allowing AI crawlers (GPTBot, ClaudeBot, PerplexityBot, Google-Extended)@id references in Schema.org — one entity definition, referenced everywhereEvery 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.
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.
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.
Warm earth tones. No tech blue. No startup gradient. Grounded.
| Role | Name | Hex | CSS Variable | Sample |
|---|---|---|---|---|
| Primary | Burnt Umber | #8B4513 | --color-earth |
|
| Secondary | Slate | #4A5568 | --color-slate |
|
| Accent | Ochre/Gold | #8B5E0A | --color-ochre |
|
| Background | Warm White | #FAF8F5 | --color-paper |
|
| Text | Near Black | #1A1A2E | --color-ink |
One editorial serif family. Readable, not trendy.
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.
const assessment = await groundTruth.analyze(artifact);
// Claim Register, Gap Map, Campaign Plan, Velocity Check
console.log(`Findings: ${assessment.findings.length}`);
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
Tells humans and AI who a page is for. Ochre left border.
For non-technical decision makers — founders, executives, PE/VC partners.
Designed for AI citation extraction. Earth left border.
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.
Targeted call to action with data-audience attribute.
Trail marker with tags.
Short technical note, lesson learned, or observation from production AI work.
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.
.site-header, .site-footer, .site-nav
.wayfinder-brand, .wayfinder-nav, .wayfinder-contact
.page-hero, .page-hero__subtitle
.dispatch, .dispatch-hero, .dispatch-byline, .dispatch-body, .dispatch-meta
.dispatch-forward-pointer, .dispatch-footnotes
.cairn-entry, .cairn-datestamp, .cairn-tags
.ground-truth-offering, .ground-truth-claim
.ground-truth-proof, .ground-truth-deliverable, .ground-truth-findings
.ground-truth-intake
.geo-quotable — content designed for AI citation extraction
.geo-statistic — cited statistic with source
.geo-audience-signal — "who this is for" block
.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