---
chain-id: 7
name: Spec page publish
path: A / B / C
status: live
prompts: [08]
inputs: output/tokens.css + output/foundation.css + output/composite.css + output/patterns.css (if present) + output/chrome.css (if present) + governance.spec.md + archetype.spec.md
outputs: output/design-system-spec.html (self-contained, publishable)
documented-in: Ch08 — Semantic Tokens
---

# Chain 7 — Spec Page Publish

Assembles all generated CSS and spec content into a single self-contained HTML file: your design system's published reference page. Contains a live token browser, rendered component previews, WCAG contrast table, typography scale, governance checklist, and a theme switcher.

**When to use:** After Chain 3 has generated at least foundation and composite components. Run again whenever the component set or token layer is updated.

**Expected runtime:** 10–20 minutes (generation: ~12 min, post-render steps: ~5 min).

**Prerequisites:** `output/tokens.css` must exist. At minimum `output/foundation.css`. Ideally all CSS output files from Chain 3.

---

## Step table

| Step | Prompt | What lands | Checkpoint |
|---|---|---|---|
| 1 | `08-spec-page.md` | `output/design-system-spec.html` — theme switcher, token browser, component renders, WCAG table, governance section | Open in browser and verify all sections |
| 2 | (post-render) Append publishing footer credit row inside `<footer>` | Branded, attributed HTML | Confirm footer text + commit |

---

## Step-by-step walkthrough

### Step 1 — Generate the spec page (Prompt 08)

**What to paste:**
1. `specs/governance.spec.md`
2. `specs/[archetype].spec.md`
3. `output/tokens.css`
4. `output/foundation.css`
5. `output/composite.css` (if generated)
6. `output/patterns.css` (if generated)
7. `output/chrome.css` (if generated)
8. `output/domain.css` (if generated)

**Paste order matters:** Governance and archetype spec first, then CSS files in the order above. The prompt uses the spec to generate documentation annotations for each component.

**In claude.ai:** Before saving, request an Artifact preview — "Output the complete HTML as an Artifact so I can preview it before saving." This renders the spec page in the Artifact panel and lets you review all sections before writing to disk.

**What the prompt generates:**

| Section | Content |
|---|---|
| Sidebar nav | Links to every section, scrolls with the page |
| Token browser | Searchable list of all custom properties with values and usage notes |
| Color palette | Swatches for every color token, grouped by system (chrome / data / semantic) |
| WCAG contrast table | Every text/background pair with computed ratios and AA/AAA status |
| Typography scale | Each type token rendered at its actual size |
| Spacing scale | Visual bar chart of the spacing scale |
| Foundation components | Every foundation component rendered live with all variants |
| Composite components | Every composite component rendered live |
| Patterns | Page pattern renders (if patterns.css present) |
| Chrome | Nav, header, footer renders (if chrome.css present) |
| Domain components | Product-specific renders (if domain.css present) |
| Governance checklist | The full governance.spec.md checklist rendered as a PR checklist |
| Theme toggle | Dark/light mode switcher wired to all components |

**What to check after generation:**
- Open `output/design-system-spec.html` in a browser.
- Theme toggle: clicking it switches all components between dark and light mode. If toggle does not work, a JavaScript error is present — re-run the prompt with: "Ensure the theme toggle JavaScript is fully working."
- Token browser search: typing in the search box filters tokens in real time.
- WCAG table: scroll to the contrast table and confirm no FAIL entries appear without a flag and alternative pairing.
- All CSS output files that were pasted appear in the component sections. If a section is missing, the corresponding CSS file may not have been included in the paste.

**Common failures:**
- *Components render unstyled:* The `<style>` blocks for the component CSS were not inlined correctly. Re-run with: "Inline all pasted CSS files into `<style>` blocks within the HTML. Do not use external `<link>` tags — the file must be self-contained."
- *Theme toggle breaks layout:* The `[data-theme]` attribute switch causes a reflow. Re-run with: "The theme toggle must switch the `data-theme` attribute on the `<html>` element, not on individual components."
- *WCAG table missing rows:* Add: "Include every text/background combination present in the pasted token system in the WCAG contrast table, not just the main body text pairs."

---

### Step 2 — Append the publishing footer

After the HTML is complete, append the credit row inside the existing `<footer>` element, immediately before the closing `</footer>` tag:

```html
<div style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,0.08);
            font-size:0.75rem;opacity:0.55;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;">
  <a href="../../index.html" target="_blank" rel="noopener"
     style="color:currentColor;text-decoration:underline;text-underline-offset:2px;">
    Design Systems That Build Themselves
  </a>
  <span>Ishdeep Sahni</span>
  <span>© 2026 Ishdeep Sahni · All rights reserved</span>
  <span>Confidential &amp; proprietary</span>
</div>
```

Adjust the `href` path if `design-system-spec.html` is hosted at a different relative path from `index.html`.

After appending: open the file in a browser and scroll to the bottom. Confirm the footer row is visible and the link opens correctly.

---

## Output shape

`output/design-system-spec.html` is:
- **Self-contained:** single HTML file with all CSS inlined. No external dependencies (except web fonts via CDN — acceptable).
- **Publishable:** host it on any static file server. Give engineering the URL as the canonical design system reference.
- **Archetype-specific:** the component renders, token browser, and WCAG table all reflect your chosen archetype's output — not a generic design system.

The file mirrors what `build/preview/specs/<archetype>.html` looks like for the canonical archetype specs in the book kit. Your generated version is the project-specific equivalent.

---

*Chain 7 · Spec Page Publish · Design Systems That Build Themselves · © 2026 Ishdeep S Sahni*