---
prompt-id: "09"
name: Section template library — archetype-native page sections as HTML + CSS
status: live
mcp: none
model: Sonnet 4.6
environment: Claude.ai or Claude Code
inputs:
  - output/tokens.css
  - output/components/foundation.css
  - output/components/composite.css
  - specs/<archetype>.spec.md
outputs:
  - output/section-templates.html (live HTML preview of all sections)
  - output/section-templates.css (layout CSS for sections)
chains: [9]
prereqs: ["03", "04"]
documented-in: Ch11 — Section Templates
---

# Prompt 09 — Section template library

Generates page-level section templates drawn from the archetype's SECTION TEMPLATES block.
Each template is a named, ready-to-paste HTML + CSS block that slots into any page layout.

---

```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
META-HEADER — run before generating
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

STEP -2 — DETECT ENVIRONMENT
  Claude Code: save to output/section-templates.html and
               output/section-templates.css automatically
  Claude.ai:   provide both files as paste-ready blocks
               with save paths.

STEP -1 — CONTEXT CHECK
  output/tokens.css                → REQUIRED
  output/components/foundation.css → REQUIRED
  output/components/composite.css  → REQUIRED
  specs/<archetype>.spec.md        → REQUIRED (specifically
                                      the SECTION TEMPLATES block)
  output/chain-state.md            → read if present

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
MAIN PROMPT BODY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PROMPT 09 — SECTION TEMPLATE LIBRARY

YOUR ROLE
You are generating a library of named page sections — ready-to-
paste HTML + CSS blocks that teams use to assemble pages quickly.
Each section is archetype-native: Harbor sections look like
Harbor, not a generic template. Derive every layout decision
from the archetype's SECTION TEMPLATES, LAYOUT, and TYPOGRAPHY
blocks. Never invent design decisions.

OUTPUT: TWO FILES
  1. section-templates.css — layout and visual CSS for all sections
  2. section-templates.html — a live preview page that renders
     every template in sequence, self-contained

SECTION TEMPLATES TO GENERATE
Read the archetype spec's SECTION TEMPLATES block and generate
every template listed. If the block is absent or sparse, use
the archetype's visual character to derive the standard set below.

STANDARD SECTION TEMPLATES (generate all):

  01. hero               — above-the-fold, primary message + CTA
  02. feature-split      — text + media or illustration
  03. feature-grid       — 3-4 features in a card grid
  04. social-proof       — testimonials or logos
  05. pricing            — plan comparison (2-3 columns)
  06. stats / metrics    — key numbers or KPIs
  07. team               — member cards with avatar + role
  08. FAQ                — accordion of questions
  09. CTA band           — full-width conversion call-to-action
  10. page footer        — links, legal, newsletter input

ARCHETYPE VARIATIONS — apply per active archetype:

Harbor (editorial / dark):
  hero:         full-width dark background, large editorial
                headline (--font-display), teal CTA button,
                optional full-bleed image or video
  feature-split: image left or right, dark card surface,
                caption in --font-size-sm
  pricing:      dark cards, teal highlight on featured plan
  CTA band:     teal/dark gradient band

Sentinel (enterprise / light):
  hero:         white bg, text-heavy, chart or screenshot right,
                orange primary CTA
  stats:        bordered metric tiles, no shadow, bold numbers
  pricing:      bordered table layout, feature checklist rows
  FAQ:          Accordion with hard borders, no radius

Current (mobile-first / light):
  hero:         full-viewport, centred, large touch-friendly CTA,
                44px CTA height minimum
  feature-grid: single-column on mobile first, 2-col max on desktop
  pricing:      horizontal scroll on mobile, 3 full-width cards

Lattice (data terminal / dark):
  hero:         terminal-style headline (monospace), green accent,
                code block or data visual right-side
  stats:        raw number tiles, monospace font, green positive
  FAQ:          flat list, no decorative elements

Meridian (long-form / light):
  hero:         narrow reading column, generous top padding,
                subtitle below headline, no image
  feature-split: prose description only, no media columns
  CTA band:     inline (not full-width), max-width --prose-width

CSS RULES FOR SECTION TEMPLATES
  — Each section gets a BEM-style class: .section-hero,
    .section-feature-split, etc.
  — Inner containers: .section__inner with max-width from
    governance spec and auto horizontal margins
  — All spacing via --spacing-* tokens
  — All colours via --color-* tokens
  — Responsive: mobile-first, breakpoints from governance spec

HTML STRUCTURE (for section-templates.html preview)
  Self-contained HTML file:
    <!DOCTYPE html>
    <html lang="en" data-theme="[archetype-default]">
    <head>
      <style>
        /* inlined tokens.css */
        /* inlined foundation.css */
        /* inlined composite.css */
        /* inlined section-templates.css */
      </style>
    </head>
    <body>
      <nav>Table of sections with jump links</nav>
      <main>
        <!-- each section rendered in sequence -->
        <section class="section-hero" id="tpl-hero">
          <!-- real representative content, not "Lorem ipsum" -->
          <!-- use content appropriate to the archetype's domain -->
        </section>
        ...
      </main>
    </body>
    </html>

CONTENT GUIDELINES FOR PREVIEW HTML
  — Use real-ish placeholder content, not Lorem ipsum
  — Harbor: editorial / publishing domain content
  — Sentinel: enterprise SaaS / compliance domain content
  — Current: consumer app / mobile domain content
  — Lattice: developer tools / data domain content
  — Meridian: long-form writing / editorial content

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
META-FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SAVE INSTRUCTIONS
  output/section-templates.css   — layout and visual CSS
  output/section-templates.html  — self-contained preview

CHAIN-STATE LOG
Append to output/chain-state.md:

  ## Prompt 09 — Section templates
  Date: <today>
  Archetype: <confirmed archetype>
  Templates generated: hero, feature-split, feature-grid,
    social-proof, pricing, stats, team, FAQ, CTA band, footer
  Outputs: output/section-templates.css + .html

HANDOFF
  "Section templates done. Open section-templates.html to
   preview all sections live.
   Next → Prompt 10 — Layer 3 token extraction (run after
   components have shipped and been used — not necessarily now).
   Or run Prompt 11 (Drift audit) or Prompt 12 (A11y audit)
   to validate what you have so far."
```