Bootstrap a Design System

You are setting up a lightweight component gallery and token reference that the team can maintain. This is not Storybook — it is a simple, maintainable solution. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Note the framework and technology stack. **Step 2 — Confirm approach:** Recommend a single `docs/index.html` — a self-contained HTML file that renders all components, tokens, and usage examples with no build step required. Ask the user to confirm or redirect. **Step 3 — Generate docs/index.html:** The file must contain: 1. **Token reference** — all color tokens as swatches with values; all type roles rendered; all radius and shadow tokens shown 2. **Component gallery** — each core component in its variants and states; organized by name 3. **Usage notes** — brief "when to use" for each component (design intent, not API reference) 4. **Page example links** — links to the page example files 5. **Visual direction summary** — the visual direction brief from `establish-visual-language`, condensed for the team Technical requirements: self-contained HTML, reads from the same CSS custom property values used in the product, openable directly from the filesystem. **Step 4 — Update the living brief:** Append to the Decision Log: ``` [date] — Documentation site generated — [approach, sections included] ``` ---