# Section Layout Taxonomy — Mock-Image → HTML Build Archetypes

**Run: section-research (R&D) · v1 · 2026-06-09 · for review**

**Purpose.** The pipeline's proven capability is one section archetype: the L1 hero — full-bleed
background image + overlaid headline/body/CTA, recovered as real HTML (run-014/015 detect → inpaint →
rebuild). To expand "AI full-page mock → custom-looking HTML site" beyond the hero, we need a map of
*what else a page is made of*: the section layout types an SMB site actually uses, classified by **how
their pixels decompose into rebuild operations** — because that, not the section's topic, is what
determines the build skills required.

**Grounding.** (a) Empirical census of the 9 design runs that built or mocked pages (run-001–006, 008,
009, 016): every section built, its layout pattern, and its asset technique. (b) Current pipeline state:
run-014/015 detector + rebuild, run-010 L1 taxonomy, run-011 font catalog, DECISIONS D1–D5,
WORKFLOW_LEARNINGS entries 1–9. (c) Generalization to common SMB verticals beyond the pizzeria.

---

## 0. TL;DR

- **10 archetypes** (S1–S10), ordered by capability distance from today: S1 overlay canvas (proven) ·
  S2 strip band · S3 split panel · S4 card grid · S5 data panel · S6 gallery/collage · S7 editorial ·
  S8 interactive proxy · S9 chrome (nav/footer) · S10 connective tissue (cross-section).
- **3 fidelity contracts** define what "matches the mock" means per archetype: **pixel-faithful**
  (rebuild the pixels — hero), **structure-faithful** (rebuild the structure/proportions in flow
  layout — most sections), **semantic-reference** (the mock region is a styled stand-in; a real
  component replaces it — forms, maps, embeds).
- The census shows 9 runs already converged on this split de facto: baked = backgrounds, photos,
  illustrations; live HTML = all copy, menus, nav, footer. The taxonomy formalizes it.
- **6 new rebuild operations** unlock the catalog: region **crop**, repetition **repeat**, structured
  **data** extraction/binding, proxy **swap**, page **segment**ation, and **text-flow** rebuild
  (the hero's absolute-coordinate rebuild does not transfer to flow sections).
- A universal **fallback ladder** (full rebuild → hybrid bake of the hard sub-region → whole-section
  bake with a11y mitigations) makes every archetype shippable today; capability work moves sections
  up the ladder.
- Suggested validation order (waves): S2 → S3 → S5 → S4 → S6-grid → S9 → S7 → S8 → S6-collage/S10.
  S1+S2+S3+S4+S5+S9 together cover the canonical SMB single-pager (the "SMB 80%").

---

## 1. How this composes with existing project vocabulary

No new meanings for existing terms; this taxonomy sits one level above them.

| Existing concept | Role inside this taxonomy |
|---|---|
| **Lanes L0–L3** (playbook: text-led / full-bleed illustration / real photos / graphic elements) | Asset technique *per element or panel*. Archetypes combine lanes — a split panel = L1-or-L2 image panel + L0 text panel. |
| **run-010 L1 taxonomy** (Branch H/B/X · B0–B4 background ladder · readability strategies · L1-1…L1-5 rungs) | The deep dive *within S1*. S1 inherits it wholesale. Branch H/B/X and B0–B4 generalize to modifier axes for every archetype (§2.3). |
| **D1 element catalog** (approved: headline, body, CTA pill) | Each archetype names the element types it adds to the catalog (§3, "elements"). |
| **D1 "conventional components are Lane 0, a separate track"** | Formalized as the **structure-faithful / semantic-reference contracts** (§2.1) — S5, S8, S9 are that track, now classified. |
| **run-014/015 detector + rebuild** (3-reader ensemble, cv2.inpaint plate, fit-to-width cqw rebuild, render-verify) | The **S1 build engine**. Its walls — touching text, image-generated small text, unknown copy — propagate as the per-archetype **text policy** (§4). |
| **Core skills #1–5** (detect/role, line count, cap-height, width, position) | The S1 *mock-reading* skills. Other archetypes add reading skills: region boundaries, repetition, structure, proxy recognition (§2.2). |
| **Font tiers SAFE/RISKY/AVOID** (run-011, D4) | Applies wherever text is baked-for-recovery, any archetype. |

---

## 2. The classification model

A section build is described by three things:

> **archetype** (S1–S10 — its layout geometry and decomposition recipe)
> × **fidelity contract** (what "match the mock" means)
> × **modifier axes** (background, text branch, fonts, geometry, density, interactivity…)

### 2.1 Fidelity contracts

| Contract | Meaning | How it's verified | Default for |
|---|---|---|---|
| **Pixel-faithful** | The rebuilt section's pixels ≈ the mock's pixels. The mock is a measured build target. | run-014 render-verify (pixel diff vs mock) | S1; the image panel of S2; S6 images; S10 bleeds |
| **Structure-faithful** | Same structure, proportions, hierarchy, spacing rhythm, and tokens — rebuilt as *flow* layout. Content may differ in length (data-bound copy). | Structural checks: column/grid geometry within tolerance, type-scale adherence, DOM measurement (`getBoundingClientRect`); not raw pixel diff | S3, S4, S5, S7, S9 |
| **Semantic-reference** | The mock region is a *styled stand-in* for a live component (form, map, carousel, embed). Real component replaces it, styled to tokens. | Checklist (component present, tokens applied) + **masking the region out of any pixel diff** | S8; data-bound regions of S5 |

**Census evidence:** all 9 design runs already practice this split — every hero background, gallery
photo, illustration, and divider is a baked image; every menu, nav, footer, and body copy is live
HTML. No run ever tried to pixel-recover a menu or a footer. The contracts make the de facto rule
explicit so verification can differ per contract instead of one global pixel-diff.

### 2.2 Rebuild operations (the op vocabulary)

The decomposition recipes in §3 are combinations of these ops.

| Op | What it does | Status today |
|---|---|---|
| **plate** | Background recovery under removed elements (untext / local `cv2.inpaint`), with bg-fidelity gate | ✅ exists (run-014/015; regen-untext fallback gated per the 14%-corruption finding) |
| **text-overlay** | Absolute-positioned text rebuild over a plate (detect → measure → size → place, cqw units) | ✅ exists (run-014/015) |
| **text-flow** | Typeset text in *flow/grid* layout matching the mock's structure: type scale, spacing rhythm, alignment, column geometry — not coordinates | 🆕 new (the hero's coordinate rebuild does not transfer; this is reading *structure*, then emitting semantic DOM + CSS) |
| **crop** | A rectangular mock region → standalone image asset (`<img>`/CSS bg of a sub-container) | 🆕 new as a skill: the crop is mechanically trivial; the skill is region-boundary detection + the **quality path** (a 2:3 page-mock crop is low-res → img2img-conditioned regeneration per playbook Entry 3, or generate the panel asset separately) |
| **cutout** | Object → transparent asset (mascots, badges, stickers) | ◑ partial (PIL chroma-key proven, runs 005/006; from-mock arbitrary-object segmentation not built) |
| **repeat** | Detect a repeating unit: count, unit bbox, gutters, grid geometry → ONE HTML template + per-cell content | 🆕 new |
| **data** | A structured text region → semantic markup (list/table/dl) + **binding to source data** (menu.yaml), with leader/tier/alignment typography | 🆕 new |
| **shape** | CSS/SVG reconstruction of drawn geometry: pills, rules, frames, dividers, masks, blobs | ◑ partial (CTA pill solved ~100% via Gemini grounding; frames/dividers/masks not generalized) |
| **swap** | Recognize a painted proxy → substitute the live component (form, map, video, carousel, ordering embed), styled to tokens | 🆕 new |
| **tokens** | Conventional HTML from copy + DESIGN.md, mock as layout reference only (= Lane 0 today) | ✅ exists (all runs' menus/footers/navs) |
| **segment** | Full-page mock → section bands: boundaries, background changes, dividers, bleed zones | 🆕 new as an automated skill (prereq for full-page automation; early GT work exists in `runs/test-cases/live-runs-gallery/` proto section-detection pairs) |

### 2.3 Modifier axes (orthogonal to archetype)

Mostly pre-existing ladders; two new ones (★).

- **Background complexity B0–B4** (run-010) — applies to any section backdrop, not just heroes.
- **Text branch H/B/X** per element (run-010): HTML / baked / hybrid.
- **Font tier** SAFE/RISKY/AVOID (run-011, D4) — anywhere text is baked-for-recovery.
- ★ **Copy provenance:** **authored** (we wrote it into the prompt — recoverable, role-ID by content
  match per D2) · **greeked** (mock text is a placeholder; read structure, never OCR the copy) ·
  **data-bound** (real copy comes from a data source at build; mock length ≠ real length).
- ★ **Image geometry:** straight rect → rounded → circle/arch → organic mask → rotated/overlapping
  with shadows. (Drives crop vs cutout vs bake decisions.)
- **Element density:** fixed 3-element (run-014 assumption) → variable-N elements → dense/tabular.
- **Interactivity:** static → hover → scroll-reveal (IO, run-002) → stateful widget (S8).
- **Render style** flat → painterly → photoreal (run-010) — drives plate/crop seam risk.
- **Reflow:** each archetype carries a canonical mobile transform (noted per archetype in §3).

---

## 3. Archetype catalog

Format per archetype: sketch · definition · SMB uses · census evidence · variants (easy→hard) ·
recipe (ops) · new capability needed · elements added to the D1 catalog · text policy · reflow ·
fallback. The **fallback ladder** is universal:

> **A. full rebuild** (the recipe) → **B. hybrid bake** — bake the *hard sub-region* as one image
> inside an otherwise-live section (generalizes Branch X) → **C. whole-section bake** with run-010 §6
> mitigations (visually-hidden heading, alt text, `<picture>` art direction, 2× asset).
> Every archetype ships today at C; capability work climbs toward A.

---

### S1 — Overlay canvas  *(proven)*

```
┌──────────────────────────────┐
│ ███████ HEADLINE ███████     │   one full-bleed image/band,
│   body line over the art     │   text + CTA floating on top
│        [ CTA pill ]          │
└──────────────────────────────┘
```

- **Definition:** one continuous background (illustration, photo, gradient, or flat band) fills the
  section; freely-positioned text elements + CTA sit on it. No internal panel structure.
- **SMB uses:** hero, CTA band, quote/testimonial band, visit-as-scene, footer-scene, announcement.
- **Census:** 9/9 runs (hero); also visit (run-005), footer scenes (run-001). The dominant pattern.
- **Variants (easy→hard):** flat band (B0) → illustrated quiet-zone → painterly → photoreal busy
  (= run-010's ladder, verbatim); centered → off-center (+1 difficulty, run-010 §7.7); 3 elements →
  +eyebrow/badge/stat (variable-N).
- **Recipe:** plate + text-overlay (+ shape for the CTA pill).
- **New capability:** none — this is the run-014/015 engine. Remaining gaps are run-010's open items
  (#5 contrast gate, #9b metrics, fine-position validation) and the variable-N element wall.
- **Elements added:** none (this IS the approved set: headline, body, CTA; future eyebrow/badge/stat per D1).
- **Text policy:** authored, baked-for-recovery (Branch H default).
- **Reflow:** re-anchor/re-stack elements; mobile scrim (run-016 pattern); `<picture>` art direction.
- **Fallback:** B = bake display word only (Branch X) · C = fully-baked (L1-5).

---

### S2 — Strip band

```
┌──────────────────────────────┐
│  ◆ 21 yrs   ◆ 4.6★   ◆ 100% │   thin full-width band;
└──────────────────────────────┘   a row of small repeated units
```

- **Definition:** a short full-width band containing a single row of small repeated units — stats,
  badges, logos, trust line, hours strip — or one line of text + button. Background is usually flat
  or simple (B0–B1).
- **SMB uses:** stats band ("Est. 2005 · 4.6★ · Certified Green"), logo/press strip, trust badges,
  announcement bar, single-line CTA band, proof chips.
- **Census:** run-001 visit fact-grid (3-col hours/address/phone); proof-chip rows (run-004/006);
  trust lines inside heroes (most runs).
- **Variants:** text-only stats row → icon+label chips → logo image strip → marquee/ticker (motion).
- **Recipe:** tokens + text-flow (+ repeat for the unit row; + crop/cutout for logo images).
- **New capability:** the *smallest possible* introduction of **repeat** and **text-flow** — fixed
  small unit count, flat background, no image recovery. The ideal first step beyond S1.
- **Elements added:** stat (value+label), chip/badge, logo cell.
- **Text policy:** authored or data-bound; safe to bake *display-scale* stat numerals for recovery,
  but labels at small sizes should be greeked or simply authored into HTML (small baked text wall).
- **Reflow:** row wraps to 2×2 or stacks.
- **Fallback:** C is cheap (band as image) but rarely needed — the band is nearly pure HTML anyway.

---

### S3 — Split panel

```
┌──────────────┬───────────────┐
│              │  EYEBROW      │   one image panel +
│   image      │  Headline     │   one text panel,
│   panel      │  body copy…   │   side by side
│              │  [ CTA ]      │
└──────────────┴───────────────┘
```

- **Definition:** the section divides into two (occasionally three) macro panels — one is an image,
  the other a text block (eyebrow/headline/body/list/CTA). The page's workhorse.
- **SMB uses:** about/story, feature highlight, signature product, on-tap/drinks, location teaser,
  before/after (trades), chef/owner bio.
- **Census:** 6/9 runs use it for Story (text + mascot/photo/mural); run-003 On-Tap (text left,
  illustration right). Universally present in some form.
- **Variants (easy→hard):** 50/50 boxed image → asymmetric 60/40 → image full-bleed to one edge →
  alternating zigzag rows → image overflows the panel / bleeds across the section cut (run-005,
  Appendix E) → image with organic mask or offset frame.
- **Recipe:** crop (the image panel; or generate the panel asset separately) + text-flow (the text
  panel) + shape (frames) (+ cutout if the image is a transparent object like the mascot).
- **New capability:** **crop** with its quality path, and **text-flow** for a structured text block —
  reading the panel boundary, image aspect, text-block structure and type scale from the mock.
  Entry 6 applies verbatim: the mock fixes the copy-vs-image balance; condense copy, never distort
  the image panel.
- **Elements added:** eyebrow/kicker, image-panel, fact-list/chip-list, caption.
- **Text policy:** headline may be baked-for-recovery (display scale); body should be authored but
  built as flow text (don't pixel-place a paragraph); long body = greeked in mock.
- **Reflow:** stack (image above or below text); zigzag rows all stack same-direction.
- **Fallback:** B = bake the image panel including its frame effects (already the norm); the text
  panel should essentially never be baked.

---

### S4 — Card grid

```
┌────────┐ ┌────────┐ ┌────────┐
│ [img]  │ │ [img]  │ │ [img]  │   N repeating units
│ Title  │ │ Title  │ │ Title  │   sharing one template
│ txt  $ │ │ txt  $ │ │ txt  $ │
└────────┘ └────────┘ └────────┘
```

- **Definition:** N uniform units in a regular grid or row; each unit = (image?) + title + text +
  (price/meta/CTA). Defined by the **uniformity contract**: all cells share one template.
- **SMB uses:** featured items/pies, services, team/staff, reviews-as-cards, blog/news teasers,
  process steps (1-2-3), packages/pricing tiers, events/specials.
- **Census:** 5 runs — pie cards (run-002: 4 illustrated pies with names/tags/3-tier prices;
  run-005: 3), menu category columns (run-001), proof grids.
- **Variants (easy→hard):** text-only cards → icon cards → photo cards → mixed-span feature grid
  (one card 2×) → horizontal scroll row (→ carousel = S8 interactivity).
- **Recipe:** repeat (unit inference: count, bbox, gutters) + crop per cell (or per-cell asset
  generation) + text-flow (the unit template) + shape (card chrome: radius, shadow, frame).
- **New capability:** **repeat** in full — detect the unit, infer ONE template, extract per-cell
  content; per-cell image assets at usable resolution (the page-mock cells are tiny → per-cell
  conditioned regeneration is the likely quality path, as run-002/005 effectively did by hand).
- **Elements added:** card (composite), price, tag/flag (V/VG/GF), avatar, star-rating.
- **Text policy:** titles/prices authored or data-bound; baked card text is usually too small to
  recover — treat mock cells as greeked structure, bind real data.
- **Reflow:** 3→2→1 columns (universal convention).
- **Fallback:** B = bake each card's image area, live text below (the de facto run-002 pattern —
  already proven by hand); C = bake the whole grid (loses responsiveness badly — avoid).

---

### S5 — Data panel

```
│ Margherita ............ 18 │   typeset data: rows,
│   tomato, basil, fresh moz │   columns, leaders, tiers
│ Bigfoot ............... 24 │
│   pesto, artichoke, feta   │
```

- **Definition:** a section whose content is *structured data rendered as typography* — menu lists
  with dot leaders, price tiers, hours grids, comparison tables, schedules. Little-to-no imagery;
  the design lives in the typesetting.
- **SMB uses:** full menu (restaurants — THE conversion section), service price lists (salon, auto,
  trades), hours/location facts, class schedules (fitness), package comparisons, nutrition/specs.
- **Census:** 6/9 runs built a full menu as live HTML — name + leader dots + price (+tier columns
  Classic/Favorite/Specialty), 2-col flows, category headers, diet-flag legends, tabbed category nav
  with scrollspy (run-002). Always Lane 0; **no run ever baked a menu** — D1 called this.
- **Variants (easy→hard):** facts grid (3 cells) → single-column price list → multi-column flow →
  tier-matrix (item × size pricing) → tabbed categories (+S8 interactivity) → true table with rules.
- **Recipe:** data (structure extraction + binding to menu.yaml/source) + text-flow (leader dots,
  alignment, tier columns, category headers) + tokens.
- **New capability:** **data** — read the mock's *structure* (columns, row anatomy, leader style,
  tier headers), never its garbled copy; bind the real data; and a **length-reconciliation policy**
  (real data is longer/shorter than the mock showed — Entry 6 generalized from copy to data).
- **Elements added:** menu-item row (name/desc/price), leader, tier header, legend/flag, hours row.
- **Text policy:** **always data-bound + greeked in the mock.** Dense small text is on the wrong
  side of every wall (small baked text, unknown copy, touching lines) — and menus change, so baked
  menus would be unmaintainable anyway. The mock contributes layout + typographic style only.
- **Reflow:** columns → single column; table → stacked rows.
- **Fallback:** none needed below A — this archetype is buildable today by hand (6 runs did);
  the new work is *automating the read* of the mock's structure and style.

---

### S6 — Gallery & collage

```
┌────┐ ┌──────┐ ┌────┐      ┌─────┐╲
│ ▒▒ │ │  ▒▒  │ │ ▒▒ │  vs  │ ▒▒ ╱╲────┐
└────┘ └──────┘ └────┘      └───╱▒▒▒│▒▒│
 uniform grid                rotated/overlapping collage
```

- **Definition:** image-dominant composition; text is minimal (captions, a heading). Spans from
  regular photo grids to freeform scrapbook collage.
- **SMB uses:** food/work gallery, ambiance showcase, Instagram strip, portfolio (trades/salon),
  full-width image break, press-photo wall.
- **Census:** 4 runs — run-003 two-column gallery with vertical rule (6 photos), run-004/006
  asymmetric grid with offset blockprint frames + captions, full-width breaks. Freeform collage
  appears in *directions* (riso/pop-art briefs) but was never attempted as a build — a real gap
  the taxonomy must cover.
- **Variants (easy→hard):** **G1** uniform grid → **G2** asymmetric/masonry/mixed-span → **G3**
  framed/styled cells (polaroid, tape, offset blockprint frames, rotation ≤ a few degrees) →
  **G4** filmstrip/carousel (+S8) → **G5** freeform overlapping collage (rotation, stacking,
  shadows — the frontier).
- **Recipe:** repeat (grid geometry) + crop ×N (or source real photos from assets/ and *match the
  mock's arrangement*) + shape (frames, rules, rotations in CSS) + text-flow (captions).
- **New capability:** multi-region **crop at scale** + **frame/chrome reconstruction** in CSS
  (G1–G3); **G5 needs overlap segmentation or per-object regeneration** — hardest image op in the
  whole taxonomy. Note: gallery photos are usually *real photos* (Lane 2) — the mock's painted
  photos are stand-ins → sourcing + arrangement-matching, not pixel recovery.
- **Elements added:** gallery cell, caption, frame style.
- **Text policy:** captions authored (HTML); never baked (too small).
- **Reflow:** grid → 2-col → swipeable strip; collage → simplified stack or carousel.
- **Fallback:** **B is unusually good here** — bake the *entire collage cluster* as ONE image
  (it's art, not content text; a11y cost is low with alt text). This makes G5 shippable today
  inside an otherwise-live section, and is the pragmatic default until segmentation exists.

---

### S7 — Editorial prose

```
│  OUR STORY                  │   text-led flowing column(s);
│  Twenty years under         │   the design IS the typography
│  the redwoods…              │
│  ❝ pull quote ❞  more body… │
```

- **Definition:** text-dominant flowing composition — long-form story, pull quotes, drop caps,
  multi-column text, fact lists. Imagery, if any, is inline/floated accents.
- **SMB uses:** about/history, philosophy ("Fresh, Local, Organic"), press write-up, FAQ-as-prose,
  legal/info pages.
- **Census:** run-002 story (display headline + lead + facts list + glow accents, reveal-on-scroll);
  run-003's magazine two-column shell (an editorial *page armature* hosting other sections).
- **Variants:** single column → lead+support two-column → pull-quote interruptions → drop caps,
  rules, marginalia → multi-column magazine flow.
- **Recipe:** text-flow (the whole thing) + tokens (+ shape for rules/quote marks).
- **New capability:** the deepest test of **text-flow**: extracting a *type system* from the mock
  (scale, leading, measure, alignment, spacing rhythm) rather than per-element coordinates. Zero
  image ops. High typography-fidelity load (font tiers matter; metrics mismatch #9b applies to any
  baked display type).
- **Elements added:** lead paragraph, pull quote, drop cap, rule, footnote.
- **Text policy:** display headline may be baked-for-recovery; body always authored/greeked — never
  pixel-recover paragraphs.
- **Reflow:** columns collapse; measure (line length) re-clamps.
- **Fallback:** C never appropriate (it's content text — SEO/a11y suicide); A is cheap anyway.

---

### S8 — Interactive proxy

```
│  Find us            │  ☎ form │   the mock PAINTS a widget;
│  ┌───────────────┐  │ [name ] │   the build SUBSTITUTES the
│  │   (map pic)   │  │ [email] │   real, live component
│  └───────────────┘  │ [send ] │
```

- **Definition:** the mock depicts something that must become a *live element*, not pixels: forms,
  maps, carousels, video players, ordering/reservation embeds, accordions, tabs. The painted region
  is reference-only (semantic-reference contract).
- **SMB uses:** contact/quote form (the #1 SMB conversion element outside restaurants), newsletter
  signup, Google map, online ordering/booking embeds, FAQ accordion, menu-category tabs, review
  carousel, hours widget.
- **Census:** **forms: 0 occurrences in 9 runs — the biggest gap between our runs and SMB reality.**
  Maps: 3 runs, and notably all chose *illustrated/SVG maps* over live embeds (an on-brand
  alternative worth keeping as a deliberate option). Tabs+scrollspy: run-002. Carousels: implied
  by mockups, never built.
- **Variants (easy→hard):** styled native form → accordion/tabs → carousel → third-party embed
  (map/ordering/booking — iframe styling limits!) → custom widget.
- **Recipe:** swap (recognize proxy → instantiate component) + tokens (style to DESIGN.md) +
  text-flow (labels/fields) — plus a **verify-policy change**: mask the region from pixel diff,
  check a semantic checklist instead.
- **New capability:** **swap** — proxy recognition (cheap: we author the mock prompt, so we *know*
  a form is there; declare it, don't detect it) + a styled component library (form fields, buttons,
  accordion, tabs, embed frames) themable from DESIGN.md tokens.
- **Elements added:** field, label, select, textarea, submit, accordion item, tab, embed frame.
- **Text policy:** labels/placeholders authored into HTML; never baked.
- **Reflow:** native (components are responsive by construction).
- **Fallback:** NONE — a baked form is a broken form. This archetype cannot ship at ladder rung C;
  it must be built live, which is why the component library is the capability to invest in.

---

### S9 — Chrome (nav + footer)

```
[◆ logo   Menu Story Visit  ☎ CTA]   site-level furniture:
              …page…                  conventional, dense,
[wordmark | links | hours | social]   token-styled, interactive
```

- **Definition:** the site-level furniture — sticky nav and multi-column footer. Strong web
  conventions; appears on every page; interactive (sticky, hamburger, focus management).
- **SMB uses:** universal.
- **Census:** nav 9/9 (always sticky bar: wordmark + links + phone/CTA; hamburger on mobile);
  footer 6/9 (wordmark + tagline + contact + badges + social + legal, 1–4 columns). **Always
  Lane 0 / pure HTML** — no run pixel-recovered chrome; D1 already designates this track.
- **Variants:** minimal bar → split nav (logo center) → mega-footer (4-col directory + newsletter
  form → S8) → announcement bar (S2) above nav.
- **Recipe:** tokens + text-flow; cutout/crop for the logo mark only; swap for footer newsletter.
- **New capability:** small — read nav/footer *content + tokens* from the mock (links, phone, logo)
  and apply conventions. The logo/wordmark is the one image-op: usually a cutout or its own asset.
  Interaction (sticky, hamburger, scrollspy) is a solved web problem — template it once.
- **Elements added:** logo/wordmark, nav link set, social icon row, legal line, link column.
- **Text policy:** authored; never baked. The mock's nav/footer are read for content and style only.
- **Reflow:** hamburger; footer columns stack.
- **Fallback:** not applicable — build conventionally, always.

---

### S10 — Connective tissue *(cross-section, not a section)*

```
  …section A art ╲▁▁▂▃ bleeds over the cut…
┌────────────────▔▔▔──────────┐
│ section B  (with sticker ◉ │    dividers · bleeds · stickers
│  overlapping the boundary)  │    · patterns · band changes
```

- **Definition:** everything that happens *between or across* sections and breaks the
  "page = stack of independent rectangles" model: shaped dividers (wave/torn/tree-line), one
  section's art bleeding past the cut, floating stickers/badges straddling boundaries, repeating
  pattern fields, background color-band changes.
- **SMB uses:** any design with personality — this is much of what makes a page feel custom rather
  than templated.
- **Census:** run-001 tree-line divider band; run-005 hero→story bleed (solved — Appendix E moves 1
  & 2: baked-cut + transparency/underlap); pattern fields (run-001 menu backdrop, run-009 riso
  textures); sticker libraries in toolkits (run-009: ~12 woodcut stickers).
- **Variants (easy→hard):** background color-band change → shaped divider (SVG or baked strip) →
  pattern field → sticker overlapping a boundary → full art bleed across the cut (Appendix E) →
  scroll-driven cross-section effects.
- **Recipe:** shape (SVG dividers) · cutout (stickers, chroma-key — proven) · crop (baked divider
  strips) · the Appendix E underlap technique · plus **segment** must *recognize* these so page
  cutting doesn't slice through a bleed.
- **New capability:** mostly composition rules, not new ops — but it puts a hard requirement on
  **segment**: section boundaries in a real mock are not clean horizontal lines.
- **Text policy:** n/a (no content text; badge text stays baked — it's a graphic per Branch B).
- **Reflow:** bleeds/stickers often simplify or drop on mobile (run-005 precedent: apply alpha to
  every responsive variant).
- **Fallback:** B by nature (these are baked art by default; the live-HTML version is the upgrade).

---

## 4. Text policy — the run-014 walls, propagated

run-014/015's walls: **touching text · image-generated small text · unknown copy**. Per archetype
this resolves into a simple global rule:

| Text tier | Examples | Policy |
|---|---|---|
| **Display** (headline/subhead/stat/CTA label) | S1/S2/S3/S7 headlines, stat numerals | **Bake-for-recovery** (Branch H): authored copy, SAFE font, detect → plate → rebuild. The proven lane. |
| **Reading body** (1–3 sentences) | S1 body, S3 panel body | Bake-for-recovery *works but is at the floor* (run-015: small-text glyph rasterization gap) — prefer authored-direct: write it into HTML, let the mock's body be approximate. |
| **Dense/small/tabular** (menus, captions, labels, footers, forms) | S5 rows, S4 card text, S6 captions, S8 labels, S9 | **Never bake-for-recovery.** Greek it in the mock (structure only) and **data-bind/author at build**. The image model garbles it anyway, and it's the text that changes most often. |

Consequence for mock *generation* (next session's topic): full-page mock prompts should request
*plausible greeked* dense text, and we should treat its illegibility as a feature, not a defect.

---

## 5. Purpose → archetype map

What an SMB page is made of, and which archetype each purpose typically realizes as.

| Section purpose | Typical archetype(s) | Notes |
|---|---|---|
| Hero | S1 | proven |
| About / story | S3 (split) or S7 (editorial) | 9/9 census presence |
| Menu / services / price list | **S5** (+ S4 for featured subset) | restaurant & most service SMBs |
| Featured items / signature products | S4 | pie cards pattern |
| Gallery / portfolio / ambiance | S6 (G1–G3) | real photos, mock = arrangement |
| Reviews / testimonials | S4 (cards) · S1 (quote band) · S8 (carousel) | |
| Team / staff | S4 | avatars → circle crops |
| Stats / trust / badges | S2 | |
| Press / "as seen in" logos | S2 | |
| Hours & location / visit | composite: S3 or S1 + S2/S5 facts + map (S8 or illustrated L3) | census: 6 runs, all composites |
| Contact / quote / booking | **S8 (form)** | absent from all 9 runs; core SMB need |
| FAQ | S8 (accordion) or S5/S7 | |
| CTA band | S1-thin or S2 | |
| Instagram / social strip | S6 (filmstrip) or S8 (embed) | |
| Events / specials / news | S4 or S5 | |
| Nav / footer | S9 | conventional track (D1) |
| Dividers / bleeds / stickers | S10 | the "custom feel" layer |

**Vertical sweep** (signature sections beyond the universal hero/about/gallery/visit/footer):
restaurant → S5 menu, S4 pies, S2 trust; salon/spa → S5 price list, S8 booking, S4 team;
contractor/trades → S6 portfolio, S3 before/after, S8 quote form, S2 licenses; dental/medical →
S8 forms, S4 services, S2 insurance logos; fitness/yoga → S5 schedule, S4 classes, S8 signup;
boutique retail → S4 product grid, S6 lookbook, S2 press; auto → S5 services, S8 quote, S2 brands;
venue/events → S6 gallery, S5 packages, S8 inquiry form; professional services → S7 editorial,
S4 services, S2 client logos. **S4+S5+S8 recur in every vertical** — they are, with S1/S3, the
core of the SMB 80%.

---

## 6. Capability matrix

Ops each archetype needs (✅ = exists today · ◑ = partial · 🆕 = new).

| | plate | text-overlay | text-flow | crop | cutout | repeat | data | shape | swap | tokens | segment* |
|---|---|---|---|---|---|---|---|---|---|---|---|
| **S1** overlay canvas | ✅ | ✅ | | | | | | ◑ pill | | | |
| **S2** strip band | | | 🆕 | (○) | (○) | 🆕 small | (○) | | | ✅ | |
| **S3** split panel | | | 🆕 | 🆕 | (○) | | | ◑ frames | | ✅ | |
| **S4** card grid | | | 🆕 | 🆕 ×N | | 🆕 | (○) | ◑ chrome | | ✅ | |
| **S5** data panel | | | 🆕 | | | (○) | 🆕 | | (○ tabs) | ✅ | |
| **S6** gallery/collage | | | (captions) | 🆕 ×N | 🆕 G5 | 🆕 | | ◑ frames | (○ G4) | | |
| **S7** editorial | | | 🆕 deep | | | | | ◑ rules | | ✅ | |
| **S8** interactive proxy | | | 🆕 labels | | | | (○) | | 🆕 | ✅ | |
| **S9** chrome | | | 🆕 | ○ logo | ○ logo | | | | (○ form) | ✅ | |
| **S10** connective | ◑ | | | 🆕 strips | ◑ ✅keyed | | | 🆕 dividers | | | hard req |

\* **segment** is a page-level prerequisite for full-page automation, not a per-section op.
(○) = optional/variant-dependent.

**Reading the matrix:** `text-flow`, `crop`, and `repeat` are the three highest-leverage new ops —
together they unlock S2/S3/S4 and most of S6. `data` unlocks S5 (the restaurant money section).
`swap` unlocks S8 (the service-SMB money section). `segment` gates full-page automation regardless
of archetype.

---

## 7. Prioritization — suggested validation waves

Ordered by (census frequency × SMB universality × capability adjacency), one new hazard per wave
(the run-010 ladder discipline, applied across archetypes):

| Wave | Archetypes | New thing it forces | Rationale |
|---|---|---|---|
| **0** | S1 (done) + its run-010 ladder | — | proven engine; keep hardening per run-010 open items |
| **1** | **S2 strip** · S1 variants (CTA/quote band, footer-scene) | text-flow (minimal) + small repeat, flat bg | nearly-free wins; every page has bands |
| **2a** | **S3 split** | crop + quality path; flow text block | the page workhorse; story/about is 9/9 |
| **2b** | **S5 data panel** | data extraction + binding; length policy | the restaurant conversion section; 6/9 runs hand-built it — automate the read |
| **2c** | **S4 card grid** | repeat in full; per-cell assets | featured/services; recurs in every vertical |
| **3** | **S6 G1–G3 gallery** · **S9 chrome** | crop ×N + frame chrome; conventions template + logo handling | completes the SMB 80% single-pager |
| **4** | **S7 editorial** · **S8 swap (form first, then embeds)** | deep text-flow; component library + verify masking | forms = biggest census-vs-reality gap |
| **5** | **S6 G5 collage** · **S10 at scale** · **segment** | overlap segmentation; bleed-aware page cutting | the frontier; B-fallback (bake the cluster) ships meanwhile |

**The SMB-80% milestone:** S1+S2+S3+S4+S5+S9 ≈ a complete conventional SMB single-pager
(hero, bands, about, featured, menu/prices, visit composite, chrome) — everything the census says
we actually build, with S6-grid and S8-form as the next two most valuable additions.

---

## 8. Open questions for the skills/process session (next)

1. **Mock granularity:** one full-page mock cut by `segment`, vs per-section mocks generated against
   a locked page mock (playbook Entry 3 conditioning)? Where does the detector run — full page or
   per-section crop? (Census + playbook lean per-section with a continuous-page anchor.)
2. **Declared vs detected:** we author the mock prompt, so for every section we *know* its archetype,
   element inventory, and copy. How much of the read should be **declaration carried forward**
   (a per-section `spec.json`, as run-015 prototyped) vs **detection**? (D2's content-match suggests:
   declare everything; detect only geometry.)
3. **Data-bound sections:** what's the reconciliation policy when real data (menu.yaml) is longer or
   shorter than the mock's greeked structure? (Entry 6 generalized: condense/cut data per a policy,
   or re-mock the section.)
4. **Crop quality path:** native crop from a high-res page mock vs img2img-conditioned per-panel
   regeneration — when is each acceptable? (Couples to edit-chain degradation, Entry 3.)
5. **Per-contract verification:** extend run-014 render-verify into a per-archetype gate — pixel diff
   (S1/S6), structural tolerances via DOM measurement (S3/S4/S5/S7/S9), masked regions + checklist
   (S8). What are the tolerance numbers?
6. **Element catalog growth (D1):** which elements to approve next? This taxonomy nominates, in
   order: eyebrow, stat, badge, caption, price-row, card, field/label.
7. **Component library for S8/S9:** one token-themable library (form controls, accordion, tabs, nav,
   footer) reused across runs — where does it live so isolation rules allow reuse (playbook/?)
8. **Style-effects-in-CSS:** census found live-CSS style treatments (anaglyph headline run-008,
   riso misregistration run-009, heavy text-shadows run-001). Catalog which "design style" effects
   should be CSS recipes vs baked — a styles-axis appendix to this taxonomy.

---

*Census source: section-by-section survey of runs 001–006/008/009/016 websites+mockups+briefs
(this session). Pipeline state: `HANDOFF-run014-pipeline.md`, `L1-team-explainer.md`,
`runs/run-010/documents/L1-taxonomy.md`, `DECISIONS.md` D1–D5, `WORKFLOW_LEARNINGS.md` 1–9.*