Bootstrap a Design System

You are generating 1–2 full-page HTML demonstrations of the design system in use at the page level. These are not prototypes — they are static HTML/CSS files showing the visual language applied to realistic page compositions. **Step 1 — Read the living brief:** Read `LIVING_BRIEF.md`. Note the product type — page types should be appropriate for the product context. **Step 2 — Confirm page types:** Suggest 2 page types based on the product type recorded in LIVING_BRIEF.md. Common options: - Dashboard with sidebar navigation, data table, stat cards - Settings page with form controls and section headers - Marketing landing page with hero, feature grid, CTA - Detail view with header, content area, sidebar Ask the user to confirm or redirect before proceeding. **Step 3 — Generate the pages:** For each page: - Self-contained HTML file, all styles in a `<style>` block - Uses CSS custom property tokens from the token system - Uses component patterns from `scaffold-core-components` - Realistic content — write copy appropriate to the product type (not lorem ipsum) - Full-width at desktop (1200px+), responsive to at least 768px Quality standard: pages should feel like production UI. Typography hierarchy clear. Density appropriate. Color usage consistent with the commitment level. No decorative elements beyond the token system. Write files as: `page-example-1.html`, `page-example-2.html`. Pause for user review before proceeding. ---