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.stories.tsx

@@ -0,0 +1,193 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import { DashboardPage } from './DashboardPage'
+import { AppShell } from '@/components/templates/AppShell/AppShell'
+import { TopBar } from '@/components/organisms/TopBar/TopBar'
+import { SideNav, SideNavItem, SideNavDivider } from '@/components/organisms/SideNav/SideNav'
+import { PageHeader } from '@/components/organisms/PageHeader/PageHeader'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/molecules/Card/Card'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/molecules/Accordion/Accordion'
+import { Badge } from '@/components/atoms/Badge/Badge'
+import { Avatar } from '@/components/atoms/Avatar/Avatar'
+import { IconButton } from '@/components/atoms/IconButton/IconButton'
+import { Menu, Bell, Home, FileText, LayoutGrid, Users, CheckCircle, Clock, Info } from 'lucide-react'
+
+const NswLogo = () => (
+  <div className="flex size-7 items-center justify-center rounded bg-white/20 text-caption font-bold text-white">NSW</div>
+)
+
+const meta: Meta<typeof DashboardPage> = {
+  title: 'Templates/DashboardPage',
+  component: DashboardPage,
+  tags: ['autodocs', 'template'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Dashboard page template with stat summary row and a responsive 2-column content grid. Use inside AppShell for the full page layout.',
+      },
+    },
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof DashboardPage>
+
+export const ProfessionalPathway: Story = {
+  name: 'Professional Pathway Dashboard',
+  render: () => {
+    const [collapsed, setCollapsed] = useState(false)
+    return (
+      <AppShell
+        topBar={
+          <TopBar
+            title=""
+            leading={<IconButton icon={<Menu />} aria-label="Menu" variant="tertiary" onClick={() => setCollapsed(!collapsed)} />}
+            logo={<NswLogo />}
+          >
+            <IconButton icon={<Bell />} aria-label="Notifications" variant="tertiary" />
+            <Avatar initials="MM" size="sm" />
+          </TopBar>
+        }
+        sideNav={
+          <SideNav collapsed={collapsed}>
+            <SideNavItem icon={<Home />} active>My status</SideNavItem>
+            <SideNavItem icon={<Users />}>My details</SideNavItem>
+            <SideNavItem icon={<LayoutGrid />}>Workspace</SideNavItem>
+            <SideNavItem icon={<FileText />}>Resources</SideNavItem>
+            <SideNavDivider />
+            <SideNavItem icon={<Users />}>Accreditation</SideNavItem>
+          </SideNav>
+        }
+        sideNavCollapsed={collapsed}
+      >
+        <DashboardPage
+          header={
+            <PageHeader title="Myra McKay" subtitle="Accreditation Level: Proficient Teacher" theme="dark">
+              <div className="mt-2 text-small text-white/80">
+                Maroubra Junction Public School
+              </div>
+            </PageHeader>
+          }
+        >
+          <Card variant="surface">
+            <CardHeader>
+              <CardTitle>Steps to be taken</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <Accordion type="single" collapsible>
+                <AccordionItem value="s1">
+                  <AccordionTrigger>Ensure you have completed the minimum requirements of your teaching degree as stated by NESA.</AccordionTrigger>
+                  <AccordionContent>Details about teaching degree requirements.</AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="s2">
+                  <AccordionTrigger>Apply for your Working With Children Check (WWCC).</AccordionTrigger>
+                  <AccordionContent>Information about WWCC application.</AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="s3">
+                  <AccordionTrigger>Create an eTAMS account and submit required documentation to NESA.</AccordionTrigger>
+                  <AccordionContent>Steps for eTAMS registration.</AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="s4">
+                  <AccordionTrigger>Pay your NESA fee.</AccordionTrigger>
+                  <AccordionContent>Payment details.</AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="s5">
+                  <AccordionTrigger>Complete Mandatory Training.</AccordionTrigger>
+                  <AccordionContent>Training module details.</AccordionContent>
+                </AccordionItem>
+              </Accordion>
+            </CardContent>
+          </Card>
+
+          <div className="flex flex-col gap-6">
+            <Card variant="surface">
+              <CardHeader>
+                <CardTitle>Mandatory Training Reminders</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center justify-between border-b border-border pb-3">
+                  <span className="text-body font-medium">Aboriginal Cultural Education</span>
+                  <Badge variant="success" leftIcon={<CheckCircle size={14} />}>Certified</Badge>
+                </div>
+                <p className="mt-4 text-small text-text-secondary">
+                  Please consult the Mandatory Training Hub for role specific training, or contact the MyPL Helpdesk for queries regarding training.
+                </p>
+              </CardContent>
+            </Card>
+
+            <Card variant="elevated" className="bg-info/5">
+              <CardContent className="flex gap-4 p-5">
+                <Avatar initials="MK" size="lg" />
+                <div className="text-small">
+                  <p className="font-medium text-text">
+                    Hi I am Martha. I got my conditional accreditation recently through NESA. These links really helped me through the process.
+                  </p>
+                  <div className="mt-3 flex flex-col gap-1">
+                    <a href="#" className="text-info hover:underline">The resources that helped me</a>
+                    <a href="#" className="text-info hover:underline">FAQ (questions I had)</a>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </DashboardPage>
+      </AppShell>
+    )
+  },
+}
+
+export const Standalone: Story = {
+  name: 'Without AppShell',
+  render: () => (
+    <DashboardPage
+      header={<PageHeader title="Dashboard" subtitle="Overview of your activity" />}
+      stats={
+        <>
+          <Card variant="surface" className="min-w-[180px] flex-1">
+            <CardContent className="flex items-center gap-4 p-5">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-info/10 text-info">
+                <Clock size={20} />
+              </div>
+              <div>
+                <p className="text-h3 font-bold text-text">21h</p>
+                <p className="text-small text-text-secondary">Total hours logged</p>
+                <p className="text-caption text-text-secondary">Target 100h</p>
+              </div>
+            </CardContent>
+          </Card>
+          <Card variant="surface" className="min-w-[180px] flex-1">
+            <CardContent className="flex items-center gap-4 p-5">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-info/10 text-info">
+                <Clock size={20} />
+              </div>
+              <div>
+                <p className="text-h3 font-bold text-text">18h</p>
+                <p className="text-small text-text-secondary">NESA Registered PD</p>
+                <p className="text-caption text-text-secondary">Target 60h</p>
+              </div>
+            </CardContent>
+          </Card>
+          <Card variant="surface" className="min-w-[180px] flex-1">
+            <CardContent className="flex items-center gap-4 p-5">
+              <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-info/10 text-info">
+                <Info size={20} />
+              </div>
+              <div>
+                <p className="text-h3 font-bold text-text">5</p>
+                <p className="text-small text-text-secondary">Activities logged</p>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      }
+    >
+      <Card variant="surface">
+        <CardContent className="p-8 text-center text-text-secondary">Left column content</CardContent>
+      </Card>
+      <Card variant="surface">
+        <CardContent className="p-8 text-center text-text-secondary">Right column content</CardContent>
+      </Card>
+    </DashboardPage>
+  ),
+}