diff --git a/site/content/docs/components/buttons.md b/site/content/docs/components/buttons.md
new file mode 100644
index 0000000..811328b
--- /dev/null
+++ b/site/content/docs/components/buttons.md
@@ -0,0 +1,22 @@
+---
+title: "Buttons"
+description: "Button styles in ASW — primary, secondary, and danger variants."
+type: docs
+weight: 33
+date: 2026-04-11
+tags: ["components", "buttons", "forms"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<button>` elements are styled by default. Use `data-variant` to select secondary or danger appearances without adding utility classes.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;gap:0.75rem;flex-wrap:wrap;align-items:center">
+  <button>Primary</button>
+  <button data-variant="secondary">Secondary</button>
+  <button data-variant="danger">Danger</button>
+  <button disabled>Disabled</button>
+</div>
diff --git a/site/content/docs/components/callouts.md b/site/content/docs/components/callouts.md
new file mode 100644
index 0000000..de32e6e
--- /dev/null
+++ b/site/content/docs/components/callouts.md
@@ -0,0 +1,22 @@
+---
+title: "Callouts"
+description: "Attention-drawing callout blocks using the data-callout attribute."
+type: docs
+weight: 35
+date: 2026-04-11
+tags: ["components", "callouts", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Add `data-callout="<type>"` to any block element to style it as a callout. Four types are available: `note`, `tip`, `warning`, and `error`. No extra classes needed.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:1rem">
+  <div data-callout="note"><strong>Note</strong> — General information worth highlighting.</div>
+  <div data-callout="tip"><strong>Tip</strong> — A helpful suggestion or best practice.</div>
+  <div data-callout="warning"><strong>Warning</strong> — Something to watch out for.</div>
+  <div data-callout="error"><strong>Error</strong> — A critical issue or destructive action.</div>
+</div>
diff --git a/site/content/docs/components/dialog.md b/site/content/docs/components/dialog.md
new file mode 100644
index 0000000..1b2adc0
--- /dev/null
+++ b/site/content/docs/components/dialog.md
@@ -0,0 +1,28 @@
+---
+title: "Dialog"
+description: "Native HTML dialog element styled by ASW."
+type: docs
+weight: 36
+date: 2026-04-11
+tags: ["components", "dialog", "modal"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+ASW styles the native `<dialog>` element — no JavaScript modal libraries required. Call `dialog.showModal()` to open it. The `::backdrop` pseudo-element receives a semi-transparent overlay automatically.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <button onclick="document.getElementById('demo-dialog').showModal()">Open dialog</button>
+  <dialog id="demo-dialog">
+    <article>
+      <header><h3>Dialog title</h3></header>
+      <p>This is a native <code>&lt;dialog&gt;</code> element. ASW styles the backdrop and container automatically.</p>
+      <footer>
+        <button onclick="document.getElementById('demo-dialog').close()">Close</button>
+      </footer>
+    </article>
+  </dialog>
+</div>
diff --git a/site/content/docs/components/forms.md b/site/content/docs/components/forms.md
new file mode 100644
index 0000000..2f3aac1
--- /dev/null
+++ b/site/content/docs/components/forms.md
@@ -0,0 +1,37 @@
+---
+title: "Forms"
+description: "Form element styling in ASW — inputs, selects, textareas, and labels."
+type: docs
+weight: 34
+date: 2026-04-11
+tags: ["components", "forms", "inputs"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+All standard form elements are styled out of the box. Labels, inputs, selects, and textareas share consistent sizing and focus rings that respect the accent token.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <form style="display:flex;flex-direction:column;gap:1rem;max-width:28rem" onsubmit="return false">
+    <label>
+      Name
+      <input type="text" placeholder="Jane Smith">
+    </label>
+    <label>
+      Role
+      <select>
+        <option>Agent</option>
+        <option>Human</option>
+        <option>Both</option>
+      </select>
+    </label>
+    <label>
+      Notes
+      <textarea rows="3" placeholder="Optional notes…"></textarea>
+    </label>
+    <button type="submit">Submit</button>
+  </form>
+</div>
diff --git a/site/content/docs/content/_index.md b/site/content/docs/content/_index.md
new file mode 100644
index 0000000..595ae96
--- /dev/null
+++ b/site/content/docs/content/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Content"
+weight: 25
+---
diff --git a/site/content/docs/content/blockquotes.md b/site/content/docs/content/blockquotes.md
new file mode 100644
index 0000000..d6f2fb4
--- /dev/null
+++ b/site/content/docs/content/blockquotes.md
@@ -0,0 +1,22 @@
+---
+title: "Blockquotes"
+description: "Styled blockquotes in ASW — left-border accent, muted text, optional citation."
+type: docs
+weight: 26
+date: 2026-04-11
+tags: ["content", "blockquote", "typography"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<blockquote>` receives a left-border in the accent colour, slight indent, and reduced opacity. A `<footer>` inside the blockquote renders as a citation line.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <blockquote>
+    <p>Simplicity is the ultimate sophistication.</p>
+    <footer>— Leonardo da Vinci</footer>
+  </blockquote>
+</div>
diff --git a/site/content/docs/content/figures.md b/site/content/docs/content/figures.md
new file mode 100644
index 0000000..114284a
--- /dev/null
+++ b/site/content/docs/content/figures.md
@@ -0,0 +1,24 @@
+---
+title: "Figures"
+description: "figure and figcaption styling in ASW."
+type: docs
+weight: 28
+date: 2026-04-11
+tags: ["content", "figure", "media"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<figure>` is a block wrapper for images, diagrams, or code samples. `<figcaption>` inside it renders as a muted, centred caption below the content.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <figure>
+    <div style="background:var(--surface-2,#f0f0f0);height:120px;display:flex;align-items:center;justify-content:center;border-radius:4px">
+      <span data-text="dim">[ image placeholder ]</span>
+    </div>
+    <figcaption>Figure 1 — ASW renders figcaption below the content with muted styling.</figcaption>
+  </figure>
+</div>
diff --git a/site/content/docs/content/tables.md b/site/content/docs/content/tables.md
new file mode 100644
index 0000000..d168e2a
--- /dev/null
+++ b/site/content/docs/content/tables.md
@@ -0,0 +1,29 @@
+---
+title: "Tables"
+description: "Striped, bordered tables with no class names required."
+type: docs
+weight: 27
+date: 2026-04-11
+tags: ["content", "tables"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`<table>` elements are styled with alternating row stripes, a header row background, and a subtle border. Overflow is handled with horizontal scroll on narrow viewports.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
+  <table>
+    <thead>
+      <tr><th>Element</th><th>Role</th><th>Class needed?</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>&lt;nav&gt;</code></td><td>Site navigation</td><td>No</td></tr>
+      <tr><td><code>&lt;article&gt;</code></td><td>Card / content block</td><td>No</td></tr>
+      <tr><td><code>&lt;aside&gt;</code></td><td>Sidebar</td><td>No</td></tr>
+      <tr><td><code>&lt;figure&gt;</code></td><td>Media + caption</td><td>No</td></tr>
+    </tbody>
+  </table>
+</div>
diff --git a/site/content/docs/getting-started/getting-started.md b/site/content/docs/getting-started/getting-started.md
new file mode 100644
index 0000000..caf80a3
--- /dev/null
+++ b/site/content/docs/getting-started/getting-started.md
@@ -0,0 +1,29 @@
+---
+title: "Quick Start"
+description: "Get ASW running in five minutes: one CSS file, semantic HTML, no build step."
+type: docs
+weight: 12
+date: 2026-04-11
+tags: ["getting-started", "installation"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Drop `asw.css` into your project, add one `<link>` tag, and write semantic HTML. No npm, no build pipeline, no configuration files required.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <nav style="margin-bottom:1rem">
+    <a href="#">Home</a> ·
+    <a href="#">Docs</a> ·
+    <a href="#">About</a>
+  </nav>
+  <main>
+    <article>
+      <header><h2>Page title</h2></header>
+      <p>This is an <code>&lt;article&gt;</code> inside <code>&lt;main&gt;</code>, next to a <code>&lt;nav&gt;</code>. ASW styles all three with no classes.</p>
+    </article>
+  </main>
+</div>
diff --git a/site/content/docs/packs/_index.md b/site/content/docs/packs/_index.md
new file mode 100644
index 0000000..2c76e09
--- /dev/null
+++ b/site/content/docs/packs/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Packs"
+weight: 50
+---
diff --git a/site/content/docs/packs/hugo.md b/site/content/docs/packs/hugo.md
new file mode 100644
index 0000000..b0a36df
--- /dev/null
+++ b/site/content/docs/packs/hugo.md
@@ -0,0 +1,29 @@
+---
+title: "Hugo Pack"
+description: "Using ASW with Hugo — the theme, shortcodes, and configuration."
+type: docs
+weight: 52
+date: 2026-04-11
+tags: ["packs", "hugo"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+The Hugo pack (`packs/hugo/`) is a complete Hugo theme built on ASW. It maps Hugo's Markdown pipeline to semantic HTML that ASW styles automatically. This documentation site is built with it.
+
+## Setup
+
+Symlink or copy `packs/hugo/` into your Hugo project's `themes/` directory, then set `theme = "asw-hugo"` in `hugo.toml`. Enable unsafe HTML rendering so that raw HTML blocks in Markdown pass through:
+
+```toml
+[markup.goldmark.renderer]
+  unsafe = true
+
+[markup.tableOfContents]
+  startLevel = 2
+  endLevel   = 3
+  ordered    = false
+```
+
+The pack provides layouts for `docs`, `blog`, and default page types. No additional configuration is required for basic use.
diff --git a/site/content/docs/packs/nginx.md b/site/content/docs/packs/nginx.md
new file mode 100644
index 0000000..d9b7390
--- /dev/null
+++ b/site/content/docs/packs/nginx.md
@@ -0,0 +1,17 @@
+---
+title: "nginx Pack"
+description: "Serving ASW sites with nginx — config snippets and recommended settings."
+type: docs
+weight: 53
+date: 2026-04-11
+tags: ["packs", "nginx", "deploy"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+The nginx pack (`packs/nginx/`) provides ready-to-use server block snippets for static sites built with ASW. The snippets handle correct MIME types for `.css` files, cache headers, and clean URL rewrites so that `page/` serves `page/index.html` without explicit extensions.
+
+Drop the relevant snippet into your nginx `conf.d/` directory and adjust the `root` path to point at your built site. No changes to ASW itself are required — the pack is purely a deployment convenience.
+
+Stub — full configuration reference and examples will be added here.
diff --git a/site/content/docs/packs/overview.md b/site/content/docs/packs/overview.md
new file mode 100644
index 0000000..c6d4700
--- /dev/null
+++ b/site/content/docs/packs/overview.md
@@ -0,0 +1,17 @@
+---
+title: "Packs Overview"
+description: "What ASW packs are, how they extend the core stylesheet, and when to use them."
+type: docs
+weight: 51
+date: 2026-04-11
+tags: ["packs", "overview"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Packs are thin integration layers that connect ASW to a specific tool or pipeline. They do not add new CSS — they configure the tool so that its output maps to the semantic HTML that ASW already styles.
+
+The core `asw.css` works with any HTML. Packs handle the glue: Hugo shortcodes, nginx config snippets, Pandoc templates, and so on. Use a pack when you want zero-configuration output from a supported tool, and skip it if you are generating HTML yourself.
+
+Available packs: **Hugo**, **nginx**, **Pandoc**. Each pack lives in `packs/<name>/` in the ASW repository.
diff --git a/site/content/docs/packs/pandoc.md b/site/content/docs/packs/pandoc.md
new file mode 100644
index 0000000..39a04d9
--- /dev/null
+++ b/site/content/docs/packs/pandoc.md
@@ -0,0 +1,17 @@
+---
+title: "Pandoc Pack"
+description: "Converting documents to ASW-styled HTML with Pandoc templates."
+type: docs
+weight: 54
+date: 2026-04-11
+tags: ["packs", "pandoc"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+The Pandoc pack (`packs/pandoc/`) contains an HTML5 template that wraps Pandoc output in the document structure ASW expects. Run Pandoc with `--template asw.html5` and the resulting file is styled by `asw.css` with no further changes.
+
+This is particularly useful for converting Markdown, DOCX, or LaTeX source to a consistently styled HTML output — for example, generating agent reports, documentation pages, or meeting notes from plain-text inputs.
+
+Stub — template reference and usage examples will be added here.
diff --git a/site/content/docs/reference/utilities.md b/site/content/docs/reference/utilities.md
new file mode 100644
index 0000000..06bd0d7
--- /dev/null
+++ b/site/content/docs/reference/utilities.md
@@ -0,0 +1,22 @@
+---
+title: "Utilities"
+description: "Utility data-attributes in ASW for text variants, spacing, and display."
+type: docs
+weight: 43
+date: 2026-04-11
+tags: ["reference", "utilities", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+ASW provides a small set of utility attributes for inline adjustments. Rather than class names, these use `data-*` attributes to stay in the semantic-HTML spirit of the framework.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
+  <p><span data-text="mono">data-text="mono"</span> — monospace font</p>
+  <p><span data-text="dim">data-text="dim"</span> — reduced opacity / muted</p>
+  <p><span data-text="accent">data-text="accent"</span> — accent colour</p>
+  <p><span data-text="small">data-text="small"</span> — smaller font size</p>
+</div>
diff --git a/site/content/docs/reference/vocabulary.md b/site/content/docs/reference/vocabulary.md
new file mode 100644
index 0000000..7b29d17
--- /dev/null
+++ b/site/content/docs/reference/vocabulary.md
@@ -0,0 +1,32 @@
+---
+title: "Vocabulary"
+description: "Full reference of all data-* attributes understood by ASW."
+type: docs
+weight: 44
+date: 2026-04-11
+tags: ["reference", "vocabulary", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Every `data-*` attribute that ASW recognises is listed here. This is the authoritative vocabulary — anything not on this list has no built-in style effect.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;overflow-x:auto">
+  <table>
+    <thead>
+      <tr><th>Attribute</th><th>Values</th><th>Effect</th></tr>
+    </thead>
+    <tbody>
+      <tr><td><code>data-layout</code></td><td>docs, prose, wide</td><td>Page layout variant</td></tr>
+      <tr><td><code>data-callout</code></td><td>note, tip, warning, error</td><td>Callout block style</td></tr>
+      <tr><td><code>data-task</code></td><td>done, todo, wip, blocked</td><td>Task list item state</td></tr>
+      <tr><td><code>data-status</code></td><td>active, sleeping, blocked</td><td>Status badge</td></tr>
+      <tr><td><code>data-text</code></td><td>mono, dim, accent, small</td><td>Inline text variant</td></tr>
+      <tr><td><code>data-variant</code></td><td>secondary, danger</td><td>Button style variant</td></tr>
+      <tr><td><code>data-wikilink</code></td><td>(any)</td><td>Internal wiki link styling</td></tr>
+    </tbody>
+  </table>
+</div>
diff --git a/site/content/docs/typography/_index.md b/site/content/docs/typography/_index.md
new file mode 100644
index 0000000..bbb3918
--- /dev/null
+++ b/site/content/docs/typography/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Typography"
+weight: 15
+---
diff --git a/site/content/docs/typography/code.md b/site/content/docs/typography/code.md
new file mode 100644
index 0000000..c29a2eb
--- /dev/null
+++ b/site/content/docs/typography/code.md
@@ -0,0 +1,29 @@
+---
+title: "Code"
+description: "Inline code and fenced code blocks in ASW."
+type: docs
+weight: 18
+date: 2026-04-11
+tags: ["typography", "code", "pre"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Inline `<code>` uses a monospace font with a subtle background tint. Block-level `<pre><code>` gets a full-width container with padding and horizontal scroll for long lines.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <p>Use <code>data-callout="tip"</code> to style a callout block, or <code>data-layout="docs"</code> for a sidebar layout.</p>
+  <pre><code>/* Minimal ASW page */
+&lt;!doctype html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+  &lt;link rel="stylesheet" href="asw.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;main&gt;&lt;article&gt;Hello, ASW.&lt;/article&gt;&lt;/main&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+</div>
diff --git a/site/content/docs/typography/headings.md b/site/content/docs/typography/headings.md
new file mode 100644
index 0000000..e95a82e
--- /dev/null
+++ b/site/content/docs/typography/headings.md
@@ -0,0 +1,24 @@
+---
+title: "Headings"
+description: "ASW styles all six heading levels with a consistent typographic scale."
+type: docs
+weight: 16
+date: 2026-04-11
+tags: ["typography", "headings"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Headings `h1` through `h6` are sized using a fluid scale derived from the token system. No classes are needed — the element name is the selector.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <h1>Heading level 1</h1>
+  <h2>Heading level 2</h2>
+  <h3>Heading level 3</h3>
+  <h4>Heading level 4</h4>
+  <h5>Heading level 5</h5>
+  <h6>Heading level 6</h6>
+</div>
diff --git a/site/content/docs/typography/prose.md b/site/content/docs/typography/prose.md
new file mode 100644
index 0000000..b316fb6
--- /dev/null
+++ b/site/content/docs/typography/prose.md
@@ -0,0 +1,28 @@
+---
+title: "Prose"
+description: "Body text, unordered lists, ordered lists, and blockquotes in ASW."
+type: docs
+weight: 17
+date: 2026-04-11
+tags: ["typography", "prose", "lists", "blockquote"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+ASW sets comfortable line-height, paragraph spacing, and list markers on prose elements automatically. Write plain HTML and the reading experience takes care of itself.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <p>This is a body paragraph. ASW uses a fluid font size and generous line-height so long-form text remains comfortable to read on any screen width.</p>
+  <ul>
+    <li>First item in an unordered list</li>
+    <li>Second item</li>
+    <li>Third item</li>
+  </ul>
+  <blockquote>
+    <p>Good design is as little design as possible.</p>
+    <footer>— Dieter Rams</footer>
+  </blockquote>
+</div>
diff --git a/site/content/docs/vault/_index.md b/site/content/docs/vault/_index.md
new file mode 100644
index 0000000..3e5ff84
--- /dev/null
+++ b/site/content/docs/vault/_index.md
@@ -0,0 +1,4 @@
+---
+title: "Vault"
+weight: 45
+---
diff --git a/site/content/docs/vault/status.md b/site/content/docs/vault/status.md
new file mode 100644
index 0000000..d233e5f
--- /dev/null
+++ b/site/content/docs/vault/status.md
@@ -0,0 +1,21 @@
+---
+title: "Status"
+description: "data-status attribute for inline status badges in ASW."
+type: docs
+weight: 48
+date: 2026-04-11
+tags: ["vault", "status", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`data-status` renders a small coloured badge inline with text. It is designed for project indexes, agent dashboards, and task boards where a glanceable status signal is needed without a full callout block.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.5rem">
+  <p><span data-status="active">active</span> — currently running or in use</p>
+  <p><span data-status="sleeping">sleeping</span> — paused or idle</p>
+  <p><span data-status="blocked">blocked</span> — waiting on a dependency</p>
+</div>
diff --git a/site/content/docs/vault/tasks.md b/site/content/docs/vault/tasks.md
new file mode 100644
index 0000000..b48e184
--- /dev/null
+++ b/site/content/docs/vault/tasks.md
@@ -0,0 +1,25 @@
+---
+title: "Tasks"
+description: "data-task attribute for styled task lists in ASW."
+type: docs
+weight: 47
+date: 2026-04-11
+tags: ["vault", "tasks", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+Add `data-task="<state>"` to a `<li>` element to render it as a task item with a state indicator. Four states are supported: `done`, `todo`, `wip` (work in progress), and `blocked`.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <ul style="list-style:none;padding-left:0">
+    <li data-task="done">Write the ASW reset layer</li>
+    <li data-task="done">Publish initial token system</li>
+    <li data-task="wip">Document all data-* attributes</li>
+    <li data-task="todo">Add animation tokens</li>
+    <li data-task="blocked">Finalize pack API — waiting on Pandoc template review</li>
+  </ul>
+</div>
diff --git a/site/content/docs/vault/wikilinks.md b/site/content/docs/vault/wikilinks.md
new file mode 100644
index 0000000..a21d125
--- /dev/null
+++ b/site/content/docs/vault/wikilinks.md
@@ -0,0 +1,23 @@
+---
+title: "Wikilinks"
+description: "data-wikilink attribute for styling internal knowledge-base links."
+type: docs
+weight: 46
+date: 2026-04-11
+tags: ["vault", "wikilinks", "data-attributes"]
+ai-disclosure: "generated"
+ai-model: "claude-sonnet-4-6"
+ai-provider: "Anthropic"
+---
+
+`data-wikilink` marks an anchor as an internal wiki-style link — the kind generated by `[[Page Name]]` syntax in Obsidian, Quartz, or similar vault tools. ASW styles these distinctly from regular hyperlinks to indicate their intra-vault nature.
+
+## Inline Demo
+
+<div style="border:1px solid var(--border,#ccc);padding:1.5rem;border-radius:4px">
+  <p>
+    See the <a href="#" data-wikilink>Getting Started</a> page, or cross-reference
+    <a href="#" data-wikilink>Core Concepts</a> and <a href="#" data-wikilink>Token System</a>.
+  </p>
+  <p>Regular <a href="#">external link</a> for comparison.</p>
+</div>
diff --git a/site/content/layouts/_index.md b/site/content/layouts/_index.md
new file mode 100644
index 0000000..abf13f3
--- /dev/null
+++ b/site/content/layouts/_index.md
@@ -0,0 +1,52 @@
+---
+title: "Layouts"
+description: "Available page layouts in ASW. Each card links to a live page using that layout."
+---
+
+## Available Layouts
+
+<section data-layout="grid-2">
+
+<article>
+<header><h3>Docs</h3></header>
+<p>Three-column layout: sidebar navigation, main content, table of contents. The standard documentation pattern.</p>
+<p><code>data-layout="docs"</code></p>
+<p><a href="/docs/getting-started/introduction/">See it live →</a></p>
+</article>
+
+<article>
+<header><h3>Essay</h3></header>
+<p>Long-form prose with centred masthead, abstract, byline. Wide reading measure with typographic refinements.</p>
+<p><code>type: essay</code></p>
+<p><a href="/essays/on-semantic-html/">See it live →</a></p>
+</article>
+
+<article>
+<header><h3>Console</h3></header>
+<p>Docs variant with sidebar flush to viewport edge. Designed for terminal-style interfaces and dashboards.</p>
+<p><code>data-layout="console"</code></p>
+<p><em>Prototype — demo coming</em></p>
+</article>
+
+<article>
+<header><h3>Grid</h3></header>
+<p>Multi-column content grids for cards, galleries, dashboards. Responsive — collapses to single column on mobile.</p>
+<p><code>data-layout="grid-2"</code> / <code>grid-3</code></p>
+<p><em>This page uses grid-2 for these cards</em></p>
+</article>
+
+<article>
+<header><h3>Prose</h3></header>
+<p>Single-column reading layout. Content constrained to <code>--width-prose</code> (65ch) for optimal readability.</p>
+<p><code>data-layout="prose"</code></p>
+<p><a href="/examples/layout/prose.html">See it live →</a></p>
+</article>
+
+<article>
+<header><h3>Report</h3></header>
+<p>Formal document layout with print styles. Headers, numbered sections, optimised for PDF export.</p>
+<p><code>data-layout="report"</code></p>
+<p><a href="/examples/layout/report.html">See it live →</a></p>
+</article>
+
+</section>
diff --git a/site/data/nav.yml b/site/data/nav.yml
index 0d60034..141b729 100644
--- a/site/data/nav.yml
+++ b/site/data/nav.yml
@@ -1,24 +1,10 @@
 items:
-  - name: Home
-    url: /
-    weight: 1
-
   - name: Docs
     url: /docs/
+    weight: 1
+  - name: Layouts
+    url: /layouts/
     weight: 2
-
-  - name: Notes
-    url: /notes/
+  - name: Lab
+    url: /lab/
     weight: 3
-
-  - name: Essays
-    url: /essays/
-    weight: 4
-
-  - name: Articles
-    url: /articles/
-    weight: 5
-
-  - name: Tags
-    url: /tags/
-    weight: 6
diff --git a/site/hugo_stats.json b/site/hugo_stats.json
index db200d6..3e50e97 100644
--- a/site/hugo_stats.json
+++ b/site/hugo_stats.json
@@ -15,17 +15,23 @@
       "dl",
       "dt",
       "em",
+      "figcaption",
+      "figure",
       "footer",
+      "form",
       "h1",
       "h2",
       "h3",
       "h4",
       "h5",
+      "h6",
       "head",
       "header",
       "hgroup",
       "hr",
       "html",
+      "input",
+      "label",
       "li",
       "link",
       "main",
@@ -33,10 +39,12 @@
       "meta",
       "nav",
       "ol",
+      "option",
       "p",
       "pre",
       "script",
       "section",
+      "select",
       "small",
       "span",
       "strong",
@@ -45,6 +53,7 @@
       "table",
       "tbody",
       "td",
+      "textarea",
       "th",
       "thead",
       "time",
@@ -73,6 +82,7 @@
       "aside",
       "asw-data-attribute-vocabulary",
       "attributes",
+      "available-layouts",
       "axis-labels",
       "badge",
       "bar-chart",
@@ -143,6 +153,7 @@
       "hugo--chroma",
       "hugo-integration",
       "inline-definition-list",
+      "inline-demo",
       "inline-diffs",
       "inline-elements",
       "install-pill",
diff --git a/site/layouts/layouts/list.html b/site/layouts/layouts/list.html
new file mode 100644
index 0000000..6287114
--- /dev/null
+++ b/site/layouts/layouts/list.html
@@ -0,0 +1,14 @@
+{{ define "header" }}
+  <header>
+    <hgroup>
+      <h1>{{ .Title }}</h1>
+      {{ with .Description }}<p>{{ . }}</p>{{ end }}
+    </hgroup>
+  </header>
+{{ end }}
+
+{{ define "content" }}
+  <main>
+    {{ .Content }}
+  </main>
+{{ end }}