v3 Design Guide Page Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Build a single internal HTML page at www/v3/design-guide.html that visualises every token in tokens.css (colour swatches, type scale, icon scale, spacing ruler, radius tiles) plus live examples of the reusable UI primitives in v3.css / product.css.

Architecture: One self-contained static HTML file. Links the production cascade (tokens.css → v3.css → product.css) so live primitives render exactly as on the marketing site. A single in-body <style> block adds guide-only layout (swatch grid, scale rulers, radius tiles) — using only var(--token) values, so the page also serves as a working regression test of the token system.

Tech Stack: Static HTML + CSS only. No JS except a ~10-line inline script for the data-mode="systems" theme toggle. No new shared CSS file; no nav/footer link; German labels only.

Shared context (read before starting)

Base branch: v3-agents-and-testimonials-carousel at HEAD 42da88998 (Merge: Sub-projects A + B). Spec: docs/superpowers/specs/2026-05-15-v3-design-guide-design.md.

Worktree setup: at execution time, use superpowers:using-git-worktrees to set up an isolated workspace branching from v3-agents-and-testimonials-carousel. Suggested branch name: v3-design-guide.

Local server: the v3 marketing site is served from www/ at http://127.0.0.1:8123 (started during sub-project B). If down:

pkill -f "http.server 8123"; cd <worktree>/www && \
  python3 -m http.server 8123 --bind 127.0.0.1 >/tmp/orcha-v3-www.log 2>&1 &

The new page will live at http://127.0.0.1:8123/v3/design-guide.html.

The token vocabulary (full enumeration of what the page must show — see www/v3/css/tokens.css for the definitions):

Category	Tokens
Semantic colour	`--bg`, `--bg-2`, `--bg-3` (alias of `--bg-2`), `--bg-soft`, `--bg-tone`, `--ink`, `--ink-2`, `--ink-3`, `--muted`, `--line`, `--line-2`, `--accent`, `--accent-ink`, `--accent-soft`, `--good`, `--warn`, `--red`
Categorical	`--cat-1`, `--cat-2`, `--cat-3`, `--cat-4`, `--cat-5`
Font family	`--sans`, `--mono` (skip `--serif` alias)
Weight	`--weight-regular` (400), `--weight-medium` (500), `--weight-semibold` (600)
Font size	`--text-9, 10, 11, 12, 13, 14, 15, 16, 19, 24, 32, 44, 48, 80, 96`
Icon	`--icon-sm` (14px), `--icon-md` (16px), `--icon-lg` (18px), `--icon-stroke` (1.6), `--icon-stroke-bold` (1.8)
Spacing	`--space-2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 120`
Radius	`--radius-2, 4, 8, 12, 16`, `--radius` (10px legacy), `--radius-pill` (999px)

Token-only self-check — after the page exists, this grep must produce only matches inside SVG presentation attributes (which var() can't reach) and intentional 50% circles:

grep -nE '#[0-9a-fA-F]{3,8}|font-size:[[:space:]]*[0-9.]+px|(padding|margin|gap)[a-z-]*:[^;"}]*[0-9]+px|border-radius:[^;"}]*[0-9]+px|font-weight:[[:space:]]*[0-9]+' www/v3/design-guide.html | grep -v 'clamp\|50%'

Visual harness: the existing www/v3/dev/screenshot.mjs only iterates a hard-coded PAGES list — it won't pick up the new page. For overflow verification, run a one-off Playwright check (Task 5).

Files: Create www/v3/design-guide.html.

This task writes the full HTML skeleton, the in-body <style> block with all guide-only layout classes (used across every later task — define them once now), the Header section, and the Farbe section (the largest static content). Subsequent tasks append further <section> blocks before the footer.

Step 1: Create the file with skeleton + style block + Header + Farbe

Write www/v3/design-guide.html:

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, nofollow">
  <title>Design Guide · Orcha v3</title>
  <link rel="stylesheet" href="css/tokens.css?v=guide">
  <link rel="stylesheet" href="css/v3.css?v=guide">
  <link rel="stylesheet" href="css/product.css?v=guide">
  <style>
    /* Design-guide layout (only var(--token) values, no raw px/hex) */
    .dg-page { max-width: 1080px; margin: 0 auto; padding: var(--space-64) var(--space-32) var(--space-120); }
    .dg-section { padding: var(--space-64) 0; border-top: 1px solid var(--line); }
    .dg-section:first-of-type { border-top: 0; padding-top: var(--space-32); }
    .dg-section-head { margin-bottom: var(--space-32); }
    .dg-section-head .eyebrow { margin-bottom: var(--space-8); }
    .dg-section-head h2 { margin: 0; font-size: var(--text-32); font-weight: var(--weight-medium); letter-spacing: -0.02em; color: var(--ink); }
    .dg-section-head p { margin: var(--space-8) 0 0; color: var(--ink-2); font-size: var(--text-15); max-width: 720px; }

    /* Color swatches */
    .dg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-16); }
    .dg-swatch { border-radius: var(--radius-12); border: 1px solid var(--line); overflow: hidden; background: var(--bg); }
    .dg-swatch-fill { height: 80px; }
    .dg-swatch-meta { padding: var(--space-10) var(--space-12); border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--text-11); color: var(--ink-2); display: flex; justify-content: space-between; gap: var(--space-8); }
    .dg-swatch-meta b { color: var(--ink); font-weight: var(--weight-medium); }

    /* Generic sample container — label below */
    .dg-sample { padding: var(--space-24); background: var(--bg-2); border-radius: var(--radius-12); }
    .dg-sample + .dg-token-label { display: block; margin-top: var(--space-8); font-family: var(--mono); font-size: var(--text-11); color: var(--muted); }
    .dg-token-label { font-family: var(--mono); font-size: var(--text-11); color: var(--muted); }

    /* Spacing ruler */
    .dg-scale-row { display: grid; grid-template-columns: 120px 1fr 80px; align-items: center; gap: var(--space-16); padding: var(--space-8) 0; border-bottom: 1px solid var(--line); }
    .dg-scale-row:last-child { border-bottom: 0; }
    .dg-scale-row .name { font-family: var(--mono); font-size: var(--text-12); color: var(--ink); }
    .dg-scale-row .px { font-family: var(--mono); font-size: var(--text-11); color: var(--muted); text-align: right; }
    .dg-scale-bar { height: var(--space-8); background: var(--accent); border-radius: var(--radius-2); }

    /* Radius tiles */
    .dg-radius-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-16); }
    .dg-radius-tile { background: var(--bg-2); border: 1px solid var(--line-2); height: 96px; display: grid; place-items: center; font-family: var(--mono); font-size: var(--text-11); color: var(--ink-2); }
    .dg-radius-tile.pill { width: 160px; height: 48px; }

    /* Type scale */
    .dg-type-row { display: grid; grid-template-columns: 1fr 220px; align-items: baseline; gap: var(--space-24); padding: var(--space-12) 0; border-bottom: 1px solid var(--line); }
    .dg-type-row:last-child { border-bottom: 0; }
    .dg-type-row .sample { color: var(--ink); letter-spacing: -0.01em; }
    .dg-type-row .meta { font-family: var(--mono); font-size: var(--text-11); color: var(--muted); text-align: right; }

    /* Theme toggle (data-mode demo) */
    .dg-theme-toggle { margin-top: var(--space-16); padding: var(--space-16); background: var(--bg-2); border-radius: var(--radius-12); display: flex; align-items: center; gap: var(--space-16); }
    .dg-theme-toggle p { margin: 0; color: var(--ink-2); font-size: var(--text-14); }
  </style>
</head>
<body>
  <main class="dg-page">

    <!-- Header -->
    <section class="dg-section">
      <div class="dg-section-head">
        <div class="eyebrow">tokens.css · v3 marketing</div>
        <h2>Design Guide</h2>
        <p><code>tokens.css</code> ist die einzige Quelle der Wahrheit für Farben, Typografie, Abstände, Radien und Icon-Stroke-Werte auf der v3-Marketingseite. Jeder Rohwert in CSS-Kontexten (<code>style="…"</code>, <code>&lt;style&gt;</code>-Blöcke, die vier geteilten Stylesheets) wurde auf seinen nächsten Token gerundet. SVG-Präsentationsattribute (<code>width="18"</code>, <code>stroke-width="1.8"</code>) bleiben absichtlich literal — <code>var()</code> funktioniert in HTML-Attributen nicht.</p>
      </div>
    </section>

    <!-- Farbe -->
    <section class="dg-section" id="farbe">
      <div class="dg-section-head">
        <div class="eyebrow">01 · Farbe</div>
        <h2>Farbe</h2>
        <p>Semantische Palette plus die fünf kategorischen Akzente. <code>--bg-3</code> ist ein Alias von <code>--bg-2</code> und wird nicht separat angezeigt.</p>
      </div>

      <h3 class="dg-token-label" style="margin: 0 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Semantisch</h3>
      <div class="dg-swatches">
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--bg);"></div><div class="dg-swatch-meta"><b>--bg</b><span>#ffffff</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--bg-2);"></div><div class="dg-swatch-meta"><b>--bg-2</b><span>#f5f3ee</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--bg-soft);"></div><div class="dg-swatch-meta"><b>--bg-soft</b><span>#fafaf6</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--bg-tone);"></div><div class="dg-swatch-meta"><b>--bg-tone</b><span>#eceae3</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--ink);"></div><div class="dg-swatch-meta"><b>--ink</b><span>#111111</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--ink-2);"></div><div class="dg-swatch-meta"><b>--ink-2</b><span>#2b2b2b</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--ink-3);"></div><div class="dg-swatch-meta"><b>--ink-3</b><span>#5a5a56</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--muted);"></div><div class="dg-swatch-meta"><b>--muted</b><span>#8a8680</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--line);"></div><div class="dg-swatch-meta"><b>--line</b><span>#dcd7cb</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--line-2);"></div><div class="dg-swatch-meta"><b>--line-2</b><span>#c9c3b4</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--accent);"></div><div class="dg-swatch-meta"><b>--accent</b><span>#006EC7</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--accent-ink);"></div><div class="dg-swatch-meta"><b>--accent-ink</b><span>#ffffff</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--accent-soft);"></div><div class="dg-swatch-meta"><b>--accent-soft</b><span>#e6f0fb</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--good);"></div><div class="dg-swatch-meta"><b>--good</b><span>#2e5d3b</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--warn);"></div><div class="dg-swatch-meta"><b>--warn</b><span>#8a5a1a</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--red);"></div><div class="dg-swatch-meta"><b>--red</b><span>#8a2a1a</span></div></div>
      </div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Kategorisch</h3>
      <div class="dg-swatches">
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--cat-1);"></div><div class="dg-swatch-meta"><b>--cat-1</b><span>#D49B70</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--cat-2);"></div><div class="dg-swatch-meta"><b>--cat-2</b><span>#BC7B95</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--cat-3);"></div><div class="dg-swatch-meta"><b>--cat-3</b><span>#A185BB</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--cat-4);"></div><div class="dg-swatch-meta"><b>--cat-4</b><span>#7A9BC0</span></div></div>
        <div class="dg-swatch"><div class="dg-swatch-fill" style="background: var(--cat-5);"></div><div class="dg-swatch-meta"><b>--cat-5</b><span>#6DAF9F</span></div></div>
      </div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Theme-Override: <code>body[data-mode="systems"]</code></h3>
      <div class="dg-theme-toggle">
        <button type="button" id="dg-toggle-mode" class="btn btn-primary">Mode umschalten</button>
        <p>Schaltet <code>data-mode="systems"</code> am <code>&lt;body&gt;</code> um. <code>--bg</code>, <code>--accent</code> u. a. werden für den "Systems"-Modus neu definiert.</p>
      </div>
      <script>
        document.getElementById('dg-toggle-mode').addEventListener('click', () => {
          const b = document.body;
          if (b.getAttribute('data-mode') === 'systems') b.removeAttribute('data-mode');
          else b.setAttribute('data-mode', 'systems');
        });
      </script>
    </section>

    <!-- Subsequent sections will be inserted by later tasks BEFORE the closing </main> -->

  </main>
</body>
</html>

Step 2: Verify the page loads without 404s and renders Farbe cleanly

Ensure the server is up (Shared context). Then:

curl -s -o /dev/null -w "%{http_code}\n" http://127.0.0.1:8123/v3/design-guide.html

Expected: 200. Open the URL in a browser — Header + Farbe should render with all swatches visible. Click the "Mode umschalten" button — the --bg should change to the warm #f2efe6 and --accent to #d64b1a site-wide (visible on the buttons and tokens that consume those vars). Click again — reverts.

Step 3: Commit

git add www/v3/design-guide.html
git commit -m "$(cat <<'EOF'
feat(v3): scaffold design-guide page + Farbe section

New internal, unlinked page at /v3/design-guide.html.
Self-contained: links tokens.css/v3.css/product.css; one
<style> block uses only var(--token) values. Includes
header, semantic + categorical colour swatches, and a
data-mode="systems" theme toggle demo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"

Task 2: Typografie + Icons

Files: Modify www/v3/design-guide.html.

Step 1: Append the Typografie and Icons sections before </main>

Insert immediately before the  comment / </main>:

    <!-- Typografie -->
    <section class="dg-section" id="typografie">
      <div class="dg-section-head">
        <div class="eyebrow">02 · Typografie</div>
        <h2>Typografie</h2>
        <p>Zwei Schriftfamilien, drei Gewichte, fünfzehn diskrete Größen + eine <code>clamp()</code>-Display-Größe für Hero-Headlines.</p>
      </div>

      <h3 class="dg-token-label" style="margin: 0 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Familien</h3>
      <div style="display: grid; gap: var(--space-16);">
        <div>
          <div style="font-family: var(--sans); font-size: var(--text-24); color: var(--ink); letter-spacing: -0.01em;">Geist Sans — Finanz, automatisiert.</div>
          <div class="dg-token-label" style="margin-top: var(--space-4);">--sans · "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif</div>
        </div>
        <div>
          <div style="font-family: var(--mono); font-size: var(--text-24); color: var(--ink); letter-spacing: -0.005em;">Geist Mono — €1.247,80</div>
          <div class="dg-token-label" style="margin-top: var(--space-4);">--mono · "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace</div>
        </div>
      </div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Gewichte</h3>
      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16);">
        <div><div style="font-size: var(--text-24); font-weight: var(--weight-regular); color: var(--ink);">Finanzfunktion</div><div class="dg-token-label" style="margin-top: var(--space-4);">--weight-regular · 400</div></div>
        <div><div style="font-size: var(--text-24); font-weight: var(--weight-medium); color: var(--ink);">Finanzfunktion</div><div class="dg-token-label" style="margin-top: var(--space-4);">--weight-medium · 500</div></div>
        <div><div style="font-size: var(--text-24); font-weight: var(--weight-semibold); color: var(--ink);">Finanzfunktion</div><div class="dg-token-label" style="margin-top: var(--space-4);">--weight-semibold · 600</div></div>
      </div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Größen</h3>
      <div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-9);">Finanz</span><span class="meta">--text-9 · 9px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-10);">Finanz</span><span class="meta">--text-10 · 10px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-11);">Finanz</span><span class="meta">--text-11 · 11px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-12);">Finanz</span><span class="meta">--text-12 · 12px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-13);">Finanz</span><span class="meta">--text-13 · 13px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-14);">Finanz</span><span class="meta">--text-14 · 14px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-15);">Finanz</span><span class="meta">--text-15 · 15px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-16);">Finanz</span><span class="meta">--text-16 · 16px (body)</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-19);">Finanz</span><span class="meta">--text-19 · 19px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-24);">Finanz</span><span class="meta">--text-24 · 24px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-32);">Finanz</span><span class="meta">--text-32 · 32px</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-44);">Finanz</span><span class="meta">--text-44 · 44px (display)</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-48);">Finanz</span><span class="meta">--text-48 · 48px (display)</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-80);">Finanz</span><span class="meta">--text-80 · 80px (display)</span></div>
        <div class="dg-type-row"><span class="sample" style="font-size: var(--text-96);">Finanz</span><span class="meta">--text-96 · 96px (display)</span></div>
      </div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Display mit <code>clamp()</code></h3>
      <h1 class="h-display italic-swap" style="margin: 0;">Die nächste <em>Generation</em> der Finanzfunktion.</h1>
      <div class="dg-token-label" style="margin-top: var(--space-8);">.h-display · clamp(40px, 4.6vw, 76px) — Display-Headlines bleiben inline, nicht tokenisiert</div>
    </section>

    <!-- Icons -->
    <section class="dg-section" id="icons">
      <div class="dg-section-head">
        <div class="eyebrow">03 · Icons</div>
        <h2>Icons</h2>
        <p>Drei diskrete Icon-Größen, zwei Stroke-Stärken. Gilt für CSS-Kontexte; SVG-Präsentationsattribute (<code>width="18"</code>, <code>stroke-width="1.8"</code>) bleiben in den Markup-Dateien literal.</p>
      </div>

      <h3 class="dg-token-label" style="margin: 0 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Größen</h3>
      <div style="display: flex; align-items: flex-end; gap: var(--space-40);">
        <div style="text-align: center;">
          <svg style="width: var(--icon-sm); height: var(--icon-sm); display: block; margin: 0 auto var(--space-8); color: var(--accent);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg>
          <div class="dg-token-label">--icon-sm · 14px</div>
        </div>
        <div style="text-align: center;">
          <svg style="width: var(--icon-md); height: var(--icon-md); display: block; margin: 0 auto var(--space-8); color: var(--accent);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg>
          <div class="dg-token-label">--icon-md · 16px</div>
        </div>
        <div style="text-align: center;">
          <svg style="width: var(--icon-lg); height: var(--icon-lg); display: block; margin: 0 auto var(--space-8); color: var(--accent);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg>
          <div class="dg-token-label">--icon-lg · 18px</div>
        </div>
      </div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Stroke</h3>
      <div style="display: flex; align-items: flex-end; gap: var(--space-40);">
        <div style="text-align: center;">
          <svg style="width: 32px; height: 32px; display: block; margin: 0 auto var(--space-8); color: var(--ink-2);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h14M13 6l6 6-6 6" style="stroke-width: var(--icon-stroke);"/></svg>
          <div class="dg-token-label">--icon-stroke · 1.6</div>
        </div>
        <div style="text-align: center;">
          <svg style="width: 32px; height: 32px; display: block; margin: 0 auto var(--space-8); color: var(--ink-2);" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h14M13 6l6 6-6 6" style="stroke-width: var(--icon-stroke-bold);"/></svg>
          <div class="dg-token-label">--icon-stroke-bold · 1.8</div>
        </div>
      </div>
    </section>

The icon SVGs intentionally use a literal width: 32px / height: 32px on the stroke demo because the demo's point is to show stroke width independently of icon size — that constant 32px box is layout chrome for the demo, not an icon-token value. To satisfy the token-only self-check, the width/height should still reference a token. Replace width: 32px; height: 32px in the two Stroke SVGs with width: var(--space-32); height: var(--space-32) (32px is on the spacing scale, so this is exact and semantically reasonable: "icon at 32px box-size, used for demo only").

Step 2: Visual check

Reload http://127.0.0.1:8123/v3/design-guide.html. The Typografie section should show 15 size rows growing from 9px to 96px (mostly fitting on a desktop, the --text-96 row will be tall), three weight samples, and the clamp() .h-display headline. The Icons section should show three blue checkmarks growing in size, then two arrows side-by-side with visibly different stroke widths.

Step 3: Commit

git add www/v3/design-guide.html
git commit -m "$(cat <<'EOF'
feat(v3): design-guide Typografie + Icons sections

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"

Task 3: Abstände + Radien

Files: Modify www/v3/design-guide.html.

Step 1: Append Abstände and Radien sections before </main>

Insert before </main>:

    <!-- Abstände -->
    <section class="dg-section" id="abstaende">
      <div class="dg-section-head">
        <div class="eyebrow">04 · Abstände</div>
        <h2>Abstände</h2>
        <p>Fünfzehn diskrete Schritte für <code>padding</code>, <code>margin</code> und <code>gap</code>. Off-scale-Werte rasten auf den nächsten Schritt ein (Gleichstände runden auf).</p>
      </div>
      <div>
        <div class="dg-scale-row"><span class="name">--space-2</span><div class="dg-scale-bar" style="width: var(--space-2);"></div><span class="px">2px</span></div>
        <div class="dg-scale-row"><span class="name">--space-4</span><div class="dg-scale-bar" style="width: var(--space-4);"></div><span class="px">4px</span></div>
        <div class="dg-scale-row"><span class="name">--space-6</span><div class="dg-scale-bar" style="width: var(--space-6);"></div><span class="px">6px</span></div>
        <div class="dg-scale-row"><span class="name">--space-8</span><div class="dg-scale-bar" style="width: var(--space-8);"></div><span class="px">8px</span></div>
        <div class="dg-scale-row"><span class="name">--space-10</span><div class="dg-scale-bar" style="width: var(--space-10);"></div><span class="px">10px</span></div>
        <div class="dg-scale-row"><span class="name">--space-12</span><div class="dg-scale-bar" style="width: var(--space-12);"></div><span class="px">12px</span></div>
        <div class="dg-scale-row"><span class="name">--space-16</span><div class="dg-scale-bar" style="width: var(--space-16);"></div><span class="px">16px</span></div>
        <div class="dg-scale-row"><span class="name">--space-20</span><div class="dg-scale-bar" style="width: var(--space-20);"></div><span class="px">20px</span></div>
        <div class="dg-scale-row"><span class="name">--space-24</span><div class="dg-scale-bar" style="width: var(--space-24);"></div><span class="px">24px</span></div>
        <div class="dg-scale-row"><span class="name">--space-32</span><div class="dg-scale-bar" style="width: var(--space-32);"></div><span class="px">32px</span></div>
        <div class="dg-scale-row"><span class="name">--space-40</span><div class="dg-scale-bar" style="width: var(--space-40);"></div><span class="px">40px</span></div>
        <div class="dg-scale-row"><span class="name">--space-48</span><div class="dg-scale-bar" style="width: var(--space-48);"></div><span class="px">48px</span></div>
        <div class="dg-scale-row"><span class="name">--space-64</span><div class="dg-scale-bar" style="width: var(--space-64);"></div><span class="px">64px</span></div>
        <div class="dg-scale-row"><span class="name">--space-80</span><div class="dg-scale-bar" style="width: var(--space-80);"></div><span class="px">80px</span></div>
        <div class="dg-scale-row"><span class="name">--space-120</span><div class="dg-scale-bar" style="width: var(--space-120);"></div><span class="px">120px</span></div>
      </div>
    </section>

    <!-- Radien -->
    <section class="dg-section" id="radien">
      <div class="dg-section-head">
        <div class="eyebrow">05 · Radien</div>
        <h2>Radien</h2>
        <p>Sechs Schritte plus <code>--radius-pill</code>. <code>border-radius:50%</code> für Kreise wird bewusst literal gelassen (keine Snap-Frage).</p>
      </div>
      <div class="dg-radius-grid">
        <div class="dg-radius-tile" style="border-radius: var(--radius-2);">--radius-2 · 2px</div>
        <div class="dg-radius-tile" style="border-radius: var(--radius-4);">--radius-4 · 4px</div>
        <div class="dg-radius-tile" style="border-radius: var(--radius-8);">--radius-8 · 8px</div>
        <div class="dg-radius-tile" style="border-radius: var(--radius);">--radius · 10px (legacy)</div>
        <div class="dg-radius-tile" style="border-radius: var(--radius-12);">--radius-12 · 12px</div>
        <div class="dg-radius-tile" style="border-radius: var(--radius-16);">--radius-16 · 16px</div>
      </div>
      <div style="margin-top: var(--space-16); display: flex; align-items: center; gap: var(--space-16);">
        <div class="dg-radius-tile pill" style="border-radius: var(--radius-pill);">--radius-pill</div>
        <span class="dg-token-label">999px · für Buttons, Chips, Tags</span>
      </div>
    </section>

Step 2: Visual check

Reload. The Abstände section should show 15 rows with the accent bar growing from 2px to 120px (the row layout: name · bar · px). Radien should show 6 squares with progressively rounder corners + a pill at the bottom.

Step 3: Commit

git add www/v3/design-guide.html
git commit -m "$(cat <<'EOF'
feat(v3): design-guide Abstände + Radien sections

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"

Task 4: UI-Elemente

Files: Modify www/v3/design-guide.html.

Step 1: Append UI-Elemente section before </main>

Insert before </main>:

    <!-- UI-Elemente -->
    <section class="dg-section" id="ui-elemente">
      <div class="dg-section-head">
        <div class="eyebrow">06 · UI-Elemente</div>
        <h2>UI-Elemente</h2>
        <p>Wiederverwendbare Primitive aus <code>v3.css</code> und <code>product.css</code>. Klassennamen unter jedem Beispiel zum Nachschlagen.</p>
      </div>

      <h3 class="dg-token-label" style="margin: 0 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Buttons</h3>
      <div style="display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center;">
        <a href="#" class="btn btn-primary">Demo buchen</a>
        <a href="#" class="btn btn-ghost">Mehr lesen</a>
        <a href="#" class="btn btn-ghost btn-arrow">Weiter</a>
      </div>
      <div class="dg-token-label" style="margin-top: var(--space-8);">.btn.btn-primary · .btn.btn-ghost · .btn.btn-ghost.btn-arrow</div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Eyebrow + Headings + Lede</h3>
      <div class="dg-sample" style="background: var(--bg);">
        <div class="eyebrow">02 · Echtzeit</div>
        <h2 class="h-section" style="margin: var(--space-8) 0 0;">Belegerkennung, automatisch.</h2>
        <p class="lede" style="margin: var(--space-16) 0 0; max-width: 640px;">Eingehende Belege werden klassifiziert, validiert und zur Freigabe vorgelegt — in Echtzeit, mit nachvollziehbarem Audit-Trail.</p>
      </div>
      <div class="dg-token-label">.eyebrow · .h-section · .lede</div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Italic-Swap</h3>
      <p class="italic-swap" style="margin: 0; font-size: var(--text-19); color: var(--ink);">Die nächste <em>Generation</em> der Finanzfunktion.</p>
      <div class="dg-token-label" style="margin-top: var(--space-4);">.italic-swap · <em> wird zu <code>--mono</code> in <code>--accent</code></div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Hero-Checkliste</h3>
      <ul class="lede-bullets" style="max-width: 560px;">
        <li><svg class="lede-bullets-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg><span>Strukturierte Echtzeit-Verarbeitung über jeden Eingangskanal.</span></li>
        <li><svg class="lede-bullets-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg><span>Automatische Validierung gegen Bestellung und Lieferschein.</span></li>
        <li><svg class="lede-bullets-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg><span>Mehrstufige Freigaben mit nachvollziehbarem Audit-Trail.</span></li>
      </ul>
      <div class="dg-token-label" style="margin-top: var(--space-8);">.lede-bullets · große Hero-Checkmarks</div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Body-Checkliste</h3>
      <ul style="list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-10); max-width: 560px;">
        <li class="check-li"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg><span>Kürzere, body-nahe Checkmark-Bullets für Feature-Listen im Fließtext.</span></li>
        <li class="check-li"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg><span>Gleicher Stroke, kleinerer Icon-Slot (<code>--icon-md</code>/<code>--icon-lg</code>).</span></li>
        <li class="check-li"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5" style="stroke-width: var(--icon-stroke-bold);"/></svg><span>Funktioniert in Cards, Panels, Modulbeschreibungen.</span></li>
      </ul>
      <div class="dg-token-label" style="margin-top: var(--space-8);">.check-li · kompakte Body-Checkmarks</div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Status-Dots</h3>
      <div style="display: flex; gap: var(--space-24); align-items: center;">
        <span style="display: inline-flex; align-items: center; gap: var(--space-8); color: var(--good); font-size: var(--text-14);"><span class="dot" style="background: var(--good);"></span>Live</span>
        <span style="display: inline-flex; align-items: center; gap: var(--space-8); color: var(--warn); font-size: var(--text-14);"><span class="dot" style="background: var(--warn);"></span>Wartend</span>
        <span style="display: inline-flex; align-items: center; gap: var(--space-8); color: var(--accent); font-size: var(--text-14);"><span class="dot" style="background: var(--accent);"></span>Aktiv</span>
      </div>
      <div class="dg-token-label" style="margin-top: var(--space-8);">.dot · 6–8px Kreis · Farbe je nach Status</div>

      <h3 class="dg-token-label" style="margin: var(--space-32) 0 var(--space-12); color: var(--ink-2); font-size: var(--text-13);">Chip</h3>
      <span class="chip"><span class="dot" style="background: var(--good);"></span>Live</span>
      <div class="dg-token-label" style="margin-top: var(--space-8);">.chip · Pill-Form, optional mit führendem Dot</div>
    </section>

Step 2: Visual check

Reload. The UI-Elemente section should show: three buttons (solid blue / outline / outline-with-arrow); an eyebrow + heading + lede card; the italic-swap sentence (with "Generation" in mono blue); two checkmark lists; a row of three coloured status dots; and a pill chip with a green dot.

Step 3: Commit

git add www/v3/design-guide.html
git commit -m "$(cat <<'EOF'
feat(v3): design-guide UI-Elemente section

Live primitives from v3.css/product.css: buttons, eyebrow+
heading+lede, italic-swap, hero+body checklists, status
dots, chip.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"

Files: Modify www/v3/design-guide.html.

Step 1: Append the Footer section before </main>

Insert before </main>:

    <!-- Footer -->
    <section class="dg-section" id="footer">
      <div class="dg-section-head">
        <div class="eyebrow">07 · Hinweis</div>
        <h2>Diese Seite ist intern</h2>
        <p>Nicht verlinkt vom Site-Nav oder -Footer. Quelle der Wahrheit: <code>www/v3/css/tokens.css</code>. Rationale: <code>docs/superpowers/specs/2026-05-14-v3-design-tokens-design.md</code>. Implementierungs-Spezifikation: <code>docs/superpowers/specs/2026-05-15-v3-design-guide-design.md</code>.</p>
        <p>Diese Seite verwendet ausschließlich <code>var(--token)</code>-Referenzen für ihr eigenes Layout — sie ist damit gleichzeitig ein laufender Regressionstest für das Token-System. Stimmt etwas nicht, fällt es hier zuerst auf.</p>
      </div>
    </section>

Step 2: Token-only self-check

cd <worktree>
grep -nE '#[0-9a-fA-F]{3,8}|font-size:[[:space:]]*[0-9.]+px|(padding|margin|gap)[a-z-]*:[^;"}]*[0-9]+px|border-radius:[^;"}]*[0-9]+px|font-weight:[[:space:]]*[0-9]+' www/v3/design-guide.html | grep -v 'clamp\|50%'

Expected: only matches inside the colour swatches' display-hex <span>s (which are intentional documentation labels — they're the text content showing what the token equals, not CSS values; the regex picks them up because the swatch meta has <b>--bg</b><span>#ffffff</span>). All other matches must be SVG attribute values (stroke-width="X", width="N", etc. — but the page doesn't use those — every SVG sizing is style="width: var(--icon-*)").

If anything else shows: that's a raw value in CSS context — convert it to var(--token) or document the exception.

Step 3: Responsive check across breakpoints

The shared screenshot harness doesn't include this page in its hard-coded PAGES list. Run a one-off check using the same Playwright environment from www/v3/dev/:

cd www/v3/dev
node -e '
import("playwright").then(async ({chromium}) => {
  const browser = await chromium.launch();
  const widths = [320, 375, 768, 1024, 1280];
  const failures = [];
  for (const w of widths) {
    const page = await browser.newPage({ viewport: { width: w, height: 900 } });
    await page.goto("http://127.0.0.1:8123/v3/design-guide.html", { waitUntil: "networkidle" });
    const overflow = await page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth);
    if (overflow > 1) failures.push(`${w}px (+${overflow}px)`);
    await page.close();
  }
  await browser.close();
  if (failures.length) { console.log("OVERFLOW:", failures.join(", ")); process.exit(1); }
  console.log("no horizontal overflow at 320/375/768/1024/1280");
});'

Expected: no horizontal overflow at 320/375/768/1024/1280, exit 0.

If 320px or 375px overflows, the swatch / radius / type / scale grids need a smaller minmax() or single-column fallback at that breakpoint — add a @media (max-width: 480px) block inside the <style> that forces grid-template-columns: 1fr on .dg-swatches and .dg-radius-grid, and reduces .dg-section padding to var(--space-32) 0. Re-run the check.

Step 4: Eye check

Open http://127.0.0.1:8123/v3/design-guide.html. Walk the eight sections top to bottom: Header, Farbe (semantic + categorical + theme toggle), Typografie (families + weights + 15 sizes + display clamp), Icons (3 sizes + 2 strokes), Abstände (15 bars), Radien (6 squares + pill), UI-Elemente (buttons + heading combo + italic-swap + 2 checklists + dots + chip), Footer. Click the "Mode umschalten" button — the whole page should recolour to the "systems" mode (warm beige bg + orange accent). Click again — reverts.

Step 5: Commit

git add www/v3/design-guide.html
git commit -m "$(cat <<'EOF'
feat(v3): design-guide Footer + responsive verification

Page complete: 8 sections, ~500 lines, token-only layout,
no horizontal overflow at 320/375/768/1024/1280. Internal,
unlinked, reachable at /v3/design-guide.html.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
EOF
)"

Self-review notes

Spec coverage: every section in the spec's "Page structure" appears in a task (Header + Farbe in T1, Typografie + Icons in T2, Abstände + Radien in T3, UI-Elemente in T4, Footer in T5). The token-only self-check and the responsive overflow gate are both in T5.
Placeholder scan: every step contains the actual HTML/CSS to write or the actual command to run. No "TBD", no "implement appropriately".
Type consistency: every token referenced (--bg, --text-19, --space-32, --icon-stroke-bold, etc.) matches tokens.css as of 42da88998. Class names (btn-primary, lede-bullets, check-li, eyebrow, h-section, lede, italic-swap, dot, chip) match those defined in v3.css/product.css.
Acceptance criteria mapping: spec criterion 1 (file exists + reachable + responsive) ← T5 Step 3. Criterion 2 (all sections present) ← T1–T5. Criterion 3 (token-only) ← T5 Step 2. Criterion 4 (theme toggle works) ← T1 Step 2. Criterion 5 (unlinked) ← inherent (no other file modified to add a link).

v3 Design Guide Page Implementation Plan

Shared context (read before starting)

Task 1: Scaffold the page + Header + Farbe

Task 2: Typografie + Icons

Task 3: Abstände + Radien

Task 4: UI-Elemente

Task 5: Footer + final verification

Self-review notes