jettypod 4.4.118 → 4.4.121

package/apps/dashboard/app/design-system/page.tsx

@@ -0,0 +1,868 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { shadow } from '@/lib/shadows';
+
+function Section({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
+  return (
+    <section className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100 pb-3">
+          {title}
+        </h2>
+        {description && <p className="text-base text-zinc-500 mt-1">{description}</p>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function ColorSwatch({ name, value, cssVar }: { name: string; value: string; cssVar: string }) {
+  return (
+    <div className="flex items-center gap-4">
+      <div
+        className="w-14 h-14 rounded-2xl shrink-0"
+        style={{ backgroundColor: value }}
+      />
+      <div>
+        <div className="text-base font-medium text-zinc-900 dark:text-zinc-100">{name}</div>
+        <div className="text-xs text-zinc-500 font-mono">{cssVar}</div>
+      </div>
+    </div>
+  );
+}
+
+function Card({ children, className = '', hover = false }: { children: React.ReactNode; className?: string; hover?: boolean }) {
+  return (
+    <div
+      className={`bg-card rounded-2xl p-8 ${hover ? 'transition-shadow duration-200 ease-out hover:shadow-lg' : ''} ${className}`}
+      style={{ boxShadow: shadow.md }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default function DesignSystemPage() {
+  const [dark, setDark] = useState(false);
+  const [loadingDemo, setLoadingDemo] = useState(false);
+
+  return (
+    <div className={dark ? 'dark' : ''}>
+      {/* Focus style for inputs — can't do :focus with inline styles */}
+      <style>{`
+        .ds-input:focus {
+          border-color: #819D9F !important;
+          box-shadow: 0 0 0 3px rgba(129, 157, 159, 0.15) !important;
+          outline: none;
+        }
+        .ds-input {
+          transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
+        }
+        @keyframes shimmer {
+          0% { background-position: -200% 0; }
+          100% { background-position: 200% 0; }
+        }
+        .skeleton {
+          background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s ease-in-out infinite;
+          border-radius: 8px;
+        }
+      `}</style>
+
+      <div className="flex-1 overflow-y-auto bg-background text-foreground">
+        {/* Header */}
+        <header className="sticky top-0 z-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-8 py-6 flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Design System</h1>
+            <p className="text-base text-zinc-500 mt-1">JettyPod component & token reference</p>
+          </div>
+          <button
+            onClick={() => setDark(!dark)}
+            className="px-3 py-1.5 text-base font-medium rounded-lg transition-colors duration-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-600 dark:text-zinc-400"
+            style={{ border: '2px solid #18181b' }}
+          >
+            {dark ? 'Light mode' : 'Dark mode'}
+          </button>
+        </header>
+
+        <div className="max-w-5xl mx-auto px-8 py-16 space-y-20">
+
+          {/* ─── Border Philosophy ─── */}
+          <Section title="0. Border Philosophy" description="Binary borders — thick and intentional, or nothing at all. No thin decorative borders.">
+            <Card>
+              <div className="grid grid-cols-2 gap-8">
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">Has border (thick, intentional)</div>
+                  <div className="space-y-2 text-base text-zinc-700 dark:text-zinc-300">
+                    <p><strong>Inputs</strong> — 2px dark, defines the interactive area</p>
+                    <p><strong>Header nav</strong> — 1px bottom, structural anchor</p>
+                    <p><strong>Selected/active states</strong> — 2px brand color</p>
+                    <p><strong>Outlined buttons</strong> — 2px dark, same weight as inputs</p>
+                    <p><strong>Callout left-edge</strong> — 3px accent stripe</p>
+                  </div>
+                </div>
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">No border (use bg + shadow instead)</div>
+                  <div className="space-y-2 text-base text-zinc-700 dark:text-zinc-300">
+                    <p><strong>Cards</strong> — white on warm canvas is enough contrast</p>
+                    <p><strong>Containers</strong> — shadows provide depth</p>
+                    <p><strong>Sections</strong> — spacing separates, not lines</p>
+                    <p><strong>Filled buttons</strong> — fill color defines the shape</p>
+                  </div>
+                </div>
+              </div>
+              <div style={{ paddingTop: '24px' }}>
+                <div className="text-xs font-mono text-zinc-400" style={{ marginBottom: '12px' }}>Visual comparison</div>
+                <div className="grid grid-cols-2 gap-8">
+                  <div className="rounded-xl p-6 space-y-3" style={{ border: '1px solid #e4e4e7' }}>
+                    <div className="text-xs text-zinc-400">Old: thin borders everywhere</div>
+                    <div className="rounded-lg p-4 text-base text-zinc-600" style={{ border: '1px solid #e4e4e7' }}>Bordered card</div>
+                    <div className="rounded-lg p-4 text-base text-zinc-600" style={{ border: '1px solid #e4e4e7' }}>Bordered card</div>
+                  </div>
+                  <div className="bg-card rounded-2xl p-6 space-y-3" style={{ boxShadow: shadow.md }}>
+                    <div className="text-xs text-zinc-400">New: no borders, shadow + bg contrast</div>
+                    <div className="bg-zinc-50 dark:bg-zinc-800 rounded-xl p-4 text-base text-zinc-600">Borderless card</div>
+                    <div className="bg-zinc-50 dark:bg-zinc-800 rounded-xl p-4 text-base text-zinc-600">Borderless card</div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Brand Palette ─── */}
+          <Section title="1. Brand Palette" description="Three colors, three shades each — solid, tint (backgrounds), and text (on tint)">
+            <Card>
+              <div className="space-y-8">
+                {/* Primary */}
+                <div className="space-y-3">
+                  <div className="text-base font-semibold text-zinc-900 dark:text-zinc-100">Primary</div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#819D9F' }} />
+                      <div className="text-xs font-mono text-zinc-500">Solid · #819D9F</div>
+                      <div className="text-xs text-zinc-400">Buttons, fills, borders</div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#E8EEEF' }} />
+                      <div className="text-xs font-mono text-zinc-500">Tint · #E8EEEF</div>
+                      <div className="text-xs text-zinc-400">Card backgrounds, badges</div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl flex items-center justify-center" style={{ backgroundColor: '#E8EEEF' }}>
+                        <span className="text-base font-semibold" style={{ color: '#4A6365' }}>Text on tint</span>
+                      </div>
+                      <div className="text-xs font-mono text-zinc-500">Text · #4A6365</div>
+                      <div className="text-xs text-zinc-400">Labels on tinted backgrounds</div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Accent */}
+                <div className="space-y-3">
+                  <div className="text-base font-semibold text-zinc-900 dark:text-zinc-100">Accent</div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#E57A44' }} />
+                      <div className="text-xs font-mono text-zinc-500">Solid · #E57A44</div>
+                      <div className="text-xs text-zinc-400">CTA buttons, warm emphasis</div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#FCEEE6' }} />
+                      <div className="text-xs font-mono text-zinc-500">Tint · #FCEEE6</div>
+                      <div className="text-xs text-zinc-400">Banners, callout backgrounds</div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl flex items-center justify-center" style={{ backgroundColor: '#FCEEE6' }}>
+                        <span className="text-base font-semibold" style={{ color: '#9E4A1E' }}>Text on tint</span>
+                      </div>
+                      <div className="text-xs font-mono text-zinc-500">Text · #9E4A1E</div>
+                      <div className="text-xs text-zinc-400">Labels on tinted backgrounds</div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Highlight */}
+                <div className="space-y-3">
+                  <div className="text-base font-semibold text-zinc-900 dark:text-zinc-100">Highlight</div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#E3D985' }} />
+                      <div className="text-xs font-mono text-zinc-500">Solid · #E3D985</div>
+                      <div className="text-xs text-zinc-400">Borders, dots, selection</div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#F9F7E8' }} />
+                      <div className="text-xs font-mono text-zinc-500">Tint · #F9F7E8</div>
+                      <div className="text-xs text-zinc-400">Badge backgrounds, callouts</div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl flex items-center justify-center" style={{ backgroundColor: '#F9F7E8' }}>
+                        <span className="text-base font-semibold" style={{ color: '#8B7D2F' }}>Text on tint</span>
+                      </div>
+                      <div className="text-xs font-mono text-zinc-500">Text · #8B7D2F</div>
+                      <div className="text-xs text-zinc-400">Labels on tinted backgrounds</div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Official Black */}
+                <div className="space-y-3">
+                  <div className="text-base font-semibold text-zinc-900 dark:text-zinc-100">Official Black</div>
+                  <div className="grid grid-cols-3 gap-4">
+                    <div className="space-y-2">
+                      <div className="w-full h-20 rounded-2xl" style={{ backgroundColor: '#18181b' }} />
+                      <div className="text-xs font-mono text-zinc-500">Black · #18181b (zinc-900)</div>
+                      <div className="text-xs text-zinc-400">Text, input borders, outlined buttons</div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Usage examples */}
+                <div style={{ paddingTop: '24px' }}>
+                  <div className="text-xs font-mono text-zinc-400" style={{ marginBottom: '16px' }}>In context</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium" style={{ backgroundColor: '#E8EEEF', color: '#4A6365' }}>Primary badge</span>
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium" style={{ backgroundColor: '#FCEEE6', color: '#9E4A1E' }}>Accent badge</span>
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium" style={{ backgroundColor: '#F9F7E8', color: '#8B7D2F' }}>Highlight badge</span>
+                    <div className="flex items-center gap-2 px-4 py-3 rounded-xl" style={{ backgroundColor: '#F9F7E8', borderLeft: '3px solid #E3D985' }}>
+                      <span className="text-base" style={{ color: '#8B7D2F' }}>Callout with thick left border.</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Surface Hierarchy ─── */}
+          <Section title="2. Surface Hierarchy" description="Three layers: warm canvas → white cards → content. No borders needed — bg contrast does the work.">
+            <div className="space-y-4">
+              <div className="bg-background rounded-2xl p-8">
+                <div className="text-xs font-mono text-zinc-400 mb-4">--background · oklch(0.98 0.002 80) · warm cream canvas</div>
+                <div className="bg-card rounded-2xl p-8" style={{ boxShadow: shadow.md }}>
+                  <div className="text-xs font-mono text-zinc-400 mb-3">--card · oklch(1 0 0) · pure white card (no border, shadow only)</div>
+                  <p className="text-base text-zinc-700">Content lives here. White floats above the warm canvas with a subtle shadow.</p>
+                </div>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-6 mt-6">
+              <ColorSwatch name="Background (canvas)" value="oklch(0.98 0.002 80)" cssVar="--background" />
+              <ColorSwatch name="Card / Header" value="oklch(1 0 0)" cssVar="--card / bg-white" />
+              <ColorSwatch name="Sidebar" value="oklch(0.985 0 0)" cssVar="--sidebar" />
+              <ColorSwatch name="Muted" value="oklch(0.97 0 0)" cssVar="--muted" />
+              <ColorSwatch name="Foreground" value="oklch(0.145 0 0)" cssVar="--foreground" />
+              <ColorSwatch name="Muted Foreground" value="oklch(0.556 0 0)" cssVar="--muted-foreground" />
+              <ColorSwatch name="Destructive" value="oklch(0.577 0.245 27.325)" cssVar="--destructive" />
+            </div>
+          </Section>
+
+          {/* ─── Elevation Scale ─── */}
+          <Section title="3. Elevation Scale" description="Three shadow levels for depth hierarchy, plus an overlay level for modals and popovers.">
+            <Card>
+              <div className="grid grid-cols-4 gap-6">
+                {([
+                  { name: 'sm', desc: 'Resting — subtle cards, badges', value: shadow.sm },
+                  { name: 'md', desc: 'Default — cards, containers', value: shadow.md },
+                  { name: 'lg', desc: 'Raised — hovered cards, dropdowns', value: shadow.lg },
+                  { name: 'overlay', desc: 'Overlay — modals, dialogs', value: shadow.overlay },
+                ] as const).map((s) => (
+                  <div key={s.name} className="text-center space-y-3">
+                    <div className="bg-white dark:bg-zinc-800 rounded-2xl h-24 w-full" style={{ boxShadow: s.value }} />
+                    <div>
+                      <div className="text-base font-mono text-zinc-900 dark:text-zinc-100 font-medium">{s.name}</div>
+                      <div className="text-xs text-zinc-400 mt-0.5">{s.desc}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="text-xs font-mono text-zinc-400 mt-8">Cards transition from md → lg on hover (200ms ease-out)</div>
+            </Card>
+          </Section>
+
+          {/* ─── Typography ─── */}
+          <Section title="4. Typography" description="Dramatic type hierarchy — large display headings with tight tracking, smaller sizes for body and UI">
+            <Card>
+              <div className="space-y-8">
+                <div className="space-y-4">
+                  <div className="text-xs font-mono text-zinc-400">Font: Satoshi (--font-sans)</div>
+                  <div className="space-y-6">
+                    <div>
+                      <p className="text-4xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Display — 4xl bold tight</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Hero headings, landing pages, empty states · tracking-tight (-0.025em)</p>
+                    </div>
+                    <div>
+                      <p className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">Page Title — 3xl bold tight</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Top-level page headings · tracking-tight (-0.025em)</p>
+                    </div>
+                    <div>
+                      <p className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Section Heading — 2xl semibold tight</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Major content sections · tracking-tight (-0.025em)</p>
+                    </div>
+                    <div>
+                      <p className="text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Subsection — xl semibold tight</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Card titles, subsections · tracking-tight (-0.025em)</p>
+                    </div>
+                    <div>
+                      <p className="text-lg font-medium text-zinc-900 dark:text-zinc-100">Label — lg medium</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Form group labels, list headers</p>
+                    </div>
+                    <div>
+                      <p className="text-base text-zinc-700 dark:text-zinc-300">Body — base regular</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Primary body text</p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-zinc-500">Secondary — sm muted</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Descriptions, helper text, UI labels</p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-zinc-400">Caption — xs muted</p>
+                      <p className="text-xs font-mono text-zinc-400 mt-1">Timestamps, metadata, fine print</p>
+                    </div>
+                  </div>
+                </div>
+                <div style={{ paddingTop: '24px' }} className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">Font: Geist Mono (--font-mono)</div>
+                  <p className="font-mono text-base text-zinc-700 dark:text-zinc-300">Monospace for code, IDs, technical values</p>
+                </div>
+                <div style={{ paddingTop: '24px' }} className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">Button text sizes</div>
+                  <div className="flex items-center gap-4">
+                    <Button size="sm">sm: text-sm</Button>
+                    <Button size="default">default: text-sm</Button>
+                    <Button size="lg">lg: text-base</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Motion & Easing ─── */}
+          <Section title="5. Motion & Easing" description="Consistent timing and easing for all interactive elements. Fast enough to feel responsive, slow enough to notice.">
+            <Card>
+              <div className="space-y-6">
+                <div className="grid grid-cols-3 gap-6">
+                  <div className="space-y-2">
+                    <div className="text-base font-medium text-zinc-900 dark:text-zinc-100">Duration</div>
+                    <div className="space-y-1 text-base text-zinc-600 dark:text-zinc-400">
+                      <p><span className="font-mono text-xs">100ms</span> — micro-interactions (opacity)</p>
+                      <p><span className="font-mono text-xs">200ms</span> — default (buttons, cards, inputs)</p>
+                      <p><span className="font-mono text-xs">300ms</span> — layout shifts, panels</p>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-base font-medium text-zinc-900 dark:text-zinc-100">Easing</div>
+                    <div className="space-y-1 text-base text-zinc-600 dark:text-zinc-400">
+                      <p><span className="font-mono text-xs">ease-out</span> — default (feels snappy)</p>
+                      <p><span className="font-mono text-xs">ease-in-out</span> — layout animations</p>
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-base font-medium text-zinc-900 dark:text-zinc-100">Properties</div>
+                    <div className="space-y-1 text-base text-zinc-600 dark:text-zinc-400">
+                      <p>Never <span className="font-mono text-xs">transition-all</span></p>
+                      <p>Specify: <span className="font-mono text-xs">color, background, border, shadow, transform, opacity</span></p>
+                    </div>
+                  </div>
+                </div>
+                <div style={{ paddingTop: '16px' }}>
+                  <div className="text-xs font-mono text-zinc-400 mb-4">Live — hover these cards to see shadow transition</div>
+                  <div className="grid grid-cols-3 gap-4">
+                    {['Resting', 'Hover me', 'Hover me too'].map((label, i) => (
+                      <div
+                        key={label}
+                        className="bg-white dark:bg-zinc-800 rounded-2xl p-6 text-center text-base text-zinc-600 dark:text-zinc-400 cursor-default transition-shadow duration-200 ease-out"
+                        style={{ boxShadow: i === 0 ? shadow.md : shadow.md }}
+                        onMouseEnter={(e) => { if (i > 0) e.currentTarget.style.boxShadow = shadow.lg; }}
+                        onMouseLeave={(e) => { if (i > 0) e.currentTarget.style.boxShadow = shadow.md; }}
+                      >
+                        {label}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Border Radius ─── */}
+          <Section title="6. Border Radius" description="Two tiers: rounded-2xl (16px) for cards and containers, rounded-xl (12px) for buttons and inputs">
+            <Card>
+              <div className="grid grid-cols-3 gap-6">
+                {([
+                  { name: 'rounded-lg', desc: '8px — menus, tooltips', highlight: false },
+                  { name: 'rounded-xl', desc: '12px — buttons, inputs, badges', highlight: true },
+                  { name: 'rounded-2xl', desc: '16px — cards, containers, panels', highlight: true },
+                ] as const).map((r) => (
+                  <div key={r.name} className="text-center space-y-3">
+                    <div className={`${r.name} ${r.highlight ? 'bg-zinc-100' : 'bg-zinc-50'} h-20 w-full`} style={r.highlight ? { border: '2px solid #27272a' } : undefined} />
+                    <div>
+                      <div className={`text-base font-mono ${r.highlight ? 'text-zinc-900 dark:text-zinc-100 font-medium' : 'text-zinc-500'}`}>{r.name}</div>
+                      <div className="text-xs text-zinc-400 mt-0.5">{r.desc}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div style={{ marginTop: '32px', paddingTop: '24px' }}>
+                <div className="text-xs font-mono text-zinc-400" style={{ marginBottom: '16px' }}>In context</div>
+                <div className="flex gap-6 items-start">
+                  <div className="flex-1 bg-zinc-50 dark:bg-zinc-800 rounded-2xl p-6 space-y-3">
+                    <div className="text-base font-medium text-zinc-900 dark:text-zinc-100">Card (no border, bg contrast)</div>
+                    <input
+                      type="text"
+                      placeholder="Input (thick border) — click to see focus"
+                      className="ds-input w-full text-base bg-white dark:bg-zinc-800"
+                      style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #27272a' }}
+                    />
+                    <Button fullWidth>Button (no border, solid fill)</Button>
+                  </div>
+                  <div className="w-48 bg-white dark:bg-zinc-800 rounded-lg p-1.5 space-y-0.5" style={{ boxShadow: shadow.lg }}>
+                    <div className="text-xs text-zinc-400 px-2 py-1">Menu (shadow, no border)</div>
+                    <Button variant="menu">Option One</Button>
+                    <Button variant="menu">Option Two</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Button Variants ─── */}
+          <Section title="7. Button Variants">
+            <Card>
+              <div className="space-y-8">
+                {/* Primary */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">variant=&quot;primary&quot; (default) — Solid #819D9F, main actions</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button size="sm">Small</Button>
+                    <Button size="default">Default</Button>
+                    <Button size="lg">Large</Button>
+                    <Button disabled>Disabled</Button>
+                    <Button fullWidth>Full Width</Button>
+                  </div>
+                </div>
+
+                {/* Secondary */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">variant=&quot;secondary&quot; — 2px #18181b border, secondary actions</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button variant="secondary" size="sm">Small</Button>
+                    <Button variant="secondary">Default</Button>
+                    <Button variant="secondary" size="lg">Large</Button>
+                    <Button variant="secondary" disabled>Disabled</Button>
+                  </div>
+                </div>
+
+                {/* Ghost */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">variant=&quot;ghost&quot; — No border, tertiary / inline</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button variant="ghost" size="sm">Small</Button>
+                    <Button variant="ghost">Default</Button>
+                    <Button variant="ghost" size="lg">Large</Button>
+                    <Button variant="ghost" disabled>Disabled</Button>
+                  </div>
+                </div>
+
+                {/* Destructive */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">variant=&quot;destructive&quot; — 2px red border, dangerous actions</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button variant="destructive" size="sm">Delete</Button>
+                    <Button variant="destructive">Delete Item</Button>
+                    <Button variant="destructive" size="lg">Delete Everything</Button>
+                    <Button variant="destructive" disabled>Disabled</Button>
+                  </div>
+                </div>
+
+                {/* Accent */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">variant=&quot;accent&quot; — Solid #E57A44, upgrade / special CTA</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button variant="accent" size="sm">Upgrade</Button>
+                    <Button variant="accent">Upgrade Plan</Button>
+                    <Button variant="accent" size="lg">Upgrade Now</Button>
+                  </div>
+                </div>
+
+                {/* Menu */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">variant=&quot;menu&quot; — Full-width, left-aligned, dropdown items</div>
+                  <div className="w-56 bg-white dark:bg-zinc-800 rounded-lg p-1.5 space-y-0.5" style={{ boxShadow: shadow.lg }}>
+                    <Button variant="menu">Open Project</Button>
+                    <Button variant="menu">Settings</Button>
+                    <Button variant="menu">Log Out</Button>
+                  </div>
+                </div>
+
+                {/* Loading */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">loading=true — Spinner + disabled, any variant</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button loading>Saving...</Button>
+                    <Button variant="secondary" loading>Loading...</Button>
+                    <Button variant="accent" loading>Processing...</Button>
+                    <Button
+                      onClick={() => { setLoadingDemo(true); setTimeout(() => setLoadingDemo(false), 2000); }}
+                      loading={loadingDemo}
+                    >
+                      {loadingDemo ? 'Saving...' : 'Click to demo'}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Hover, Active & Disabled ─── */}
+          <Section title="8. Hover, Active & Disabled States" description="Hover to preview, click and hold for active press. Disabled buttons are desaturated.">
+            <Card>
+              <div className="space-y-8">
+                <div className="grid grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <Button size="lg" fullWidth>Primary — brightness(1.05)</Button>
+                    <div className="text-xs text-zinc-400 text-center">hover: subtle brighten · active: scale(0.98)</div>
+                  </div>
+                  <div className="space-y-2">
+                    <Button variant="secondary" size="lg" fullWidth>Secondary — bg-zinc-50</Button>
+                    <div className="text-xs text-zinc-400 text-center">hover: subtle fill · active: scale(0.98)</div>
+                  </div>
+                  <div className="space-y-2">
+                    <Button variant="ghost" size="lg" fullWidth>Ghost — bg-zinc-100</Button>
+                    <div className="text-xs text-zinc-400 text-center">hover: light fill · active: scale(0.98)</div>
+                  </div>
+                  <div className="space-y-2">
+                    <Button variant="destructive" size="lg" fullWidth>Destructive — bg-red-50</Button>
+                    <div className="text-xs text-zinc-400 text-center">hover: red tint fill · active: scale(0.98)</div>
+                  </div>
+                </div>
+                <div style={{ paddingTop: '16px' }}>
+                  <div className="text-xs font-mono text-zinc-400 mb-4">Disabled states — opacity(0.4) + grayscale</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button disabled>Primary</Button>
+                    <Button variant="secondary" disabled>Secondary</Button>
+                    <Button variant="ghost" disabled>Ghost</Button>
+                    <Button variant="destructive" disabled>Destructive</Button>
+                    <Button variant="accent" disabled>Accent</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Input Focus States ─── */}
+          <Section title="9. Input Focus States" description="Click into each input to see the focus transition. Border shifts to primary color with a soft glow.">
+            <Card>
+              <div className="space-y-6">
+                <div className="grid grid-cols-2 gap-8">
+                  <div className="space-y-2">
+                    <div className="text-xs font-mono text-zinc-400">Resting — 2px #18181b</div>
+                    <input
+                      type="text"
+                      placeholder="Click me to focus..."
+                      className="ds-input w-full text-base bg-white dark:bg-zinc-900"
+                      style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #27272a' }}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <div className="text-xs font-mono text-zinc-400">Focused — 2px #819D9F + glow</div>
+                    <input
+                      type="text"
+                      placeholder="Already showing focus style"
+                      className="w-full text-base bg-white dark:bg-zinc-900"
+                      style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #819D9F', boxShadow: '0 0 0 3px rgba(129, 157, 159, 0.15)', outline: 'none' }}
+                      readOnly
+                    />
+                  </div>
+                </div>
+                <div className="text-xs text-zinc-400">
+                  Transition: <span className="font-mono">border-color 200ms ease-out, box-shadow 200ms ease-out</span>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Focus Rings ─── */}
+          <Section title="10. Focus Rings" description="Tab through these buttons to see focus-visible rings">
+            <Card>
+              <div className="flex items-center gap-4 flex-wrap">
+                <Button>Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="destructive">Destructive</Button>
+                <Button variant="accent">Accent</Button>
+              </div>
+              <div className="text-xs text-zinc-400 mt-4">
+                All variants: ring-2 ring-zinc-400 ring-offset-2
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Loading States ─── */}
+          <Section title="11. Loading States" description="Skeleton shimmer for content placeholders, spinner for actions in progress.">
+            <Card>
+              <div className="space-y-8">
+                {/* Skeleton */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">Skeleton shimmer — content placeholders</div>
+                  <div className="bg-zinc-50 dark:bg-zinc-800 rounded-2xl p-6 space-y-4 max-w-md">
+                    <div className="flex items-center gap-3">
+                      <div className="skeleton w-10 h-10 rounded-full shrink-0" />
+                      <div className="flex-1 space-y-2">
+                        <div className="skeleton h-4 w-3/4" />
+                        <div className="skeleton h-3 w-1/2" />
+                      </div>
+                    </div>
+                    <div className="skeleton h-4 w-full" />
+                    <div className="skeleton h-4 w-5/6" />
+                    <div className="skeleton h-10 w-28" style={{ borderRadius: '12px' }} />
+                  </div>
+                </div>
+
+                {/* Spinner */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">Inline spinner — 2px border, currentColor, animate-spin</div>
+                  <div className="flex items-center gap-6">
+                    <div className="flex items-center gap-2 text-base text-zinc-600 dark:text-zinc-400">
+                      <span className="inline-block w-4 h-4 rounded-full animate-spin" style={{ border: '2px solid currentColor', borderTopColor: 'transparent' }} />
+                      Small (16px)
+                    </div>
+                    <div className="flex items-center gap-2 text-base text-zinc-600 dark:text-zinc-400">
+                      <span className="inline-block w-5 h-5 rounded-full animate-spin" style={{ border: '2px solid currentColor', borderTopColor: 'transparent' }} />
+                      Medium (20px)
+                    </div>
+                    <div className="flex items-center gap-2 text-base text-zinc-600 dark:text-zinc-400">
+                      <span className="inline-block w-6 h-6 rounded-full animate-spin" style={{ border: '2px solid currentColor', borderTopColor: 'transparent' }} />
+                      Large (24px)
+                    </div>
+                  </div>
+                </div>
+
+                {/* Loading buttons */}
+                <div className="space-y-3">
+                  <div className="text-xs font-mono text-zinc-400">Button loading prop — auto-disables + shows spinner</div>
+                  <div className="flex items-center gap-4 flex-wrap">
+                    <Button loading>Saving...</Button>
+                    <Button variant="secondary" loading>Loading...</Button>
+                    <Button variant="destructive" loading>Deleting...</Button>
+                    <Button variant="accent" loading>Processing...</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Toast / Notification Patterns ─── */}
+          <Section title="12. Toast & Notification Patterns" description="Static examples of feedback messages. Success uses primary tint, error uses destructive, info uses highlight.">
+            <Card>
+              <div className="space-y-4 max-w-md">
+                {/* Success */}
+                <div className="flex items-start gap-3 px-4 py-3 rounded-xl" style={{ backgroundColor: '#E8EEEF' }}>
+                  <span className="text-base mt-0.5" style={{ color: '#4A6365' }}>&#10003;</span>
+                  <div>
+                    <div className="text-base font-medium" style={{ color: '#4A6365' }}>Changes saved</div>
+                    <div className="text-sm mt-0.5" style={{ color: '#4A6365', opacity: 0.7 }}>Your project settings have been updated.</div>
+                  </div>
+                </div>
+
+                {/* Error */}
+                <div className="flex items-start gap-3 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-950">
+                  <span className="text-base mt-0.5 text-red-600 dark:text-red-400">&#10007;</span>
+                  <div>
+                    <div className="text-base font-medium text-red-700 dark:text-red-300">Failed to save</div>
+                    <div className="text-sm mt-0.5 text-red-600 dark:text-red-400" style={{ opacity: 0.8 }}>Network error. Please try again.</div>
+                  </div>
+                </div>
+
+                {/* Info */}
+                <div className="flex items-start gap-3 px-4 py-3 rounded-xl" style={{ backgroundColor: '#F9F7E8' }}>
+                  <span className="text-base mt-0.5" style={{ color: '#8B7D2F' }}>&#9432;</span>
+                  <div>
+                    <div className="text-base font-medium" style={{ color: '#8B7D2F' }}>New version available</div>
+                    <div className="text-sm mt-0.5" style={{ color: '#8B7D2F', opacity: 0.7 }}>Restart to apply the latest update.</div>
+                  </div>
+                </div>
+
+                {/* Warning / Accent */}
+                <div className="flex items-start gap-3 px-4 py-3 rounded-xl" style={{ backgroundColor: '#FCEEE6' }}>
+                  <span className="text-base mt-0.5" style={{ color: '#9E4A1E' }}>&#9888;</span>
+                  <div>
+                    <div className="text-base font-medium" style={{ color: '#9E4A1E' }}>Approaching limit</div>
+                    <div className="text-sm mt-0.5" style={{ color: '#9E4A1E', opacity: 0.7 }}>You&apos;ve used 90% of your free tier.</div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Composition Examples ─── */}
+          <Section title="13. Composition Examples" description="How components look together — cards use shadow + bg, not borders">
+
+            {/* Card with actions */}
+            <Card hover>
+              <div className="space-y-4">
+                <div className="text-xs font-mono text-zinc-400">Card with button group (hover for shadow lift)</div>
+                <div className="bg-zinc-50 dark:bg-zinc-800 rounded-2xl p-8 space-y-6">
+                  <div>
+                    <h3 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Project Settings</h3>
+                    <p className="text-base text-zinc-500 mt-2">Configure your project preferences and integrations.</p>
+                  </div>
+                  <div className="flex gap-3 justify-end">
+                    <Button variant="ghost">Cancel</Button>
+                    <Button>Save Changes</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            {/* Destructive confirmation */}
+            <Card hover>
+              <div className="space-y-4">
+                <div className="text-xs font-mono text-zinc-400">Destructive confirmation dialog</div>
+                <div className="bg-zinc-50 dark:bg-zinc-800 rounded-2xl p-8 space-y-6 max-w-md">
+                  <div>
+                    <h3 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">Delete Project?</h3>
+                    <p className="text-base text-zinc-500 mt-2">This action cannot be undone. All data will be permanently removed.</p>
+                  </div>
+                  <div className="flex gap-3 justify-end">
+                    <Button variant="secondary">Cancel</Button>
+                    <Button variant="destructive">Delete</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+
+            {/* Upgrade banner */}
+            <Card hover>
+              <div className="space-y-4">
+                <div className="text-xs font-mono text-zinc-400">Upgrade banner</div>
+                <div className="rounded-2xl p-8 flex items-center justify-between gap-8" style={{ backgroundColor: '#FCEEE6' }}>
+                  <div>
+                    <h3 className="text-lg font-semibold tracking-tight" style={{ color: '#9E4A1E' }}>Unlock Unlimited Use</h3>
+                    <p className="text-base mt-2" style={{ color: '#9E4A1E', opacity: 0.7 }}>You&apos;re on the free plan. Upgrade for full access.</p>
+                  </div>
+                  <Button variant="accent" size="lg">Upgrade</Button>
+                </div>
+              </div>
+            </Card>
+
+            {/* Form with inputs */}
+            <Card hover>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                <div className="text-xs font-mono text-zinc-400">Form — inputs get thick borders, focus shifts to primary</div>
+                <div className="bg-zinc-50 dark:bg-zinc-800 rounded-2xl" style={{ padding: '32px', maxWidth: '512px' }}>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '40px' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                      <label className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">First name</label>
+                      <input
+                        type="text"
+                        className="ds-input text-base bg-white dark:bg-zinc-900"
+                        style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #27272a' }}
+                      />
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                      <label className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Last name</label>
+                      <input
+                        type="text"
+                        className="ds-input text-base bg-white dark:bg-zinc-900"
+                        style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #27272a' }}
+                      />
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '40px' }}>
+                    <label className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Email</label>
+                    <input
+                      type="email"
+                      className="ds-input text-base bg-white dark:bg-zinc-900"
+                      style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #27272a', width: '100%' }}
+                    />
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '40px' }}>
+                    <label className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">Password</label>
+                    <input
+                      type="password"
+                      className="ds-input text-base bg-white dark:bg-zinc-900"
+                      style={{ padding: '16px 20px', borderRadius: '12px', border: '2px solid #27272a', width: '100%' }}
+                    />
+                  </div>
+                  <div style={{ paddingTop: '16px' }}>
+                    <Button fullWidth size="lg">Submit</Button>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+          {/* ─── Design Decisions ─── */}
+          <Section title="Design Decisions">
+            <Card>
+              <div className="space-y-6 text-base">
+                <p className="font-medium text-zinc-900 dark:text-zinc-100">Resolved</p>
+                <div className="space-y-4 text-zinc-700 dark:text-zinc-300">
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Border philosophy</strong> — Binary: thick (2px dark) on inputs, outlined buttons, and active states, or nothing. Cards use shadow + bg contrast.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Border radius tiers</strong> — rounded-2xl (16px) for cards, rounded-xl (12px) for buttons/inputs, rounded-lg (8px) for menus.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Spacing scale</strong> — Generous: p-8 card interiors, space-y-20 between page sections.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Typography</strong> — Satoshi with tracking-tight on all headings (xl+). Extended to 4xl display.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Input styling</strong> — Semibold text-lg labels, 2px dark border, generous padding. Focus: border shifts to #819D9F with soft glow.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Brand palette</strong> — Three colors with solid/tint/text shades: #819D9F (primary), #E57A44 (accent), #E3D985 (highlight).</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Official black</strong> — #18181b (zinc-900). Text, input borders, outlined buttons.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Motion</strong> — 200ms ease-out default. Specific transition properties only (never transition-all). active:scale(0.98) for press.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Elevation</strong> — Four shadow levels: sm (resting), md (default cards), lg (hover/raised), overlay (modals). Cards lift md→lg on hover.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Disabled states</strong> — opacity(0.4) + grayscale. More refined than flat opacity-50.</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="text-green-600 dark:text-green-400 shrink-0 font-mono text-xs mt-0.5">DECIDED</span>
+                    <p><strong>Destructive button</strong> — 2px red border + red text. Matches outlined button weight, clearly communicates danger.</p>
+                  </div>
+                </div>
+                <div style={{ paddingTop: '24px' }} className="space-y-4 text-zinc-700 dark:text-zinc-300">
+                  <p className="font-medium text-zinc-900 dark:text-zinc-100">Still open</p>
+                  <div className="flex gap-3">
+                    <span className="font-mono text-xs mt-0.5" style={{ color: '#8B7D2F' }}>OPEN</span>
+                    <p><strong>Sidebar warmth</strong> — Should --sidebar match the warm background tone, or stay cool neutral?</p>
+                  </div>
+                  <div className="flex gap-3">
+                    <span className="font-mono text-xs mt-0.5" style={{ color: '#8B7D2F' }}>OPEN</span>
+                    <p><strong>Focus ring color</strong> — Uniform zinc-400 for all, or variant-matched?</p>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </Section>
+
+        </div>
+      </div>
+    </div>
+  );
+}