diff --git a/src/app/page.tsx b/src/app/page.tsx
index f175318..c0675ed 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,11 +3,13 @@
 import * as React from 'react';
 import { matchSorter } from 'match-sorter';
 import { Accordion } from '@/components/Accordion';
+import { Collapsible } from '@/components/Collapsible';
 import { ActionBar, ActionBarLabel, ActionBarActions } from '@/components/ActionBar';
 import { Autocomplete } from '@/components/Autocomplete';
 import { Alert } from '@/components/Alert';
 import { AlertDialog } from '@/components/AlertDialog';
 import { Dialog } from '@/components/Dialog';
+import { Drawer } from '@/components/Drawer';
 import { Badge } from '@/components/Badge';
 import { Breadcrumb } from '@/components/Breadcrumb';
 import { Button } from '@/components/Button';
@@ -56,6 +58,7 @@ import {
 import { Toast, ToastVariant } from '@/components/Toast';
 import { Tooltip } from '@/components/Tooltip';
 import { Popover } from '@/components/Popover';
+import { PreviewCard } from '@/components/PreviewCard';
 import { Logo } from '@/components/Logo';
 import { Toggle, ToggleGroup } from '@/components/Toggle';
 // Data for combobox examples
@@ -1536,6 +1539,92 @@ function LiveDemo() {
   );
 }
 
+const drawerRequests = [
+  { id: 'ck8qs-177', method: 'GET', path: '/customers', status: 200, duration: '314ms', host: 'grid-k507nwxq0.vercel.app', cache: 'HIT' },
+  { id: 'ck8qs-178', method: 'POST', path: '/transactions', status: 201, duration: '892ms', host: 'grid-k507nwxq0.vercel.app', cache: 'MISS' },
+  { id: 'ck8qs-179', method: 'GET', path: '/fees', status: 200, duration: '156ms', host: 'grid-k507nwxq0.vercel.app', cache: 'HIT' },
+];
+
+function DrawerDemo() {
+  const [selected, setSelected] = React.useState<typeof drawerRequests[0] | null>(null);
+
+  return (
+    <div style={{ marginBottom: '128px' }}>
+      <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: 0 }}>
+        <thead>
+          <tr style={{ borderBottom: 'var(--stroke-xs) solid var(--border-primary)' }}>
+            <th className="label-sm" style={{ textAlign: 'left', padding: 'var(--spacing-xs) var(--spacing-sm)', color: 'var(--text-tertiary)' }}>Method</th>
+            <th className="label-sm" style={{ textAlign: 'left', padding: 'var(--spacing-xs) var(--spacing-sm)', color: 'var(--text-tertiary)' }}>Path</th>
+            <th className="label-sm" style={{ textAlign: 'right', padding: 'var(--spacing-xs) var(--spacing-sm)', color: 'var(--text-tertiary)' }}>Status</th>
+            <th className="label-sm" style={{ textAlign: 'right', padding: 'var(--spacing-xs) var(--spacing-sm)', color: 'var(--text-tertiary)' }}>Duration</th>
+          </tr>
+        </thead>
+        <tbody>
+          {drawerRequests.map((req) => (
+            <tr
+              key={req.id}
+              onClick={() => setSelected(req)}
+              style={{ borderBottom: 'var(--stroke-xs) solid var(--border-primary)', cursor: 'pointer' }}
+              onMouseOver={(e) => { e.currentTarget.style.backgroundColor = 'var(--surface-hover)'; }}
+              onMouseOut={(e) => { e.currentTarget.style.backgroundColor = ''; }}
+            >
+              <td className="body-sm" style={{ padding: 'var(--spacing-sm)', color: 'var(--text-primary)', fontFamily: 'var(--font-mono, monospace)' }}>{req.method}</td>
+              <td className="body-sm" style={{ padding: 'var(--spacing-sm)', color: 'var(--text-primary)', fontFamily: 'var(--font-mono, monospace)' }}>{req.path}</td>
+              <td className="body-sm" style={{ padding: 'var(--spacing-sm)', textAlign: 'right' }}>
+                <Badge variant={req.status < 300 ? 'green' : 'red'}>{req.status}</Badge>
+              </td>
+              <td className="body-sm" style={{ padding: 'var(--spacing-sm)', textAlign: 'right', color: 'var(--text-secondary)' }}>{req.duration}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <Drawer.Root open={!!selected} onOpenChange={(open) => { if (!open) setSelected(null); }} swipeDirection="right">
+        <Drawer.Portal>
+          <Drawer.Backdrop />
+          <Drawer.Viewport style={{ alignItems: 'stretch', justifyContent: 'flex-end' }}>
+            <Drawer.Popup>
+              {selected && (
+                <>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 'var(--spacing-md) var(--spacing-xl)', borderBottom: 'var(--stroke-xs) solid var(--border-primary)' }}>
+                    <span className="label" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-mono, monospace)' }}>
+                      {selected.method} {selected.path}
+                    </span>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
+                      <Badge variant={selected.status < 300 ? 'green' : 'red'}>{selected.status}</Badge>
+                      <Drawer.Close render={<Button variant="ghost" size="compact" iconOnly aria-label="Close" />}>
+                        <CentralIcon name="IconCrossSmall" size={16} />
+                      </Drawer.Close>
+                    </div>
+                  </div>
+                  <Drawer.Content>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-lg)' }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+                        {[
+                          ['Request ID', selected.id],
+                          ['Path', selected.path],
+                          ['Host', selected.host],
+                          ['Duration', selected.duration],
+                          ['Cache', selected.cache],
+                        ].map(([label, value]) => (
+                          <div key={label} style={{ display: 'flex', justifyContent: 'space-between', padding: 'var(--spacing-2xs) 0' }}>
+                            <span className="body-sm" style={{ color: 'var(--text-secondary)' }}>{label}</span>
+                            <span className="body-sm" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-mono, monospace)' }}>{value}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </Drawer.Content>
+                </>
+              )}
+            </Drawer.Popup>
+          </Drawer.Viewport>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </div>
+  );
+}
+
 export default function Home() {
   return (
     <main style={{ padding: '2rem', maxWidth: '600px' }}>
@@ -1577,7 +1666,6 @@ export default function Home() {
           </Accordion.Panel>
         </Accordion.Item>
       </Accordion.Root>
-      
       <h2 style={{ marginBottom: '1rem' }}>Action Bar Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
@@ -1605,7 +1693,6 @@ export default function Home() {
           </ActionBarActions>
         </ActionBar>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Alert Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
@@ -1614,7 +1701,6 @@ export default function Home() {
         <Alert variant="default" title="Title only alert" />
         <Alert variant="default" title="No icon alert" description="This alert has no icon." icon={false} />
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Alert Dialog Component</h2>
       
       <div style={{ display: 'flex', gap: '1rem', marginBottom: '128px' }}>
@@ -1664,76 +1750,9 @@ export default function Home() {
           </AlertDialog.Portal>
         </AlertDialog.Root>
       </div>
-      
-      <h2 style={{ marginBottom: '1rem' }}>Dialog Component</h2>
-      
-      <div style={{ display: 'flex', gap: '1rem', marginBottom: '128px' }}>
-        <Dialog.Root>
-          <Dialog.Trigger render={<Button variant="outline" />}>
-            Open Dialog
-          </Dialog.Trigger>
-          <Dialog.Portal>
-            <Dialog.Backdrop />
-            <Dialog.Popup>
-              <Dialog.CloseButton />
-              <Dialog.Header>
-                <Dialog.Title>Dialog Title</Dialog.Title>
-                <Dialog.Description>
-                  This is a description of the dialog content.
-                </Dialog.Description>
-              </Dialog.Header>
-              <Dialog.Content>
-                <p style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)' }}>
-                  Dialog content goes here. This area can contain forms, text, or any other content.
-                </p>
-              </Dialog.Content>
-              <Dialog.Footer>
-                <Dialog.Close render={<Button variant="outline" />}>
-                  Cancel
-                </Dialog.Close>
-                <Button variant="filled">
-                  Confirm
-                </Button>
-              </Dialog.Footer>
-            </Dialog.Popup>
-          </Dialog.Portal>
-        </Dialog.Root>
-
-        <Dialog.Root>
-          <Dialog.Trigger render={<Button variant="outline" />}>
-            Without Close Button
-          </Dialog.Trigger>
-          <Dialog.Portal>
-            <Dialog.Backdrop />
-            <Dialog.Popup>
-              <Dialog.Header>
-                <Dialog.Title>No Close Button</Dialog.Title>
-                <Dialog.Description>
-                  This dialog does not have an X close button.
-                </Dialog.Description>
-              </Dialog.Header>
-              <Dialog.Content>
-                <p style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)' }}>
-                  The user must use the footer buttons or press Escape to close.
-                </p>
-              </Dialog.Content>
-              <Dialog.Footer>
-                <Dialog.Close render={<Button variant="outline" />}>
-                  Cancel
-                </Dialog.Close>
-                <Dialog.Close render={<Button variant="filled" />}>
-                  Done
-                </Dialog.Close>
-              </Dialog.Footer>
-            </Dialog.Popup>
-          </Dialog.Portal>
-        </Dialog.Root>
-      </div>
-
       <h2 style={{ marginBottom: '1rem' }}>Autocomplete Component</h2>
       
       <AutocompleteExamples />
-      
       <h2 style={{ marginBottom: '1rem' }}>Badge Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
@@ -1760,7 +1779,6 @@ export default function Home() {
           <Badge variant="red" vibrant>Label</Badge>
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Breadcrumb Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px' }}>
@@ -1818,7 +1836,6 @@ export default function Home() {
           </Breadcrumb.Root>
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Button Component</h2>
       
       {/* Variants */}
@@ -1871,7 +1888,6 @@ export default function Home() {
         <Button variant="link" size="compact">Compact link</Button>
         <Button variant="link" disabled>Disabled link</Button>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Button Group</h2>
 
       <div style={{ display: 'flex', gap: '2rem', alignItems: 'flex-start', marginBottom: '1rem' }}>
@@ -1933,247 +1949,462 @@ export default function Home() {
           </ButtonGroup>
         </div>
       </div>
+      <h2 style={{ marginBottom: '1rem' }}>Card Component</h2>
+      
+      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', alignItems: 'flex-start', marginBottom: '128px' }}>
+        <Card.Root variant="structured" style={{ width: 360 }}>
+          <Card.Header>
+            <Card.TitleGroup>
+              <Card.Title>Structured</Card.Title>
+              <Card.Subtitle>With card surface</Card.Subtitle>
+            </Card.TitleGroup>
+          </Card.Header>
+          <Card.Body>
+            <p>Body content with sectioned layout.</p>
+          </Card.Body>
+          <Card.Footer>
+            <Button>Button</Button>
+          </Card.Footer>
+        </Card.Root>
 
-      <h2 style={{ marginBottom: '1rem' }}>Textarea</h2>
+        <Card.Root variant="simple" style={{ width: 360 }}>
+          <Card.TitleGroup>
+            <Card.Title>Simple</Card.Title>
+            <Card.Subtitle>No card surface</Card.Subtitle>
+          </Card.TitleGroup>
+          <Card.Body>
+            <p>Body content with uniform padding.</p>
+          </Card.Body>
+          <Button>Button</Button>
+        </Card.Root>
+      </div>
+      <h2 style={{ marginBottom: '1rem' }}>Charts</h2>
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: 300, marginBottom: '2rem' }}>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Default
-          </span>
-          <Textarea placeholder="Placeholder" />
-        </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Filled
-          </span>
-          <Textarea defaultValue="Content" />
+      <h3 style={{ marginBottom: '0.75rem' }}>Line</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Multi-series with grid</p>
+          <Chart.Line
+            data={[
+              { date: 'Mon', incoming: 120, outgoing: 80 },
+              { date: 'Tue', incoming: 150, outgoing: 95 },
+              { date: 'Wed', incoming: 140, outgoing: 110 },
+              { date: 'Thu', incoming: 180, outgoing: 100 },
+              { date: 'Fri', incoming: 160, outgoing: 130 },
+            ]}
+            series={[
+              { key: 'incoming', label: 'Incoming' },
+              { key: 'outgoing', label: 'Outgoing' },
+            ]}
+            xKey="date"
+            height={200}
+            grid
+            tooltip
+          />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Disabled
-          </span>
-          <Textarea placeholder="Placeholder" disabled />
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Area fill + compact tooltip</p>
+          <Chart.Line
+            data={[
+              { date: 'Mon', value: 120 },
+              { date: 'Tue', value: 150 },
+              { date: 'Wed', value: 140 },
+              { date: 'Thu', value: 180 },
+              { date: 'Fri', value: 160 },
+              { date: 'Sat', value: 200 },
+              { date: 'Sun', value: 190 },
+            ]}
+            dataKey="value"
+            xKey="date"
+            height={200}
+            grid
+            fill
+            tooltip="compact"
+          />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Invalid
-          </span>
-          <Textarea defaultValue="Invalid content" data-invalid="" />
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Dashed + dotted series</p>
+          <Chart.Line
+            data={[
+              { date: 'Jan', actual: 100, projected: 110, target: 130 },
+              { date: 'Feb', actual: 120, projected: 125, target: 130 },
+              { date: 'Mar', actual: 115, projected: 140, target: 130 },
+              { date: 'Apr', actual: 140, projected: 155, target: 130 },
+              { date: 'May', actual: 160, projected: 170, target: 130 },
+            ]}
+            series={[
+              { key: 'actual', label: 'Actual' },
+              { key: 'projected', label: 'Projected', style: 'dashed' },
+              { key: 'target', label: 'Target', style: 'dotted', color: 'var(--text-tertiary)' },
+            ]}
+            xKey="date"
+            height={200}
+            grid
+            tooltip
+          />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            With Field
-          </span>
-          <Field.Root>
-            <Field.Label>Description</Field.Label>
-            <Textarea placeholder="Enter a description..." rows={4} />
-            <Field.Description>
-              Provide additional details
-            </Field.Description>
-          </Field.Root>
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Reference lines</p>
+          <Chart.Line
+            data={[
+              { date: 'Mon', value: 85 },
+              { date: 'Tue', value: 92 },
+              { date: 'Wed', value: 78 },
+              { date: 'Thu', value: 95 },
+              { date: 'Fri', value: 88 },
+            ]}
+            dataKey="value"
+            xKey="date"
+            height={200}
+            grid
+            tooltip
+            referenceLines={[
+              { value: 90, label: 'Target' },
+              { value: 75, label: 'Minimum' },
+            ]}
+          />
         </div>
       </div>
 
-      <h2 style={{ marginBottom: '1rem' }}>Textarea Group</h2>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: 400, marginBottom: '2rem' }}>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Default
-          </span>
-          <TextareaGroup.Root>
-            <TextareaGroup.Textarea placeholder="Write a message..." />
-          </TextareaGroup.Root>
+      <h3 style={{ marginBottom: '0.75rem' }}>Tooltip Modes</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 280 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>simple</p>
+          <Chart.Line
+            data={[
+              { d: 'Aug 10', v: 180 }, { d: 'Aug 11', v: 185 }, { d: 'Aug 12', v: 182 },
+              { d: 'Aug 13', v: 188 }, { d: 'Aug 14', v: 190 }, { d: 'Aug 15', v: 195 },
+            ]}
+            dataKey="v" xKey="d" height={160} grid tooltip="simple"
+          />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            With Header
-          </span>
-          <TextareaGroup.Root>
-            <TextareaGroup.Header>
-              <Chip onDismiss={() => {}}>recipient-1</Chip>
-              <Chip onDismiss={() => {}}>recipient-2</Chip>
-            </TextareaGroup.Header>
-            <TextareaGroup.Textarea placeholder="Write a message..." />
-          </TextareaGroup.Root>
+        <div style={{ width: 280 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>compact</p>
+          <Chart.Line
+            data={[
+              { d: 'Aug 10', v: 180 }, { d: 'Aug 11', v: 185 }, { d: 'Aug 12', v: 182 },
+              { d: 'Aug 13', v: 188 }, { d: 'Aug 14', v: 190 }, { d: 'Aug 15', v: 195 },
+            ]}
+            dataKey="v" xKey="d" height={160} grid tooltip="compact"
+          />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Full Composer
-          </span>
-          <TextareaGroup.Root>
-            <TextareaGroup.Header>
-              <Chip onDismiss={() => {}}>tag-1</Chip>
-              <Chip onDismiss={() => {}}>tag-2</Chip>
-            </TextareaGroup.Header>
-            <TextareaGroup.Textarea placeholder="Write a message..." />
-            <TextareaGroup.Footer>
-              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                <Chip onDismiss={() => {}}>label</Chip>
-              </div>
-              <div>
-                <Button>Send</Button>
-              </div>
-            </TextareaGroup.Footer>
-          </TextareaGroup.Root>
+        <div style={{ width: 280 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>detailed</p>
+          <Chart.Line
+            data={[
+              { d: 'Mon', a: 120, b: 80 }, { d: 'Tue', a: 150, b: 95 },
+              { d: 'Wed', a: 140, b: 110 }, { d: 'Thu', a: 180, b: 100 },
+            ]}
+            series={[{ key: 'a', label: 'Incoming' }, { key: 'b', label: 'Outgoing' }]}
+            xKey="d" height={160} grid tooltip="detailed"
+          />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            With Max Height (200px)
-          </span>
-          <TextareaGroup.Root maxHeight={200}>
-            <TextareaGroup.Textarea
-              placeholder="Write a long prompt..."
-              defaultValue={'This is a long prompt that grows.\n'.repeat(15)}
-            />
-            <TextareaGroup.Footer>
-              <div />
-              <div>
-                <Button>Send</Button>
-              </div>
-            </TextareaGroup.Footer>
-          </TextareaGroup.Root>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>Live (Real-Time)</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 500 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Streaming data (random walk)</p>
+          <LiveDemo />
         </div>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>Live Primitives</h3>
+      <div style={{ display: 'flex', gap: '2rem', alignItems: 'center', marginBottom: '2rem' }}>
         <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Disabled
-          </span>
-          <TextareaGroup.Root disabled>
-            <TextareaGroup.Textarea placeholder="Write a message..." />
-          </TextareaGroup.Root>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>LiveValue</p>
+          <LiveValueDemo />
         </div>
-        <div>
-          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
-            Invalid
-          </span>
-          <TextareaGroup.Root invalid>
-            <TextareaGroup.Textarea defaultValue="Bad content" />
-          </TextareaGroup.Root>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <div style={{ textAlign: 'center' }}>
+            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>active</p>
+            <Chart.LiveDot status="active" />
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>processing</p>
+            <Chart.LiveDot status="processing" />
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>idle</p>
+            <Chart.LiveDot status="idle" />
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>error</p>
+            <Chart.LiveDot status="error" />
+          </div>
         </div>
       </div>
 
-      <h2 style={{ marginBottom: '1rem' }}>Input Group</h2>
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: 300, marginBottom: '1rem' }}>
-        <InputGroup.Root>
-          <InputGroup.Addon>
-            <CentralIcon name="IconMagnifyingGlass2" size={16} />
-          </InputGroup.Addon>
-          <InputGroup.Input placeholder="Search..." />
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Input placeholder="Search..." />
-          <InputGroup.Button>Search</InputGroup.Button>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Input placeholder="Search..." />
-          <InputGroup.Button variant="outline">Search</InputGroup.Button>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Input placeholder="0.00" />
-          <InputGroup.SelectTrigger>USD</InputGroup.SelectTrigger>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Input placeholder="0.00" />
-          <InputGroup.SelectTrigger variant="outline">USD</InputGroup.SelectTrigger>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Cap>https://</InputGroup.Cap>
-          <InputGroup.Input placeholder="example.com" />
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Input placeholder="Enter value..." />
-          <InputGroup.Cap>
-            <InputGroup.Button>Copy</InputGroup.Button>
-          </InputGroup.Cap>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Cap>
-            <InputGroup.Button aria-label="Search">
-              <CentralIcon name="IconMagnifyingGlass2" size={16} />
-            </InputGroup.Button>
-          </InputGroup.Cap>
-          <InputGroup.Input placeholder="Search..." />
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Cap>https://</InputGroup.Cap>
-          <InputGroup.Input placeholder="your-domain.com" />
-          <InputGroup.Cap>
-            <InputGroup.Button>Go</InputGroup.Button>
-          </InputGroup.Cap>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Input defaultValue="sk_live_abc123..." />
-          <InputGroup.Cap>
-            <InputGroup.Button aria-label="Copy to clipboard">
-              <CentralIcon name="IconClipboard2" size={16} />
-            </InputGroup.Button>
-          </InputGroup.Cap>
-        </InputGroup.Root>
-
-        <InputGroup.Root>
-          <InputGroup.Text>$</InputGroup.Text>
-          <InputGroup.Input placeholder="0.00" />
-          <InputGroup.Text>USD</InputGroup.Text>
-        </InputGroup.Root>
-
-        <InputGroup.Root disabled>
-          <InputGroup.Addon>
-            <CentralIcon name="IconMagnifyingGlass2" size={16} />
-          </InputGroup.Addon>
-          <InputGroup.Input placeholder="Disabled" />
-        </InputGroup.Root>
-
-        <InputGroup.Root invalid>
-          <InputGroup.Addon>
-            <CentralIcon name="IconMagnifyingGlass2" size={16} />
-          </InputGroup.Addon>
-          <InputGroup.Input defaultValue="Invalid" />
-        </InputGroup.Root>
+      <h3 style={{ marginBottom: '0.75rem' }}>Sparkline</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', marginBottom: '2rem' }}>
+        <div style={{ width: 160 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Line</p>
+          <Chart.Sparkline
+            data={[{ v: 10 }, { v: 15 }, { v: 12 }, { v: 18 }, { v: 14 }, { v: 22 }, { v: 19 }, { v: 25 }]}
+            dataKey="v"
+          />
+        </div>
+        <div style={{ width: 160 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Line</p>
+          <Chart.Sparkline
+            data={[{ v: 25 }, { v: 22 }, { v: 24 }, { v: 18 }, { v: 20 }, { v: 15 }, { v: 12 }, { v: 10 }]}
+            dataKey="v"
+            color="var(--color-blue-500)"
+          />
+        </div>
+        <div style={{ width: 300 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Bar</p>
+          <Chart.Sparkline
+            variant="bar"
+            data={[
+              { v: 12 }, { v: 18 }, { v: 15 }, { v: 22 }, { v: 20 }, { v: 14 }, { v: 25 }, { v: 19 },
+              { v: 16 }, { v: 21 }, { v: 13 }, { v: 24 }, { v: 17 }, { v: 23 }, { v: 11 }, { v: 20 },
+              { v: 18 }, { v: 26 }, { v: 15 }, { v: 22 }, { v: 19 }, { v: 14 }, { v: 21 }, { v: 16 },
+            ]}
+            dataKey="v"
+            color="var(--color-blue-400)"
+          />
+        </div>
       </div>
 
-      <div style={{ marginBottom: '128px' }} />
+      <h3 style={{ marginBottom: '0.75rem' }}>Stacked Area</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 500 }}>
+          <Chart.StackedArea
+            data={[
+              { month: 'Jan', payments: 400, transfers: 200, fees: 50 },
+              { month: 'Feb', payments: 450, transfers: 250, fees: 60 },
+              { month: 'Mar', payments: 420, transfers: 280, fees: 55 },
+              { month: 'Apr', payments: 500, transfers: 300, fees: 70 },
+              { month: 'May', payments: 480, transfers: 320, fees: 65 },
+              { month: 'Jun', payments: 550, transfers: 350, fees: 80 },
+            ]}
+            series={[
+              { key: 'payments', label: 'Payments', color: 'var(--color-blue-700)' },
+              { key: 'transfers', label: 'Transfers', color: 'var(--color-blue-400)' },
+              { key: 'fees', label: 'Fees', color: 'var(--color-blue-200)' },
+            ]}
+            xKey="month"
+            height={250}
+            grid
+            tooltip
+          />
+        </div>
+      </div>
 
-      <h2 style={{ marginBottom: '1rem' }}>Card Component</h2>
-      
-      <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap', alignItems: 'flex-start', marginBottom: '128px' }}>
-        <Card.Root variant="structured" style={{ width: 360 }}>
-          <Card.Header>
-            <Card.TitleGroup>
-              <Card.Title>Structured</Card.Title>
-              <Card.Subtitle>With card surface</Card.Subtitle>
-            </Card.TitleGroup>
-          </Card.Header>
-          <Card.Body>
-            <p>Body content with sectioned layout.</p>
-          </Card.Body>
-          <Card.Footer>
-            <Button>Button</Button>
-          </Card.Footer>
-        </Card.Root>
+      <h3 style={{ marginBottom: '0.75rem' }}>Bar</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Grouped</p>
+          <Chart.Bar
+            data={[
+              { month: 'Jan', incoming: 400, outgoing: 240 },
+              { month: 'Feb', incoming: 500, outgoing: 300 },
+              { month: 'Mar', incoming: 450, outgoing: 280 },
+              { month: 'Apr', incoming: 600, outgoing: 350 },
+              { month: 'May', incoming: 550, outgoing: 320 },
+            ]}
+            series={[
+              { key: 'incoming', label: 'Incoming' },
+              { key: 'outgoing', label: 'Outgoing' },
+            ]}
+            xKey="month" height={220} grid tooltip
+          />
+        </div>
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Stacked</p>
+          <Chart.Bar
+            data={[
+              { q: 'Q1', payments: 400, transfers: 200, fees: 50 },
+              { q: 'Q2', payments: 500, transfers: 250, fees: 60 },
+              { q: 'Q3', payments: 450, transfers: 280, fees: 55 },
+              { q: 'Q4', payments: 600, transfers: 300, fees: 70 },
+            ]}
+            series={[
+              { key: 'payments', label: 'Payments', color: 'var(--color-blue-700)' },
+              { key: 'transfers', label: 'Transfers', color: 'var(--color-blue-400)' },
+              { key: 'fees', label: 'Fees', color: 'var(--color-blue-200)' },
+            ]}
+            xKey="q" height={220} grid tooltip stacked
+          />
+        </div>
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Horizontal</p>
+          <Chart.Bar
+            data={[
+              { country: 'US', volume: 4200 },
+              { country: 'UK', volume: 2800 },
+              { country: 'EU', volume: 3100 },
+              { country: 'JP', volume: 1500 },
+              { country: 'BR', volume: 900 },
+            ]}
+            dataKey="volume"
+            xKey="country"
+            height={220}
+            grid
+            tooltip
+            orientation="horizontal"
+          />
+        </div>
+        <div style={{ width: 388 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Single series + reference</p>
+          <Chart.Bar
+            data={[
+              { day: 'Mon', count: 12 }, { day: 'Tue', count: 18 },
+              { day: 'Wed', count: 15 }, { day: 'Thu', count: 22 }, { day: 'Fri', count: 20 },
+            ]}
+            dataKey="count" xKey="day" height={220} grid tooltip
+            referenceLines={[{ value: 17, label: 'Average' }]}
+          />
+        </div>
+      </div>
 
-        <Card.Root variant="simple" style={{ width: 360 }}>
-          <Card.TitleGroup>
-            <Card.Title>Simple</Card.Title>
-            <Card.Subtitle>No card surface</Card.Subtitle>
-          </Card.TitleGroup>
-          <Card.Body>
-            <p>Body content with uniform padding.</p>
-          </Card.Body>
-          <Button>Button</Button>
-        </Card.Root>
+      <h3 style={{ marginBottom: '0.75rem' }}>Composed</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 500 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Bar + line, dual Y-axes</p>
+          <Chart.Composed
+            data={[
+              { month: 'Jan', revenue: 4200, rate: 3.2 },
+              { month: 'Feb', revenue: 5100, rate: 3.8 },
+              { month: 'Mar', revenue: 4800, rate: 3.5 },
+              { month: 'Apr', revenue: 6200, rate: 4.1 },
+              { month: 'May', revenue: 5800, rate: 3.9 },
+              { month: 'Jun', revenue: 7100, rate: 4.5 },
+            ]}
+            series={[
+              { key: 'revenue', label: 'Revenue', type: 'bar', color: 'var(--color-blue-300)' },
+              { key: 'rate', label: 'Conversion %', type: 'line', axis: 'right', color: 'var(--text-primary)' },
+            ]}
+            xKey="month" height={250} grid tooltip
+            formatYLabelRight={(v) => `${v}%`}
+          />
+        </div>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>Uptime</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 500 }}>
+          <Chart.Uptime
+            data={Array.from({ length: 90 }, (_, i) => ({
+              status: (i === 12 ? 'down' : i === 34 ? 'degraded' : i === 67 ? 'down' : i === 45 ? 'degraded' : 'up') as 'up' | 'down' | 'degraded',
+              label: `Day ${i + 1}`,
+            }))}
+          />
+        </div>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>Activity Grid</h3>
+      <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Weekly (with labels)</p>
+          <Chart.ActivityGrid
+            rows={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
+            columns={Array.from({ length: 20 }, (_, i) => `W${i + 1}`)}
+            showRowLabels
+            showColumnLabels
+            data={Array.from({ length: 20 }, (_, ci) =>
+              ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, di) => ({
+                row: day,
+                col: `W${ci + 1}`,
+                value: ((ci * 7 + di * 3 + 5) % 10),
+              })),
+            ).flat()}
+          />
+        </div>
+        <div>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Hourly over 7 days</p>
+          <Chart.ActivityGrid
+            rows={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
+            columns={Array.from({ length: 24 }, (_, i) => `${i}h`)}
+            cellSize={10}
+            cellGap={1}
+            color="var(--color-green-500)"
+            data={Array.from({ length: 24 }, (_, ci) =>
+              ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, di) => ({
+                row: day,
+                col: `${ci}h`,
+                value: ((ci * 3 + di * 7 + 2) % 19),
+              })),
+            ).flat()}
+          />
+        </div>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>Gauge</h3>
+      <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 280 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Default</p>
+          <Chart.Gauge
+            value={0.32}
+            min={0}
+            max={1}
+            thresholds={[
+              { upTo: 0.5, color: 'var(--color-green-500)', label: 'Great' },
+              { upTo: 0.8, color: 'var(--color-yellow-500)', label: 'Needs work' },
+              { upTo: 1, color: 'var(--color-red-500)', label: 'Poor' },
+            ]}
+            markerLabel="P75"
+            formatValue={(v) => `${v.toFixed(2)}s`}
+          />
+        </div>
+        <div style={{ width: 280 }}>
+          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Minimal</p>
+          <Chart.Gauge
+            value={0.32}
+            min={0}
+            max={1}
+            variant="minimal"
+            thresholds={[
+              { upTo: 0.5, color: 'var(--color-green-500)', label: 'Great' },
+              { upTo: 0.8, color: 'var(--color-yellow-500)', label: 'Needs work' },
+              { upTo: 1, color: 'var(--color-red-500)', label: 'Poor' },
+            ]}
+            formatValue={(v) => `${v.toFixed(2)}s`}
+          />
+        </div>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>BarList</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
+        <div style={{ width: 400 }}>
+          <Chart.BarList
+            data={[
+              { name: '/', value: 2340, displayValue: '0.28s' },
+              { name: '/pricing', value: 326, displayValue: '0.34s' },
+              { name: '/blog', value: 148, displayValue: '0.31s' },
+              { name: '/docs', value: 89, displayValue: '0.42s' },
+              { name: '/about', value: 45, displayValue: '0.25s' },
+            ]}
+          />
+        </div>
+      </div>
+
+      <h3 style={{ marginBottom: '0.75rem' }}>Donut</h3>
+      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '128px' }}>
+        <div style={{ width: 388 }}>
+          <Chart.Pie
+            data={[
+              { name: 'Payments', value: 4200, color: 'var(--color-blue-700)' },
+              { name: 'Transfers', value: 2800, color: 'var(--color-blue-500)' },
+              { name: 'Fees', value: 650, color: 'var(--color-blue-300)' },
+              { name: 'Refunds', value: 320, color: 'var(--color-blue-100)' },
+            ]}
+            height={200}
+          />
+        </div>
+        <div style={{ width: 388 }}>
+          <Chart.Pie
+            data={[
+              { name: 'USD', value: 58, color: 'var(--color-blue-700)' },
+              { name: 'EUR', value: 22, color: 'var(--color-blue-500)' },
+              { name: 'GBP', value: 12, color: 'var(--color-blue-300)' },
+              { name: 'Other', value: 8, color: 'var(--color-blue-100)' },
+            ]}
+            height={200}
+          />
+        </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Checkbox Component</h2>
       
       <div style={{ display: 'flex', gap: '3rem', marginBottom: '128px' }}>
@@ -2207,7 +2438,6 @@ export default function Home() {
           <Checkbox.Error match>Error text goes here.</Checkbox.Error>
         </Checkbox.Field>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Chip Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
@@ -2236,47 +2466,136 @@ export default function Home() {
           <Chip>label</Chip>
         </div>
       </div>
-      
+      <h2 style={{ marginBottom: '1rem' }}>Collapsible</h2>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-lg)', marginBottom: '128px', maxWidth: 480 }}>
+        <Collapsible.Root>
+          <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+          <Collapsible.Panel>
+            These settings are for experienced users. Adjust log level, enable
+            debug mode, and configure custom telemetry endpoints.
+          </Collapsible.Panel>
+        </Collapsible.Root>
+
+        <Collapsible.Root defaultOpen>
+          <Collapsible.Trigger>Details</Collapsible.Trigger>
+          <Collapsible.Panel>
+            This panel starts open by default. Useful for content that should be
+            visible on first load but dismissable.
+          </Collapsible.Panel>
+        </Collapsible.Root>
+
+        <Collapsible.Root disabled>
+          <Collapsible.Trigger>Locked section</Collapsible.Trigger>
+          <Collapsible.Panel>
+            This content is locked.
+          </Collapsible.Panel>
+        </Collapsible.Root>
+      </div>
       <h2 style={{ marginBottom: '1rem' }}>Combobox Component</h2>
       
       <ComboboxExamples />
-      
       <h2 style={{ marginBottom: '1rem' }}>Command Component</h2>
       
       <CommandDemo />
-      
       <h2 style={{ marginBottom: '1rem' }}>Context Menu Component</h2>
       
       <ContextMenuExamples />
+      <h2 style={{ marginBottom: '1rem' }}>Dialog Component</h2>
       
-      <h2 style={{ marginBottom: '1rem' }}>Field Component</h2>
-      
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px', width: '256px' }}>
-        <Field.Root>
-          <Field.Label>Default</Field.Label>
-          <Input placeholder="Placeholder" />
-          <Field.Description>Help text goes here.</Field.Description>
-        </Field.Root>
-
-        <Field.Root>
-          <Field.Label>Filled</Field.Label>
-          <Input defaultValue="Content" />
-          <Field.Description>Help text goes here.</Field.Description>
-        </Field.Root>
-
-        <Field.Root disabled>
-          <Field.Label>Disabled</Field.Label>
-          <Input placeholder="Placeholder" />
-          <Field.Description>Help text goes here.</Field.Description>
-        </Field.Root>
-
-        <Field.Root invalid>
-          <Field.Label>Invalid</Field.Label>
-          <Input placeholder="Placeholder" />
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '128px' }}>
+        <Dialog.Root>
+          <Dialog.Trigger render={<Button variant="outline" />}>
+            Open Dialog
+          </Dialog.Trigger>
+          <Dialog.Portal>
+            <Dialog.Backdrop />
+            <Dialog.Popup>
+              <Dialog.CloseButton />
+              <Dialog.Header>
+                <Dialog.Title>Dialog Title</Dialog.Title>
+                <Dialog.Description>
+                  This is a description of the dialog content.
+                </Dialog.Description>
+              </Dialog.Header>
+              <Dialog.Content>
+                <p style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)' }}>
+                  Dialog content goes here. This area can contain forms, text, or any other content.
+                </p>
+              </Dialog.Content>
+              <Dialog.Footer>
+                <Dialog.Close render={<Button variant="outline" />}>
+                  Cancel
+                </Dialog.Close>
+                <Button variant="filled">
+                  Confirm
+                </Button>
+              </Dialog.Footer>
+            </Dialog.Popup>
+          </Dialog.Portal>
+        </Dialog.Root>
+
+        <Dialog.Root>
+          <Dialog.Trigger render={<Button variant="outline" />}>
+            Without Close Button
+          </Dialog.Trigger>
+          <Dialog.Portal>
+            <Dialog.Backdrop />
+            <Dialog.Popup>
+              <Dialog.Header>
+                <Dialog.Title>No Close Button</Dialog.Title>
+                <Dialog.Description>
+                  This dialog does not have an X close button.
+                </Dialog.Description>
+              </Dialog.Header>
+              <Dialog.Content>
+                <p style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)' }}>
+                  The user must use the footer buttons or press Escape to close.
+                </p>
+              </Dialog.Content>
+              <Dialog.Footer>
+                <Dialog.Close render={<Button variant="outline" />}>
+                  Cancel
+                </Dialog.Close>
+                <Dialog.Close render={<Button variant="filled" />}>
+                  Done
+                </Dialog.Close>
+              </Dialog.Footer>
+            </Dialog.Popup>
+          </Dialog.Portal>
+        </Dialog.Root>
+      </div>
+      <h2 style={{ marginBottom: '1rem' }}>Drawer</h2>
+
+      <DrawerDemo />
+
+      <h2 style={{ marginBottom: '1rem' }}>Field Component</h2>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px', width: '256px' }}>
+        <Field.Root>
+          <Field.Label>Default</Field.Label>
+          <Input placeholder="Placeholder" />
+          <Field.Description>Help text goes here.</Field.Description>
+        </Field.Root>
+
+        <Field.Root>
+          <Field.Label>Filled</Field.Label>
+          <Input defaultValue="Content" />
+          <Field.Description>Help text goes here.</Field.Description>
+        </Field.Root>
+
+        <Field.Root disabled>
+          <Field.Label>Disabled</Field.Label>
+          <Input placeholder="Placeholder" />
+          <Field.Description>Help text goes here.</Field.Description>
+        </Field.Root>
+
+        <Field.Root invalid>
+          <Field.Label>Invalid</Field.Label>
+          <Input placeholder="Placeholder" />
           <Field.Error>Error text goes here.</Field.Error>
         </Field.Root>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Fieldset Component</h2>
       
       <div style={{ display: 'flex', gap: '3rem', marginBottom: '128px' }}>
@@ -2313,7 +2632,6 @@ export default function Home() {
           </Fieldset.Root>
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Form Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', width: '256px' }}>
@@ -2330,7 +2648,6 @@ export default function Home() {
           <Button type="submit">Sign In</Button>
         </Form>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Input Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px', maxWidth: '256px' }}>
@@ -2351,7 +2668,96 @@ export default function Home() {
           <Input defaultValue="Read only content" readOnly />
         </div>
       </div>
-      
+      <h2 style={{ marginBottom: '1rem' }}>Input Group</h2>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: 300, marginBottom: '1rem' }}>
+        <InputGroup.Root>
+          <InputGroup.Addon>
+            <CentralIcon name="IconMagnifyingGlass2" size={16} />
+          </InputGroup.Addon>
+          <InputGroup.Input placeholder="Search..." />
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Input placeholder="Search..." />
+          <InputGroup.Button>Search</InputGroup.Button>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Input placeholder="Search..." />
+          <InputGroup.Button variant="outline">Search</InputGroup.Button>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Input placeholder="0.00" />
+          <InputGroup.SelectTrigger>USD</InputGroup.SelectTrigger>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Input placeholder="0.00" />
+          <InputGroup.SelectTrigger variant="outline">USD</InputGroup.SelectTrigger>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Cap>https://</InputGroup.Cap>
+          <InputGroup.Input placeholder="example.com" />
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Input placeholder="Enter value..." />
+          <InputGroup.Cap>
+            <InputGroup.Button>Copy</InputGroup.Button>
+          </InputGroup.Cap>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Cap>
+            <InputGroup.Button aria-label="Search">
+              <CentralIcon name="IconMagnifyingGlass2" size={16} />
+            </InputGroup.Button>
+          </InputGroup.Cap>
+          <InputGroup.Input placeholder="Search..." />
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Cap>https://</InputGroup.Cap>
+          <InputGroup.Input placeholder="your-domain.com" />
+          <InputGroup.Cap>
+            <InputGroup.Button>Go</InputGroup.Button>
+          </InputGroup.Cap>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Input defaultValue="sk_live_abc123..." />
+          <InputGroup.Cap>
+            <InputGroup.Button aria-label="Copy to clipboard">
+              <CentralIcon name="IconClipboard2" size={16} />
+            </InputGroup.Button>
+          </InputGroup.Cap>
+        </InputGroup.Root>
+
+        <InputGroup.Root>
+          <InputGroup.Text>$</InputGroup.Text>
+          <InputGroup.Input placeholder="0.00" />
+          <InputGroup.Text>USD</InputGroup.Text>
+        </InputGroup.Root>
+
+        <InputGroup.Root disabled>
+          <InputGroup.Addon>
+            <CentralIcon name="IconMagnifyingGlass2" size={16} />
+          </InputGroup.Addon>
+          <InputGroup.Input placeholder="Disabled" />
+        </InputGroup.Root>
+
+        <InputGroup.Root invalid>
+          <InputGroup.Addon>
+            <CentralIcon name="IconMagnifyingGlass2" size={16} />
+          </InputGroup.Addon>
+          <InputGroup.Input defaultValue="Invalid" />
+        </InputGroup.Root>
+      </div>
+
+      <div style={{ marginBottom: '128px' }} />
       <h2 style={{ marginBottom: '1rem' }}>Item Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '0', marginBottom: '128px', maxWidth: '400px' }}>
@@ -2381,13 +2787,11 @@ export default function Home() {
           disabled
         />
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Loader Component</h2>
       
       <div style={{ display: 'flex', gap: '2rem', alignItems: 'center', marginBottom: '128px' }}>
         <Loader />
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Logo Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px' }}>
@@ -2420,15 +2824,12 @@ export default function Home() {
           <Logo brand="grid" variant="logomark" aria-label="Grid" />
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Menu Component</h2>
       
       <MenuExamples />
-
       <h2 style={{ marginBottom: '1rem' }}>Menubar Component</h2>
 
       <MenubarDemo />
-
       <h2 style={{ marginBottom: '1rem' }}>Meter Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', maxWidth: '240px' }}>
@@ -2482,7 +2883,6 @@ export default function Home() {
           </Meter.Root>
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Navigation Menu Component</h2>
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px' }}>
@@ -2643,84 +3043,218 @@ export default function Home() {
           </NavigationMenu.Root>
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Pagination Component</h2>
       
       <PaginationDemo />
       
       <div style={{ marginBottom: '128px' }} />
-      
       <h2 style={{ marginBottom: '1rem' }}>Phone Input Component</h2>
       
       <PhoneInputDemo />
       
       <div style={{ marginBottom: '128px' }} />
-      
-      <h2 style={{ marginBottom: '1rem' }}>Progress Component</h2>
-      
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', maxWidth: '240px' }}>
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            Default (50%)
-          </span>
-          <Progress.Root value={50}>
-            <Progress.Label>Export data</Progress.Label>
-            <Progress.Value />
-            <Progress.Track>
-              <Progress.Indicator />
-            </Progress.Track>
-          </Progress.Root>
-        </div>
-        
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            Complete (100%)
-          </span>
-          <Progress.Root value={100}>
-            <Progress.Label>Upload complete</Progress.Label>
-            <Progress.Value />
-            <Progress.Track>
-              <Progress.Indicator />
-            </Progress.Track>
-          </Progress.Root>
-        </div>
-        
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            Indeterminate
-          </span>
-          <Progress.Root value={null}>
-            <Progress.Label>Loading...</Progress.Label>
-            <Progress.Track>
-              <Progress.Indicator />
-            </Progress.Track>
-          </Progress.Root>
-        </div>
-        
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            Track Only
-          </span>
-          <Progress.Root value={75}>
-            <Progress.Track>
-              <Progress.Indicator />
-            </Progress.Track>
-          </Progress.Root>
-        </div>
-      </div>
-      
-      <h2 style={{ marginBottom: '1rem' }}>Radio Component</h2>
-      
-      <div style={{ display: 'flex', gap: '3rem', marginBottom: '128px' }}>
-        {/* Default variant */}
-        <Radio.Field>
-          <Radio.Legend>Legend</Radio.Legend>
-          <Radio.Group defaultValue="opt1">
-            <Radio.Item value="opt1" label="Label" description="Description goes here." />
-            <Radio.Item value="opt2" label="Label" description="Description goes here." />
-          </Radio.Group>
-          <Radio.Description>Help text goes here.</Radio.Description>
-        </Radio.Field>
+      <h2 style={{ marginBottom: '1rem' }}>Popover Component</h2>
+
+      <div style={{ display: 'flex', gap: '1rem', marginBottom: '128px' }}>
+        <Popover.Root>
+          <Popover.Trigger render={<Button variant="outline" />}>
+            Notifications
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Positioner>
+              <Popover.Popup style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-3xs)',
+                padding: 'var(--spacing-sm) var(--spacing-md)',
+                width: 240,
+              }}>
+                <Popover.Title className="label" style={{ margin: 0, color: 'var(--text-primary)' }}>
+                  Notifications
+                </Popover.Title>
+                <Popover.Description className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
+                  You are all caught up. Good job!
+                </Popover.Description>
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+
+        <Popover.Root>
+          <Popover.Trigger render={<Button variant="outline" />}>
+            Settings
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Positioner>
+              <Popover.Popup style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-3xs)',
+                padding: 'var(--spacing-sm) var(--spacing-md)',
+                width: 260,
+              }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                  <Popover.Title className="label" style={{ margin: 0, color: 'var(--text-primary)' }}>
+                    Settings
+                  </Popover.Title>
+                  <Popover.Close render={
+                    <Button variant="ghost" size="compact" iconOnly style={{ marginRight: 'calc(var(--spacing-xs) * -1)', marginTop: 'calc(var(--spacing-3xs) * -1)' }}>
+                      <CentralIcon name="IconCrossSmall" size={16} />
+                    </Button>
+                  } />
+                </div>
+                <Popover.Description className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
+                  Adjust your notification preferences
+                  and alert thresholds.
+                </Popover.Description>
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+
+        <Popover.Root>
+          <Popover.Trigger render={<Button variant="outline" />}>
+            Modal Popover
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Backdrop />
+            <Popover.Positioner>
+              <Popover.Popup style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 'var(--spacing-xs)',
+                padding: 'var(--spacing-md)',
+                width: 280,
+              }}>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-3xs)' }}>
+                  <Popover.Title className="label" style={{ margin: 0, color: 'var(--text-primary)' }}>
+                    Confirm Action
+                  </Popover.Title>
+                  <Popover.Description className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
+                    This action requires your confirmation
+                    before proceeding.
+                  </Popover.Description>
+                </div>
+                <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }}>
+                  <Popover.Close render={<Button variant="outline" size="compact" />}>
+                    Cancel
+                  </Popover.Close>
+                  <Popover.Close render={<Button variant="filled" size="compact" />}>
+                    Confirm
+                  </Popover.Close>
+                </div>
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      </div>
+      <h2 style={{ marginBottom: '1rem' }}>Preview Card</h2>
+
+      <div style={{ display: 'flex', gap: '2rem', marginBottom: '128px', alignItems: 'center' }}>
+        <PreviewCard.Root>
+          <PreviewCard.Trigger href="https://example.com">
+            Hover to preview
+          </PreviewCard.Trigger>
+          <PreviewCard.Portal>
+            <PreviewCard.Positioner sideOffset={8}>
+              <PreviewCard.Popup style={{ padding: 'var(--spacing-md)', width: 280 }}>
+                <PreviewCard.Arrow />
+                <p style={{ margin: 0 }}>A lightweight preview of the linked content</p>
+              </PreviewCard.Popup>
+            </PreviewCard.Positioner>
+          </PreviewCard.Portal>
+        </PreviewCard.Root>
+
+        <PreviewCard.Root>
+          <PreviewCard.Trigger href="https://example.com">
+            Rich preview
+          </PreviewCard.Trigger>
+          <PreviewCard.Portal>
+            <PreviewCard.Positioner sideOffset={8}>
+              <PreviewCard.Popup style={{ width: 300 }}>
+                <div style={{
+                  height: 120,
+                  background: 'var(--surface-secondary)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: 'var(--text-tertiary)',
+                }}>
+                  <CentralIcon name="IconGlobe2" size={24} />
+                </div>
+                <div style={{ padding: 'var(--spacing-md)', display: 'flex', flexDirection: 'column', gap: 'var(--spacing-2xs)' }}>
+                  <span className="label" style={{ color: 'var(--text-primary)' }}>Typography Guide</span>
+                  <span className="body-sm" style={{ color: 'var(--text-secondary)' }}>Learn about text styles, mixins, and the type scale</span>
+                </div>
+              </PreviewCard.Popup>
+            </PreviewCard.Positioner>
+          </PreviewCard.Portal>
+        </PreviewCard.Root>
+      </div>
+      <h2 style={{ marginBottom: '1rem' }}>Progress Component</h2>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', maxWidth: '240px' }}>
+        <div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            Default (50%)
+          </span>
+          <Progress.Root value={50}>
+            <Progress.Label>Export data</Progress.Label>
+            <Progress.Value />
+            <Progress.Track>
+              <Progress.Indicator />
+            </Progress.Track>
+          </Progress.Root>
+        </div>
+        
+        <div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            Complete (100%)
+          </span>
+          <Progress.Root value={100}>
+            <Progress.Label>Upload complete</Progress.Label>
+            <Progress.Value />
+            <Progress.Track>
+              <Progress.Indicator />
+            </Progress.Track>
+          </Progress.Root>
+        </div>
+        
+        <div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            Indeterminate
+          </span>
+          <Progress.Root value={null}>
+            <Progress.Label>Loading...</Progress.Label>
+            <Progress.Track>
+              <Progress.Indicator />
+            </Progress.Track>
+          </Progress.Root>
+        </div>
+        
+        <div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            Track Only
+          </span>
+          <Progress.Root value={75}>
+            <Progress.Track>
+              <Progress.Indicator />
+            </Progress.Track>
+          </Progress.Root>
+        </div>
+      </div>
+      <h2 style={{ marginBottom: '1rem' }}>Radio Component</h2>
+      
+      <div style={{ display: 'flex', gap: '3rem', marginBottom: '128px' }}>
+        {/* Default variant */}
+        <Radio.Field>
+          <Radio.Legend>Legend</Radio.Legend>
+          <Radio.Group defaultValue="opt1">
+            <Radio.Item value="opt1" label="Label" description="Description goes here." />
+            <Radio.Item value="opt2" label="Label" description="Description goes here." />
+          </Radio.Group>
+          <Radio.Description>Help text goes here.</Radio.Description>
+        </Radio.Field>
 
         {/* Card variant */}
         <Radio.Field style={{ width: 280 }}>
@@ -2742,7 +3276,6 @@ export default function Home() {
           <Radio.Error match>Error text goes here.</Radio.Error>
         </Radio.Field>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Select Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', maxWidth: '256px' }}>
@@ -3037,94 +3570,6 @@ export default function Home() {
           </Select.Root>
         </div>
       </div>
-      
-      <h2 style={{ marginBottom: '1rem' }}>Sidebar Component</h2>
-      
-      <div style={{ display: 'flex', gap: '2rem', marginBottom: '128px' }}>
-        <div style={{ height: '600px' }}>
-          <Sidebar.Provider>
-            <Sidebar.Root>
-              <Sidebar.Header>
-                <div style={{ padding: 'var(--spacing-xs)', display: 'flex', justifyContent: 'flex-end' }}>
-                  <Sidebar.Trigger />
-                </div>
-              </Sidebar.Header>
-              <Sidebar.Content>
-                <Sidebar.Group>
-                  <Sidebar.GroupLabel>Default Items</Sidebar.GroupLabel>
-                  <Sidebar.Menu>
-                    <Sidebar.Item icon={<CentralIcon name="IconHome" size={20} />} active>
-                      Dashboard
-                    </Sidebar.Item>
-                    <Sidebar.Item icon={<CentralIcon name="IconPeopleCircle" size={20} />} trailing={<Shortcut keys={['⌘', 'P']} />}>
-                      Profile
-                    </Sidebar.Item>
-                    <Sidebar.Item icon={<CentralIcon name="IconSettingsGear1" size={20} />} disabled>
-                      Disabled
-                    </Sidebar.Item>
-                  </Sidebar.Menu>
-                </Sidebar.Group>
-
-                <Sidebar.Separator />
-
-                <Sidebar.Group>
-                  <Sidebar.GroupLabel>Submenu (Vertical Chevron)</Sidebar.GroupLabel>
-                  <Sidebar.Menu>
-                    <Sidebar.ExpandableItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />} label="Projects" defaultOpen>
-                      <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />}>
-                        Alpha
-                      </Sidebar.SubmenuItem>
-                      <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />} active>
-                        Beta
-                      </Sidebar.SubmenuItem>
-                    </Sidebar.ExpandableItem>
-                  </Sidebar.Menu>
-                </Sidebar.Group>
-
-                <Sidebar.Separator />
-
-                <Sidebar.Group>
-                  <Sidebar.GroupLabel>Tree (Horizontal Chevron)</Sidebar.GroupLabel>
-                  <Sidebar.Menu>
-                    <Sidebar.TreeItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />} label="Files" defaultOpen>
-                      <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />}>
-                        Document
-                      </Sidebar.SubmenuItem>
-                      <Sidebar.TreeItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />} label="Nested">
-                        <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />}>
-                          Child
-                        </Sidebar.SubmenuItem>
-                      </Sidebar.TreeItem>
-                    </Sidebar.TreeItem>
-                  </Sidebar.Menu>
-                </Sidebar.Group>
-
-                <Sidebar.Separator />
-
-                <Sidebar.Group>
-                  <Sidebar.GroupLabel>Drilldown (Navigate)</Sidebar.GroupLabel>
-                  <Sidebar.Menu>
-                    <Sidebar.DrilldownItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />}>
-                      Teams
-                    </Sidebar.DrilldownItem>
-                    <Sidebar.DrilldownItem icon={<CentralIcon name="IconPeopleCircle" size={20} />}>
-                      Members
-                    </Sidebar.DrilldownItem>
-                  </Sidebar.Menu>
-                </Sidebar.Group>
-              </Sidebar.Content>
-              <Sidebar.Footer>
-                <Sidebar.Menu>
-                  <Sidebar.Item icon={<CentralIcon name="IconSettingsGear1" size={20} />}>
-                    Settings
-                  </Sidebar.Item>
-                </Sidebar.Menu>
-              </Sidebar.Footer>
-            </Sidebar.Root>
-          </Sidebar.Provider>
-        </div>
-      </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Separator Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', maxWidth: '300px' }}>
@@ -3167,7 +3612,6 @@ export default function Home() {
           </div>
         </div>
       </div>
-      
       <h2 style={{ marginBottom: '1rem' }}>Shortcut Component</h2>
       
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
@@ -3198,793 +3642,465 @@ export default function Home() {
           </div>
         </div>
       </div>
+      <h2 style={{ marginBottom: '1rem' }}>Sidebar Component</h2>
       
-      <h2 style={{ marginBottom: '1rem' }}>Switch Component</h2>
-      
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>SM Off</span>
-          <Switch size="sm" />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>SM On</span>
-          <Switch size="sm" defaultChecked />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>MD Off</span>
-          <Switch size="md" />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>MD On</span>
-          <Switch size="md" defaultChecked />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>Disabled Off</span>
-          <Switch size="md" disabled />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>Disabled On</span>
-          <Switch size="md" disabled defaultChecked />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <span style={{ width: '100px', fontSize: '14px' }}>Read Only</span>
-          <Switch size="md" readOnly defaultChecked />
-        </div>
-      </div>
-      
-      <h2 style={{ marginBottom: '1rem' }}>Table Component</h2>
-      
-      <TableExamples />
-      
-      <h2 style={{ marginBottom: '1rem' }}>Tabs Component</h2>
-      
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', marginBottom: '128px' }}>
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            Default Variant
-          </span>
-          <Tabs.Root defaultValue="account" style={{ maxWidth: '400px' }}>
-            <Tabs.List>
-              <Tabs.Tab value="account">Account</Tabs.Tab>
-              <Tabs.Tab value="password">Password</Tabs.Tab>
-              <Tabs.Tab value="settings">Settings</Tabs.Tab>
-            </Tabs.List>
-            <Tabs.Panel value="account">
-              Manage your account settings and preferences.
-            </Tabs.Panel>
-            <Tabs.Panel value="password">
-              Change your password and security options.
-            </Tabs.Panel>
-            <Tabs.Panel value="settings">
-              Configure application settings.
-            </Tabs.Panel>
-          </Tabs.Root>
-        </div>
-
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            Minimal Variant
-          </span>
-          <Tabs.Root defaultValue="overview" style={{ maxWidth: '400px' }}>
-            <Tabs.List variant="minimal">
-              <Tabs.Tab value="overview">Overview</Tabs.Tab>
-              <Tabs.Tab value="details">Details</Tabs.Tab>
-              <Tabs.Tab value="history">History</Tabs.Tab>
-            </Tabs.List>
-            <Tabs.Panel value="overview">
-              Overview content without container background.
-            </Tabs.Panel>
-            <Tabs.Panel value="details">
-              Details content.
-            </Tabs.Panel>
-            <Tabs.Panel value="history">
-              History content.
-            </Tabs.Panel>
-          </Tabs.Root>
-        </div>
-
-        <div>
-          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
-            With Disabled Tab
-          </span>
-          <Tabs.Root defaultValue="active" style={{ maxWidth: '400px' }}>
-            <Tabs.List>
-              <Tabs.Tab value="active">Active</Tabs.Tab>
-              <Tabs.Tab value="disabled" disabled>Disabled</Tabs.Tab>
-              <Tabs.Tab value="another">Another</Tabs.Tab>
-            </Tabs.List>
-            <Tabs.Panel value="active">
-              This tab is active.
-            </Tabs.Panel>
-            <Tabs.Panel value="disabled">
-              This panel cannot be accessed.
-            </Tabs.Panel>
-            <Tabs.Panel value="another">
-              Another tab content.
-            </Tabs.Panel>
-          </Tabs.Root>
-        </div>
-      </div>
-      
-      <h2 style={{ marginBottom: '1rem' }}>Toast Component</h2>
-      
-      <Toast.Provider>
-        <ToastDemo />
-        <Toast.Portal>
-          <Toast.Viewport>
-            <ToastRenderer />
-          </Toast.Viewport>
-        </Toast.Portal>
-      </Toast.Provider>
-      
-      <div style={{ marginBottom: '128px' }} />
-      
-      <h2 style={{ marginBottom: '1rem' }}>Tooltip Component</h2>
-      
-      <Tooltip.Provider>
-        <div style={{ display: 'flex', gap: '2rem', marginBottom: '128px', alignItems: 'center' }}>
-          <Tooltip.Root>
-            <Tooltip.Trigger render={<Button variant="outline">Hover me</Button>} />
-            <Tooltip.Portal>
-              <Tooltip.Positioner sideOffset={8}>
-                <Tooltip.Popup>
-                  This is a tooltip
-                  <Tooltip.Arrow />
-                </Tooltip.Popup>
-              </Tooltip.Positioner>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-
-          <Tooltip.Root>
-            <Tooltip.Trigger render={<Button variant="outline">Long text</Button>} />
-            <Tooltip.Portal>
-              <Tooltip.Positioner sideOffset={8}>
-                <Tooltip.Popup>
-                  This is a longer tooltip that demonstrates text wrapping within the max-width constraint.
-                  <Tooltip.Arrow />
-                </Tooltip.Popup>
-              </Tooltip.Positioner>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-
-          <Tooltip.Root>
-            <Tooltip.Trigger
-              render={
-                <button
-                  aria-label="Info"
-                  style={{
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    background: 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    padding: 0,
-                  }}
-                >
-                  <CentralIcon name="IconCircleInfo" size={20} />
-                </button>
-              }
-            />
-            <Tooltip.Portal>
-              <Tooltip.Positioner sideOffset={8}>
-                <Tooltip.Popup>
-                  Icon trigger tooltip
-                  <Tooltip.Arrow />
-                </Tooltip.Popup>
-              </Tooltip.Positioner>
-            </Tooltip.Portal>
-          </Tooltip.Root>
-        </div>
-      </Tooltip.Provider>
-
-      <h2 style={{ marginBottom: '1rem' }}>Popover Component</h2>
-
-      <div style={{ display: 'flex', gap: '1rem', marginBottom: '128px' }}>
-        <Popover.Root>
-          <Popover.Trigger render={<Button variant="outline" />}>
-            Notifications
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Positioner>
-              <Popover.Popup style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 'var(--spacing-3xs)',
-                padding: 'var(--spacing-sm) var(--spacing-md)',
-                width: 240,
-              }}>
-                <Popover.Title className="label" style={{ margin: 0, color: 'var(--text-primary)' }}>
-                  Notifications
-                </Popover.Title>
-                <Popover.Description className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
-                  You are all caught up. Good job!
-                </Popover.Description>
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Portal>
-        </Popover.Root>
-
-        <Popover.Root>
-          <Popover.Trigger render={<Button variant="outline" />}>
-            Settings
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Positioner>
-              <Popover.Popup style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 'var(--spacing-3xs)',
-                padding: 'var(--spacing-sm) var(--spacing-md)',
-                width: 260,
-              }}>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                  <Popover.Title className="label" style={{ margin: 0, color: 'var(--text-primary)' }}>
-                    Settings
-                  </Popover.Title>
-                  <Popover.Close render={
-                    <Button variant="ghost" size="compact" iconOnly style={{ marginRight: 'calc(var(--spacing-xs) * -1)', marginTop: 'calc(var(--spacing-3xs) * -1)' }}>
-                      <CentralIcon name="IconCrossSmall" size={16} />
-                    </Button>
-                  } />
-                </div>
-                <Popover.Description className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
-                  Adjust your notification preferences
-                  and alert thresholds.
-                </Popover.Description>
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Portal>
-        </Popover.Root>
-
-        <Popover.Root>
-          <Popover.Trigger render={<Button variant="outline" />}>
-            Modal Popover
-          </Popover.Trigger>
-          <Popover.Portal>
-            <Popover.Backdrop />
-            <Popover.Positioner>
-              <Popover.Popup style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 'var(--spacing-xs)',
-                padding: 'var(--spacing-md)',
-                width: 280,
-              }}>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-3xs)' }}>
-                  <Popover.Title className="label" style={{ margin: 0, color: 'var(--text-primary)' }}>
-                    Confirm Action
-                  </Popover.Title>
-                  <Popover.Description className="body-sm" style={{ margin: 0, color: 'var(--text-secondary)' }}>
-                    This action requires your confirmation
-                    before proceeding.
-                  </Popover.Description>
-                </div>
-                <div style={{ display: 'flex', gap: 'var(--spacing-xs)', justifyContent: 'flex-end' }}>
-                  <Popover.Close render={<Button variant="outline" size="compact" />}>
-                    Cancel
-                  </Popover.Close>
-                  <Popover.Close render={<Button variant="filled" size="compact" />}>
-                    Confirm
-                  </Popover.Close>
+      <div style={{ display: 'flex', gap: '2rem', marginBottom: '128px' }}>
+        <div style={{ height: '600px' }}>
+          <Sidebar.Provider>
+            <Sidebar.Root>
+              <Sidebar.Header>
+                <div style={{ padding: 'var(--spacing-xs)', display: 'flex', justifyContent: 'flex-end' }}>
+                  <Sidebar.Trigger />
                 </div>
-              </Popover.Popup>
-            </Popover.Positioner>
-          </Popover.Portal>
-        </Popover.Root>
-      </div>
+              </Sidebar.Header>
+              <Sidebar.Content>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Default Items</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.Item icon={<CentralIcon name="IconHome" size={20} />} active>
+                      Dashboard
+                    </Sidebar.Item>
+                    <Sidebar.Item icon={<CentralIcon name="IconPeopleCircle" size={20} />} trailing={<Shortcut keys={['⌘', 'P']} />}>
+                      Profile
+                    </Sidebar.Item>
+                    <Sidebar.Item icon={<CentralIcon name="IconSettingsGear1" size={20} />} disabled>
+                      Disabled
+                    </Sidebar.Item>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
 
-      <h2 style={{ marginBottom: '1rem' }}>Toggle</h2>
+                <Sidebar.Separator />
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-lg)', marginBottom: 'var(--spacing-3xl)' }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
-          <span className="label-sm" style={{ color: 'var(--text-tertiary)' }}>Standalone</span>
-          <div style={{ display: 'flex', gap: 'var(--spacing-xs)', alignItems: 'center' }}>
-            <Toggle
-              aria-label="Favorite"
-              render={(props, state) => (
-                <button type="button" {...props}>
-                  <CentralIcon name={state.pressed ? 'IconHeart2Filled' : 'IconHeart2'} size={16} />
-                  <span style={{ padding: '0 var(--spacing-3xs)' }}>Favorite</span>
-                </button>
-              )}
-            />
-            <Toggle
-              aria-label="Favorite"
-              render={(props, state) => (
-                <button type="button" {...props}>
-                  <CentralIcon name={state.pressed ? 'IconHeart2Filled' : 'IconHeart2'} size={16} />
-                </button>
-              )}
-            />
-            <Toggle disabled aria-label="Favorite">
-              <CentralIcon name="IconHeart2" size={16} />
-              <span style={{ padding: '0 var(--spacing-3xs)' }}>Disabled</span>
-            </Toggle>
-            <Toggle defaultPressed disabled aria-label="Locked on">
-              <CentralIcon name="IconHeart2Filled" size={16} />
-              <span style={{ padding: '0 var(--spacing-3xs)' }}>Locked</span>
-            </Toggle>
-          </div>
-        </div>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Submenu (Vertical Chevron)</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.ExpandableItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />} label="Projects" defaultOpen>
+                      <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />}>
+                        Alpha
+                      </Sidebar.SubmenuItem>
+                      <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />} active>
+                        Beta
+                      </Sidebar.SubmenuItem>
+                    </Sidebar.ExpandableItem>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
-          <span className="label-sm" style={{ color: 'var(--text-tertiary)' }}>Toggle Group (single select)</span>
-          <ToggleGroup defaultValue={['left']} aria-label="Text alignment">
-            <Toggle value="left" aria-label="Align left">
-              <CentralIcon name="IconLayoutLeft" size={16} />
-            </Toggle>
-            <Toggle value="center" aria-label="Align center">
-              <CentralIcon name="IconLayoutColumn" size={16} />
-            </Toggle>
-            <Toggle value="right" aria-label="Align right">
-              <CentralIcon name="IconLayoutRight" size={16} />
-            </Toggle>
-          </ToggleGroup>
-        </div>
+                <Sidebar.Separator />
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
-          <span className="label-sm" style={{ color: 'var(--text-tertiary)' }}>Toggle Group (multiple)</span>
-          <ToggleGroup multiple aria-label="Text formatting">
-            <Toggle value="bold" aria-label="Bold">
-              <span style={{ padding: '0 var(--spacing-3xs)', fontWeight: 700 }}>B</span>
-            </Toggle>
-            <Toggle value="italic" aria-label="Italic">
-              <span style={{ padding: '0 var(--spacing-3xs)', fontStyle: 'italic' }}>I</span>
-            </Toggle>
-            <Toggle value="underline" aria-label="Underline">
-              <span style={{ padding: '0 var(--spacing-3xs)', textDecoration: 'underline' }}>U</span>
-            </Toggle>
-          </ToggleGroup>
-        </div>
-      </div>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Tree (Horizontal Chevron)</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.TreeItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />} label="Files" defaultOpen>
+                      <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />}>
+                        Document
+                      </Sidebar.SubmenuItem>
+                      <Sidebar.TreeItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />} label="Nested">
+                        <Sidebar.SubmenuItem icon={<CentralIcon name="IconFileBend" size={20} />}>
+                          Child
+                        </Sidebar.SubmenuItem>
+                      </Sidebar.TreeItem>
+                    </Sidebar.TreeItem>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
 
-      <h2 style={{ marginBottom: '1rem' }}>VisuallyHidden</h2>
+                <Sidebar.Separator />
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', width: 320 }}>
-        <Fieldset.Root>
-          <Fieldset.Legend visuallyHidden>Transaction limits</Fieldset.Legend>
-          <Field.Root name="min">
-            <Field.Label>Minimum amount</Field.Label>
-            <Input placeholder="1.00" />
-          </Field.Root>
-          <Field.Root name="max">
-            <Field.Label>Maximum amount</Field.Label>
-            <Input placeholder="10,000.00" />
-          </Field.Root>
-        </Fieldset.Root>
-        <span className="body-sm" style={{ color: 'var(--text-tertiary)' }}>
-          The legend above is visually hidden but accessible
-          to screen readers. Inspect the fieldset to verify.
-        </span>
+                <Sidebar.Group>
+                  <Sidebar.GroupLabel>Drilldown (Navigate)</Sidebar.GroupLabel>
+                  <Sidebar.Menu>
+                    <Sidebar.DrilldownItem icon={<CentralIcon name="IconSquareBehindSquare1" size={20} />}>
+                      Teams
+                    </Sidebar.DrilldownItem>
+                    <Sidebar.DrilldownItem icon={<CentralIcon name="IconPeopleCircle" size={20} />}>
+                      Members
+                    </Sidebar.DrilldownItem>
+                  </Sidebar.Menu>
+                </Sidebar.Group>
+              </Sidebar.Content>
+              <Sidebar.Footer>
+                <Sidebar.Menu>
+                  <Sidebar.Item icon={<CentralIcon name="IconSettingsGear1" size={20} />}>
+                    Settings
+                  </Sidebar.Item>
+                </Sidebar.Menu>
+              </Sidebar.Footer>
+            </Sidebar.Root>
+          </Sidebar.Provider>
+        </div>
       </div>
-
-      <h2 style={{ marginBottom: '1rem' }}>Charts</h2>
-
-      <h3 style={{ marginBottom: '0.75rem' }}>Line</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Multi-series with grid</p>
-          <Chart.Line
-            data={[
-              { date: 'Mon', incoming: 120, outgoing: 80 },
-              { date: 'Tue', incoming: 150, outgoing: 95 },
-              { date: 'Wed', incoming: 140, outgoing: 110 },
-              { date: 'Thu', incoming: 180, outgoing: 100 },
-              { date: 'Fri', incoming: 160, outgoing: 130 },
-            ]}
-            series={[
-              { key: 'incoming', label: 'Incoming' },
-              { key: 'outgoing', label: 'Outgoing' },
-            ]}
-            xKey="date"
-            height={200}
-            grid
-            tooltip
-          />
+      <h2 style={{ marginBottom: '1rem' }}>Switch Component</h2>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '128px' }}>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>SM Off</span>
+          <Switch size="sm" />
         </div>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Area fill + compact tooltip</p>
-          <Chart.Line
-            data={[
-              { date: 'Mon', value: 120 },
-              { date: 'Tue', value: 150 },
-              { date: 'Wed', value: 140 },
-              { date: 'Thu', value: 180 },
-              { date: 'Fri', value: 160 },
-              { date: 'Sat', value: 200 },
-              { date: 'Sun', value: 190 },
-            ]}
-            dataKey="value"
-            xKey="date"
-            height={200}
-            grid
-            fill
-            tooltip="compact"
-          />
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>SM On</span>
+          <Switch size="sm" defaultChecked />
         </div>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Dashed + dotted series</p>
-          <Chart.Line
-            data={[
-              { date: 'Jan', actual: 100, projected: 110, target: 130 },
-              { date: 'Feb', actual: 120, projected: 125, target: 130 },
-              { date: 'Mar', actual: 115, projected: 140, target: 130 },
-              { date: 'Apr', actual: 140, projected: 155, target: 130 },
-              { date: 'May', actual: 160, projected: 170, target: 130 },
-            ]}
-            series={[
-              { key: 'actual', label: 'Actual' },
-              { key: 'projected', label: 'Projected', style: 'dashed' },
-              { key: 'target', label: 'Target', style: 'dotted', color: 'var(--text-tertiary)' },
-            ]}
-            xKey="date"
-            height={200}
-            grid
-            tooltip
-          />
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>MD Off</span>
+          <Switch size="md" />
         </div>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Reference lines</p>
-          <Chart.Line
-            data={[
-              { date: 'Mon', value: 85 },
-              { date: 'Tue', value: 92 },
-              { date: 'Wed', value: 78 },
-              { date: 'Thu', value: 95 },
-              { date: 'Fri', value: 88 },
-            ]}
-            dataKey="value"
-            xKey="date"
-            height={200}
-            grid
-            tooltip
-            referenceLines={[
-              { value: 90, label: 'Target' },
-              { value: 75, label: 'Minimum' },
-            ]}
-          />
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>MD On</span>
+          <Switch size="md" defaultChecked />
         </div>
-      </div>
-
-      <h3 style={{ marginBottom: '0.75rem' }}>Tooltip Modes</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 280 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>simple</p>
-          <Chart.Line
-            data={[
-              { d: 'Aug 10', v: 180 }, { d: 'Aug 11', v: 185 }, { d: 'Aug 12', v: 182 },
-              { d: 'Aug 13', v: 188 }, { d: 'Aug 14', v: 190 }, { d: 'Aug 15', v: 195 },
-            ]}
-            dataKey="v" xKey="d" height={160} grid tooltip="simple"
-          />
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>Disabled Off</span>
+          <Switch size="md" disabled />
         </div>
-        <div style={{ width: 280 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>compact</p>
-          <Chart.Line
-            data={[
-              { d: 'Aug 10', v: 180 }, { d: 'Aug 11', v: 185 }, { d: 'Aug 12', v: 182 },
-              { d: 'Aug 13', v: 188 }, { d: 'Aug 14', v: 190 }, { d: 'Aug 15', v: 195 },
-            ]}
-            dataKey="v" xKey="d" height={160} grid tooltip="compact"
-          />
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>Disabled On</span>
+          <Switch size="md" disabled defaultChecked />
         </div>
-        <div style={{ width: 280 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>detailed</p>
-          <Chart.Line
-            data={[
-              { d: 'Mon', a: 120, b: 80 }, { d: 'Tue', a: 150, b: 95 },
-              { d: 'Wed', a: 140, b: 110 }, { d: 'Thu', a: 180, b: 100 },
-            ]}
-            series={[{ key: 'a', label: 'Incoming' }, { key: 'b', label: 'Outgoing' }]}
-            xKey="d" height={160} grid tooltip="detailed"
-          />
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span style={{ width: '100px', fontSize: '14px' }}>Read Only</span>
+          <Switch size="md" readOnly defaultChecked />
         </div>
       </div>
-
-      <h3 style={{ marginBottom: '0.75rem' }}>Live (Real-Time)</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 500 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Streaming data (random walk)</p>
-          <LiveDemo />
+      <h2 style={{ marginBottom: '1rem' }}>Table Component</h2>
+      
+      <TableExamples />
+      <h2 style={{ marginBottom: '1rem' }}>Tabs Component</h2>
+      
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', marginBottom: '128px' }}>
+        <div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            Default Variant
+          </span>
+          <Tabs.Root defaultValue="account" style={{ maxWidth: '400px' }}>
+            <Tabs.List>
+              <Tabs.Tab value="account">Account</Tabs.Tab>
+              <Tabs.Tab value="password">Password</Tabs.Tab>
+              <Tabs.Tab value="settings">Settings</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel value="account">
+              Manage your account settings and preferences.
+            </Tabs.Panel>
+            <Tabs.Panel value="password">
+              Change your password and security options.
+            </Tabs.Panel>
+            <Tabs.Panel value="settings">
+              Configure application settings.
+            </Tabs.Panel>
+          </Tabs.Root>
         </div>
-      </div>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>Live Primitives</h3>
-      <div style={{ display: 'flex', gap: '2rem', alignItems: 'center', marginBottom: '2rem' }}>
         <div>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>LiveValue</p>
-          <LiveValueDemo />
-        </div>
-        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-          <div style={{ textAlign: 'center' }}>
-            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>active</p>
-            <Chart.LiveDot status="active" />
-          </div>
-          <div style={{ textAlign: 'center' }}>
-            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>processing</p>
-            <Chart.LiveDot status="processing" />
-          </div>
-          <div style={{ textAlign: 'center' }}>
-            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>idle</p>
-            <Chart.LiveDot status="idle" />
-          </div>
-          <div style={{ textAlign: 'center' }}>
-            <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>error</p>
-            <Chart.LiveDot status="error" />
-          </div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            Minimal Variant
+          </span>
+          <Tabs.Root defaultValue="overview" style={{ maxWidth: '400px' }}>
+            <Tabs.List variant="minimal">
+              <Tabs.Tab value="overview">Overview</Tabs.Tab>
+              <Tabs.Tab value="details">Details</Tabs.Tab>
+              <Tabs.Tab value="history">History</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel value="overview">
+              Overview content without container background.
+            </Tabs.Panel>
+            <Tabs.Panel value="details">
+              Details content.
+            </Tabs.Panel>
+            <Tabs.Panel value="history">
+              History content.
+            </Tabs.Panel>
+          </Tabs.Root>
         </div>
-      </div>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>Sparkline</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', marginBottom: '2rem' }}>
-        <div style={{ width: 160 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Line</p>
-          <Chart.Sparkline
-            data={[{ v: 10 }, { v: 15 }, { v: 12 }, { v: 18 }, { v: 14 }, { v: 22 }, { v: 19 }, { v: 25 }]}
-            dataKey="v"
-          />
-        </div>
-        <div style={{ width: 160 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Line</p>
-          <Chart.Sparkline
-            data={[{ v: 25 }, { v: 22 }, { v: 24 }, { v: 18 }, { v: 20 }, { v: 15 }, { v: 12 }, { v: 10 }]}
-            dataKey="v"
-            color="var(--color-blue-500)"
-          />
-        </div>
-        <div style={{ width: 300 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Bar</p>
-          <Chart.Sparkline
-            variant="bar"
-            data={[
-              { v: 12 }, { v: 18 }, { v: 15 }, { v: 22 }, { v: 20 }, { v: 14 }, { v: 25 }, { v: 19 },
-              { v: 16 }, { v: 21 }, { v: 13 }, { v: 24 }, { v: 17 }, { v: 23 }, { v: 11 }, { v: 20 },
-              { v: 18 }, { v: 26 }, { v: 15 }, { v: 22 }, { v: 19 }, { v: 14 }, { v: 21 }, { v: 16 },
-            ]}
-            dataKey="v"
-            color="var(--color-blue-400)"
-          />
+        <div>
+          <span style={{ fontSize: '14px', color: '#7c7c7c', marginBottom: '0.5rem', display: 'block' }}>
+            With Disabled Tab
+          </span>
+          <Tabs.Root defaultValue="active" style={{ maxWidth: '400px' }}>
+            <Tabs.List>
+              <Tabs.Tab value="active">Active</Tabs.Tab>
+              <Tabs.Tab value="disabled" disabled>Disabled</Tabs.Tab>
+              <Tabs.Tab value="another">Another</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel value="active">
+              This tab is active.
+            </Tabs.Panel>
+            <Tabs.Panel value="disabled">
+              This panel cannot be accessed.
+            </Tabs.Panel>
+            <Tabs.Panel value="another">
+              Another tab content.
+            </Tabs.Panel>
+          </Tabs.Root>
         </div>
       </div>
+      <h2 style={{ marginBottom: '1rem' }}>Textarea</h2>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>Stacked Area</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 500 }}>
-          <Chart.StackedArea
-            data={[
-              { month: 'Jan', payments: 400, transfers: 200, fees: 50 },
-              { month: 'Feb', payments: 450, transfers: 250, fees: 60 },
-              { month: 'Mar', payments: 420, transfers: 280, fees: 55 },
-              { month: 'Apr', payments: 500, transfers: 300, fees: 70 },
-              { month: 'May', payments: 480, transfers: 320, fees: 65 },
-              { month: 'Jun', payments: 550, transfers: 350, fees: 80 },
-            ]}
-            series={[
-              { key: 'payments', label: 'Payments', color: 'var(--color-blue-700)' },
-              { key: 'transfers', label: 'Transfers', color: 'var(--color-blue-400)' },
-              { key: 'fees', label: 'Fees', color: 'var(--color-blue-200)' },
-            ]}
-            xKey="month"
-            height={250}
-            grid
-            tooltip
-          />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: 300, marginBottom: '2rem' }}>
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Default
+          </span>
+          <Textarea placeholder="Placeholder" />
         </div>
-      </div>
-
-      <h3 style={{ marginBottom: '0.75rem' }}>Bar</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Grouped</p>
-          <Chart.Bar
-            data={[
-              { month: 'Jan', incoming: 400, outgoing: 240 },
-              { month: 'Feb', incoming: 500, outgoing: 300 },
-              { month: 'Mar', incoming: 450, outgoing: 280 },
-              { month: 'Apr', incoming: 600, outgoing: 350 },
-              { month: 'May', incoming: 550, outgoing: 320 },
-            ]}
-            series={[
-              { key: 'incoming', label: 'Incoming' },
-              { key: 'outgoing', label: 'Outgoing' },
-            ]}
-            xKey="month" height={220} grid tooltip
-          />
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Filled
+          </span>
+          <Textarea defaultValue="Content" />
         </div>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Stacked</p>
-          <Chart.Bar
-            data={[
-              { q: 'Q1', payments: 400, transfers: 200, fees: 50 },
-              { q: 'Q2', payments: 500, transfers: 250, fees: 60 },
-              { q: 'Q3', payments: 450, transfers: 280, fees: 55 },
-              { q: 'Q4', payments: 600, transfers: 300, fees: 70 },
-            ]}
-            series={[
-              { key: 'payments', label: 'Payments', color: 'var(--color-blue-700)' },
-              { key: 'transfers', label: 'Transfers', color: 'var(--color-blue-400)' },
-              { key: 'fees', label: 'Fees', color: 'var(--color-blue-200)' },
-            ]}
-            xKey="q" height={220} grid tooltip stacked
-          />
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Disabled
+          </span>
+          <Textarea placeholder="Placeholder" disabled />
         </div>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Horizontal</p>
-          <Chart.Bar
-            data={[
-              { country: 'US', volume: 4200 },
-              { country: 'UK', volume: 2800 },
-              { country: 'EU', volume: 3100 },
-              { country: 'JP', volume: 1500 },
-              { country: 'BR', volume: 900 },
-            ]}
-            dataKey="volume"
-            xKey="country"
-            height={220}
-            grid
-            tooltip
-            orientation="horizontal"
-          />
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Invalid
+          </span>
+          <Textarea defaultValue="Invalid content" data-invalid="" />
         </div>
-        <div style={{ width: 388 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Single series + reference</p>
-          <Chart.Bar
-            data={[
-              { day: 'Mon', count: 12 }, { day: 'Tue', count: 18 },
-              { day: 'Wed', count: 15 }, { day: 'Thu', count: 22 }, { day: 'Fri', count: 20 },
-            ]}
-            dataKey="count" xKey="day" height={220} grid tooltip
-            referenceLines={[{ value: 17, label: 'Average' }]}
-          />
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            With Field
+          </span>
+          <Field.Root>
+            <Field.Label>Description</Field.Label>
+            <Textarea placeholder="Enter a description..." rows={4} />
+            <Field.Description>
+              Provide additional details
+            </Field.Description>
+          </Field.Root>
         </div>
       </div>
+      <h2 style={{ marginBottom: '1rem' }}>Textarea Group</h2>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>Composed</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 500 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Bar + line, dual Y-axes</p>
-          <Chart.Composed
-            data={[
-              { month: 'Jan', revenue: 4200, rate: 3.2 },
-              { month: 'Feb', revenue: 5100, rate: 3.8 },
-              { month: 'Mar', revenue: 4800, rate: 3.5 },
-              { month: 'Apr', revenue: 6200, rate: 4.1 },
-              { month: 'May', revenue: 5800, rate: 3.9 },
-              { month: 'Jun', revenue: 7100, rate: 4.5 },
-            ]}
-            series={[
-              { key: 'revenue', label: 'Revenue', type: 'bar', color: 'var(--color-blue-300)' },
-              { key: 'rate', label: 'Conversion %', type: 'line', axis: 'right', color: 'var(--text-primary)' },
-            ]}
-            xKey="month" height={250} grid tooltip
-            formatYLabelRight={(v) => `${v}%`}
-          />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: 400, marginBottom: '2rem' }}>
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Default
+          </span>
+          <TextareaGroup.Root>
+            <TextareaGroup.Textarea placeholder="Write a message..." />
+          </TextareaGroup.Root>
         </div>
-      </div>
-
-      <h3 style={{ marginBottom: '0.75rem' }}>Uptime</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 500 }}>
-          <Chart.Uptime
-            data={Array.from({ length: 90 }, (_, i) => ({
-              status: (i === 12 ? 'down' : i === 34 ? 'degraded' : i === 67 ? 'down' : i === 45 ? 'degraded' : 'up') as 'up' | 'down' | 'degraded',
-              label: `Day ${i + 1}`,
-            }))}
-          />
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            With Header
+          </span>
+          <TextareaGroup.Root>
+            <TextareaGroup.Header>
+              <Chip onDismiss={() => {}}>recipient-1</Chip>
+              <Chip onDismiss={() => {}}>recipient-2</Chip>
+            </TextareaGroup.Header>
+            <TextareaGroup.Textarea placeholder="Write a message..." />
+          </TextareaGroup.Root>
+        </div>
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Full Composer
+          </span>
+          <TextareaGroup.Root>
+            <TextareaGroup.Header>
+              <Chip onDismiss={() => {}}>tag-1</Chip>
+              <Chip onDismiss={() => {}}>tag-2</Chip>
+            </TextareaGroup.Header>
+            <TextareaGroup.Textarea placeholder="Write a message..." />
+            <TextareaGroup.Footer>
+              <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+                <Chip onDismiss={() => {}}>label</Chip>
+              </div>
+              <div>
+                <Button>Send</Button>
+              </div>
+            </TextareaGroup.Footer>
+          </TextareaGroup.Root>
+        </div>
+        <div>
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            With Max Height (200px)
+          </span>
+          <TextareaGroup.Root maxHeight={200}>
+            <TextareaGroup.Textarea
+              placeholder="Write a long prompt..."
+              defaultValue={'This is a long prompt that grows.\n'.repeat(15)}
+            />
+            <TextareaGroup.Footer>
+              <div />
+              <div>
+                <Button>Send</Button>
+              </div>
+            </TextareaGroup.Footer>
+          </TextareaGroup.Root>
         </div>
-      </div>
-
-      <h3 style={{ marginBottom: '0.75rem' }}>Activity Grid</h3>
-      <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
         <div>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Weekly (with labels)</p>
-          <Chart.ActivityGrid
-            rows={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
-            columns={Array.from({ length: 20 }, (_, i) => `W${i + 1}`)}
-            showRowLabels
-            showColumnLabels
-            data={Array.from({ length: 20 }, (_, ci) =>
-              ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, di) => ({
-                row: day,
-                col: `W${ci + 1}`,
-                value: ((ci * 7 + di * 3 + 5) % 10),
-              })),
-            ).flat()}
-          />
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Disabled
+          </span>
+          <TextareaGroup.Root disabled>
+            <TextareaGroup.Textarea placeholder="Write a message..." />
+          </TextareaGroup.Root>
         </div>
         <div>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Hourly over 7 days</p>
-          <Chart.ActivityGrid
-            rows={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
-            columns={Array.from({ length: 24 }, (_, i) => `${i}h`)}
-            cellSize={10}
-            cellGap={1}
-            color="var(--color-green-500)"
-            data={Array.from({ length: 24 }, (_, ci) =>
-              ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map((day, di) => ({
-                row: day,
-                col: `${ci}h`,
-                value: ((ci * 3 + di * 7 + 2) % 19),
-              })),
-            ).flat()}
-          />
+          <span style={{ fontSize: '12px', color: '#7c7c7c', marginBottom: '4px', display: 'block' }}>
+            Invalid
+          </span>
+          <TextareaGroup.Root invalid>
+            <TextareaGroup.Textarea defaultValue="Bad content" />
+          </TextareaGroup.Root>
         </div>
       </div>
+      <h2 style={{ marginBottom: '1rem' }}>Toast Component</h2>
+      
+      <Toast.Provider>
+        <ToastDemo />
+        <Toast.Portal>
+          <Toast.Viewport>
+            <ToastRenderer />
+          </Toast.Viewport>
+        </Toast.Portal>
+      </Toast.Provider>
+      
+      <div style={{ marginBottom: '128px' }} />
+      <h2 style={{ marginBottom: '1rem' }}>Toggle</h2>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>Gauge</h3>
-      <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 280 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Default</p>
-          <Chart.Gauge
-            value={0.32}
-            min={0}
-            max={1}
-            thresholds={[
-              { upTo: 0.5, color: 'var(--color-green-500)', label: 'Great' },
-              { upTo: 0.8, color: 'var(--color-yellow-500)', label: 'Needs work' },
-              { upTo: 1, color: 'var(--color-red-500)', label: 'Poor' },
-            ]}
-            markerLabel="P75"
-            formatValue={(v) => `${v.toFixed(2)}s`}
-          />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-lg)', marginBottom: 'var(--spacing-3xl)' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+          <span className="label-sm" style={{ color: 'var(--text-tertiary)' }}>Standalone</span>
+          <div style={{ display: 'flex', gap: 'var(--spacing-xs)', alignItems: 'center' }}>
+            <Toggle
+              aria-label="Favorite"
+              render={(props, state) => (
+                <button type="button" {...props}>
+                  <CentralIcon name={state.pressed ? 'IconHeart2Filled' : 'IconHeart2'} size={16} />
+                  <span style={{ padding: '0 var(--spacing-3xs)' }}>Favorite</span>
+                </button>
+              )}
+            />
+            <Toggle
+              aria-label="Favorite"
+              render={(props, state) => (
+                <button type="button" {...props}>
+                  <CentralIcon name={state.pressed ? 'IconHeart2Filled' : 'IconHeart2'} size={16} />
+                </button>
+              )}
+            />
+            <Toggle disabled aria-label="Favorite">
+              <CentralIcon name="IconHeart2" size={16} />
+              <span style={{ padding: '0 var(--spacing-3xs)' }}>Disabled</span>
+            </Toggle>
+            <Toggle defaultPressed disabled aria-label="Locked on">
+              <CentralIcon name="IconHeart2Filled" size={16} />
+              <span style={{ padding: '0 var(--spacing-3xs)' }}>Locked</span>
+            </Toggle>
+          </div>
         </div>
-        <div style={{ width: 280 }}>
-          <p style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>Minimal</p>
-          <Chart.Gauge
-            value={0.32}
-            min={0}
-            max={1}
-            variant="minimal"
-            thresholds={[
-              { upTo: 0.5, color: 'var(--color-green-500)', label: 'Great' },
-              { upTo: 0.8, color: 'var(--color-yellow-500)', label: 'Needs work' },
-              { upTo: 1, color: 'var(--color-red-500)', label: 'Poor' },
-            ]}
-            formatValue={(v) => `${v.toFixed(2)}s`}
-          />
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+          <span className="label-sm" style={{ color: 'var(--text-tertiary)' }}>Toggle Group (single select)</span>
+          <ToggleGroup defaultValue={['left']} aria-label="Text alignment">
+            <Toggle value="left" aria-label="Align left">
+              <CentralIcon name="IconLayoutLeft" size={16} />
+            </Toggle>
+            <Toggle value="center" aria-label="Align center">
+              <CentralIcon name="IconLayoutColumn" size={16} />
+            </Toggle>
+            <Toggle value="right" aria-label="Align right">
+              <CentralIcon name="IconLayoutRight" size={16} />
+            </Toggle>
+          </ToggleGroup>
         </div>
-      </div>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>BarList</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '2rem' }}>
-        <div style={{ width: 400 }}>
-          <Chart.BarList
-            data={[
-              { name: '/', value: 2340, displayValue: '0.28s' },
-              { name: '/pricing', value: 326, displayValue: '0.34s' },
-              { name: '/blog', value: 148, displayValue: '0.31s' },
-              { name: '/docs', value: 89, displayValue: '0.42s' },
-              { name: '/about', value: 45, displayValue: '0.25s' },
-            ]}
-          />
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+          <span className="label-sm" style={{ color: 'var(--text-tertiary)' }}>Toggle Group (multiple)</span>
+          <ToggleGroup multiple aria-label="Text formatting">
+            <Toggle value="bold" aria-label="Bold">
+              <span style={{ padding: '0 var(--spacing-3xs)', fontWeight: 700 }}>B</span>
+            </Toggle>
+            <Toggle value="italic" aria-label="Italic">
+              <span style={{ padding: '0 var(--spacing-3xs)', fontStyle: 'italic' }}>I</span>
+            </Toggle>
+            <Toggle value="underline" aria-label="Underline">
+              <span style={{ padding: '0 var(--spacing-3xs)', textDecoration: 'underline' }}>U</span>
+            </Toggle>
+          </ToggleGroup>
         </div>
       </div>
+      <h2 style={{ marginBottom: '1rem' }}>Tooltip Component</h2>
+      
+      <Tooltip.Provider>
+        <div style={{ display: 'flex', gap: '2rem', marginBottom: '128px', alignItems: 'center' }}>
+          <Tooltip.Root>
+            <Tooltip.Trigger render={<Button variant="outline">Hover me</Button>} />
+            <Tooltip.Portal>
+              <Tooltip.Positioner sideOffset={8}>
+                <Tooltip.Popup>
+                  This is a tooltip
+                  <Tooltip.Arrow />
+                </Tooltip.Popup>
+              </Tooltip.Positioner>
+            </Tooltip.Portal>
+          </Tooltip.Root>
 
-      <h3 style={{ marginBottom: '0.75rem' }}>Donut</h3>
-      <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', marginBottom: '128px' }}>
-        <div style={{ width: 388 }}>
-          <Chart.Pie
-            data={[
-              { name: 'Payments', value: 4200, color: 'var(--color-blue-700)' },
-              { name: 'Transfers', value: 2800, color: 'var(--color-blue-500)' },
-              { name: 'Fees', value: 650, color: 'var(--color-blue-300)' },
-              { name: 'Refunds', value: 320, color: 'var(--color-blue-100)' },
-            ]}
-            height={200}
-          />
-        </div>
-        <div style={{ width: 388 }}>
-          <Chart.Pie
-            data={[
-              { name: 'USD', value: 58, color: 'var(--color-blue-700)' },
-              { name: 'EUR', value: 22, color: 'var(--color-blue-500)' },
-              { name: 'GBP', value: 12, color: 'var(--color-blue-300)' },
-              { name: 'Other', value: 8, color: 'var(--color-blue-100)' },
-            ]}
-            height={200}
-          />
+          <Tooltip.Root>
+            <Tooltip.Trigger render={<Button variant="outline">Long text</Button>} />
+            <Tooltip.Portal>
+              <Tooltip.Positioner sideOffset={8}>
+                <Tooltip.Popup>
+                  This is a longer tooltip that demonstrates text wrapping within the max-width constraint.
+                  <Tooltip.Arrow />
+                </Tooltip.Popup>
+              </Tooltip.Positioner>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+
+          <Tooltip.Root>
+            <Tooltip.Trigger
+              render={
+                <button
+                  aria-label="Info"
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: 0,
+                  }}
+                >
+                  <CentralIcon name="IconCircleInfo" size={20} />
+                </button>
+              }
+            />
+            <Tooltip.Portal>
+              <Tooltip.Positioner sideOffset={8}>
+                <Tooltip.Popup>
+                  Icon trigger tooltip
+                  <Tooltip.Arrow />
+                </Tooltip.Popup>
+              </Tooltip.Positioner>
+            </Tooltip.Portal>
+          </Tooltip.Root>
         </div>
+      </Tooltip.Provider>
+      <h2 style={{ marginBottom: '1rem' }}>VisuallyHidden</h2>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', marginBottom: '128px', width: 320 }}>
+        <Fieldset.Root>
+          <Fieldset.Legend visuallyHidden>Transaction limits</Fieldset.Legend>
+          <Field.Root name="min">
+            <Field.Label>Minimum amount</Field.Label>
+            <Input placeholder="1.00" />
+          </Field.Root>
+          <Field.Root name="max">
+            <Field.Label>Maximum amount</Field.Label>
+            <Input placeholder="10,000.00" />
+          </Field.Root>
+        </Fieldset.Root>
+        <span className="body-sm" style={{ color: 'var(--text-tertiary)' }}>
+          The legend above is visually hidden but accessible
+          to screen readers. Inspect the fieldset to verify.
+        </span>
       </div>
     </main>
   );
diff --git a/src/components/Accordion/Accordion.module.scss b/src/components/Accordion/Accordion.module.scss
index 6bf085f..8204203 100644
--- a/src/components/Accordion/Accordion.module.scss
+++ b/src/components/Accordion/Accordion.module.scss
@@ -14,7 +14,7 @@
   overflow: hidden;
 
   &:not(:last-child) {
-    border-bottom: var(--stroke-sm) solid var(--border-tertiary);
+    border-bottom: var(--stroke-sm) solid var(--border-primary);
   }
 }
 
@@ -36,7 +36,7 @@
   text-align: left;
 
   &:focus-visible {
-    outline: 2px solid var(--input-focus);
+    outline: 2px solid var(--state-focus);
     outline-offset: -2px;
   }
 }
diff --git a/src/components/ActionBar/ActionBar.module.scss b/src/components/ActionBar/ActionBar.module.scss
index 540575c..639e25a 100644
--- a/src/components/ActionBar/ActionBar.module.scss
+++ b/src/components/ActionBar/ActionBar.module.scss
@@ -10,8 +10,8 @@
   min-width: 320px;
   max-width: 420px;
   padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-md); // 8px 8px 8px 16px
-  background-color: var(--surface-elevated);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(10px);
   box-shadow: var(--shadow-lg);
 }
diff --git a/src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.scss
index 1e3ddf1..cdfb368 100644
--- a/src/components/Alert/Alert.module.scss
+++ b/src/components/Alert/Alert.module.scss
@@ -41,7 +41,7 @@
 
 .default {
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   padding: var(--spacing-sm) var(--spacing-md);
 
   .iconWrapper {
@@ -59,7 +59,7 @@
 
 .warning {
   background-color: var(--surface-yellow);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   padding: var(--spacing-sm) var(--spacing-md);
 
   .iconWrapper {
@@ -77,7 +77,7 @@
 
 .critical {
   background-color: var(--surface-red);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   padding: var(--spacing-sm) var(--spacing-3xl) var(--spacing-sm) var(--spacing-md);
 
   .iconWrapper {
diff --git a/src/components/AlertDialog/AlertDialog.module.scss b/src/components/AlertDialog/AlertDialog.module.scss
index cfb1b6e..18a6b97 100644
--- a/src/components/AlertDialog/AlertDialog.module.scss
+++ b/src/components/AlertDialog/AlertDialog.module.scss
@@ -34,7 +34,7 @@
   width: 360px;
   max-width: calc(100vw - var(--spacing-2xl));
   overflow: clip;
-  background-color: var(--surface-elevated);
+  background-color: var(--surface-panel);
   border: var(--stroke-xs) solid var(--border-secondary);
   @include smooth-corners(var(--corner-radius-md));
   box-shadow: var(--shadow-lg);
diff --git a/src/components/Autocomplete/Autocomplete.module.scss b/src/components/Autocomplete/Autocomplete.module.scss
index 2112752..1a1554a 100644
--- a/src/components/Autocomplete/Autocomplete.module.scss
+++ b/src/components/Autocomplete/Autocomplete.module.scss
@@ -12,7 +12,7 @@
   height: 36px;
   box-sizing: border-box;
   padding-inline: var(--spacing-sm);
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   color: var(--text-primary);
   outline: none;
@@ -54,7 +54,7 @@
   max-width: var(--available-width);
   overflow: hidden;
   background: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   outline: 0;
@@ -152,7 +152,7 @@
     left: 0;
     right: 0;
     height: var(--stroke-xs);
-    background-color: var(--border-tertiary);
+    background-color: var(--border-primary);
   }
 }
 
diff --git a/src/components/Avatar/Avatar.module.scss b/src/components/Avatar/Avatar.module.scss
index 06d0b3d..96003db 100644
--- a/src/components/Avatar/Avatar.module.scss
+++ b/src/components/Avatar/Avatar.module.scss
@@ -11,7 +11,7 @@
   flex-shrink: 0;
   user-select: none;
   vertical-align: middle;
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
 }
 
 // Sizes
@@ -107,7 +107,7 @@
 }
 
 .gray {
-  background-color: var(--surface-strong);
+  background-color: var(--surface-neutral);
 }
 
 // Image - fades in when loaded via Base UI transition attributes
@@ -130,7 +130,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  color: var(--text-surface);
+  color: var(--text-inverse);
   text-align: center;
   font-weight: var(--font-weight-book);
   transition: opacity 200ms ease;
@@ -142,31 +142,31 @@
   // Typography scales with avatar size
   .size16 & {
     @include label-xs;
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 
   .size20 & {
     @include label-sm;
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 
   .size24 & {
     @include label-sm;
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 
   .size32 & {
     @include label-sm;
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 
   .size40 & {
     @include label;
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 
   .size48 & {
     @include label-lg;
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
diff --git a/src/components/Badge/Badge.module.scss b/src/components/Badge/Badge.module.scss
index ce82983..3e2c14b 100644
--- a/src/components/Badge/Badge.module.scss
+++ b/src/components/Badge/Badge.module.scss
@@ -18,8 +18,8 @@
   color: var(--text-primary);
 
   &.vibrant {
-    background-color: var(--surface-strong);
-    color: var(--text-surface);
+    background-color: var(--surface-neutral);
+    color: var(--text-inverse);
   }
 }
 
@@ -29,7 +29,7 @@
 
   &.vibrant {
     background-color: var(--surface-purple-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
 
@@ -39,7 +39,7 @@
 
   &.vibrant {
     background-color: var(--surface-blue-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
 
@@ -49,7 +49,7 @@
 
   &.vibrant {
     background-color: var(--surface-sky-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
 
@@ -59,7 +59,7 @@
 
   &.vibrant {
     background-color: var(--surface-pink-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
 
@@ -69,7 +69,7 @@
 
   &.vibrant {
     background-color: var(--surface-green-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
 
@@ -79,7 +79,7 @@
 
   &.vibrant {
     background-color: var(--surface-yellow-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
 
@@ -89,6 +89,6 @@
 
   &.vibrant {
     background-color: var(--surface-red-strong);
-    color: var(--text-surface);
+    color: var(--text-inverse);
   }
 }
diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
index 70233e6..0f0c32a 100644
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ b/src/components/Breadcrumb/Breadcrumb.module.scss
@@ -49,7 +49,7 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--input-focus);
+    box-shadow: 0 0 0 2px var(--state-focus);
     @include smooth-corners(var(--corner-radius-xs));
   }
 
@@ -81,7 +81,7 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--input-focus);
+    box-shadow: 0 0 0 2px var(--state-focus);
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index bbd609e..1b9f5e0 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -18,7 +18,7 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
   }
 
   &[data-disabled] {
@@ -70,13 +70,13 @@
 }
 
 .filled {
-  background-color: var(--surface-inverted);
-  color: var(--text-surface);
+  background-color: var(--surface-inverse);
+  color: var(--text-inverse);
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
-      background-color: var(--surface-inverted);
-      background-image: linear-gradient(var(--surface-inverted-hover), var(--surface-inverted-hover));
+      background-color: var(--surface-inverse);
+      background-image: linear-gradient(var(--surface-inverse-hover), var(--surface-inverse-hover));
     }
   }
 
@@ -100,7 +100,7 @@
 
   &:focus-visible {
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
   }
 
   &[data-disabled] {
@@ -111,7 +111,7 @@
 .outline {
   background-color: var(--surface-primary);
   color: var(--text-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
 
   @media (hover: hover) {
@@ -121,7 +121,7 @@
   }
 
   &:focus-visible {
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0 0 0 3px var(--input-focus);
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0 0 0 3px var(--state-focus);
   }
 
   &[data-disabled] {
@@ -133,7 +133,7 @@
     box-shadow: none;
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px var(--input-focus);
+      box-shadow: 0 0 0 3px var(--state-focus);
     }
   }
 }
@@ -155,17 +155,17 @@
 
 .critical {
   background-color: var(--surface-red-strong);
-  color: var(--text-surface);
+  color: var(--text-inverse);
 
   @media (hover: hover) {
     &:hover:not([data-disabled]) {
       background-color: var(--surface-red-strong);
-      background-image: linear-gradient(var(--surface-inverted-hover), var(--surface-inverted-hover));
+      background-image: linear-gradient(var(--surface-inverse-hover), var(--surface-inverse-hover));
     }
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px var(--input-focus-critical);
+    box-shadow: 0 0 0 3px var(--state-focus-critical);
   }
 
   &[data-disabled] {
diff --git a/src/components/ButtonGroup/ButtonGroup.module.scss b/src/components/ButtonGroup/ButtonGroup.module.scss
index faa5009..addc010 100644
--- a/src/components/ButtonGroup/ButtonGroup.module.scss
+++ b/src/components/ButtonGroup/ButtonGroup.module.scss
@@ -30,7 +30,7 @@
 }
 
 // -- Filled variant ----------------------------------------------------------
-// Buttons sit flush; thin separators between them use --border-inverted.
+// Buttons sit flush; thin separators between them use --border-inverse.
 
 .filled {
   > * {
@@ -46,7 +46,7 @@
     bottom: 0;
     left: 0;
     width: var(--stroke-xs);
-    background-color: var(--border-inverted);
+    background-color: var(--border-inverse);
   }
 }
 
@@ -66,7 +66,7 @@
 
 // -- Secondary variant --------------------------------------------------------
 // No container shadow or border-radius. Thin separators between buttons
-// using --border-tertiary, same pseudo-element technique as filled.
+// using --border-primary, same pseudo-element technique as filled.
 
 .secondary {
   > * {
@@ -82,7 +82,7 @@
     bottom: 0;
     left: 0;
     width: var(--stroke-xs);
-    background-color: var(--border-tertiary);
+    background-color: var(--border-primary);
   }
 }
 
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
index 29a1970..7419896 100644
--- a/src/components/Card/Card.module.scss
+++ b/src/components/Card/Card.module.scss
@@ -12,7 +12,7 @@
 // Structured variant - has card surface
 .structured {
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-xl));
   overflow: clip;
 }
@@ -49,7 +49,7 @@
   height: 32px;
   padding: 0;
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-sm);
   color: var(--text-primary);
diff --git a/src/components/Chart/Chart.module.scss b/src/components/Chart/Chart.module.scss
index e5ae1dd..3182704 100644
--- a/src/components/Chart/Chart.module.scss
+++ b/src/components/Chart/Chart.module.scss
@@ -72,8 +72,8 @@
   flex-direction: column;
   gap: var(--spacing-4xs);
   padding: var(--spacing-3xs) var(--spacing-2xs);
-  background-color: var(--surface-elevated);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-xs);
   box-shadow: 0 1px 3px rgba(0, 0, 0, var(--chart-tooltip-shadow-opacity, 0.06));
   z-index: 10;
@@ -98,7 +98,7 @@
   color: var(--text-secondary);
   padding-bottom: var(--spacing-3xs);
   margin-bottom: var(--spacing-4xs);
-  border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+  border-bottom: var(--stroke-xs) solid var(--border-primary);
   margin-inline: calc(-1 * var(--spacing-2xs));
   padding-inline: var(--spacing-2xs);
 }
@@ -136,7 +136,7 @@
 }
 
 .tooltipFooter {
-  border-top: var(--stroke-xs) solid var(--border-tertiary);
+  border-top: var(--stroke-xs) solid var(--border-primary);
   margin: var(--spacing-4xs) calc(-1 * var(--spacing-2xs)) 0;
   padding: var(--spacing-3xs) var(--spacing-2xs) 0;
 }
@@ -258,7 +258,7 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--input-focus);
+    box-shadow: 0 0 0 2px var(--state-focus);
     @include smooth-corners(var(--corner-radius-xs));
   }
 }
@@ -469,7 +469,7 @@
 
 .gaugeMarker {
   width: 2px;
-  background-color: var(--border-primary);
+  background-color: var(--stroke-primary);
   flex: 1;
 }
 
diff --git a/src/components/Chart/LiveChart.tsx b/src/components/Chart/LiveChart.tsx
index a5c81dd..a49437f 100644
--- a/src/components/Chart/LiveChart.tsx
+++ b/src/components/Chart/LiveChart.tsx
@@ -137,7 +137,7 @@ export const Live = React.forwardRef<HTMLDivElement, LiveChartProps>(
     {
       data,
       value,
-      color = 'var(--border-primary)',
+      color = 'var(--stroke-primary)',
       window: windowSecs = 30,
       grid = true,
       fill = true,
diff --git a/src/components/Chart/types.ts b/src/components/Chart/types.ts
index 7217a5c..1876d47 100644
--- a/src/components/Chart/types.ts
+++ b/src/components/Chart/types.ts
@@ -42,7 +42,7 @@ export type TooltipProp =
 export type TooltipMode = 'off' | 'simple' | 'compact' | 'detailed' | 'custom';
 
 export const SERIES_COLORS = [
-  'var(--border-primary)',
+  'var(--stroke-primary)',
   'var(--text-secondary)',
   'var(--surface-blue-strong)',
   'var(--surface-purple-strong)',
diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
index ff3c7bb..429c713 100644
--- a/src/components/Checkbox/Checkbox.module.scss
+++ b/src/components/Checkbox/Checkbox.module.scss
@@ -78,7 +78,7 @@
   padding: var(--spacing-md);
   padding-right: var(--spacing-3xl);
   @include surface-with-hover(var(--surface-secondary));
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-md));
   overflow: hidden;
 
@@ -114,14 +114,14 @@
   // When used inside Checkbox.Item
   .item[data-checked] &,
   .item[data-indeterminate] & {
-    background-color: var(--surface-inverted);
+    background-color: var(--surface-inverse);
     border-color: transparent;
   }
 
   // When used standalone (Checkbox.Indicator)
   &[data-checked],
   &[data-indeterminate] {
-    background-color: var(--surface-inverted);
+    background-color: var(--surface-inverse);
     border-color: transparent;
   }
 
diff --git a/src/components/Chip/Chip.module.scss b/src/components/Chip/Chip.module.scss
index 34f189d..9a90b92 100644
--- a/src/components/Chip/Chip.module.scss
+++ b/src/components/Chip/Chip.module.scss
@@ -6,7 +6,7 @@
 .root {
   display: inline-flex;
   align-items: center;
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   background-color: var(--surface-secondary);
 
@@ -40,7 +40,7 @@
   padding: 0 var(--spacing-3xs);
   height: 100%;
   border: none;
-  border-left: var(--stroke-xs) solid var(--border-tertiary);
+  border-left: var(--stroke-xs) solid var(--border-primary);
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
@@ -52,7 +52,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 
@@ -72,7 +72,7 @@
     justify-content: center;
     padding: 0 var(--spacing-xs);
     height: 100%;
-    border-right: var(--stroke-xs) solid var(--border-tertiary);
+    border-right: var(--stroke-xs) solid var(--border-primary);
 
     &:last-of-type {
       border-right: none;
@@ -96,6 +96,6 @@
 
   .dismiss {
     padding: 0 var(--spacing-2xs);
-    border-left: var(--stroke-xs) solid var(--border-tertiary);
+    border-left: var(--stroke-xs) solid var(--border-primary);
   }
 }
diff --git a/src/components/Collapsible/Collapsible.module.scss b/src/components/Collapsible/Collapsible.module.scss
new file mode 100644
index 0000000..9693516
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.module.scss
@@ -0,0 +1,80 @@
+@use '../../tokens/text-styles' as *;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding: var(--spacing-md) 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+
+  &:focus-visible {
+    outline: 2px solid var(--state-focus);
+    outline-offset: -2px;
+  }
+
+  &[data-disabled] {
+    cursor: default;
+    opacity: 0.5;
+  }
+}
+
+.label {
+  flex: 1;
+  @include label;
+  color: var(--text-primary);
+}
+
+@media (hover: hover) {
+  .trigger:not([data-disabled]):hover .label {
+    text-decoration: underline;
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  color: var(--icon-primary);
+  transition: transform 200ms ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.root[data-open] .icon {
+  transform: rotate(180deg);
+}
+
+.panel {
+  width: 100%;
+  height: var(--collapsible-panel-height);
+  overflow: hidden;
+  transition: height 200ms ease-out;
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    height: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.content {
+  padding-bottom: var(--spacing-sm);
+  @include body;
+  color: var(--text-primary);
+}
diff --git a/src/components/Collapsible/Collapsible.stories.tsx b/src/components/Collapsible/Collapsible.stories.tsx
new file mode 100644
index 0000000..12a5932
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.stories.tsx
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Collapsible } from './index';
+import { CentralIcon } from '../Icon';
+
+const meta: Meta = {
+  title: 'Components/Collapsible',
+  component: Collapsible.Root,
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => (
+    <Collapsible.Root>
+      <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+      <Collapsible.Panel>
+        These settings are for experienced users. Adjust with caution.
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  ),
+};
+
+export const DefaultOpen: StoryObj = {
+  render: () => (
+    <Collapsible.Root defaultOpen>
+      <Collapsible.Trigger>Details</Collapsible.Trigger>
+      <Collapsible.Panel>
+        This panel starts open by default.
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  ),
+};
+
+export const Disabled: StoryObj = {
+  render: () => (
+    <Collapsible.Root disabled>
+      <Collapsible.Trigger>Cannot toggle</Collapsible.Trigger>
+      <Collapsible.Panel>
+        This content is locked.
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  ),
+};
+
+export const HideIcon: StoryObj = {
+  render: () => (
+    <Collapsible.Root>
+      <Collapsible.Trigger hideIcon>Show more</Collapsible.Trigger>
+      <Collapsible.Panel>
+        The trigger has no chevron icon.
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  ),
+};
+
+export const CustomIcon: StoryObj = {
+  render: () => (
+    <Collapsible.Root>
+      <Collapsible.Trigger icon={<CentralIcon name="IconPlus" size={16} />}>
+        Expand section
+      </Collapsible.Trigger>
+      <Collapsible.Panel>
+        A custom icon replaces the default chevron.
+      </Collapsible.Panel>
+    </Collapsible.Root>
+  ),
+};
+
+export const Controlled: StoryObj = {
+  render: function Render() {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div>
+        <div style={{ marginBottom: '1rem' }}>
+          State: {open ? 'open' : 'closed'}
+        </div>
+        <Collapsible.Root open={open} onOpenChange={setOpen}>
+          <Collapsible.Trigger>Controlled collapsible</Collapsible.Trigger>
+          <Collapsible.Panel>
+            The open state is controlled externally.
+          </Collapsible.Panel>
+        </Collapsible.Root>
+      </div>
+    );
+  },
+};
diff --git a/src/components/Collapsible/Collapsible.test-stories.tsx b/src/components/Collapsible/Collapsible.test-stories.tsx
new file mode 100644
index 0000000..641c19b
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.test-stories.tsx
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Collapsible } from './index';
+
+export const TestDefault = () => (
+  <Collapsible.Root>
+    <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
+    <Collapsible.Panel>Panel content</Collapsible.Panel>
+  </Collapsible.Root>
+);
+
+export const TestDefaultOpen = () => (
+  <Collapsible.Root defaultOpen>
+    <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
+    <Collapsible.Panel>Panel content</Collapsible.Panel>
+  </Collapsible.Root>
+);
+
+export const TestDisabled = () => (
+  <Collapsible.Root disabled>
+    <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
+    <Collapsible.Panel>Should not open</Collapsible.Panel>
+  </Collapsible.Root>
+);
+
+export const TestHideIcon = () => (
+  <Collapsible.Root>
+    <Collapsible.Trigger hideIcon>Toggle content</Collapsible.Trigger>
+    <Collapsible.Panel>Panel content</Collapsible.Panel>
+  </Collapsible.Root>
+);
+
+export const TestCustomIcon = () => (
+  <Collapsible.Root>
+    <Collapsible.Trigger icon={<span data-testid="custom-icon">+</span>}>
+      Toggle content
+    </Collapsible.Trigger>
+    <Collapsible.Panel>Panel content</Collapsible.Panel>
+  </Collapsible.Root>
+);
+
+export const TestControlled = ({ onChange }: { onChange?: (open: boolean) => void }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Collapsible.Root
+      open={open}
+      onOpenChange={(v) => {
+        setOpen(v);
+        onChange?.(v);
+      }}
+    >
+      <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
+      <Collapsible.Panel>Panel content</Collapsible.Panel>
+    </Collapsible.Root>
+  );
+};
diff --git a/src/components/Collapsible/Collapsible.test.tsx b/src/components/Collapsible/Collapsible.test.tsx
new file mode 100644
index 0000000..3496d9b
--- /dev/null
+++ b/src/components/Collapsible/Collapsible.test.tsx
@@ -0,0 +1,139 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import {
+  TestDefault,
+  TestDefaultOpen,
+  TestDisabled,
+  TestHideIcon,
+  TestCustomIcon,
+  TestControlled,
+} from './Collapsible.test-stories';
+
+test.describe('Collapsible', () => {
+  test.describe('Core', () => {
+    test('has no accessibility violations', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const AxeBuilder = (await import('@axe-core/playwright')).default;
+      const results = await new AxeBuilder({ page })
+        .exclude('html')
+        .disableRules(['landmark-one-main', 'page-has-heading-one', 'region'])
+        .analyze();
+      expect(results.violations).toEqual([]);
+    });
+
+    test('renders closed by default', async ({ mount }) => {
+      const component = await mount(<TestDefault />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Panel content');
+
+      await expect(trigger).toBeVisible();
+      await expect(panel).toBeHidden();
+    });
+
+    test('opens panel on click', async ({ mount }) => {
+      const component = await mount(<TestDefault />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Panel content');
+
+      await trigger.click();
+      await expect(panel).toBeVisible();
+    });
+
+    test('closes panel on second click', async ({ mount }) => {
+      const component = await mount(<TestDefault />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Panel content');
+
+      await trigger.click();
+      await expect(panel).toBeVisible();
+      await trigger.click();
+      await expect(panel).toBeHidden();
+    });
+
+    test('respects prefers-reduced-motion', async ({ mount, page }) => {
+      await page.emulateMedia({ reducedMotion: 'reduce' });
+      const component = await mount(<TestDefault />);
+      const iconWrapper = component.locator('button span').last();
+      const transition = await iconWrapper.evaluate((el) =>
+        window.getComputedStyle(el).transition
+      );
+      expect(transition).toMatch(/none|all 0s/);
+    });
+  });
+
+  test.describe('defaultOpen', () => {
+    test('renders open on mount', async ({ mount }) => {
+      const component = await mount(<TestDefaultOpen />);
+      const panel = component.getByText('Panel content');
+
+      await expect(panel).toBeVisible();
+    });
+  });
+
+  test.describe('disabled', () => {
+    test('cannot be expanded', async ({ mount }) => {
+      const component = await mount(<TestDisabled />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Should not open');
+
+      await trigger.click({ force: true });
+      await expect(panel).toBeHidden();
+    });
+  });
+
+  test.describe('hideIcon', () => {
+    test('hides the default chevron', async ({ mount }) => {
+      const component = await mount(<TestHideIcon />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const svg = trigger.locator('svg');
+
+      await expect(svg).toHaveCount(0);
+    });
+  });
+
+  test.describe('custom icon', () => {
+    test('renders custom icon instead of chevron', async ({ mount }) => {
+      const component = await mount(<TestCustomIcon />);
+      const customIcon = component.getByTestId('custom-icon');
+
+      await expect(customIcon).toBeVisible();
+    });
+  });
+
+  test.describe('Keyboard', () => {
+    test('Enter toggles panel', async ({ mount, page }) => {
+      const component = await mount(<TestDefault />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Panel content');
+
+      await trigger.focus();
+      await page.keyboard.press('Enter');
+      await expect(panel).toBeVisible();
+    });
+
+    test('Space toggles panel', async ({ mount, page }) => {
+      const component = await mount(<TestDefault />);
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Panel content');
+
+      await trigger.focus();
+      await page.keyboard.press('Space');
+      await expect(panel).toBeVisible();
+    });
+  });
+
+  test.describe('controlled mode', () => {
+    test('open/onOpenChange controls state', async ({ mount }) => {
+      let lastOpen: boolean = false;
+      const component = await mount(
+        <TestControlled onChange={(v) => (lastOpen = v)} />
+      );
+      const trigger = component.getByRole('button', { name: 'Toggle content' });
+      const panel = component.getByText('Panel content');
+
+      await expect(panel).toBeHidden();
+      await trigger.click();
+      await expect(panel).toBeVisible();
+      expect(lastOpen).toBe(true);
+    });
+  });
+});
diff --git a/src/components/Collapsible/index.ts b/src/components/Collapsible/index.ts
new file mode 100644
index 0000000..84d25f0
--- /dev/null
+++ b/src/components/Collapsible/index.ts
@@ -0,0 +1,9 @@
+import * as Collapsible from './parts';
+
+export { Collapsible };
+
+export type {
+  RootProps as CollapsibleRootProps,
+  TriggerProps as CollapsibleTriggerProps,
+  PanelProps as CollapsiblePanelProps,
+} from './parts';
diff --git a/src/components/Collapsible/parts.tsx b/src/components/Collapsible/parts.tsx
new file mode 100644
index 0000000..18f5b81
--- /dev/null
+++ b/src/components/Collapsible/parts.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { CentralIcon } from '../Icon';
+import { useTrackedOpenChange } from '../Analytics/useTrackedOpenChange';
+import clsx from 'clsx';
+import styles from './Collapsible.module.scss';
+
+export interface RootProps extends BaseCollapsible.Root.Props {
+  analyticsName?: string;
+}
+
+export const Root = React.forwardRef<HTMLDivElement, RootProps>(
+  function Root({ className, analyticsName, onOpenChange, ...props }, ref) {
+    const trackedOpenChange = useTrackedOpenChange(analyticsName, 'Collapsible', onOpenChange);
+
+    return (
+      <BaseCollapsible.Root
+        ref={ref}
+        className={clsx(styles.root, className)}
+        onOpenChange={trackedOpenChange}
+        {...props}
+      />
+    );
+  }
+);
+
+export interface TriggerProps extends BaseCollapsible.Trigger.Props {
+  /** Hide the trailing chevron icon. */
+  hideIcon?: boolean;
+  /** Replace the default chevron with a custom icon element. */
+  icon?: React.ReactNode;
+}
+
+/**
+ * Renders a `<button>` with an inner `<span class="label">` for children and
+ * a trailing icon `<span>`. This structure enables the flex layout between
+ * label and chevron — consumers should be aware of the intermediate spans
+ * when targeting children via CSS selectors.
+ */
+
+export const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
+  function Trigger({ className, children, hideIcon, icon, ...props }, ref) {
+    return (
+      <BaseCollapsible.Trigger
+        ref={ref}
+        className={clsx(styles.trigger, className)}
+        {...props}
+      >
+        <span className={styles.label}>{children}</span>
+        {!hideIcon && (
+          <span className={styles.icon}>
+            {icon ?? <CentralIcon name="IconChevronDownSmall" size={24} />}
+          </span>
+        )}
+      </BaseCollapsible.Trigger>
+    );
+  }
+);
+
+export interface PanelProps extends BaseCollapsible.Panel.Props {}
+
+export const Panel = React.forwardRef<HTMLDivElement, PanelProps>(
+  function Panel({ className, children, ...props }, ref) {
+    return (
+      <BaseCollapsible.Panel
+        ref={ref}
+        className={clsx(styles.panel, className)}
+        {...props}
+      >
+        <div className={styles.content}>{children}</div>
+      </BaseCollapsible.Panel>
+    );
+  }
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  Root.displayName = 'Collapsible.Root';
+  Trigger.displayName = 'Collapsible.Trigger';
+  Panel.displayName = 'Collapsible.Panel';
+}
diff --git a/src/components/Combobox/Combobox.module.scss b/src/components/Combobox/Combobox.module.scss
index eba1b4d..7b0c76f 100644
--- a/src/components/Combobox/Combobox.module.scss
+++ b/src/components/Combobox/Combobox.module.scss
@@ -13,7 +13,7 @@
   min-height: 36px;
   padding: var(--spacing-2xs) calc(var(--spacing-xs) + 20px) var(--spacing-2xs) var(--spacing-sm);
   background: transparent;
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   transition:
     border-color 150ms ease,
@@ -106,7 +106,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 
@@ -148,7 +148,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 
@@ -174,7 +174,7 @@
   max-width: var(--available-width);
   overflow: hidden;
   background: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   outline: 0;
@@ -303,7 +303,7 @@
     left: 0;
     right: 0;
     height: var(--stroke-xs);
-    background-color: var(--border-tertiary);
+    background-color: var(--border-primary);
   }
 }
 
diff --git a/src/components/Command/Command.module.scss b/src/components/Command/Command.module.scss
index 8abd333..1f20c31 100644
--- a/src/components/Command/Command.module.scss
+++ b/src/components/Command/Command.module.scss
@@ -30,7 +30,7 @@
   max-width: calc(100vw - 48px);
   max-height: min(420px, 70vh);
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-md));
   box-shadow: var(--shadow-lg);
   overflow: hidden;
@@ -54,7 +54,7 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+  border-bottom: var(--stroke-xs) solid var(--border-primary);
 }
 
 .input {
@@ -95,7 +95,7 @@
   }
 
   &:not([data-empty]) {
-    border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+    border-bottom: var(--stroke-xs) solid var(--border-primary);
   }
 }
 
@@ -206,5 +206,5 @@
 .separator {
   height: var(--stroke-xs);
   margin-block: var(--spacing-3xs);
-  background-color: var(--border-tertiary);
+  background-color: var(--border-primary);
 }
diff --git a/src/components/Dialog/Dialog.module.scss b/src/components/Dialog/Dialog.module.scss
index 13c4e0c..c5ddbe3 100644
--- a/src/components/Dialog/Dialog.module.scss
+++ b/src/components/Dialog/Dialog.module.scss
@@ -39,7 +39,7 @@
   width: var(--dialog-width, 420px);
   max-width: calc(100vw - var(--spacing-2xl));
   overflow: clip;
-  background-color: var(--surface-elevated);
+  background-color: var(--surface-panel);
   border: var(--stroke-xs) solid var(--border-secondary);
   @include smooth-corners(var(--corner-radius-md));
   box-shadow: var(--shadow-lg);
@@ -135,7 +135,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--input-focus);
+    outline: 2px solid var(--state-focus);
     outline-offset: -2px;
   }
 
diff --git a/src/components/Drawer/Drawer.module.scss b/src/components/Drawer/Drawer.module.scss
new file mode 100644
index 0000000..34ea339
--- /dev/null
+++ b/src/components/Drawer/Drawer.module.scss
@@ -0,0 +1,159 @@
+@use '../../tokens/text-styles' as *;
+@use '../../tokens/mixins' as *;
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: var(--surface-backdrop);
+  opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  transition: opacity 450ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+
+  &[data-swiping] {
+    transition-duration: 0ms;
+  }
+
+  &[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.viewport {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  touch-action: none;
+}
+
+.popup {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(100dvh - var(--spacing-2xl));
+  min-height: 0;
+  overflow: visible;
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
+  border-bottom: none;
+  border-radius: var(--corner-radius-lg) var(--corner-radius-lg) 0 0;
+  box-shadow: var(--shadow-lg);
+  touch-action: none;
+  transform: translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)));
+  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: translateY(100%);
+  }
+
+  &[data-swiping] {
+    user-select: none;
+  }
+
+  &[data-swiping],
+  &[data-nested-drawer-swiping] {
+    transition-duration: 0ms;
+  }
+
+  &[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength, 1) * 400ms);
+  }
+
+  // Right panel
+  &[data-swipe-direction='right'] {
+    width: var(--drawer-width, 420px);
+    max-width: calc(100vw - var(--spacing-2xl));
+    max-height: none;
+    height: 100%;
+    border-radius: 0;
+    border-bottom: none;
+    border-right: none;
+    border-left: var(--stroke-xs) solid var(--border-primary);
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateX(100%);
+    }
+  }
+
+  // Left panel
+  &[data-swipe-direction='left'] {
+    width: var(--drawer-width, 420px);
+    max-width: calc(100vw - var(--spacing-2xl));
+    max-height: none;
+    height: 100%;
+    border-radius: 0;
+    border-bottom: none;
+    border-left: none;
+    border-right: var(--stroke-xs) solid var(--border-primary);
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translateX(-100%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: auto;
+  padding: var(--spacing-md) var(--spacing-xl) var(--spacing-xl);
+}
+
+.title {
+  @include headline-sm;
+  margin: 0;
+  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xs);
+  color: var(--text-primary);
+  cursor: default;
+  touch-action: none;
+}
+
+.description {
+  @include body;
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.indent {
+  transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1), border-radius 450ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  &[data-active] {
+    transform: scale(0.94);
+    border-radius: var(--corner-radius-lg);
+    overflow: clip;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.indentBackground {
+  position: fixed;
+  inset: 0;
+  background-color: var(--surface-secondary);
+  z-index: -1;
+}
diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx
new file mode 100644
index 0000000..7a2ff1e
--- /dev/null
+++ b/src/components/Drawer/Drawer.stories.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Drawer } from './index';
+import { Button } from '../Button';
+import { CentralIcon } from '../Icon';
+
+const meta: Meta = {
+  title: 'Components/Drawer',
+  component: Drawer.Root,
+};
+
+export default meta;
+
+export const BottomSheet: StoryObj = {
+  render: () => (
+    <Drawer.Root>
+      <Drawer.Trigger render={<Button variant="outline" />}>
+        Open bottom sheet
+      </Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Backdrop />
+        <Drawer.Viewport>
+          <Drawer.Popup>
+            <Drawer.Title>Notifications</Drawer.Title>
+            <Drawer.Content>
+              <Drawer.Description>
+                You are all caught up. Good job!
+              </Drawer.Description>
+              <div style={{ marginTop: 'var(--spacing-md)' }}>
+                <Drawer.Close render={<Button variant="outline" />}>
+                  Close
+                </Drawer.Close>
+              </div>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  ),
+};
+
+export const SidePanel: StoryObj = {
+  render: function Render() {
+    const [open, setOpen] = React.useState(false);
+
+    return (
+      <div>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          View request details
+        </Button>
+        <Drawer.Root open={open} onOpenChange={setOpen} swipeDirection="right">
+          <Drawer.Portal>
+            <Drawer.Backdrop />
+            <Drawer.Viewport style={{ alignItems: 'stretch', justifyContent: 'flex-end' }}>
+              <Drawer.Popup>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: 'var(--spacing-md) var(--spacing-xl)', borderBottom: 'var(--stroke-xs) solid var(--border-primary)' }}>
+                  <span className="label" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-mono, monospace)' }}>
+                    GET /customers
+                  </span>
+                  <Drawer.Close render={<Button variant="ghost" size="compact" iconOnly aria-label="Close" />}>
+                    <CentralIcon name="IconCrossSmall" size={16} />
+                  </Drawer.Close>
+                </div>
+                <Drawer.Content>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--spacing-xs)' }}>
+                    {[
+                      ['Request ID', 'ck8qs-177'],
+                      ['Path', '/customers'],
+                      ['Host', 'grid-k507nwxq0.vercel.app'],
+                      ['Duration', '314ms'],
+                      ['Cache', 'HIT'],
+                    ].map(([label, value]) => (
+                      <div key={label} style={{ display: 'flex', justifyContent: 'space-between', padding: 'var(--spacing-2xs) 0' }}>
+                        <span className="body-sm" style={{ color: 'var(--text-secondary)' }}>{label}</span>
+                        <span className="body-sm" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-mono, monospace)' }}>{value}</span>
+                      </div>
+                    ))}
+                  </div>
+                </Drawer.Content>
+              </Drawer.Popup>
+            </Drawer.Viewport>
+          </Drawer.Portal>
+        </Drawer.Root>
+      </div>
+    );
+  },
+};
diff --git a/src/components/Drawer/Drawer.test-stories.tsx b/src/components/Drawer/Drawer.test-stories.tsx
new file mode 100644
index 0000000..e4c4b01
--- /dev/null
+++ b/src/components/Drawer/Drawer.test-stories.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import * as React from 'react';
+import { Drawer } from './index';
+
+export function TestDefault() {
+  return (
+    <Drawer.Root defaultOpen>
+      <Drawer.Trigger data-testid="trigger">Open drawer</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Backdrop data-testid="backdrop" />
+        <Drawer.Viewport>
+          <Drawer.Popup data-testid="popup">
+            <Drawer.Content>
+              <Drawer.Title data-testid="title">Drawer title</Drawer.Title>
+              <Drawer.Description data-testid="description">
+                Drawer description
+              </Drawer.Description>
+              <Drawer.Close data-testid="close">Close</Drawer.Close>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+export function TestClosed() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger data-testid="trigger">Open drawer</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Backdrop />
+        <Drawer.Viewport>
+          <Drawer.Popup data-testid="popup">
+            <Drawer.Content>
+              <Drawer.Title>Drawer title</Drawer.Title>
+              <Drawer.Close data-testid="close">Close</Drawer.Close>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+export function TestNonModal() {
+  return (
+    <Drawer.Root defaultOpen modal={false}>
+      <Drawer.Trigger data-testid="trigger">Open drawer</Drawer.Trigger>
+      <Drawer.Portal>
+        <Drawer.Viewport>
+          <Drawer.Popup data-testid="popup">
+            <Drawer.Content>
+              <Drawer.Title>Non-modal drawer</Drawer.Title>
+              <Drawer.Close data-testid="close">Close</Drawer.Close>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+export function TestControlled() {
+  const [open, setOpen] = React.useState(false);
+  return (
+    <div>
+      <button data-testid="toggle" onClick={() => setOpen(!open)}>
+        Toggle: {open ? 'Open' : 'Closed'}
+      </button>
+      <Drawer.Root open={open} onOpenChange={setOpen}>
+        <Drawer.Portal>
+          <Drawer.Backdrop />
+          <Drawer.Viewport>
+            <Drawer.Popup data-testid="popup">
+              <Drawer.Content>
+                <Drawer.Title>Controlled drawer</Drawer.Title>
+                <Drawer.Close data-testid="close">Close</Drawer.Close>
+              </Drawer.Content>
+            </Drawer.Popup>
+          </Drawer.Viewport>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </div>
+  );
+}
+
diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx
new file mode 100644
index 0000000..fd1778b
--- /dev/null
+++ b/src/components/Drawer/Drawer.test.tsx
@@ -0,0 +1,102 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import {
+  TestDefault,
+  TestClosed,
+  TestNonModal,
+  TestControlled,
+} from './Drawer.test-stories';
+
+test.describe('Drawer', () => {
+  test.describe('Core', () => {
+    test('has no accessibility violations', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const AxeBuilder = (await import('@axe-core/playwright')).default;
+      const results = await new AxeBuilder({ page })
+        .exclude('html')
+        .disableRules(['landmark-one-main', 'page-has-heading-one', 'region'])
+        .analyze();
+      expect(results.violations).toEqual([]);
+    });
+
+    test('renders popup when defaultOpen', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+      await expect(popup).toHaveAttribute('data-open', '');
+    });
+
+    test('renders title and description', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      await expect(page.getByTestId('title')).toHaveText('Drawer title');
+      await expect(page.getByTestId('description')).toHaveText('Drawer description');
+    });
+
+    test('renders backdrop', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const backdrop = page.getByTestId('backdrop');
+      await expect(backdrop).toBeAttached();
+    });
+  });
+
+  test.describe('Interaction', () => {
+    test('opens on trigger click', async ({ mount, page }) => {
+      await mount(<TestClosed />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).not.toBeVisible();
+
+      await page.getByTestId('trigger').click();
+      await expect(popup).toBeVisible();
+    });
+
+    test('closes on close button click', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+
+      await page.getByTestId('close').click();
+      await expect(popup).not.toBeVisible();
+    });
+
+    test('closes on escape', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+
+      await page.keyboard.press('Escape');
+      await expect(popup).not.toBeVisible();
+    });
+
+    test('closes on backdrop click', async ({ mount, page }) => {
+      await mount(<TestClosed />);
+      await page.getByTestId('trigger').click();
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+
+      await page.mouse.click(10, 10);
+      await expect(popup).not.toBeVisible();
+    });
+  });
+
+  test.describe('Non-modal', () => {
+    test('renders without backdrop', async ({ mount, page }) => {
+      await mount(<TestNonModal />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+    });
+  });
+
+  test.describe('Controlled', () => {
+    test('opens via external state and closes via close button', async ({ mount, page }) => {
+      await mount(<TestControlled />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).not.toBeVisible();
+
+      await page.getByTestId('toggle').click();
+      await expect(popup).toBeVisible();
+
+      await page.getByTestId('close').click();
+      await expect(popup).not.toBeVisible();
+    });
+  });
+
+});
diff --git a/src/components/Drawer/index.ts b/src/components/Drawer/index.ts
new file mode 100644
index 0000000..092d893
--- /dev/null
+++ b/src/components/Drawer/index.ts
@@ -0,0 +1,63 @@
+export {
+  DrawerProvider as Provider,
+  DrawerRoot as Root,
+  DrawerTrigger as Trigger,
+  DrawerPortal as Portal,
+  DrawerBackdrop as Backdrop,
+  DrawerViewport as Viewport,
+  DrawerPopup as Popup,
+  DrawerContent as Content,
+  DrawerTitle as Title,
+  DrawerDescription as Description,
+  DrawerClose as Close,
+  DrawerIndent as Indent,
+  DrawerIndentBackground as IndentBackground,
+} from './parts';
+
+export type {
+  DrawerProviderProps,
+  DrawerRootProps,
+  DrawerTriggerProps,
+  DrawerPortalProps,
+  DrawerBackdropProps,
+  DrawerViewportProps,
+  DrawerPopupProps,
+  DrawerContentProps,
+  DrawerTitleProps,
+  DrawerDescriptionProps,
+  DrawerCloseProps,
+  DrawerIndentProps,
+  DrawerIndentBackgroundProps,
+} from './parts';
+
+import {
+  DrawerProvider,
+  DrawerRoot,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerBackdrop,
+  DrawerViewport,
+  DrawerPopup,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerClose,
+  DrawerIndent,
+  DrawerIndentBackground,
+} from './parts';
+
+export const Drawer = {
+  Provider: DrawerProvider,
+  Root: DrawerRoot,
+  Trigger: DrawerTrigger,
+  Portal: DrawerPortal,
+  Backdrop: DrawerBackdrop,
+  Viewport: DrawerViewport,
+  Popup: DrawerPopup,
+  Content: DrawerContent,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Close: DrawerClose,
+  Indent: DrawerIndent,
+  IndentBackground: DrawerIndentBackground,
+};
diff --git a/src/components/Drawer/parts.tsx b/src/components/Drawer/parts.tsx
new file mode 100644
index 0000000..d83af73
--- /dev/null
+++ b/src/components/Drawer/parts.tsx
@@ -0,0 +1,186 @@
+'use client';
+
+import * as React from 'react';
+import { DrawerPreview as BaseDrawer } from '@base-ui/react/drawer';
+import clsx from 'clsx';
+import { useTrackedOpenChange } from '../Analytics/useTrackedOpenChange';
+import styles from './Drawer.module.scss';
+
+// Provider
+export interface DrawerProviderProps extends BaseDrawer.Provider.Props {}
+
+export function DrawerProvider(props: DrawerProviderProps) {
+  return <BaseDrawer.Provider {...props} />;
+}
+
+// Root
+export interface DrawerRootProps extends BaseDrawer.Root.Props {
+  analyticsName?: string;
+}
+
+export function DrawerRoot({ analyticsName, onOpenChange, ...props }: DrawerRootProps) {
+  const trackedOpenChange = useTrackedOpenChange(analyticsName, 'Drawer', onOpenChange);
+  return <BaseDrawer.Root onOpenChange={trackedOpenChange} {...props} />;
+}
+
+// Trigger
+export interface DrawerTriggerProps extends BaseDrawer.Trigger.Props {}
+
+export const DrawerTrigger = React.forwardRef<HTMLButtonElement, DrawerTriggerProps>(
+  function DrawerTrigger(props, ref) {
+    return <BaseDrawer.Trigger ref={ref} {...props} />;
+  },
+);
+
+// Portal
+export interface DrawerPortalProps extends BaseDrawer.Portal.Props {}
+
+export function DrawerPortal(props: DrawerPortalProps) {
+  return <BaseDrawer.Portal {...props} />;
+}
+
+// Backdrop
+export interface DrawerBackdropProps extends BaseDrawer.Backdrop.Props {}
+
+export const DrawerBackdrop = React.forwardRef<HTMLDivElement, DrawerBackdropProps>(
+  function DrawerBackdrop({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Backdrop
+        ref={ref}
+        className={clsx(styles.backdrop, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Viewport
+export interface DrawerViewportProps extends BaseDrawer.Viewport.Props {}
+
+export const DrawerViewport = React.forwardRef<HTMLDivElement, DrawerViewportProps>(
+  function DrawerViewport({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Viewport
+        ref={ref}
+        className={clsx(styles.viewport, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Popup
+export interface DrawerPopupProps extends BaseDrawer.Popup.Props {}
+
+export const DrawerPopup = React.forwardRef<HTMLDivElement, DrawerPopupProps>(
+  function DrawerPopup({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Popup
+        ref={ref}
+        className={clsx(styles.popup, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Content
+export interface DrawerContentProps extends BaseDrawer.Content.Props {}
+
+export const DrawerContent = React.forwardRef<HTMLDivElement, DrawerContentProps>(
+  function DrawerContent({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Content
+        ref={ref}
+        className={clsx(styles.content, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Title
+export interface DrawerTitleProps extends BaseDrawer.Title.Props {}
+
+export const DrawerTitle = React.forwardRef<HTMLHeadingElement, DrawerTitleProps>(
+  function DrawerTitle({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Title
+        ref={ref}
+        className={clsx(styles.title, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Description
+export interface DrawerDescriptionProps extends BaseDrawer.Description.Props {}
+
+export const DrawerDescription = React.forwardRef<HTMLParagraphElement, DrawerDescriptionProps>(
+  function DrawerDescription({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Description
+        ref={ref}
+        className={clsx(styles.description, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Close
+export interface DrawerCloseProps extends BaseDrawer.Close.Props {}
+
+export const DrawerClose = React.forwardRef<HTMLButtonElement, DrawerCloseProps>(
+  function DrawerClose(props, ref) {
+    return <BaseDrawer.Close ref={ref} {...props} />;
+  },
+);
+
+// Indent
+export interface DrawerIndentProps extends BaseDrawer.Indent.Props {}
+
+export const DrawerIndent = React.forwardRef<HTMLDivElement, DrawerIndentProps>(
+  function DrawerIndent({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.Indent
+        ref={ref}
+        className={clsx(styles.indent, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// IndentBackground
+export interface DrawerIndentBackgroundProps extends BaseDrawer.IndentBackground.Props {}
+
+export const DrawerIndentBackground = React.forwardRef<HTMLDivElement, DrawerIndentBackgroundProps>(
+  function DrawerIndentBackground({ className, ...props }, ref) {
+    return (
+      <BaseDrawer.IndentBackground
+        ref={ref}
+        className={clsx(styles.indentBackground, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+// Display names
+if (process.env.NODE_ENV !== 'production') {
+  DrawerProvider.displayName = 'Drawer.Provider';
+  DrawerRoot.displayName = 'Drawer.Root';
+  DrawerTrigger.displayName = 'Drawer.Trigger';
+  DrawerPortal.displayName = 'Drawer.Portal';
+  DrawerBackdrop.displayName = 'Drawer.Backdrop';
+  DrawerViewport.displayName = 'Drawer.Viewport';
+  DrawerPopup.displayName = 'Drawer.Popup';
+  DrawerContent.displayName = 'Drawer.Content';
+  DrawerTitle.displayName = 'Drawer.Title';
+  DrawerDescription.displayName = 'Drawer.Description';
+  DrawerClose.displayName = 'Drawer.Close';
+  DrawerIndent.displayName = 'Drawer.Indent';
+  DrawerIndentBackground.displayName = 'Drawer.IndentBackground';
+}
diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
index a4680ca..e5ce68d 100644
--- a/src/components/Input/Input.module.scss
+++ b/src/components/Input/Input.module.scss
@@ -10,7 +10,7 @@
   height: 36px;
   box-sizing: border-box;
   padding-inline: var(--spacing-sm);
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   color: var(--text-primary);
   outline: none;
diff --git a/src/components/InputGroup/InputGroup.module.scss b/src/components/InputGroup/InputGroup.module.scss
index 0084a36..954f2f5 100644
--- a/src/components/InputGroup/InputGroup.module.scss
+++ b/src/components/InputGroup/InputGroup.module.scss
@@ -10,7 +10,7 @@
   align-items: center;
   height: 36px;
   background: transparent;
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   // PhoneInput uses overflow: visible for dropdown positioning; safe here.
   overflow: hidden;
@@ -82,11 +82,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--surface-sunken);
+  background: var(--surface-secondary);
   padding: var(--spacing-none) var(--spacing-sm);
   @include input;
   color: var(--text-secondary);
-  border-right: var(--stroke-sm) solid var(--border-tertiary);
+  border-right: var(--stroke-sm) solid var(--border-primary);
   align-self: stretch;
   cursor: text;
   flex-shrink: 0;
@@ -98,7 +98,7 @@
 
   &:last-child {
     border-right: none;
-    border-left: var(--stroke-sm) solid var(--border-tertiary);
+    border-left: var(--stroke-sm) solid var(--border-primary);
     margin-left: calc(-1 * var(--_gap));
     margin-right: 0;
   }
@@ -167,7 +167,7 @@
 
 .buttonOutline {
   background: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   box-shadow: var(--shadow-sm);
 }
 
@@ -193,7 +193,7 @@
   &:focus-visible {
     background: var(--surface-hover);
     border: var(--stroke-xs) solid var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
     outline: none;
   }
 
@@ -209,7 +209,7 @@
 
 .selectTriggerOutline {
   background: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   box-shadow: var(--shadow-sm);
 }
 
diff --git a/src/components/InputGroup/InputGroup.test.tsx b/src/components/InputGroup/InputGroup.test.tsx
index d738841..ccb2a6a 100644
--- a/src/components/InputGroup/InputGroup.test.tsx
+++ b/src/components/InputGroup/InputGroup.test.tsx
@@ -325,7 +325,7 @@ test.describe('InputGroup', () => {
         getComputedStyle(el).borderColor
       );
       // The exact color depends on --border-secondary token
-      // Just verify it changed from the default --border-tertiary
+      // Just verify it changed from the default --border-primary
       expect(borderColor).toBeTruthy();
     });
   });
diff --git a/src/components/Item/Item.module.scss b/src/components/Item/Item.module.scss
index ad05984..f348062 100644
--- a/src/components/Item/Item.module.scss
+++ b/src/components/Item/Item.module.scss
@@ -26,7 +26,7 @@
 
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--input-focus);
+    box-shadow: 0 0 0 2px var(--state-focus);
   }
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/Logo/Logo.module.scss b/src/components/Logo/Logo.module.scss
index fd5cd65..7d4b8c0 100644
--- a/src/components/Logo/Logo.module.scss
+++ b/src/components/Logo/Logo.module.scss
@@ -3,5 +3,5 @@
 .root {
   display: block;
   flex-shrink: 0;
-  color: var(--surface-inverted);
+  color: var(--surface-inverse);
 }
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
index 248fe31..a8717cb 100644
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -21,7 +21,7 @@ export interface LogoProps extends Omit<React.SVGProps<SVGSVGElement>, 'children
   height?: number;
   /** 
    * Logo color. Accepts any CSS color value or token.
-   * @default 'var(--surface-inverted)'
+   * @default 'var(--surface-inverse)'
    */
   color?: string;
   /** Required for accessibility. Describes the logo for screen readers. */
diff --git a/src/components/Menu/Menu.module.scss b/src/components/Menu/Menu.module.scss
index 5af7d69..fb84564 100644
--- a/src/components/Menu/Menu.module.scss
+++ b/src/components/Menu/Menu.module.scss
@@ -16,7 +16,7 @@
   gap: var(--spacing-4xs);
   padding: var(--spacing-3xs);
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   outline: 0;
@@ -170,7 +170,7 @@
     left: 0;
     right: 0;
     height: var(--stroke-xs);
-    background-color: var(--border-tertiary);
+    background-color: var(--border-primary);
   }
 }
 
@@ -230,7 +230,7 @@
 .arrow {
   display: flex;
   fill: var(--surface-primary);
-  stroke: var(--border-tertiary);
+  stroke: var(--border-primary);
   stroke-width: var(--stroke-xs);
 }
 
diff --git a/src/components/Meter/Meter.module.scss b/src/components/Meter/Meter.module.scss
index b8f035b..69f623e 100644
--- a/src/components/Meter/Meter.module.scss
+++ b/src/components/Meter/Meter.module.scss
@@ -35,7 +35,7 @@
 
 .indicator {
   height: 100%;
-  background: var(--surface-inverted);
+  background: var(--surface-inverse);
   transition: width 200ms ease-out;
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/NavigationMenu/NavigationMenu.module.scss b/src/components/NavigationMenu/NavigationMenu.module.scss
index 065bb42..5af43af 100644
--- a/src/components/NavigationMenu/NavigationMenu.module.scss
+++ b/src/components/NavigationMenu/NavigationMenu.module.scss
@@ -42,7 +42,7 @@
   &:focus-visible {
     background-color: var(--surface-secondary);
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
     outline: none;
   }
 
@@ -91,7 +91,7 @@
   &:focus-visible {
     background-color: var(--surface-secondary);
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
     outline: none;
   }
 
@@ -139,7 +139,7 @@
   &:focus-visible {
     background-color: var(--surface-secondary);
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
     outline: none;
   }
 
@@ -197,7 +197,7 @@
   &:focus-visible {
     background-color: var(--surface-secondary);
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
     outline: none;
   }
 
@@ -309,7 +309,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   outline: 0;
@@ -393,7 +393,7 @@
 .arrow {
   display: flex;
   fill: var(--surface-primary);
-  stroke: var(--border-tertiary);
+  stroke: var(--border-primary);
   stroke-width: var(--stroke-xs);
 }
 
@@ -464,6 +464,6 @@
     left: 0;
     right: 0;
     height: var(--stroke-xs);
-    background-color: var(--border-tertiary);
+    background-color: var(--border-primary);
   }
 }
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
index a083147..bcb07dd 100644
--- a/src/components/Pagination/Pagination.module.scss
+++ b/src/components/Pagination/Pagination.module.scss
@@ -36,7 +36,7 @@
   width: 24px;
   height: 24px;
   padding: 0;
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   background-color: var(--surface-primary);
   color: var(--icon-primary);
   cursor: pointer;
@@ -70,7 +70,7 @@
   &:focus-visible {
     outline: none;
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
     // Ensure focus ring appears above adjacent button
     position: relative;
     z-index: 1;
diff --git a/src/components/PhoneInput/PhoneInput.module.scss b/src/components/PhoneInput/PhoneInput.module.scss
index 4b682d6..a6c9d2a 100644
--- a/src/components/PhoneInput/PhoneInput.module.scss
+++ b/src/components/PhoneInput/PhoneInput.module.scss
@@ -8,7 +8,7 @@
   align-items: center;
   height: 36px;
   background: transparent;
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   overflow: visible;
   transition:
@@ -45,7 +45,7 @@
   height: 100%;
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-3xs);
-  border-right: var(--stroke-sm) solid var(--border-tertiary);
+  border-right: var(--stroke-sm) solid var(--border-primary);
   flex-shrink: 0;
 
   &[data-disabled] {
@@ -70,7 +70,7 @@
   flex-shrink: 0;
   width: 18px;
   height: 18px;
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-round);
   overflow: clip;
 
@@ -139,7 +139,7 @@
   max-height: min(23rem, var(--available-height));
   overflow: hidden;
   background: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   outline: 0;
diff --git a/src/components/Popover/Popover.module.scss b/src/components/Popover/Popover.module.scss
index e4270c6..5e63ff0 100644
--- a/src/components/Popover/Popover.module.scss
+++ b/src/components/Popover/Popover.module.scss
@@ -8,7 +8,7 @@
 
 .popup {
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   overflow: clip;
@@ -59,7 +59,7 @@
   height: 8px;
   transform: rotate(45deg);
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
 
   &[data-side='top'] {
     bottom: -4px;
diff --git a/src/components/PreviewCard/PreviewCard.module.scss b/src/components/PreviewCard/PreviewCard.module.scss
new file mode 100644
index 0000000..2c42ba3
--- /dev/null
+++ b/src/components/PreviewCard/PreviewCard.module.scss
@@ -0,0 +1,65 @@
+@use '../../tokens/mixins' as *;
+
+.positioner {
+  z-index: 1000;
+}
+
+.popup {
+  max-width: 320px;
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
+  @include smooth-corners(var(--corner-radius-sm));
+  box-shadow: var(--shadow-lg);
+  overflow: clip;
+  opacity: 0;
+  transform: scale(0.96);
+  transform-origin: var(--transform-origin, center);
+  transition: opacity 150ms ease-out, transform 150ms ease-out;
+
+  &[data-open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.arrow {
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
+
+  &[data-side='top'] {
+    bottom: -4px;
+    border-top: none;
+    border-left: none;
+  }
+
+  &[data-side='bottom'] {
+    top: -4px;
+    border-bottom: none;
+    border-right: none;
+  }
+
+  &[data-side='left'] {
+    right: -4px;
+    border-left: none;
+    border-bottom: none;
+  }
+
+  &[data-side='right'] {
+    left: -4px;
+    border-right: none;
+    border-top: none;
+  }
+}
diff --git a/src/components/PreviewCard/PreviewCard.stories.tsx b/src/components/PreviewCard/PreviewCard.stories.tsx
new file mode 100644
index 0000000..331e090
--- /dev/null
+++ b/src/components/PreviewCard/PreviewCard.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PreviewCard } from './index';
+
+const meta: Meta = {
+  title: 'Components/PreviewCard',
+  component: PreviewCard.Root,
+};
+
+export default meta;
+
+export const Default: StoryObj = {
+  render: () => (
+    <div style={{ padding: '4rem' }}>
+      <PreviewCard.Root>
+        <PreviewCard.Trigger href="https://example.com">
+          Hover to preview
+        </PreviewCard.Trigger>
+        <PreviewCard.Portal>
+          <PreviewCard.Positioner sideOffset={8}>
+            <PreviewCard.Popup style={{ padding: 'var(--spacing-md)' }}>
+              <p style={{ margin: 0 }}>A lightweight preview of the linked page</p>
+            </PreviewCard.Popup>
+          </PreviewCard.Positioner>
+        </PreviewCard.Portal>
+      </PreviewCard.Root>
+    </div>
+  ),
+};
+
+export const WithArrow: StoryObj = {
+  render: () => (
+    <div style={{ padding: '4rem' }}>
+      <PreviewCard.Root>
+        <PreviewCard.Trigger href="https://example.com">
+          Hover to preview
+        </PreviewCard.Trigger>
+        <PreviewCard.Portal>
+          <PreviewCard.Positioner sideOffset={8}>
+            <PreviewCard.Popup style={{ padding: 'var(--spacing-md)' }}>
+              <PreviewCard.Arrow />
+              <p style={{ margin: 0 }}>Preview with an arrow pointer</p>
+            </PreviewCard.Popup>
+          </PreviewCard.Positioner>
+        </PreviewCard.Portal>
+      </PreviewCard.Root>
+    </div>
+  ),
+};
+
+export const RichContent: StoryObj = {
+  render: () => (
+    <div style={{ padding: '4rem' }}>
+      <PreviewCard.Root>
+        <PreviewCard.Trigger href="https://example.com">
+          Typography docs
+        </PreviewCard.Trigger>
+        <PreviewCard.Portal>
+          <PreviewCard.Positioner sideOffset={8}>
+            <PreviewCard.Popup>
+              <img
+                src="https://placehold.co/320x160"
+                alt=""
+                style={{ width: '100%', display: 'block' }}
+              />
+              <div style={{ padding: 'var(--spacing-md)' }}>
+                <p style={{ margin: '0 0 var(--spacing-xs)' }}>
+                  <strong>Typography</strong>
+                </p>
+                <p style={{ margin: 0, color: 'var(--text-secondary)' }}>
+                  Learn about text styles, mixins, and scale
+                </p>
+              </div>
+            </PreviewCard.Popup>
+          </PreviewCard.Positioner>
+        </PreviewCard.Portal>
+      </PreviewCard.Root>
+    </div>
+  ),
+};
+
+export const DefaultOpen: StoryObj = {
+  render: () => (
+    <div style={{ padding: '4rem' }}>
+      <PreviewCard.Root defaultOpen>
+        <PreviewCard.Trigger href="https://example.com">
+          Always visible preview
+        </PreviewCard.Trigger>
+        <PreviewCard.Portal>
+          <PreviewCard.Positioner sideOffset={8}>
+            <PreviewCard.Popup style={{ padding: 'var(--spacing-md)' }}>
+              <p style={{ margin: 0 }}>This preview starts open</p>
+            </PreviewCard.Popup>
+          </PreviewCard.Positioner>
+        </PreviewCard.Portal>
+      </PreviewCard.Root>
+    </div>
+  ),
+};
diff --git a/src/components/PreviewCard/PreviewCard.test-stories.tsx b/src/components/PreviewCard/PreviewCard.test-stories.tsx
new file mode 100644
index 0000000..a62d5b1
--- /dev/null
+++ b/src/components/PreviewCard/PreviewCard.test-stories.tsx
@@ -0,0 +1,58 @@
+import { PreviewCard } from './index';
+
+export const TestDefault = () => (
+  <PreviewCard.Root defaultOpen>
+    <PreviewCard.Trigger href="#">Hover me</PreviewCard.Trigger>
+    <PreviewCard.Portal>
+      <PreviewCard.Positioner sideOffset={8}>
+        <PreviewCard.Popup data-testid="popup">
+          <p>Preview content</p>
+        </PreviewCard.Popup>
+      </PreviewCard.Positioner>
+    </PreviewCard.Portal>
+  </PreviewCard.Root>
+);
+
+export const TestHover = () => (
+  <PreviewCard.Root>
+    <PreviewCard.Trigger href="#" data-testid="trigger">
+      Hover me
+    </PreviewCard.Trigger>
+    <PreviewCard.Portal>
+      <PreviewCard.Positioner sideOffset={8}>
+        <PreviewCard.Popup data-testid="popup">
+          <p>Preview content</p>
+        </PreviewCard.Popup>
+      </PreviewCard.Positioner>
+    </PreviewCard.Portal>
+  </PreviewCard.Root>
+);
+
+export const TestWithArrow = () => (
+  <PreviewCard.Root defaultOpen>
+    <PreviewCard.Trigger href="#">Hover me</PreviewCard.Trigger>
+    <PreviewCard.Portal>
+      <PreviewCard.Positioner sideOffset={8}>
+        <PreviewCard.Popup data-testid="popup">
+          <PreviewCard.Arrow data-testid="arrow" />
+          <p>Preview with arrow</p>
+        </PreviewCard.Popup>
+      </PreviewCard.Positioner>
+    </PreviewCard.Portal>
+  </PreviewCard.Root>
+);
+
+export const TestRichContent = () => (
+  <PreviewCard.Root defaultOpen>
+    <PreviewCard.Trigger href="#">Typography</PreviewCard.Trigger>
+    <PreviewCard.Portal>
+      <PreviewCard.Positioner sideOffset={8}>
+        <PreviewCard.Popup data-testid="popup">
+          <img src="" alt="Preview image" width={200} height={120} />
+          <p>Rich content with an image and text</p>
+          <a href="#" data-testid="inner-link">Learn more</a>
+        </PreviewCard.Popup>
+      </PreviewCard.Positioner>
+    </PreviewCard.Portal>
+  </PreviewCard.Root>
+);
diff --git a/src/components/PreviewCard/PreviewCard.test.tsx b/src/components/PreviewCard/PreviewCard.test.tsx
new file mode 100644
index 0000000..7eb9f75
--- /dev/null
+++ b/src/components/PreviewCard/PreviewCard.test.tsx
@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import {
+  TestDefault,
+  TestHover,
+  TestWithArrow,
+  TestRichContent,
+} from './PreviewCard.test-stories';
+
+test.describe('PreviewCard', () => {
+  test.describe('Core', () => {
+    test('has no accessibility violations', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const AxeBuilder = (await import('@axe-core/playwright')).default;
+      const results = await new AxeBuilder({ page })
+        .exclude('html')
+        .disableRules(['landmark-one-main', 'page-has-heading-one', 'region'])
+        .analyze();
+      expect(results.violations).toEqual([]);
+    });
+
+    test('renders popup when defaultOpen', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+      await expect(popup).toContainText('Preview content');
+      await expect(popup).toHaveAttribute('data-open', '');
+    });
+
+    test('shows on hover', async ({ mount, page }) => {
+      await mount(<TestHover />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).not.toBeVisible();
+
+      const trigger = page.getByTestId('trigger');
+      await trigger.hover();
+      await expect(popup).toBeVisible();
+    });
+
+    test('hides on escape', async ({ mount, page }) => {
+      await mount(<TestDefault />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+
+      await page.keyboard.press('Escape');
+      await expect(popup).not.toBeVisible();
+    });
+  });
+
+  test.describe('Arrow', () => {
+    test('renders arrow element', async ({ mount, page }) => {
+      await mount(<TestWithArrow />);
+      const arrow = page.getByTestId('arrow');
+      await expect(arrow).toBeAttached();
+    });
+  });
+
+  test.describe('Rich content', () => {
+    test('supports interactive content inside popup', async ({ mount, page }) => {
+      await mount(<TestRichContent />);
+      const popup = page.getByTestId('popup');
+      await expect(popup).toBeVisible();
+
+      const innerLink = page.getByTestId('inner-link');
+      await expect(innerLink).toBeVisible();
+    });
+  });
+});
diff --git a/src/components/PreviewCard/index.ts b/src/components/PreviewCard/index.ts
new file mode 100644
index 0000000..5534bf3
--- /dev/null
+++ b/src/components/PreviewCard/index.ts
@@ -0,0 +1,35 @@
+export {
+  PreviewCardRoot as Root,
+  PreviewCardTrigger as Trigger,
+  PreviewCardPortal as Portal,
+  PreviewCardPositioner as Positioner,
+  PreviewCardPopup as Popup,
+  PreviewCardArrow as Arrow,
+} from './parts';
+
+export type {
+  PreviewCardRootProps,
+  PreviewCardTriggerProps,
+  PreviewCardPortalProps,
+  PreviewCardPositionerProps,
+  PreviewCardPopupProps,
+  PreviewCardArrowProps,
+} from './parts';
+
+import {
+  PreviewCardRoot,
+  PreviewCardTrigger,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  PreviewCardPopup,
+  PreviewCardArrow,
+} from './parts';
+
+export const PreviewCard = {
+  Root: PreviewCardRoot,
+  Trigger: PreviewCardTrigger,
+  Portal: PreviewCardPortal,
+  Positioner: PreviewCardPositioner,
+  Popup: PreviewCardPopup,
+  Arrow: PreviewCardArrow,
+};
diff --git a/src/components/PreviewCard/parts.tsx b/src/components/PreviewCard/parts.tsx
new file mode 100644
index 0000000..e0bbeff
--- /dev/null
+++ b/src/components/PreviewCard/parts.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card';
+import clsx from 'clsx';
+import { useTrackedOpenChange } from '../Analytics/useTrackedOpenChange';
+import styles from './PreviewCard.module.scss';
+
+export interface PreviewCardRootProps extends BasePreviewCard.Root.Props {
+  analyticsName?: string;
+}
+
+export function PreviewCardRoot({ analyticsName, onOpenChange, ...props }: PreviewCardRootProps) {
+  const trackedOpenChange = useTrackedOpenChange(analyticsName, 'PreviewCard', onOpenChange);
+  return <BasePreviewCard.Root onOpenChange={trackedOpenChange} {...props} />;
+}
+
+export interface PreviewCardTriggerProps extends BasePreviewCard.Trigger.Props {}
+
+export const PreviewCardTrigger = React.forwardRef<HTMLAnchorElement, PreviewCardTriggerProps>(
+  function PreviewCardTrigger(props, ref) {
+    return <BasePreviewCard.Trigger ref={ref} {...props} />;
+  },
+);
+
+export interface PreviewCardPortalProps extends BasePreviewCard.Portal.Props {}
+
+export function PreviewCardPortal(props: PreviewCardPortalProps) {
+  return <BasePreviewCard.Portal {...props} />;
+}
+
+export interface PreviewCardPositionerProps extends BasePreviewCard.Positioner.Props {}
+
+export const PreviewCardPositioner = React.forwardRef<HTMLDivElement, PreviewCardPositionerProps>(
+  function PreviewCardPositioner({ className, sideOffset = 8, ...props }, ref) {
+    return (
+      <BasePreviewCard.Positioner
+        ref={ref}
+        className={clsx(styles.positioner, className)}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface PreviewCardPopupProps extends BasePreviewCard.Popup.Props {}
+
+export const PreviewCardPopup = React.forwardRef<HTMLDivElement, PreviewCardPopupProps>(
+  function PreviewCardPopup({ className, ...props }, ref) {
+    return (
+      <BasePreviewCard.Popup
+        ref={ref}
+        className={clsx(styles.popup, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface PreviewCardArrowProps extends BasePreviewCard.Arrow.Props {}
+
+export const PreviewCardArrow = React.forwardRef<HTMLDivElement, PreviewCardArrowProps>(
+  function PreviewCardArrow({ className, ...props }, ref) {
+    return (
+      <BasePreviewCard.Arrow
+        ref={ref}
+        className={clsx(styles.arrow, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+if (process.env.NODE_ENV !== 'production') {
+  PreviewCardRoot.displayName = 'PreviewCard.Root';
+  PreviewCardTrigger.displayName = 'PreviewCard.Trigger';
+  PreviewCardPortal.displayName = 'PreviewCard.Portal';
+  PreviewCardPositioner.displayName = 'PreviewCard.Positioner';
+  PreviewCardPopup.displayName = 'PreviewCard.Popup';
+  PreviewCardArrow.displayName = 'PreviewCard.Arrow';
+}
diff --git a/src/components/Progress/Progress.module.scss b/src/components/Progress/Progress.module.scss
index 284f712..04118e8 100644
--- a/src/components/Progress/Progress.module.scss
+++ b/src/components/Progress/Progress.module.scss
@@ -21,7 +21,7 @@
 
 .indicator {
   height: 100%;
-  background: var(--surface-inverted);
+  background: var(--surface-inverse);
   transition: width 200ms ease-out;
 
   @media (prefers-reduced-motion: reduce) {
diff --git a/src/components/Radio/Radio.module.scss b/src/components/Radio/Radio.module.scss
index 8c147f8..6b00d3e 100644
--- a/src/components/Radio/Radio.module.scss
+++ b/src/components/Radio/Radio.module.scss
@@ -78,7 +78,7 @@
   padding: var(--spacing-md);
   padding-right: var(--spacing-3xl);
   @include surface-with-hover(var(--surface-secondary));
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-md));
   overflow: hidden;
 
@@ -112,7 +112,7 @@
   }
 
   .item[data-checked] & {
-    background-color: var(--surface-inverted);
+    background-color: var(--surface-inverse);
     border-color: transparent;
   }
 
diff --git a/src/components/Select/Select.module.scss b/src/components/Select/Select.module.scss
index bd8f6de..119f01e 100644
--- a/src/components/Select/Select.module.scss
+++ b/src/components/Select/Select.module.scss
@@ -10,7 +10,7 @@
   height: 36px;
   padding-inline-start: var(--spacing-sm);
   padding-inline-end: var(--spacing-xs);
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   color: var(--text-primary);
   cursor: pointer;
@@ -179,7 +179,7 @@
 
   .triggerHybrid:focus-visible:not([data-disabled]) & {
     border-color: var(--border-secondary);
-    box-shadow: 0 0 0 3px var(--input-focus);
+    box-shadow: 0 0 0 3px var(--state-focus);
   }
 
   .triggerHybrid[data-popup-open] & {
@@ -202,7 +202,7 @@
 
 .popup {
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-lg);
   outline: 0;
@@ -308,7 +308,7 @@
   flex-shrink: 0;
   width: 22px;
   height: 22px;
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-round);
   overflow: clip;
 
@@ -331,7 +331,7 @@
     left: 0;
     right: 0;
     height: var(--stroke-xs);
-    background-color: var(--border-tertiary);
+    background-color: var(--border-primary);
   }
 }
 
diff --git a/src/components/Separator/Separator.module.scss b/src/components/Separator/Separator.module.scss
index ad032e5..208c2c2 100644
--- a/src/components/Separator/Separator.module.scss
+++ b/src/components/Separator/Separator.module.scss
@@ -2,7 +2,7 @@
 
 .root {
   border: 0;
-  background-color: var(--border-tertiary);
+  background-color: var(--border-primary);
   flex-shrink: 0;
 }
 
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
index 17c407d..eafcf02 100644
--- a/src/components/Sidebar/Sidebar.module.scss
+++ b/src/components/Sidebar/Sidebar.module.scss
@@ -6,7 +6,7 @@
 .root {
   display: flex;
   flex-direction: column;
-  border-right: var(--stroke-xs) solid var(--border-tertiary);
+  border-right: var(--stroke-xs) solid var(--border-primary);
   height: 100%;
   overflow: hidden;
   transition: width 200ms ease;
@@ -26,7 +26,7 @@
   flex-shrink: 0;
   overflow: hidden;
   padding: var(--sidebar-header-padding, 0 var(--spacing-sm));
-  border-bottom: var(--sidebar-header-border, var(--stroke-xs) solid var(--border-tertiary));
+  border-bottom: var(--sidebar-header-border, var(--stroke-xs) solid var(--border-primary));
 
   [data-collapsed='true'] & {
     justify-content: center;
@@ -58,7 +58,7 @@
   flex-shrink: 0;
   overflow: hidden;
   padding: var(--sidebar-footer-padding, var(--spacing-xs));
-  border-top: var(--sidebar-footer-border, var(--stroke-xs) solid var(--border-tertiary));
+  border-top: var(--sidebar-footer-border, var(--stroke-xs) solid var(--border-primary));
 
   [data-collapsed='true'] & {
     align-items: center;
@@ -143,7 +143,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 
@@ -202,7 +202,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 }
@@ -269,7 +269,7 @@
       top: 0;
       bottom: 0;
       width: var(--stroke-sm);
-      background-color: var(--border-tertiary);
+      background-color: var(--border-primary);
       z-index: 0;
     }
   }
@@ -289,7 +289,7 @@
   transition: background-color 150ms ease;
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 
@@ -382,7 +382,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 }
@@ -405,7 +405,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 }
@@ -436,7 +436,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: -2px;
   }
 
@@ -501,7 +501,7 @@
   width: 100%;
   height: var(--stroke-xs);
   margin-block: var(--separator-margin-block);
-  background-color: var(--border-tertiary);
+  background-color: var(--border-primary);
   border: none;
 }
 
diff --git a/src/components/Switch/Switch.module.scss b/src/components/Switch/Switch.module.scss
index 66c0f39..be9f76c 100644
--- a/src/components/Switch/Switch.module.scss
+++ b/src/components/Switch/Switch.module.scss
@@ -11,7 +11,7 @@
   transition: background-color 150ms ease;
 
   &[data-checked] {
-    background-color: var(--color-green-600);
+    background-color: var(--surface-green-strong);
   }
 
   &[data-disabled] {
@@ -35,7 +35,7 @@
 
 .thumb {
   display: block;
-  background-color: var(--surface-base);
+  background-color: var(--surface-panel);
   border-radius: var(--corner-radius-round);
   box-shadow: var(--shadow-sm);
   transition: transform 150ms ease;
diff --git a/src/components/Table/Table.module.scss b/src/components/Table/Table.module.scss
index 48e0ae6..7ec47ca 100644
--- a/src/components/Table/Table.module.scss
+++ b/src/components/Table/Table.module.scss
@@ -37,7 +37,7 @@
   padding: 0 var(--spacing-md);
   text-align: left;
   color: var(--text-secondary);
-  border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+  border-bottom: var(--stroke-xs) solid var(--border-primary);
   font-weight: normal;
   vertical-align: middle;
   position: relative;
@@ -61,7 +61,7 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 2px var(--input-focus);
+      box-shadow: 0 0 0 2px var(--state-focus);
       @include smooth-corners(var(--corner-radius-xs));
     }
   }
@@ -125,7 +125,7 @@
 
     &:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 2px var(--input-focus);
+      box-shadow: inset 0 0 0 2px var(--state-focus);
     }
   }
 
@@ -146,7 +146,7 @@
   padding: 0 var(--spacing-md);
   text-align: left;
   color: var(--text-primary);
-  border-bottom: var(--stroke-xs) solid var(--border-tertiary);
+  border-bottom: var(--stroke-xs) solid var(--border-primary);
   vertical-align: middle;
   overflow: hidden;
   white-space: nowrap;
@@ -239,7 +239,7 @@
   justify-content: flex-end;
   height: 40px;
   padding: var(--spacing-xs) var(--spacing-md);
-  border-top: var(--stroke-xs) solid var(--border-tertiary);
+  border-top: var(--stroke-xs) solid var(--border-primary);
 
   &[data-size='compact'] {
     height: 32px;
diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss
index 5393c84..3ab656d 100644
--- a/src/components/Tabs/Tabs.module.scss
+++ b/src/components/Tabs/Tabs.module.scss
@@ -22,7 +22,7 @@
   padding: var(--spacing-3xs);
   // TODO: [A11y] text/secondary on surface/sunken = 3.7:1 contrast (needs 4.5:1)
   // Flag for token audit - consider darker text or lighter surface
-  background: var(--surface-sunken);
+  background: var(--surface-secondary);
 }
 
 .list.minimal {
@@ -37,8 +37,8 @@
   left: var(--active-tab-left);
   width: var(--active-tab-width);
   height: var(--active-tab-height);
-  background: var(--surface-elevated);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  background: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-xs));
   box-shadow: var(--shadow-sm);
   transition: top, left, width, height;
@@ -70,7 +70,7 @@
 
   // Focused state (keyboard navigation)
   &:focus-visible {
-    background: var(--surface-elevated);
+    background: var(--surface-panel);
     border-color: var(--border-secondary);
     outline: none;
     box-shadow: var(--input-focus);
@@ -104,7 +104,7 @@
   width: 100%;
   padding: var(--spacing-4xl) 0;
   overflow: clip;
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
 
   &[data-hidden] {
diff --git a/src/components/Textarea/Textarea.module.scss b/src/components/Textarea/Textarea.module.scss
index 28ee36b..ac390ac 100644
--- a/src/components/Textarea/Textarea.module.scss
+++ b/src/components/Textarea/Textarea.module.scss
@@ -16,7 +16,7 @@
   width: 100%;
   min-height: 66px;
   padding: var(--spacing-sm);
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   color: var(--text-primary);
   outline: none;
diff --git a/src/components/TextareaGroup/TextareaGroup.module.scss b/src/components/TextareaGroup/TextareaGroup.module.scss
index 7f9191f..cef9449 100644
--- a/src/components/TextareaGroup/TextareaGroup.module.scss
+++ b/src/components/TextareaGroup/TextareaGroup.module.scss
@@ -8,7 +8,7 @@
   min-height: 64px;
   max-height: var(--_textarea-group-max-height, none);
   background: transparent;
-  border: var(--stroke-sm) solid var(--border-tertiary);
+  border: var(--stroke-sm) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-lg));
   // clip instead of hidden: avoids creating a scroll context so the
   // textarea can own its own overflow-y scrolling independently.
diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss
index 633e44e..5dc2d4f 100644
--- a/src/components/Toast/Toast.module.scss
+++ b/src/components/Toast/Toast.module.scss
@@ -23,7 +23,7 @@
   width: 320px;
   padding: var(--spacing-md);
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-md));
   box-shadow: var(--shadow-lg);
   outline: none;
@@ -129,7 +129,7 @@
   height: 20px;
   padding: 0;
   background-color: var(--surface-primary);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   border-radius: var(--corner-radius-round);
   box-shadow: none;
   cursor: pointer;
@@ -141,7 +141,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--border-primary);
+    outline: 2px solid var(--border-focus);
     outline-offset: 2px;
   }
 
diff --git a/src/components/Toggle/Toggle.module.scss b/src/components/Toggle/Toggle.module.scss
index e356ee1..843ea20 100644
--- a/src/components/Toggle/Toggle.module.scss
+++ b/src/components/Toggle/Toggle.module.scss
@@ -10,7 +10,7 @@
   height: 32px;
   min-width: 32px;
   padding: 0 var(--spacing-xs);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-xs));
   background-color: var(--surface-primary);
   box-shadow: var(--shadow-sm);
@@ -25,7 +25,7 @@
     outline: none;
     background-color: var(--surface-hover);
     border-color: var(--border-secondary);
-    box-shadow: var(--shadow-sm), 0 0 0 3px var(--input-focus);
+    box-shadow: var(--shadow-sm), 0 0 0 3px var(--state-focus);
   }
 
   @media (hover: hover) {
@@ -73,7 +73,7 @@
       // Keep focus ring visible above siblings
       position: relative;
       z-index: 1;
-      box-shadow: 0 0 0 3px var(--input-focus);
+      box-shadow: 0 0 0 3px var(--state-focus);
     }
 
     &:first-child {
diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
index e7063c8..ca16246 100644
--- a/src/components/Tooltip/Tooltip.module.scss
+++ b/src/components/Tooltip/Tooltip.module.scss
@@ -9,8 +9,8 @@
 .popup {
   max-width: 240px;
   padding: var(--spacing-2xs) var(--spacing-sm);
-  background-color: var(--surface-elevated);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
   @include smooth-corners(var(--corner-radius-sm));
   box-shadow: var(--shadow-sm);
   @include body;
@@ -40,8 +40,8 @@
   width: 8px;
   height: 8px;
   transform: rotate(45deg);
-  background-color: var(--surface-elevated);
-  border: var(--stroke-xs) solid var(--border-tertiary);
+  background-color: var(--surface-panel);
+  border: var(--stroke-xs) solid var(--border-primary);
 
   &[data-side='top'] {
     bottom: -4px;
diff --git a/src/index.ts b/src/index.ts
index 3d547ab..7370cbb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,11 +16,33 @@ export { AlertDialog } from './components/AlertDialog';
 export { Autocomplete } from './components/Autocomplete';
 export { Breadcrumb } from './components/Breadcrumb';
 export { Card } from './components/Card';
+export { Collapsible } from './components/Collapsible';
+export type {
+  CollapsibleRootProps,
+  CollapsibleTriggerProps,
+  CollapsiblePanelProps,
+} from './components/Collapsible';
 export { Checkbox } from './components/Checkbox';
 export { Command } from './components/Command';
 export { Combobox } from './components/Combobox';
 export { ContextMenu } from './components/ContextMenu';
 export { Dialog } from './components/Dialog';
+export { Drawer } from './components/Drawer';
+export type {
+  DrawerProviderProps,
+  DrawerRootProps,
+  DrawerTriggerProps,
+  DrawerPortalProps,
+  DrawerBackdropProps,
+  DrawerViewportProps,
+  DrawerPopupProps,
+  DrawerContentProps,
+  DrawerTitleProps,
+  DrawerDescriptionProps,
+  DrawerCloseProps,
+  DrawerIndentProps,
+  DrawerIndentBackgroundProps,
+} from './components/Drawer';
 export { Field } from './components/Field';
 export { Fieldset } from './components/Fieldset';
 export type { FieldsetRootProps, FieldsetLegendProps, FieldsetErrorProps } from './components/Fieldset';
@@ -49,6 +71,15 @@ export { Tabs } from './components/Tabs';
 export { Toast } from './components/Toast';
 export { Tooltip } from './components/Tooltip';
 export { Popover } from './components/Popover';
+export { PreviewCard } from './components/PreviewCard';
+export type {
+  PreviewCardRootProps,
+  PreviewCardTriggerProps,
+  PreviewCardPortalProps,
+  PreviewCardPositionerProps,
+  PreviewCardPopupProps,
+  PreviewCardArrowProps,
+} from './components/PreviewCard';
 export type {
   PopoverRootProps,
   PopoverTriggerProps,
diff --git a/src/tokens/_typography.scss b/src/tokens/_typography.scss
index 9da9af9..ba6ead7 100644
--- a/src/tokens/_typography.scss
+++ b/src/tokens/_typography.scss
@@ -24,6 +24,6 @@
 .btn { @include btn; }
 .btn-sm { @include btn-sm; }
 
-.link-lg { @include link-lg; }
-.link { @include link; }
-.link-sm { @include link-sm; }
+.link-lg { @include link-lg; color: var(--text-link); text-decoration: underline; }
+.link { @include link; color: var(--text-link); text-decoration: underline; }
+.link-sm { @include link-sm; color: var(--text-link); text-decoration: underline; }
diff --git a/src/tokens/_variables.scss b/src/tokens/_variables.scss
index 51af7fa..518b359 100644
--- a/src/tokens/_variables.scss
+++ b/src/tokens/_variables.scss
@@ -269,199 +269,175 @@
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-black: 900;
-  --border-primary: #1A1A1A;
-  --border-secondary: #C1C0B8;
-  --border-tertiary: rgba(0, 0, 0, 0.10);
-  --border-hover: rgba(0, 0, 0, 0.30);
-  --border-inverted: rgba(255, 255, 255, 0.20);
+  --border-primary: rgba(38, 38, 35, 0.10);
+  --border-secondary: rgba(35, 35, 33, 0.30);
+  --border-focus: #1A1A1A;
+  --border-inverse: rgba(255, 255, 255, 0.20);
   --border-critical: #CC0909;
   --border-warning: #FCBA02;
+  --stroke-primary: #1A1A1A;
   --icon-primary: #1A1A1A;
   --icon-secondary: #7C7C7C;
   --icon-tertiary: #C1C0B8;
-  --icon-surface: #F8F8F7;
+  --icon-inverse: #F8F8F7;
   --icon-info: #0072DB;
   --icon-success: #11A967;
   --icon-warning: #E09000;
   --icon-critical: #CC0909;
-  --icon-info-inverted: #EBFEFF;
-  --icon-success-inverted: #F0FDF7;
-  --icon-warning-inverted: #FFFDEA;
-  --icon-critical-inverted: #FFF1F1;
-  --input-focus: rgba(38, 38, 35, 0.10);
-  --input-focus-critical: #FFC4C4;
+  --state-focus: rgba(38, 38, 35, 0.10);
+  --state-focus-critical: #FFC4C4;
   --surface-base: #FFFFFF;
   --surface-primary: #F8F8F7;
   --surface-secondary: #F0F0EE;
   --surface-tertiary: #C1C0B8;
-  --surface-strong: #989898;
-  --surface-elevated: #FAFAF9;
-  --surface-sunken: #F4F4F3;
+  --surface-neutral: #989898;
+  --surface-panel: #FAFAF9;
   --surface-hover: rgba(42, 42, 37, 0.04);
-  --surface-selected: rgba(40, 40, 36, 0.06);
-  --surface-active: rgba(42, 42, 37, 0.04);
-  --surface-inverted: #1A1A1A;
-  --surface-inverted-hover: rgba(255, 255, 255, 0.04);
-  --surface-inverted-backdrop: rgba(248, 248, 247, 0.80);
+  --surface-inverse: #1A1A1A;
+  --surface-inverse-hover: rgba(255, 255, 255, 0.04);
   --surface-backdrop: rgba(38, 38, 35, 0.10);
-  --surface-purple: #FAF8FC;
+  --surface-purple: #F2EEF9;
   --surface-purple-strong: #754EA2;
-  --surface-blue: #EEF7FF;
+  --surface-blue: #DDEFFF;
   --surface-blue-strong: #0072DB;
-  --surface-sky: #EBFEFF;
+  --surface-sky: #CCF9FF;
   --surface-sky-strong: #00B3E0;
-  --surface-pink: #FFF2FB;
+  --surface-pink: #FFE3F9;
   --surface-pink-strong: #FF00D4;
-  --surface-green: #F0FDF7;
+  --surface-green: #DBFDEE;
   --surface-green-strong: #11A967;
-  --surface-yellow: #FFFDEA;
+  --surface-yellow: #FFFAC5;
   --surface-yellow-strong: #FCBA02;
-  --surface-red: #FFF1F1;
+  --surface-red: #FFC4C4;
   --surface-red-strong: #CC0909;
   --text-primary: #1A1A1A;
   --text-secondary: #7C7C7C;
   --text-tertiary: #989898;
-  --text-muted: var(--text-secondary);
-  --text-surface: #F8F8F7;
+  --text-inverse: #F8F8F7;
+  --text-link: #1A1A1A;
   --text-critical: #CC0909;
   --text-purple: #754EA2;
   --text-blue: #005AB1;
-  --text-sky: #00B3E0;
-  --text-pink: #FF00D4;
-  --text-green: #11A967;
-  --text-yellow: #E09000;
-  --text-red: #EF0D0D;
+  --text-sky: #067198;
+  --text-pink: #CF00A7;
+  --text-green: #118453;
+  --text-yellow: #BA6603;
+  --text-red: #CC0909;
 }
 
 [data-theme="dark"],
 .dark {
-  --border-primary: #F8F8F7;
-  --border-secondary: #464646;
-  --border-tertiary: rgba(255, 255, 255, 0.10);
-  --border-hover: rgba(255, 255, 255, 0.30);
-  --border-inverted: rgba(0, 0, 0, 0.20);
+  --border-primary: rgba(244, 244, 245, 0.10);
+  --border-secondary: rgba(245, 245, 245, 0.30);
+  --border-focus: #F8F8F7;
+  --border-inverse: rgba(0, 0, 0, 0.20);
   --border-critical: #EF0D0D;
   --border-warning: #FCBA02;
+  --stroke-primary: #F8F8F7;
   --icon-primary: #F8F8F7;
   --icon-secondary: #7C7C7C;
   --icon-tertiary: #464646;
-  --icon-surface: #1A1A1A;
+  --icon-inverse: #1A1A1A;
   --icon-info: #0072DB;
   --icon-success: #11A967;
   --icon-warning: #FCBA02;
   --icon-critical: #EF0D0D;
-  --icon-info-inverted: #124C67;
-  --icon-success-inverted: #12553A;
-  --icon-warning-inverted: #7C400B;
-  --icon-critical-inverted: #8B1111;
-  --input-focus: rgba(244, 244, 245, 0.10);
-  --input-focus-critical: #A80C0C;
+  --state-focus: rgba(244, 244, 245, 0.10);
+  --state-focus-critical: #A80C0C;
   --surface-base: #000000;
   --surface-primary: #1A1A1A;
-  --surface-secondary: #282828;
-  --surface-tertiary: #3D3D3D;
-  --surface-strong: #656565;
-  --surface-elevated: #111111;
-  --surface-sunken: #212121;
+  --surface-secondary: #111111;
+  --surface-tertiary: #282828;
+  --surface-neutral: #3D3D3D;
+  --surface-panel: #212121;
   --surface-hover: rgba(243, 243, 245, 0.04);
-  --surface-selected: rgba(243, 243, 245, 0.06);
-  --surface-active: rgba(243, 243, 245, 0.04);
-  --surface-inverted: #F8F8F7;
-  --surface-inverted-hover: rgba(0, 0, 0, 0.04);
-  --surface-inverted-backdrop: rgba(28, 28, 27, 0.80);
+  --surface-inverse: #F8F8F7;
+  --surface-inverse-hover: rgba(0, 0, 0, 0.04);
   --surface-backdrop: rgba(29, 29, 28, 0.70);
   --surface-purple: #754EA2;
   --surface-purple-strong: #8A62BB;
-  --surface-blue: #0072DB;
+  --surface-blue: #005AB1;
   --surface-blue-strong: #0072DB;
-  --surface-sky: #008DBC;
-  --surface-sky-strong: #00B3E0;
-  --surface-pink: #FF00D4;
+  --surface-sky: #067198;
+  --surface-sky-strong: #008DBC;
+  --surface-pink: #CF00A7;
   --surface-pink-strong: #FF00D4;
   --surface-green: #118453;
   --surface-green-strong: #11A967;
   --surface-yellow: #BA6603;
-  --surface-yellow-strong: #FCBA02;
+  --surface-yellow-strong: #E09000;
   --surface-red: #CC0909;
   --surface-red-strong: #EF0D0D;
   --text-primary: #F0F0EE;
   --text-secondary: #7C7C7C;
   --text-tertiary: #656565;
-  --text-muted: var(--text-secondary);
-  --text-surface: #1A1A1A;
+  --text-inverse: #1A1A1A;
+  --text-link: #F0F0EE;
   --text-critical: #EF0D0D;
   --text-purple: #D6C7EB;
   --text-blue: #70C8FF;
   --text-sky: #00B3E0;
   --text-pink: #FF99E5;
-  --text-green: #11A967;
-  --text-yellow: #FCBA02;
-  --text-red: #EF0D0D;
+  --text-green: #82F3C1;
+  --text-yellow: #FFEA47;
+  --text-red: #FF9A9A;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --border-primary: #F8F8F7;
-    --border-secondary: #464646;
-    --border-tertiary: rgba(255, 255, 255, 0.10);
-    --border-hover: rgba(255, 255, 255, 0.30);
-    --border-inverted: rgba(0, 0, 0, 0.20);
+    --border-primary: rgba(244, 244, 245, 0.10);
+    --border-secondary: rgba(245, 245, 245, 0.30);
+    --border-focus: #F8F8F7;
+    --border-inverse: rgba(0, 0, 0, 0.20);
     --border-critical: #EF0D0D;
     --border-warning: #FCBA02;
+    --stroke-primary: #F8F8F7;
     --icon-primary: #F8F8F7;
     --icon-secondary: #7C7C7C;
     --icon-tertiary: #464646;
-    --icon-surface: #1A1A1A;
+    --icon-inverse: #1A1A1A;
     --icon-info: #0072DB;
     --icon-success: #11A967;
     --icon-warning: #FCBA02;
     --icon-critical: #EF0D0D;
-    --icon-info-inverted: #124C67;
-    --icon-success-inverted: #12553A;
-    --icon-warning-inverted: #7C400B;
-    --icon-critical-inverted: #8B1111;
-    --input-focus: rgba(244, 244, 245, 0.10);
-    --input-focus-critical: #A80C0C;
+    --state-focus: rgba(244, 244, 245, 0.10);
+    --state-focus-critical: #A80C0C;
     --surface-base: #000000;
     --surface-primary: #1A1A1A;
-    --surface-secondary: #282828;
-    --surface-tertiary: #3D3D3D;
-    --surface-strong: #656565;
-    --surface-elevated: #111111;
-    --surface-sunken: #212121;
+    --surface-secondary: #111111;
+    --surface-tertiary: #282828;
+    --surface-neutral: #3D3D3D;
+    --surface-panel: #212121;
     --surface-hover: rgba(243, 243, 245, 0.04);
-    --surface-selected: rgba(243, 243, 245, 0.06);
-    --surface-active: rgba(243, 243, 245, 0.04);
-    --surface-inverted: #F8F8F7;
-    --surface-inverted-hover: rgba(0, 0, 0, 0.04);
-    --surface-inverted-backdrop: rgba(28, 28, 27, 0.80);
+    --surface-inverse: #F8F8F7;
+    --surface-inverse-hover: rgba(0, 0, 0, 0.04);
     --surface-backdrop: rgba(29, 29, 28, 0.70);
     --surface-purple: #754EA2;
     --surface-purple-strong: #8A62BB;
-    --surface-blue: #0072DB;
+    --surface-blue: #005AB1;
     --surface-blue-strong: #0072DB;
-    --surface-sky: #008DBC;
-    --surface-sky-strong: #00B3E0;
-    --surface-pink: #FF00D4;
+    --surface-sky: #067198;
+    --surface-sky-strong: #008DBC;
+    --surface-pink: #CF00A7;
     --surface-pink-strong: #FF00D4;
     --surface-green: #118453;
     --surface-green-strong: #11A967;
     --surface-yellow: #BA6603;
-    --surface-yellow-strong: #FCBA02;
+    --surface-yellow-strong: #E09000;
     --surface-red: #CC0909;
     --surface-red-strong: #EF0D0D;
     --text-primary: #F0F0EE;
     --text-secondary: #7C7C7C;
     --text-tertiary: #656565;
-    --text-muted: var(--text-secondary);
-    --text-surface: #1A1A1A;
+    --text-inverse: #1A1A1A;
+    --text-link: #F0F0EE;
     --text-critical: #EF0D0D;
     --text-purple: #D6C7EB;
     --text-blue: #70C8FF;
     --text-sky: #00B3E0;
     --text-pink: #FF99E5;
-    --text-green: #11A967;
-    --text-yellow: #FCBA02;
-    --text-red: #EF0D0D;
+    --text-green: #82F3C1;
+    --text-yellow: #FFEA47;
+    --text-red: #FF9A9A;
   }
 }
diff --git a/tokens/figma/origin/Dark.tokens.json b/tokens/figma/origin/Dark.tokens.json
index 1ab36dc..28c3b9c 100644
--- a/tokens/figma/origin/Dark.tokens.json
+++ b/tokens/figma/origin/Dark.tokens.json
@@ -5,21 +5,21 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9725490212440491,
-          0.9725490212440491,
-          0.9686274528503418
+          0.95686274766922,
+          0.95686274766922,
+          0.9607843160629272
         ],
-        "alpha": 1,
-        "hex": "#F8F8F7"
+        "alpha": 0.10000000149011612,
+        "hex": "#F4F4F5"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2134:336",
+        "com.figma.variableId": "VariableID:2004:352",
         "com.figma.scopes": [
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:7e4bcc3763b8db1d601b4b96415731b56ca90b8e/-1:-1",
-          "targetVariableName": "color/gray/050",
+          "targetVariableId": "VariableID:d0c604ac3d3b0606b77d67bd7f8a4f4982037e42/-1:-1",
+          "targetVariableName": "color/alpha/temp-white/10",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -31,12 +31,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.27450981736183167,
-          0.27450981736183167,
-          0.27450981736183167
+          0.9607843160629272,
+          0.9607843160629272,
+          0.9607843160629272
         ],
-        "alpha": 1,
-        "hex": "#464646"
+        "alpha": 0.30000001192092896,
+        "hex": "#F5F5F5"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2007:561",
@@ -44,67 +44,41 @@
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:f5d48982e8bd755388656f89b73f3d1a09df82b8/-1:-1",
-          "targetVariableName": "color/gray/700",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "tertiary": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          1,
-          1,
-          1
-        ],
-        "alpha": 0.10000000149011612,
-        "hex": "#FFFFFF"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2004:352",
-        "com.figma.scopes": [
-          "STROKE"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:43d601095f45abae8e6f6845e30b28056f288ff6/-1:-1",
-          "targetVariableName": "color/alpha/white/10",
+          "targetVariableId": "VariableID:f93c95186853ac4ddd534a4fe0f9b9637acf69c9/-1:-1",
+          "targetVariableName": "color/alpha/temp-white/30",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
         "com.figma.isOverride": true
       }
     },
-    "hover": {
+    "focus": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          1,
-          1,
-          1
+          0.9725490212440491,
+          0.9725490212440491,
+          0.9686274528503418
         ],
-        "alpha": 0.30000001192092896,
-        "hex": "#FFFFFF"
+        "alpha": 1,
+        "hex": "#F8F8F7"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:5807:51",
+        "com.figma.variableId": "VariableID:2134:336",
         "com.figma.scopes": [
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:47100d9ee86fe416d640e3829dccf9d1fd680bcf/-1:-1",
-          "targetVariableName": "color/alpha/white/30",
+          "targetVariableId": "VariableID:7e4bcc3763b8db1d601b4b96415731b56ca90b8e/-1:-1",
+          "targetVariableName": "color/gray/050",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
         "com.figma.isOverride": true
       }
     },
-    "inverted": {
+    "inverse": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -183,6 +157,34 @@
       }
     }
   },
+  "stroke": {
+    "primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9725490212440491,
+          0.9725490212440491,
+          0.9686274528503418
+        ],
+        "alpha": 1,
+        "hex": "#F8F8F7"
+      },
+      "$extensions": {
+        "com.figma.variableId": "VariableID:6484:4712",
+        "com.figma.scopes": [
+          "STROKE"
+        ],
+        "com.figma.aliasData": {
+          "targetVariableId": "VariableID:7e4bcc3763b8db1d601b4b96415731b56ca90b8e/-1:-1",
+          "targetVariableName": "color/gray/050",
+          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
+          "targetVariableSetName": "primitives"
+        },
+        "com.figma.isOverride": true
+      }
+    }
+  },
   "icon": {
     "primary": {
       "$type": "color",
@@ -268,7 +270,7 @@
         "com.figma.isOverride": true
       }
     },
-    "surface": {
+    "inverse": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -281,7 +283,7 @@
         "hex": "#1A1A1A"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2030:244",
+        "com.figma.variableId": "VariableID:6485:4717",
         "com.figma.scopes": [
           "FRAME_FILL",
           "SHAPE_FILL",
@@ -407,117 +409,9 @@
         },
         "com.figma.isOverride": true
       }
-    },
-    "info-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.07058823853731155,
-          0.2980392277240753,
-          0.40392157435417175
-        ],
-        "alpha": 1,
-        "hex": "#124C67"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2799",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:2048070002952b420ba0d97b83538927d6ed1ee0/-1:-1",
-          "targetVariableName": "color/sky/900",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "success-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.07058823853731155,
-          0.3333333432674408,
-          0.22745098173618317
-        ],
-        "alpha": 1,
-        "hex": "#12553A"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2798",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:68e28fef5de93581eadd43e51ddee83e454fd827/-1:-1",
-          "targetVariableName": "color/green/900",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "warning-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.48627451062202454,
-          0.250980406999588,
-          0.04313725605607033
-        ],
-        "alpha": 1,
-        "hex": "#7C400B"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2797",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:e14374a74b8e0e2a91323ae096be34069d927ba0/-1:-1",
-          "targetVariableName": "color/yellow/900",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "critical-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.545098066329956,
-          0.06666667014360428,
-          0.06666667014360428
-        ],
-        "alpha": 1,
-        "hex": "#8B1111"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2796",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:e7f45095ed5b1bb6bee0df2d9c1312b9c2395f3c/-1:-1",
-          "targetVariableName": "color/red/900",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
     }
   },
-  "input": {
+  "state": {
     "focus": {
       "$type": "color",
       "$value": {
@@ -631,12 +525,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.1568627506494522,
-          0.1568627506494522,
-          0.1568627506494522
+          0.06666667014360428,
+          0.06666667014360428,
+          0.06666667014360428
         ],
         "alpha": 1,
-        "hex": "#282828"
+        "hex": "#111111"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2004:345",
@@ -645,8 +539,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:937e85be7e92da997173e54ee725a51e35d3a1e7/-1:-1",
-          "targetVariableName": "color/gray/900",
+          "targetVariableId": "VariableID:c9e680d26570e06b982ded6dabbc291afdb9ce5c/-1:-1",
+          "targetVariableName": "color/gray/975",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -658,12 +552,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2392157018184662,
-          0.2392157018184662,
-          0.2392157018184662
+          0.1568627506494522,
+          0.1568627506494522,
+          0.1568627506494522
         ],
         "alpha": 1,
-        "hex": "#3D3D3D"
+        "hex": "#282828"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2004:346",
@@ -672,25 +566,25 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:c98f70c0d43f49db09a36473679a541b9e1d02e0/-1:-1",
-          "targetVariableName": "color/gray/800",
+          "targetVariableId": "VariableID:937e85be7e92da997173e54ee725a51e35d3a1e7/-1:-1",
+          "targetVariableName": "color/gray/900",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
         "com.figma.isOverride": true
       }
     },
-    "strong": {
+    "neutral": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.39411765336990356,
-          0.39411765336990356,
-          0.39411765336990356
+          0.2392157018184662,
+          0.2392157018184662,
+          0.2392157018184662
         ],
         "alpha": 1,
-        "hex": "#656565"
+        "hex": "#3D3D3D"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5826:3148",
@@ -699,42 +593,15 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:26119033358fc6f6b53c71c7aa2b14904b8e8e94/-1:-1",
-          "targetVariableName": "color/gray/600",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "elevated": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.06666667014360428,
-          0.06666667014360428,
-          0.06666667014360428
-        ],
-        "alpha": 1,
-        "hex": "#111111"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2466:13",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:c9e680d26570e06b982ded6dabbc291afdb9ce5c/-1:-1",
-          "targetVariableName": "color/gray/975",
+          "targetVariableId": "VariableID:c98f70c0d43f49db09a36473679a541b9e1d02e0/-1:-1",
+          "targetVariableName": "color/gray/800",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
         "com.figma.isOverride": true
       }
     },
-    "sunken": {
+    "panel": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -747,7 +614,7 @@
         "hex": "#212121"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2829:672",
+        "com.figma.variableId": "VariableID:6486:5661",
         "com.figma.scopes": [
           "FRAME_FILL",
           "SHAPE_FILL"
@@ -788,61 +655,7 @@
         "com.figma.isOverride": true
       }
     },
-    "selected": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9529411792755127,
-          0.9529411792755127,
-          0.9607843160629272
-        ],
-        "alpha": 0.05999999865889549,
-        "hex": "#F3F3F5"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:6468:22",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:ebd1fb7ca8eba565dc36df8260272034d7dd0a00/-1:-1",
-          "targetVariableName": "color/alpha/temp-white/06",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "active": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9529411792755127,
-          0.9529411792755127,
-          0.9607843160629272
-        ],
-        "alpha": 0.03999999910593033,
-        "hex": "#F3F3F5"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2785:292",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:0ce4b76aebf3b94a35cee5d62e39c42612556f00/-1:-1",
-          "targetVariableName": "color/alpha/temp-white/04",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "inverted": {
+    "inverse": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -869,7 +682,7 @@
         "com.figma.isOverride": true
       }
     },
-    "inverted-hover": {
+    "inverse-hover": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -896,33 +709,6 @@
         "com.figma.isOverride": true
       }
     },
-    "inverted-backdrop": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.10980392247438431,
-          0.10980392247438431,
-          0.10588235408067703
-        ],
-        "alpha": 0.800000011920929,
-        "hex": "#1C1C1B"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2746:7325",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:ddddc9a05d8abbf20b08764e0b63cc6f1f641e69/-1:-1",
-          "targetVariableName": "color/alpha/temp-black/80",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
     "backdrop": {
       "$type": "color",
       "$value": {
@@ -1010,11 +796,11 @@
         "colorSpace": "srgb",
         "components": [
           0,
-          0.4470588266849518,
-          0.8588235378265381
+          0.3529411852359772,
+          0.6941176652908325
         ],
         "alpha": 1,
-        "hex": "#0072DB"
+        "hex": "#005AB1"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:1134",
@@ -1023,8 +809,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:698be47ec3d46a209dde801dc11a00aa9aa8e40e/-1:-1",
-          "targetVariableName": "color/blue/600",
+          "targetVariableId": "VariableID:c4809d37606c3dffdaedab8b4401e74c0bb2d708/-1:-1",
+          "targetVariableName": "color/blue/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1064,12 +850,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0,
-          0.5529412031173706,
-          0.7372549176216125
+          0.0235294122248888,
+          0.4431372582912445,
+          0.5960784554481506
         ],
         "alpha": 1,
-        "hex": "#008DBC"
+        "hex": "#067198"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5827:3167",
@@ -1078,8 +864,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:9fd865ff6f23d3a7029b39fdde137a96c974cdc5/-1:-1",
-          "targetVariableName": "color/sky/600",
+          "targetVariableId": "VariableID:bb4581a61df584180c284899ef1be68bb1bebde3/-1:-1",
+          "targetVariableName": "color/sky/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1092,11 +878,11 @@
         "colorSpace": "srgb",
         "components": [
           0,
-          0.7019608020782471,
-          0.8784313797950745
+          0.5529412031173706,
+          0.7372549176216125
         ],
         "alpha": 1,
-        "hex": "#00B3E0"
+        "hex": "#008DBC"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5827:3168",
@@ -1106,8 +892,8 @@
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:8ffaeea2190d3b2de7a38673ab54c0c41740a68f/-1:-1",
-          "targetVariableName": "color/sky/500",
+          "targetVariableId": "VariableID:9fd865ff6f23d3a7029b39fdde137a96c974cdc5/-1:-1",
+          "targetVariableName": "color/sky/600",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1119,12 +905,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          1,
+          0.8117647171020508,
           0,
-          0.8313725590705872
+          0.6549019813537598
         ],
         "alpha": 1,
-        "hex": "#FF00D4"
+        "hex": "#CF00A7"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5826:2575",
@@ -1133,8 +919,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:a1c73e35a815cb36eccb3ed82a16da66a186ef3c/-1:-1",
-          "targetVariableName": "color/pink/600",
+          "targetVariableId": "VariableID:8329de404aa92e82ab800d8fb1f0d4104cc27ffb/-1:-1",
+          "targetVariableName": "color/pink/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1255,12 +1041,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9882352948188782,
-          0.729411780834198,
-          0.007843137718737125
+          0.8784313797950745,
+          0.5647059082984924,
+          0
         ],
         "alpha": 1,
-        "hex": "#FCBA02"
+        "hex": "#E09000"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5153:20443",
@@ -1270,8 +1056,8 @@
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:ec20ecabb72415dc74b582e48619de110d966721/-1:-1",
-          "targetVariableName": "color/yellow/500",
+          "targetVariableId": "VariableID:748def0ea8b2301a3a8d95cd01a792c896620bbc/-1:-1",
+          "targetVariableName": "color/yellow/600",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1412,37 +1198,52 @@
         "com.figma.isOverride": true
       }
     },
-    "muted": {
+    "inverse": {
       "$type": "color",
-      "$value": "{text.secondary}",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.10196078568696976,
+          0.10196078568696976,
+          0.10196078568696976
+        ],
+        "alpha": 1,
+        "hex": "#1A1A1A"
+      },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2240:1241",
+        "com.figma.variableId": "VariableID:2240:1242",
         "com.figma.scopes": [
           "TEXT_FILL"
         ],
+        "com.figma.aliasData": {
+          "targetVariableId": "VariableID:c665b8dd84425c623e5e4882391ed1d1af732d5b/-1:-1",
+          "targetVariableName": "color/gray/950",
+          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
+          "targetVariableSetName": "primitives"
+        },
         "com.figma.isOverride": true
       }
     },
-    "surface": {
+    "link": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.10196078568696976,
-          0.10196078568696976,
-          0.10196078568696976
+          0.9411764740943909,
+          0.9411764740943909,
+          0.9333333373069763
         ],
         "alpha": 1,
-        "hex": "#1A1A1A"
+        "hex": "#F0F0EE"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2240:1242",
+        "com.figma.variableId": "VariableID:6479:4042",
         "com.figma.scopes": [
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:c665b8dd84425c623e5e4882391ed1d1af732d5b/-1:-1",
-          "targetVariableName": "color/gray/950",
+          "targetVariableId": "VariableID:d2a32c5e61d9ac7d573f0374630508bcdeafb5a1/-1:-1",
+          "targetVariableName": "color/gray/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1584,12 +1385,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.06666667014360428,
-          0.6627451181411743,
-          0.40392157435417175
+          0.5098039507865906,
+          0.9529411792755127,
+          0.7568627595901489
         ],
         "alpha": 1,
-        "hex": "#11A967"
+        "hex": "#82F3C1"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2073:412",
@@ -1597,8 +1398,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:f1a551855c4076c85898ee9c0068d1420bb04a65/-1:-1",
-          "targetVariableName": "color/green/600",
+          "targetVariableId": "VariableID:32676ffcf503fa5c5b7ba44ecc2753414ea1b261/-1:-1",
+          "targetVariableName": "color/green/300",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1610,12 +1411,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9882352948188782,
-          0.729411780834198,
-          0.007843137718737125
+          1,
+          0.9176470637321472,
+          0.27843138575553894
         ],
         "alpha": 1,
-        "hex": "#FCBA02"
+        "hex": "#FFEA47"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:613",
@@ -1623,8 +1424,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:ec20ecabb72415dc74b582e48619de110d966721/-1:-1",
-          "targetVariableName": "color/yellow/500",
+          "targetVariableId": "VariableID:157cdfbe24dd1eca87bffdd02b199e6995520534/-1:-1",
+          "targetVariableName": "color/yellow/300",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1636,12 +1437,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9372549057006836,
-          0.05098039284348488,
-          0.05098039284348488
+          1,
+          0.6039215922355652,
+          0.6039215922355652
         ],
         "alpha": 1,
-        "hex": "#EF0D0D"
+        "hex": "#FF9A9A"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5898:1434",
@@ -1649,8 +1450,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:987371c0427533fbdfa373c77ead556c26f02c40/-1:-1",
-          "targetVariableName": "color/red/600",
+          "targetVariableId": "VariableID:3632fb3c653e982281b840f0f9b8f2993417f88d/-1:-1",
+          "targetVariableName": "color/red/300",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
diff --git a/tokens/figma/origin/Light.tokens.json b/tokens/figma/origin/Light.tokens.json
index c3e280e..aeaa124 100644
--- a/tokens/figma/origin/Light.tokens.json
+++ b/tokens/figma/origin/Light.tokens.json
@@ -5,21 +5,21 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.10196078568696976,
-          0.10196078568696976,
-          0.10196078568696976
+          0.14901961386203766,
+          0.14901961386203766,
+          0.13725490868091583
         ],
-        "alpha": 1,
-        "hex": "#1A1A1A"
+        "alpha": 0.10000000149011612,
+        "hex": "#262623"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2134:336",
+        "com.figma.variableId": "VariableID:2004:352",
         "com.figma.scopes": [
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:c665b8dd84425c623e5e4882391ed1d1af732d5b/-1:-1",
-          "targetVariableName": "color/gray/950",
+          "targetVariableId": "VariableID:a4b2cf4e68304ea3fab2ba83b116851a626d70f3/-1:-1",
+          "targetVariableName": "color/alpha/temp-black/10",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -31,12 +31,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.7568627595901489,
-          0.7529411911964417,
-          0.7215686440467834
+          0.13725490868091583,
+          0.13725490868091583,
+          0.12941177189350128
         ],
-        "alpha": 1,
-        "hex": "#C1C0B8"
+        "alpha": 0.30000001192092896,
+        "hex": "#232321"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2007:561",
@@ -44,67 +44,41 @@
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:578b25ffa2de6df71ceaa98597c65309d914804c/-1:-1",
-          "targetVariableName": "color/gray/300",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "tertiary": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0,
-          0,
-          0
-        ],
-        "alpha": 0.10000000149011612,
-        "hex": "#000000"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2004:352",
-        "com.figma.scopes": [
-          "STROKE"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:45d02e24ccf305b1ab6131c9bb43cbf71c455522/-1:-1",
-          "targetVariableName": "color/alpha/black/10",
+          "targetVariableId": "VariableID:3fa774f09e09ed4c1e7bab325f7a2da923e1f612/-1:-1",
+          "targetVariableName": "color/alpha/temp-black/30",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
         "com.figma.isOverride": true
       }
     },
-    "hover": {
+    "focus": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0,
-          0,
-          0
+          0.10196078568696976,
+          0.10196078568696976,
+          0.10196078568696976
         ],
-        "alpha": 0.30000001192092896,
-        "hex": "#000000"
+        "alpha": 1,
+        "hex": "#1A1A1A"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:5807:51",
+        "com.figma.variableId": "VariableID:2134:336",
         "com.figma.scopes": [
           "STROKE"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:f00911dd36cbedcde1f67c3df33728b09a9a4d82/-1:-1",
-          "targetVariableName": "color/alpha/black/30",
+          "targetVariableId": "VariableID:c665b8dd84425c623e5e4882391ed1d1af732d5b/-1:-1",
+          "targetVariableName": "color/gray/950",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
         "com.figma.isOverride": true
       }
     },
-    "inverted": {
+    "inverse": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -183,6 +157,34 @@
       }
     }
   },
+  "stroke": {
+    "primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.10196078568696976,
+          0.10196078568696976,
+          0.10196078568696976
+        ],
+        "alpha": 1,
+        "hex": "#1A1A1A"
+      },
+      "$extensions": {
+        "com.figma.variableId": "VariableID:6484:4712",
+        "com.figma.scopes": [
+          "STROKE"
+        ],
+        "com.figma.aliasData": {
+          "targetVariableId": "VariableID:c665b8dd84425c623e5e4882391ed1d1af732d5b/-1:-1",
+          "targetVariableName": "color/gray/950",
+          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
+          "targetVariableSetName": "primitives"
+        },
+        "com.figma.isOverride": true
+      }
+    }
+  },
   "icon": {
     "primary": {
       "$type": "color",
@@ -268,7 +270,7 @@
         "com.figma.isOverride": true
       }
     },
-    "surface": {
+    "inverse": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -281,7 +283,7 @@
         "hex": "#F8F8F7"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2030:244",
+        "com.figma.variableId": "VariableID:6485:4717",
         "com.figma.scopes": [
           "FRAME_FILL",
           "SHAPE_FILL",
@@ -407,117 +409,9 @@
         },
         "com.figma.isOverride": true
       }
-    },
-    "info-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9215686321258545,
-          0.9960784316062927,
-          1
-        ],
-        "alpha": 1,
-        "hex": "#EBFEFF"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2799",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:b315b03dc082341c309e52b504ae5ab48c2531a1/-1:-1",
-          "targetVariableName": "color/sky/050",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "success-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9411764740943909,
-          0.9921568632125854,
-          0.9686274528503418
-        ],
-        "alpha": 1,
-        "hex": "#F0FDF7"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2798",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:a2e53f7bc4c4e351a830507b4485f5587bbe6883/-1:-1",
-          "targetVariableName": "color/green/050",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "warning-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          1,
-          0.9921568632125854,
-          0.9176470637321472
-        ],
-        "alpha": 1,
-        "hex": "#FFFDEA"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2797",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:fbccdf24a56637771457eb25529abf02f49e1cc0/-1:-1",
-          "targetVariableName": "color/yellow/050",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "critical-inverted": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          1,
-          0.9450980424880981,
-          0.9450980424880981
-        ],
-        "alpha": 1,
-        "hex": "#FFF1F1"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:3153:2796",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:257b1c38d63cbce623169b09083361c42061247e/-1:-1",
-          "targetVariableName": "color/red/050",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
     }
   },
-  "input": {
+  "state": {
     "focus": {
       "$type": "color",
       "$value": {
@@ -680,7 +574,7 @@
         "com.figma.isOverride": true
       }
     },
-    "strong": {
+    "neutral": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -707,7 +601,7 @@
         "com.figma.isOverride": true
       }
     },
-    "elevated": {
+    "panel": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -720,7 +614,7 @@
         "hex": "#FAFAF9"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2466:13",
+        "com.figma.variableId": "VariableID:6486:5661",
         "com.figma.scopes": [
           "FRAME_FILL",
           "SHAPE_FILL"
@@ -734,33 +628,6 @@
         "com.figma.isOverride": true
       }
     },
-    "sunken": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.95686274766922,
-          0.95686274766922,
-          0.9529411792755127
-        ],
-        "alpha": 1,
-        "hex": "#F4F4F3"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2829:672",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:61b52ae1800461efd58637e2884fc5b77e0781c6/-1:-1",
-          "targetVariableName": "color/gray/075",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
     "hover": {
       "$type": "color",
       "$value": {
@@ -788,61 +655,7 @@
         "com.figma.isOverride": true
       }
     },
-    "selected": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.1568627506494522,
-          0.1568627506494522,
-          0.1411764770746231
-        ],
-        "alpha": 0.05999999865889549,
-        "hex": "#282824"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:6468:22",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:9f65c876c307e2f724b19f0497cc76fd77b4c432/-1:-1",
-          "targetVariableName": "color/alpha/temp-black/06",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "active": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.16470588743686676,
-          0.16470588743686676,
-          0.14509804546833038
-        ],
-        "alpha": 0.03999999910593033,
-        "hex": "#2A2A25"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2785:292",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:c5ae94e6257cacf90eff1dcea87506d73192f284/-1:-1",
-          "targetVariableName": "color/alpha/temp-black/04",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
-    "inverted": {
+    "inverse": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -869,7 +682,7 @@
         "com.figma.isOverride": true
       }
     },
-    "inverted-hover": {
+    "inverse-hover": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
@@ -896,33 +709,6 @@
         "com.figma.isOverride": true
       }
     },
-    "inverted-backdrop": {
-      "$type": "color",
-      "$value": {
-        "colorSpace": "srgb",
-        "components": [
-          0.9725490212440491,
-          0.9725490212440491,
-          0.9686274528503418
-        ],
-        "alpha": 0.800000011920929,
-        "hex": "#F8F8F7"
-      },
-      "$extensions": {
-        "com.figma.variableId": "VariableID:2746:7325",
-        "com.figma.scopes": [
-          "FRAME_FILL",
-          "SHAPE_FILL"
-        ],
-        "com.figma.aliasData": {
-          "targetVariableId": "VariableID:266d3da38b2173de5ee129e528db76e5cccc6dd1/-1:-1",
-          "targetVariableName": "color/alpha/temp-white/80",
-          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
-          "targetVariableSetName": "primitives"
-        },
-        "com.figma.isOverride": true
-      }
-    },
     "backdrop": {
       "$type": "color",
       "$value": {
@@ -955,12 +741,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9803921580314636,
-          0.9725490212440491,
-          0.9882352948188782
+          0.9490196108818054,
+          0.9333333373069763,
+          0.9764705896377563
         ],
         "alpha": 1,
-        "hex": "#FAF8FC"
+        "hex": "#F2EEF9"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5826:2577",
@@ -969,8 +755,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:074271b995f26a1712595e6bfc0e1da73db49d75/-1:-1",
-          "targetVariableName": "color/purple/050",
+          "targetVariableId": "VariableID:de8d3a9233f6d4cfdf2aa170f20fab6ae099f8c5/-1:-1",
+          "targetVariableName": "color/purple/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1009,12 +795,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9333333373069763,
-          0.9686274528503418,
+          0.8666666746139526,
+          0.9372549057006836,
           1
         ],
         "alpha": 1,
-        "hex": "#EEF7FF"
+        "hex": "#DDEFFF"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:1134",
@@ -1023,8 +809,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:445cfaa3ddb2545b8dec69b89102ca220a6c37ab/-1:-1",
-          "targetVariableName": "color/blue/050",
+          "targetVariableId": "VariableID:f9b13dc5cf590a8fff89d88f8161678d713bf810/-1:-1",
+          "targetVariableName": "color/blue/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1064,12 +850,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9215686321258545,
-          0.9960784316062927,
+          0.800000011920929,
+          0.9764705896377563,
           1
         ],
         "alpha": 1,
-        "hex": "#EBFEFF"
+        "hex": "#CCF9FF"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5827:3167",
@@ -1078,8 +864,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:b315b03dc082341c309e52b504ae5ab48c2531a1/-1:-1",
-          "targetVariableName": "color/sky/050",
+          "targetVariableId": "VariableID:6c7d0a9fbbf8c2a25a5a7018433a41e13412da0e/-1:-1",
+          "targetVariableName": "color/sky/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1120,11 +906,11 @@
         "colorSpace": "srgb",
         "components": [
           1,
-          0.9490196108818054,
-          0.9843137264251709
+          0.8901960849761963,
+          0.9764705896377563
         ],
         "alpha": 1,
-        "hex": "#FFF2FB"
+        "hex": "#FFE3F9"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5826:2575",
@@ -1133,8 +919,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:8457ecd5987aed0565cb7956a98ba13a44678714/-1:-1",
-          "targetVariableName": "color/pink/050",
+          "targetVariableId": "VariableID:5451c8ea50acb7399aa79d30db50e849548c96cf/-1:-1",
+          "targetVariableName": "color/pink/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1173,12 +959,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9411764740943909,
+          0.8588235378265381,
           0.9921568632125854,
-          0.9686274528503418
+          0.9333333373069763
         ],
         "alpha": 1,
-        "hex": "#F0FDF7"
+        "hex": "#DBFDEE"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:604",
@@ -1187,8 +973,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:a2e53f7bc4c4e351a830507b4485f5587bbe6883/-1:-1",
-          "targetVariableName": "color/green/050",
+          "targetVariableId": "VariableID:ebb4d29e20e7d5256b12c8973c20fd79b7c963e9/-1:-1",
+          "targetVariableName": "color/green/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1229,11 +1015,11 @@
         "colorSpace": "srgb",
         "components": [
           1,
-          0.9921568632125854,
-          0.9176470637321472
+          0.9803921580314636,
+          0.772549033164978
         ],
         "alpha": 1,
-        "hex": "#FFFDEA"
+        "hex": "#FFFAC5"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:605",
@@ -1242,8 +1028,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:fbccdf24a56637771457eb25529abf02f49e1cc0/-1:-1",
-          "targetVariableName": "color/yellow/050",
+          "targetVariableId": "VariableID:979cecd8c4d4b18cdcc1a0383d7a7c8b23c801e4/-1:-1",
+          "targetVariableName": "color/yellow/100",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1284,11 +1070,11 @@
         "colorSpace": "srgb",
         "components": [
           1,
-          0.9450980424880981,
-          0.9450980424880981
+          0.7686274647712708,
+          0.7686274647712708
         ],
         "alpha": 1,
-        "hex": "#FFF1F1"
+        "hex": "#FFC4C4"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:606",
@@ -1297,8 +1083,8 @@
           "SHAPE_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:257b1c38d63cbce623169b09083361c42061247e/-1:-1",
-          "targetVariableName": "color/red/050",
+          "targetVariableId": "VariableID:4866205f0dacbcbce03132030e7c66ffbfbac714/-1:-1",
+          "targetVariableName": "color/red/200",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1412,37 +1198,52 @@
         "com.figma.isOverride": true
       }
     },
-    "muted": {
+    "inverse": {
       "$type": "color",
-      "$value": "{text.secondary}",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9725490212440491,
+          0.9725490212440491,
+          0.9686274528503418
+        ],
+        "alpha": 1,
+        "hex": "#F8F8F7"
+      },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2240:1241",
+        "com.figma.variableId": "VariableID:2240:1242",
         "com.figma.scopes": [
           "TEXT_FILL"
         ],
+        "com.figma.aliasData": {
+          "targetVariableId": "VariableID:7e4bcc3763b8db1d601b4b96415731b56ca90b8e/-1:-1",
+          "targetVariableName": "color/gray/050",
+          "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
+          "targetVariableSetName": "primitives"
+        },
         "com.figma.isOverride": true
       }
     },
-    "surface": {
+    "link": {
       "$type": "color",
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9725490212440491,
-          0.9725490212440491,
-          0.9686274528503418
+          0.10196078568696976,
+          0.10196078568696976,
+          0.10196078568696976
         ],
         "alpha": 1,
-        "hex": "#F8F8F7"
+        "hex": "#1A1A1A"
       },
       "$extensions": {
-        "com.figma.variableId": "VariableID:2240:1242",
+        "com.figma.variableId": "VariableID:6479:4042",
         "com.figma.scopes": [
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:7e4bcc3763b8db1d601b4b96415731b56ca90b8e/-1:-1",
-          "targetVariableName": "color/gray/050",
+          "targetVariableId": "VariableID:c665b8dd84425c623e5e4882391ed1d1af732d5b/-1:-1",
+          "targetVariableName": "color/gray/950",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1532,12 +1333,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0,
-          0.7019608020782471,
-          0.8784313797950745
+          0.0235294122248888,
+          0.4431372582912445,
+          0.5960784554481506
         ],
         "alpha": 1,
-        "hex": "#00B3E0"
+        "hex": "#067198"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5827:3169",
@@ -1545,8 +1346,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:8ffaeea2190d3b2de7a38673ab54c0c41740a68f/-1:-1",
-          "targetVariableName": "color/sky/500",
+          "targetVariableId": "VariableID:bb4581a61df584180c284899ef1be68bb1bebde3/-1:-1",
+          "targetVariableName": "color/sky/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1558,12 +1359,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          1,
+          0.8117647171020508,
           0,
-          0.8313725590705872
+          0.6549019813537598
         ],
         "alpha": 1,
-        "hex": "#FF00D4"
+        "hex": "#CF00A7"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2029:234",
@@ -1571,8 +1372,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:a1c73e35a815cb36eccb3ed82a16da66a186ef3c/-1:-1",
-          "targetVariableName": "color/pink/600",
+          "targetVariableId": "VariableID:8329de404aa92e82ab800d8fb1f0d4104cc27ffb/-1:-1",
+          "targetVariableName": "color/pink/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1585,11 +1386,11 @@
         "colorSpace": "srgb",
         "components": [
           0.06666667014360428,
-          0.6627451181411743,
-          0.40392157435417175
+          0.5176470875740051,
+          0.32549020648002625
         ],
         "alpha": 1,
-        "hex": "#11A967"
+        "hex": "#118453"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2073:412",
@@ -1597,8 +1398,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:f1a551855c4076c85898ee9c0068d1420bb04a65/-1:-1",
-          "targetVariableName": "color/green/600",
+          "targetVariableId": "VariableID:88ae130206d1865f3ab670c3fac48af48a2f2b33/-1:-1",
+          "targetVariableName": "color/green/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1610,12 +1411,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.8784313797950745,
-          0.5647059082984924,
-          0
+          0.729411780834198,
+          0.4000000059604645,
+          0.0117647061124444
         ],
         "alpha": 1,
-        "hex": "#E09000"
+        "hex": "#BA6603"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:2239:613",
@@ -1623,8 +1424,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:748def0ea8b2301a3a8d95cd01a792c896620bbc/-1:-1",
-          "targetVariableName": "color/yellow/600",
+          "targetVariableId": "VariableID:2b510fa1b6bd2ce897b5093aa705d574d99aa3d9/-1:-1",
+          "targetVariableName": "color/yellow/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },
@@ -1636,12 +1437,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9372549057006836,
-          0.05098039284348488,
-          0.05098039284348488
+          0.800000011920929,
+          0.03529411926865578,
+          0.03529411926865578
         ],
         "alpha": 1,
-        "hex": "#EF0D0D"
+        "hex": "#CC0909"
       },
       "$extensions": {
         "com.figma.variableId": "VariableID:5898:1434",
@@ -1649,8 +1450,8 @@
           "TEXT_FILL"
         ],
         "com.figma.aliasData": {
-          "targetVariableId": "VariableID:987371c0427533fbdfa373c77ead556c26f02c40/-1:-1",
-          "targetVariableName": "color/red/600",
+          "targetVariableId": "VariableID:75c28b199c2fc26651a0286dc72377b2616886ad/-1:-1",
+          "targetVariableName": "color/red/700",
           "targetVariableSetId": "VariableCollectionId:adf8a2cf9464a08e3c0fc9ba15cff9e85ce1d417/-1:-1",
           "targetVariableSetName": "primitives"
         },