# Content Design — Editorial Display, Imagery, SEO & LLM-Friendly Authoring

How content *presents* on executionspace.com: headline systems, editorial layouts, imagery
direction, and the authoring standards (SEO, accessibility, machine-readability) every page
follows. Pairs with `content/CONTENT-GUIDE.md` (what we may say — facts, voice,
real-vs-placeholder) and `content/templates/` (article scaffolds).

> ⚠️ Copy-canon rules still apply: no unverified stats, no invented clients. Headline
> *formulas* below are display patterns — fill them only with cleared copy.

---

## 1 · Headline system

Five house patterns, in descending weight. One `--h0`/`--h1` moment per page.

| Pattern | Shape | Example (deployed copy) |
|---|---|---|
| **Accent pivot** | statement + yellow turn | "Experience that **transforms.**" |
| **Triple stack** | three one-word lines | "Embedded.<br>Accountable.<br>Relentless." |
| **Claim + place** | verb-led, spatial | "Built inside brands. Not beside them." |
| **Counted ways** | number frame | "Three ways we work." |
| **Direct address** | second person, question | "Ready to close the gap?" |

Rules: the yellow accent lands on the *transforming* word (one per headline, always with the
period); sentence case, full stops on statements; headlines carry meaning on their own —
never decorative fragments (SEO + screen-reader first-pass both read headlines out of
context).

## 2 · Editorial display patterns (articles / blog)

Three article formats (templates in `content/templates/`, seeded examples in `content/seeds/`):

| Format | Length | Display |
|---|---|---|
| **Standard** | 800–1,400 words | hero: category eyebrow + accent-pivot title + dek; body: h2 every 3–5 paragraphs, one pull-quote, optional CTA band |
| **Playbook** | 1,200–2,000 words | adds numbered section labels (`[ 01 · Step ]`), a "what you'll need" box, and a closing checklist |
| **Note** | 250–500 words | no hero image; mono date stamp, single h1, tight column — reads like a considered changelog |

Shared rules: 65–75ch measure; dek (standfirst) under every standard/playbook title —
1–2 sentences, `--lg`, muted; pull-quotes use the yellow-bracket motif, one per article max;
category system per copy deck: **Process · Service · Solution · Update**; every article ends
with a next step (related article or contact) — never a dead end.

## 3 · Imagery direction

Until real photography exists, the house style is **built imagery, not stock**:

- **Gradient covers** — the `mesh` material as article/case covers (already the site
  pattern: `wf1/wf2/wf3` variants). Assign each category a consistent hue bias:
  Process = ink blue, Service = violet, Solution = green, Update = graphite.
- **Diagram-first** — prefer an inline SVG diagram (tokens: 1.5px hairlines, accent for the
  active path, DM Mono labels) over any decorative photo.
- **Animatics as illustration** — an `<es-animatic>` can headline a section (e.g.
  `pulse-grid` for a performance piece). One per viewport max.
- **When photography arrives:** duotone toward `#1A1A1A` shadows / natural highlights;
  people at work, not posed; never watermarked stock, never AI-face imagery.
- Every meaningful image: descriptive `alt`; decorative covers: empty `alt`.

## 4 · SEO standards (every page)

- **One `<h1>`**, heading levels never skip; the h1 contains the page's primary term
  naturally (e.g. "Migrate to Shopify" — the page names already do this).
- `<title>`: `{Page} — Execution Space` ≤ 60ch · `meta description` 140–160ch, written as
  the search-result pitch (the dek often works verbatim).
- **Canonical + robots:** prototypes/playgrounds stay `noindex,nofollow` (as built);
  production flips to indexable at deploy — this is a deploy-checklist item, not a per-page
  choice. One canonical URL per page.
- **Open Graph / Twitter:** `og:title`, `og:description`, `og:image` (1200×630 — the mesh
  cover with wordmark), `twitter:card=summary_large_image`.
- **Structured data (JSON-LD):** `Organization` (site-wide), `Article` + `BreadcrumbList`
  (posts), `FAQPage` only where a real FAQ renders.
- Descriptive URLs (`/migrate-to-shopify`, not `/page7`); internal links use meaningful
  anchor text — never "click here".

## 5 · LLM-friendly authoring

Search increasingly *reads* rather than ranks. Structure content so a model quotes us
correctly:

- **Answer-first sections:** open each h2 section with the takeaway sentence, then expand.
  A model (or a skimmer) lifting the first sentence should get a true, complete claim.
- **Self-contained headings:** "How we scope a replatform" not "Our approach" — headings are
  retrieved out of context.
- **Define terms once, precisely** (e.g. "embedded engagement — our team working inside
  yours, in your tools") — models propagate the definition we write.
- **Facts in prose, not only in graphics** — anything that matters must exist as text.
- **Stable anchors:** heading `id`s don't change once published; deep links keep resolving.
- **No fabrications, ever** — models amplify errors. The no-unverified-stats rule is an LLM
  rule too: what we publish becomes what machines say about us.
- `llms.txt` at the production root (short site map + canonical positioning paragraph) —
  cheap, forward-compatible.

## 6 · Article production checklist

1. Pick format → copy the template from `content/templates/`.
2. Front-matter complete (title ≤60ch, dek, category, date, status: `draft`).
3. Headline follows a house pattern; h2s are self-contained; answer-first paragraphs.
4. Cover assigned (category mesh variant) + alt text decision.
5. No unverified stats / clients — or flagged `[TBD — Erik]`.
6. Meta description written (140–160ch).
7. Status → `review` (Erik) → only then built into HTML.