Add page templates, overhaul DESIGN.md, and fix SideNav text alignment

Introduce AppShell, DashboardPage, ListPage, and FormPage template
components with Storybook recipe stories for AI agent consumption.
Thoroughly update DESIGN.md with all missing components, corrected
token values, and page layout conventions. Fix SideNav button items
defaulting to centered text.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ARCHITECTURE.md

@@ -77,9 +77,17 @@ Small compositions of atoms into reusable units. May combine icons, text, button
 ### `src/components/organisms/` — Organisms
 Larger compositions that carry domain semantics or define page-level regions. Built from atoms and molecules.
 - TopBar, SideNav, PageHeader
-- *(planned)* AppShell (header + sidebar + content area)
 - *(planned)* DatePicker
 
+### `src/components/templates/` — Templates
+Page-level layout components that define the shell and content structure. Templates accept typed slot props (ReactNode) for their sections, making them composable by AI agents and developers. They do not own content — they define where content goes.
+- **AppShell** — TopBar + SideNav + scrollable content area. All pages render inside this.
+- **DashboardPage** — PageHeader + stat cards row + responsive 2-column content grid
+- **ListPage** — PageHeader + stat cards + list header with actions + scrollable item list
+- **FormPage** — PageHeader + optional action bar + optional vertical stepper + constrained-width form content
+
+Templates have Storybook stories tagged `['autodocs', 'template']` that show realistic "recipe" compositions — full pages built from real components with sample data. These serve as reference implementations for AI coding agents.
+
 ### Which Tier Does a Component Belong To?
 
 | Question | If yes → |
@@ -88,6 +96,7 @@ Larger compositions that carry domain semantics or define page-level regions. Bu
 | Does it compose 2+ atoms into a reusable unit (e.g., Alert = icon + text + close button)? | **molecules/** |
 | Does it carry domain-specific naming or logic (e.g., ThemeCard, ParticipantRow)? | **organisms/** |
 | Does it define a page-level region or shell (header, sidebar, content area)? | **organisms/** |
+| Does it define the layout structure of a full page (slot-based, no owned content)? | **templates/** |
 
 When in doubt: start in `atoms/`. Promote to `molecules/` when a component begins importing other atoms.
 
@@ -121,7 +130,8 @@ src/
 ├── components/
 │   ├── atoms/            # Single-purpose elements
 │   ├── molecules/        # Small compositions of atoms
-│   └── organisms/        # Domain-aware / page-level components
+│   ├── organisms/        # Domain-aware / page-level components
+│   └── templates/        # Page-level layout components (slot-based)
 ├── tokens/
 │   └── tokens.css        # Design tokens (@theme block)
 ├── styles/