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>

src/components/templates/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+
+export interface DashboardPageProps extends HTMLAttributes<HTMLDivElement> {
+  /** PageHeader or custom header section */
+  header?: ReactNode
+  /** Row of stat cards or summary widgets displayed above the content grid */
+  stats?: ReactNode
+  /** Two-column responsive content grid area */
+  children: ReactNode
+}
+
+export const DashboardPage = forwardRef<HTMLDivElement, DashboardPageProps>(
+  ({ header, stats, className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        {header}
+
+        <div className="flex flex-col gap-6 p-6">
+          {stats && <div className="flex flex-wrap gap-4">{stats}</div>}
+
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  },
+)
+DashboardPage.displayName = 'DashboardPage'