diff --git a/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx b/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx
index 1169222..a98043b 100644
--- a/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx
+++ b/apps/showcase/src/demos/container-management/components/ContainerDetail.tsx
@@ -44,7 +44,7 @@ export function ContainerDetail({ container, onBack }: ContainerDetailProps) {
           <IconButton
             variant="ghost"
             size="sm"
-            dense
+
             aria-label="Back to container list"
             onClick={onBack}
           >
@@ -101,7 +101,7 @@ export function ContainerDetail({ container, onBack }: ContainerDetailProps) {
           <IconButton
             variant="ghost"
             size="sm"
-            dense
+
             color="danger"
             aria-label={`Delete ${container.name}`}
             onClick={() => toast(`Deleting ${container.name}`, { severity: 'warning' })}
@@ -114,20 +114,16 @@ export function ContainerDetail({ container, onBack }: ContainerDetailProps) {
       {/* Tabs */}
       <Tabs.Root className={styles.tabsRoot} defaultValue="logs" variant="flat" size="sm">
         <Tabs.List className={styles.tabsList}>
-          <Tabs.Tab value="logs">
-            <LuTerminal aria-hidden />
+          <Tabs.Tab value="logs" startDecorator={<LuTerminal aria-hidden />}>
             Logs
           </Tabs.Tab>
-          <Tabs.Tab value="inspect">
-            <LuSearch aria-hidden />
+          <Tabs.Tab value="inspect" startDecorator={<LuSearch aria-hidden />}>
             Inspect
           </Tabs.Tab>
-          <Tabs.Tab value="stats">
-            <LuChartBar aria-hidden />
+          <Tabs.Tab value="stats" startDecorator={<LuChartBar aria-hidden />}>
             Stats
           </Tabs.Tab>
-          <Tabs.Tab value="files">
-            <LuFolderOpen aria-hidden />
+          <Tabs.Tab value="files" startDecorator={<LuFolderOpen aria-hidden />}>
             Files
           </Tabs.Tab>
           <Tabs.Indicator />
diff --git a/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx b/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx
index b9caa68..e190fad 100644
--- a/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx
+++ b/apps/showcase/src/demos/web-browser/components/BrowserToolbar.tsx
@@ -5,7 +5,7 @@ import {
   LuRotateCw,
   LuLock,
 } from 'react-icons/lu';
-import { IconButton, Input } from '@omniview/base-ui';
+import { IconButton, Input, Toolbar } from '@omniview/base-ui';
 import { ensureProtocol, NEW_TAB_URL } from '../data';
 import styles from '../index.module.css';
 
@@ -47,36 +47,35 @@ export function BrowserToolbar({
   );
 
   return (
-    <div className={styles.toolbar}>
-      <IconButton
-        variant="ghost"
-        size="sm"
-
-        aria-label="Back"
-        disabled={!canGoBack}
-        onClick={onBack}
-      >
-        <LuArrowLeft size={14} />
-      </IconButton>
-      <IconButton
-        variant="ghost"
-        size="sm"
-
-        aria-label="Forward"
-        disabled={!canGoForward}
-        onClick={onForward}
-      >
-        <LuArrowRight size={14} />
-      </IconButton>
-      <IconButton
-        variant="ghost"
-        size="sm"
-
-        aria-label="Refresh"
-        onClick={onRefresh}
-      >
-        <LuRotateCw size={14} />
-      </IconButton>
+    <Toolbar size="sm" className={styles.toolbar}>
+      <Toolbar.Group>
+        <IconButton
+          variant="ghost"
+          size="sm"
+          aria-label="Back"
+          disabled={!canGoBack}
+          onClick={onBack}
+        >
+          <LuArrowLeft />
+        </IconButton>
+        <IconButton
+          variant="ghost"
+          size="sm"
+          aria-label="Forward"
+          disabled={!canGoForward}
+          onClick={onForward}
+        >
+          <LuArrowRight />
+        </IconButton>
+        <IconButton
+          variant="ghost"
+          size="sm"
+          aria-label="Refresh"
+          onClick={onRefresh}
+        >
+          <LuRotateCw />
+        </IconButton>
+      </Toolbar.Group>
       <Input.Root size="sm" className={styles.addressBar}>
         <Input.Control
           startDecorator={<LuLock size={12} />}
@@ -87,6 +86,6 @@ export function BrowserToolbar({
           placeholder="Enter a URL…"
         />
       </Input.Root>
-    </div>
+    </Toolbar>
   );
 }
diff --git a/apps/showcase/src/demos/web-browser/index.module.css b/apps/showcase/src/demos/web-browser/index.module.css
index b14ac87..145a3bd 100644
--- a/apps/showcase/src/demos/web-browser/index.module.css
+++ b/apps/showcase/src/demos/web-browser/index.module.css
@@ -31,9 +31,6 @@
 
 /* Toolbar: nav buttons + address bar */
 .toolbar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
   padding: 4px 8px;
   background: var(--ov-color-bg-surface);
 }
diff --git a/packages/base-ui/.storybook/preview.tsx b/packages/base-ui/.storybook/preview.tsx
index 6384aa3..34b6b3a 100644
--- a/packages/base-ui/.storybook/preview.tsx
+++ b/packages/base-ui/.storybook/preview.tsx
@@ -9,7 +9,7 @@ const preview: Preview = {
       defaultValue: 'dark',
       toolbar: {
         icon: 'paintbrush',
-        items: ['dark', 'light', 'high-contrast-dark', 'high-contrast-light'],
+        items: ['dark', 'light', 'high-contrast-dark', 'high-contrast-light', 'obsidian', 'carbon', 'void'],
       },
     },
     density: {
diff --git a/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx b/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx
new file mode 100644
index 0000000..c4d3a0d
--- /dev/null
+++ b/packages/base-ui/src/components/_consistency/ConsistencyCheck.stories.tsx
@@ -0,0 +1,534 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LuChevronDown } from 'react-icons/lu';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Checkbox } from '../checkbox';
+import { Chip } from '../chip';
+import { IconButton } from '../icon-button';
+import { Input } from '../input';
+import { Radio } from '../radio';
+import { RadioGroup } from '../radio-group';
+import { Select } from '../select';
+import { Switch } from '../switch';
+import type { ComponentColor, ComponentSize, ComponentVariant } from '../../system/types';
+
+// ─── Shared icon ──────────────────────────────────────────────────────────────
+
+const SearchIcon = () => (
+  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden>
+    <circle cx="7" cy="7" r="4.5" />
+    <path d="M10.5 10.5L14 14" />
+  </svg>
+);
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const SIZES: ComponentSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+// Expected pixel heights per size tier (informational labels)
+const SIZE_HEIGHTS: Record<ComponentSize, string> = {
+  xs: '18px',
+  sm: '22px',
+  md: '26px',
+  lg: '32px',
+  xl: '40px',
+};
+
+const COLORS: ComponentColor[] = [
+  'neutral',
+  'brand',
+  'success',
+  'warning',
+  'danger',
+  'info',
+  'discovery',
+  'secondary',
+];
+
+const VARIANTS: ComponentVariant[] = ['solid', 'soft', 'outline', 'ghost'];
+
+// ─── Section header helper ────────────────────────────────────────────────────
+
+function SectionHeader({ title, subtitle }: { title: string; subtitle?: string }) {
+  return (
+    <div style={{ marginBottom: 24 }}>
+      <h2
+        style={{
+          margin: 0,
+          fontSize: 13,
+          fontWeight: 700,
+          letterSpacing: '0.08em',
+          textTransform: 'uppercase',
+          color: 'var(--ov-color-text-tertiary, #888)',
+          fontFamily: 'var(--ov-font-sans, sans-serif)',
+        }}
+      >
+        {title}
+      </h2>
+      {subtitle && (
+        <p
+          style={{
+            margin: '4px 0 0',
+            fontSize: 12,
+            color: 'var(--ov-color-text-tertiary, #888)',
+            fontFamily: 'var(--ov-font-sans, sans-serif)',
+          }}
+        >
+          {subtitle}
+        </p>
+      )}
+    </div>
+  );
+}
+
+// ─── Section 1: Size Consistency Grid ────────────────────────────────────────
+
+function SizeConsistencyGrid() {
+  return (
+    <div style={{ marginBottom: 64 }}>
+      <SectionHeader
+        title="Section 1 — Size Consistency Grid"
+        subtitle="All controls in each row should appear at the same height. The reference line passes through the vertical midpoint."
+      />
+
+      {/* Column headers */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '120px repeat(9, 1fr)',
+          gap: 8,
+          marginBottom: 8,
+          paddingLeft: 4,
+        }}
+      >
+        {['', 'Button', 'IconButton', 'Input', 'Select', 'Chip', 'Checkbox\n(control)', 'Radio\n(control)', 'Switch', 'Badge'].map(
+          (label) => (
+            <div
+              key={label}
+              style={{
+                fontSize: 10,
+                fontWeight: 600,
+                letterSpacing: '0.06em',
+                textTransform: 'uppercase',
+                color: 'var(--ov-color-text-tertiary, #888)',
+                fontFamily: 'var(--ov-font-sans, sans-serif)',
+                textAlign: 'center',
+              }}
+            >
+              {label}
+            </div>
+          ),
+        )}
+      </div>
+
+      {/* Size rows */}
+      {SIZES.map((size) => (
+        <div
+          key={size}
+          style={{
+            position: 'relative',
+            display: 'grid',
+            gridTemplateColumns: '120px repeat(9, 1fr)',
+            gap: 8,
+            alignItems: 'center',
+            paddingTop: 12,
+            paddingBottom: 12,
+            borderBottom: '1px solid var(--ov-color-border-subtle, #2a2a2a)',
+          }}
+        >
+          {/* Reference line through vertical midpoint */}
+          <div
+            aria-hidden
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: 120,
+              right: 0,
+              height: 1,
+              background: 'rgba(255,90,90,0.35)',
+              pointerEvents: 'none',
+              zIndex: 0,
+            }}
+          />
+
+          {/* Row label */}
+          <div
+            style={{
+              fontSize: 11,
+              fontFamily: 'var(--ov-font-mono, monospace)',
+              color: 'var(--ov-color-text-secondary, #ccc)',
+              zIndex: 1,
+            }}
+          >
+            <strong>{size}</strong>
+            <span
+              style={{
+                marginLeft: 6,
+                opacity: 0.55,
+                fontSize: 10,
+              }}
+            >
+              {SIZE_HEIGHTS[size]}
+            </span>
+          </div>
+
+          {/* Button */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <Button size={size} variant="soft" color="brand">
+              Label
+            </Button>
+          </div>
+
+          {/* IconButton */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <IconButton size={size} variant="soft" color="brand" aria-label="Search">
+              <SearchIcon />
+            </IconButton>
+          </div>
+
+          {/* Input */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <Input.Root size={size} variant="soft" color="brand" style={{ width: '100%' }}>
+              <Input.Control placeholder="Value" />
+            </Input.Root>
+          </div>
+
+          {/* Select */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <Select.Root size={size} variant="soft" color="brand">
+              <Select.Trigger style={{ width: '100%' }}>
+                <Select.Value placeholder="Select" />
+                <Select.Icon>
+                  <LuChevronDown aria-hidden />
+                </Select.Icon>
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Positioner sideOffset={6}>
+                  <Select.Popup>
+                    <Select.List>
+                      <Select.Item value="a">
+                        <Select.ItemText>Option A</Select.ItemText>
+                      </Select.Item>
+                      <Select.Item value="b">
+                        <Select.ItemText>Option B</Select.ItemText>
+                      </Select.Item>
+                    </Select.List>
+                  </Select.Popup>
+                </Select.Positioner>
+              </Select.Portal>
+            </Select.Root>
+          </div>
+
+          {/* Chip */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <Chip size={size} variant="soft" color="brand">
+              Tag
+            </Chip>
+          </div>
+
+          {/* Checkbox (control only — no label, to measure control height) */}
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1 }}>
+            <Checkbox.Item size={size} variant="soft" color="brand" defaultChecked />
+          </div>
+
+          {/* Radio (control only — no label) */}
+          <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1 }}>
+            <RadioGroup defaultValue="yes" color="brand" variant="soft" size={size}>
+              <Radio.Item value="yes" />
+            </RadioGroup>
+          </div>
+
+          {/* Switch */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <Switch size={size} variant="soft" color="brand" defaultChecked />
+          </div>
+
+          {/* Badge */}
+          <div style={{ display: 'flex', justifyContent: 'center', zIndex: 1 }}>
+            <Badge content={9} size={size} color="danger">
+              <div
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 6,
+                  background: 'var(--ov-color-bg-surface-raised, #333)',
+                }}
+              />
+            </Badge>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Section 2: Color × Variant Matrix ───────────────────────────────────────
+
+function ColorVariantMatrix() {
+  return (
+    <div style={{ marginBottom: 64 }}>
+      <SectionHeader
+        title="Section 2 — Color × Variant Matrix"
+        subtitle="8 colors × 4 variants. Spot missing or broken color/variant combinations."
+      />
+
+      {/* Variant column headers */}
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '100px repeat(4, 1fr)',
+          gap: 8,
+          marginBottom: 8,
+        }}
+      >
+        {['', ...VARIANTS].map((label) => (
+          <div
+            key={label}
+            style={{
+              fontSize: 10,
+              fontWeight: 600,
+              letterSpacing: '0.06em',
+              textTransform: 'uppercase',
+              color: 'var(--ov-color-text-tertiary, #888)',
+              fontFamily: 'var(--ov-font-sans, sans-serif)',
+              textAlign: 'center',
+            }}
+          >
+            {label}
+          </div>
+        ))}
+      </div>
+
+      {/* Dark background section */}
+      <div
+        style={{
+          background: 'var(--ov-color-bg-surface, #18181b)',
+          borderRadius: 8,
+          padding: 16,
+          marginBottom: 16,
+          border: '1px solid var(--ov-color-border-subtle, #2a2a2a)',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 10,
+            fontWeight: 600,
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase',
+            color: 'var(--ov-color-text-tertiary, #888)',
+            fontFamily: 'var(--ov-font-sans, sans-serif)',
+            marginBottom: 12,
+          }}
+        >
+          Dark background
+        </div>
+        {COLORS.map((color) => (
+          <div
+            key={color}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '100px repeat(4, 1fr)',
+              gap: 8,
+              marginBottom: 8,
+              alignItems: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 11,
+                fontFamily: 'var(--ov-font-mono, monospace)',
+                color: 'var(--ov-color-text-secondary, #ccc)',
+              }}
+            >
+              {color}
+            </div>
+            {VARIANTS.map((variant) => (
+              <div key={variant} style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button size="sm" color={color} variant={variant}>
+                  {variant}
+                </Button>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+
+      {/* Light background section */}
+      <div
+        style={{
+          background: '#f5f5f5',
+          borderRadius: 8,
+          padding: 16,
+          border: '1px solid #e0e0e0',
+        }}
+      >
+        <div
+          style={{
+            fontSize: 10,
+            fontWeight: 600,
+            letterSpacing: '0.06em',
+            textTransform: 'uppercase',
+            color: '#888',
+            fontFamily: 'var(--ov-font-sans, sans-serif)',
+            marginBottom: 12,
+          }}
+        >
+          Light background
+        </div>
+        {COLORS.map((color) => (
+          <div
+            key={color}
+            style={{
+              display: 'grid',
+              gridTemplateColumns: '100px repeat(4, 1fr)',
+              gap: 8,
+              marginBottom: 8,
+              alignItems: 'center',
+            }}
+          >
+            <div
+              style={{
+                fontSize: 11,
+                fontFamily: 'var(--ov-font-mono, monospace)',
+                color: '#444',
+              }}
+            >
+              {color}
+            </div>
+            {VARIANTS.map((variant) => (
+              <div key={variant} style={{ display: 'flex', justifyContent: 'center' }}>
+                <Button size="sm" color={color} variant={variant}>
+                  {variant}
+                </Button>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Section 3: IconButton Squareness Check ───────────────────────────────────
+
+function IconButtonSquarenessCheck() {
+  return (
+    <div style={{ marginBottom: 64 }}>
+      <SectionHeader
+        title="Section 3 — IconButton Squareness Check"
+        subtitle="Each button should be perfectly square (width = height). Misalignment indicates a CSS regression."
+      />
+
+      <div style={{ display: 'flex', gap: 24, alignItems: 'flex-end', flexWrap: 'wrap' }}>
+        {SIZES.map((size) => (
+          <div
+            key={size}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 8,
+            }}
+          >
+            <div
+              style={{
+                position: 'relative',
+                display: 'inline-flex',
+              }}
+            >
+              {/* Visible square background to expose non-square dimensions */}
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  outline: '2px dashed rgba(255,90,90,0.5)',
+                  borderRadius: 4,
+                  pointerEvents: 'none',
+                  zIndex: 10,
+                }}
+              />
+              <IconButton
+                size={size}
+                variant="soft"
+                color="brand"
+                aria-label={`Search ${size}`}
+              >
+                <SearchIcon />
+              </IconButton>
+            </div>
+            <span
+              style={{
+                fontSize: 11,
+                fontFamily: 'var(--ov-font-mono, monospace)',
+                color: 'var(--ov-color-text-secondary, #ccc)',
+              }}
+            >
+              {size}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Story scaffold ───────────────────────────────────────────────────────────
+
+function AuditPage() {
+  return (
+    <div
+      style={{
+        padding: 32,
+        minHeight: '100vh',
+        fontFamily: 'var(--ov-font-sans, sans-serif)',
+        background: 'var(--ov-color-bg-base, #111)',
+        color: 'var(--ov-color-text-primary, #eee)',
+      }}
+    >
+      <div style={{ marginBottom: 40 }}>
+        <h1
+          style={{
+            margin: 0,
+            fontSize: 18,
+            fontWeight: 700,
+            color: 'var(--ov-color-text-primary, #eee)',
+          }}
+        >
+          Size &amp; Color Audit
+        </h1>
+        <p
+          style={{
+            margin: '6px 0 0',
+            fontSize: 13,
+            color: 'var(--ov-color-text-tertiary, #888)',
+          }}
+        >
+          Visual reference tool — not interactive. Resize the panel to stress-test layouts.
+        </p>
+      </div>
+
+      <SizeConsistencyGrid />
+      <ColorVariantMatrix />
+      <IconButtonSquarenessCheck />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Consistency/Size & Color Audit',
+  component: AuditPage,
+  parameters: {
+    controls: { hideNoControlsWarning: true },
+    docs: { disable: true },
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof AuditPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Audit: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+};
diff --git a/packages/base-ui/src/components/accordion/Accordion.stories.tsx b/packages/base-ui/src/components/accordion/Accordion.stories.tsx
index 3b3238e..1a8d911 100644
--- a/packages/base-ui/src/components/accordion/Accordion.stories.tsx
+++ b/packages/base-ui/src/components/accordion/Accordion.stories.tsx
@@ -16,7 +16,7 @@ const meta = {
     exclusive: { control: 'boolean' },
     defaultExpanded: { control: 'object' },
     animation: { control: 'inline-radio', options: ['default', 'fast', 'none'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 } satisfies Meta<AccordionProps>;
 
diff --git a/packages/base-ui/src/components/action-list/ActionList.module.css b/packages/base-ui/src/components/action-list/ActionList.module.css
index 6601ef7..d00cbaa 100644
--- a/packages/base-ui/src/components/action-list/ActionList.module.css
+++ b/packages/base-ui/src/components/action-list/ActionList.module.css
@@ -8,6 +8,12 @@
   min-inline-size: 220px;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-xs);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-xs);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-sm);
   --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-sm);
@@ -20,6 +26,12 @@
   --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-xl);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-xl);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-xl);
+}
+
 .Item {
   --_ov-item-height: var(--ov-size-action-list-item-height-md);
   --_ov-item-padding-inline: var(--ov-size-action-list-item-padding-inline-md);
@@ -33,6 +45,14 @@
   text-align: left;
 }
 
+.Item[data-ov-size='xs'] {
+  --_ov-item-height: var(--ov-size-action-list-item-height-xs);
+  --_ov-item-padding-inline: var(--ov-size-action-list-item-padding-inline-xs);
+  --_ov-item-icon-size: var(--ov-size-action-list-icon-size-xs);
+  --_ov-item-shortcut-min-width: var(--ov-size-action-list-shortcut-min-width-xs);
+  --_ov-content-gap: var(--ov-space-stack-sm);
+}
+
 .Item[data-ov-size='sm'] {
   --_ov-item-height: var(--ov-size-action-list-item-height-sm);
   --_ov-item-padding-inline: var(--ov-size-action-list-item-padding-inline-sm);
@@ -49,6 +69,14 @@
   --_ov-content-gap: var(--ov-space-inline-control);
 }
 
+.Item[data-ov-size='xl'] {
+  --_ov-item-height: var(--ov-size-action-list-item-height-xl);
+  --_ov-item-padding-inline: var(--ov-size-action-list-item-padding-inline-xl);
+  --_ov-item-icon-size: var(--ov-size-action-list-icon-size-xl);
+  --_ov-item-shortcut-min-width: var(--ov-size-action-list-shortcut-min-width-xl);
+  --_ov-content-gap: var(--ov-space-inline-control);
+}
+
 .Item :where([data-ov-slot='start-decorator'], [data-ov-slot='end-decorator']) {
   display: inline-flex;
   align-items: center;
@@ -126,6 +154,10 @@
   margin-block-end: var(--_ov-group-label-gap-after);
 }
 
+.GroupLabel[data-ov-size='xs'] {
+  padding-inline: var(--ov-size-action-list-item-padding-inline-xs);
+}
+
 .GroupLabel[data-ov-size='sm'] {
   padding-inline: var(--ov-size-action-list-item-padding-inline-sm);
 }
@@ -133,3 +165,7 @@
 .GroupLabel[data-ov-size='lg'] {
   padding-inline: var(--ov-size-action-list-item-padding-inline-lg);
 }
+
+.GroupLabel[data-ov-size='xl'] {
+  padding-inline: var(--ov-size-action-list-item-padding-inline-xl);
+}
diff --git a/packages/base-ui/src/components/action-list/ActionList.stories.tsx b/packages/base-ui/src/components/action-list/ActionList.stories.tsx
index e216ca2..e6ecdf5 100644
--- a/packages/base-ui/src/components/action-list/ActionList.stories.tsx
+++ b/packages/base-ui/src/components/action-list/ActionList.stories.tsx
@@ -12,8 +12,8 @@ const meta = {
     itemVariant: 'ghost',
   },
   argTypes: {
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     itemVariant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
   },
   parameters: {
diff --git a/packages/base-ui/src/components/action-list/ActionList.test.tsx b/packages/base-ui/src/components/action-list/ActionList.test.tsx
index 71ea3f7..7e8af9a 100644
--- a/packages/base-ui/src/components/action-list/ActionList.test.tsx
+++ b/packages/base-ui/src/components/action-list/ActionList.test.tsx
@@ -19,6 +19,42 @@ describe('ActionList', () => {
     expect(screen.getByText('Open the selected workspace')).toBeVisible();
   });
 
+  it('applies xs size data attribute', () => {
+    renderWithTheme(
+      <ActionList size="xs">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    );
+    const button = screen.getByRole('button', { name: 'Item' });
+    expect(button).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(
+      <ActionList size="xl">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    );
+    const button = screen.getByRole('button', { name: 'Item' });
+    expect(button).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(
+      <ActionList color="discovery">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    );
+    expect(screen.getByRole('button', { name: 'Item' })).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <ActionList color="secondary">
+        <ActionList.Item>Item</ActionList.Item>
+      </ActionList>,
+    );
+    expect(screen.getByRole('button', { name: 'Item' })).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders separator and group label', () => {
     renderWithTheme(
       <ActionList>
diff --git a/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css b/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css
index b0141ce..f6cba52 100644
--- a/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css
+++ b/packages/base-ui/src/components/alert-dialog/AlertDialog.module.css
@@ -53,6 +53,18 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Title {
   margin: 0;
   color: var(--_ov-title);
@@ -128,6 +140,39 @@
   --_ov-bg-pressed: color-mix(in srgb, var(--ov-color-danger) 78%, black 22%);
 }
 
+.Trigger[data-ov-color='info'],
+.Close[data-ov-color='info'] {
+  --_ov-bg: var(--ov-color-info);
+  --_ov-border: var(--ov-color-info);
+  --_ov-fg: var(--ov-color-fg-inverse);
+  --_ov-bg-hover: color-mix(in srgb, var(--ov-color-info) 88%, white 12%);
+  --_ov-bg-pressed: color-mix(in srgb, var(--ov-color-info) 78%, black 22%);
+}
+
+.Trigger[data-ov-color='discovery'],
+.Close[data-ov-color='discovery'] {
+  --_ov-bg: var(--ov-color-discovery);
+  --_ov-border: var(--ov-color-discovery);
+  --_ov-fg: var(--ov-color-fg-inverse);
+  --_ov-bg-hover: color-mix(in srgb, var(--ov-color-discovery) 88%, white 12%);
+  --_ov-bg-pressed: color-mix(in srgb, var(--ov-color-discovery) 78%, black 22%);
+}
+
+.Trigger[data-ov-color='secondary'],
+.Close[data-ov-color='secondary'] {
+  --_ov-bg: var(--ov-color-secondary);
+  --_ov-border: var(--ov-color-secondary);
+  --_ov-fg: var(--ov-color-fg-inverse);
+  --_ov-bg-hover: color-mix(in srgb, var(--ov-color-secondary) 88%, white 12%);
+  --_ov-bg-pressed: color-mix(in srgb, var(--ov-color-secondary) 78%, black 22%);
+}
+
+.Trigger[data-ov-variant='solid'],
+.Close[data-ov-variant='solid'] {
+  --_ov-bg: var(--ov-color-bg-surface-raised);
+  --_ov-border: var(--ov-color-border-default);
+}
+
 .Trigger[data-ov-variant='soft'],
 .Close[data-ov-variant='soft'] {
   --_ov-bg: var(--ov-color-state-selected);
diff --git a/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx b/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx
index 78f10d9..3ebd0f0 100644
--- a/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx
+++ b/packages/base-ui/src/components/alert-dialog/AlertDialog.stories.tsx
@@ -12,8 +12,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   parameters: {
     controls: {
diff --git a/packages/base-ui/src/components/alert-dialog/AlertDialog.test.tsx b/packages/base-ui/src/components/alert-dialog/AlertDialog.test.tsx
index 62587c2..b028208 100644
--- a/packages/base-ui/src/components/alert-dialog/AlertDialog.test.tsx
+++ b/packages/base-ui/src/components/alert-dialog/AlertDialog.test.tsx
@@ -4,6 +4,38 @@ import { renderWithTheme } from '../../test/render';
 import { AlertDialog } from './AlertDialog';
 
 describe('AlertDialog', () => {
+  it('renders discovery color on popup', () => {
+    renderWithTheme(
+      <AlertDialog.Root defaultOpen color="discovery">
+        <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Popup>
+            <AlertDialog.Title>Discovery Dialog</AlertDialog.Title>
+          </AlertDialog.Popup>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>,
+    );
+    const popup = screen.getByText('Discovery Dialog').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders secondary color on popup', () => {
+    renderWithTheme(
+      <AlertDialog.Root defaultOpen color="secondary">
+        <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+        <AlertDialog.Portal>
+          <AlertDialog.Backdrop />
+          <AlertDialog.Popup>
+            <AlertDialog.Title>Secondary Dialog</AlertDialog.Title>
+          </AlertDialog.Popup>
+        </AlertDialog.Portal>
+      </AlertDialog.Root>,
+    );
+    const popup = screen.getByText('Secondary Dialog').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders themed popup when opened', () => {
     renderWithTheme(
       <AlertDialog.Root defaultOpen color="brand" size="lg" variant="outline">
diff --git a/packages/base-ui/src/components/autocomplete/Autocomplete.module.css b/packages/base-ui/src/components/autocomplete/Autocomplete.module.css
index 6a88fdd..eee9767 100644
--- a/packages/base-ui/src/components/autocomplete/Autocomplete.module.css
+++ b/packages/base-ui/src/components/autocomplete/Autocomplete.module.css
@@ -34,6 +34,11 @@
   box-shadow: 0 0 0 1px var(--ov-color-state-focus-ring);
 }
 
+.Input[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-font-size: var(--ov-font-size-caption);
+}
+
 .Input[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -43,6 +48,15 @@
   --_ov-control-height: var(--ov-control-height-lg);
 }
 
+.Input[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+}
+
+.Input[data-ov-color='neutral'] {
+  --_ov-focus: var(--ov-color-border-default);
+  --_ov-accent-soft: var(--ov-color-state-selected);
+}
+
 .Input[data-ov-color='brand'] {
   --_ov-focus: var(--ov-color-brand-400);
   --_ov-accent-soft: var(--ov-color-accent-soft);
@@ -63,6 +77,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Input[data-ov-color='info'] {
+  --_ov-focus: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Input[data-ov-color='discovery'] {
+  --_ov-focus: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Input[data-ov-color='secondary'] {
+  --_ov-focus: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Input[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent-soft) 14%);
 }
@@ -76,6 +105,11 @@
   --_ov-border: transparent;
 }
 
+.Input[data-ov-variant='soft'] {
+  --_ov-bg: var(--_ov-accent-soft);
+  --_ov-border: transparent;
+}
+
 .Positioner {
   z-index: var(--ov-z-popup, 120);
 }
@@ -104,6 +138,16 @@
   padding: var(--_ov-popup-padding);
 }
 
+.Popup[data-ov-size='xs'] {
+  --_ov-popup-padding: calc(var(--ov-size-list-item-gap) - 2px);
+  --_ov-list-gap: calc(var(--ov-size-list-item-gap) - 2px);
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xs);
+  --_ov-item-height: var(--ov-size-list-item-height-xs);
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-sm);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-sm);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-sm);
+}
+
 .Popup[data-ov-size='sm'] {
   --_ov-popup-padding: calc(var(--ov-size-list-item-gap) - 1px);
   --_ov-list-gap: calc(var(--ov-size-list-item-gap) - 1px);
@@ -124,6 +168,20 @@
   --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
 }
 
+.Popup[data-ov-size='xl'] {
+  --_ov-popup-padding: calc(var(--ov-size-list-item-gap) + 2px);
+  --_ov-list-gap: calc(var(--ov-size-list-item-gap) + 2px);
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xl);
+  --_ov-item-height: var(--ov-size-list-item-height-xl);
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-lg);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-lg);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
+}
+
+.Popup[data-ov-color='neutral'] {
+  --_ov-selected-bg: var(--ov-color-state-selected);
+}
+
 .Popup[data-ov-color='brand'] {
   --_ov-selected-bg: var(--ov-color-accent-soft);
 }
@@ -140,6 +198,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 .List {
   margin: 0;
   padding: 0;
@@ -235,6 +305,12 @@
     color var(--ov-duration-interactive) var(--ov-ease-standard);
 }
 
+.Trigger[data-ov-size='xs'],
+.Clear[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xs);
+}
+
 .Trigger[data-ov-size='sm'],
 .Clear[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
@@ -247,6 +323,17 @@
   --_ov-icon-size: var(--ov-size-icon-button-icon-lg);
 }
 
+.Trigger[data-ov-size='xl'],
+.Clear[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xl);
+}
+
+.Trigger[data-ov-color='neutral'],
+.Clear[data-ov-color='neutral'] {
+  --_ov-fg: var(--ov-color-fg-muted);
+}
+
 .Trigger[data-ov-color='brand'],
 .Clear[data-ov-color='brand'] {
   --_ov-fg: var(--ov-color-brand-400);
@@ -267,6 +354,21 @@
   --_ov-fg: var(--ov-color-danger);
 }
 
+.Trigger[data-ov-color='info'],
+.Clear[data-ov-color='info'] {
+  --_ov-fg: var(--ov-color-info);
+}
+
+.Trigger[data-ov-color='discovery'],
+.Clear[data-ov-color='discovery'] {
+  --_ov-fg: var(--ov-color-discovery);
+}
+
+.Trigger[data-ov-color='secondary'],
+.Clear[data-ov-color='secondary'] {
+  --_ov-fg: var(--ov-color-secondary);
+}
+
 .Trigger[data-ov-variant='solid'],
 .Clear[data-ov-variant='solid'] {
   --_ov-bg: var(--ov-color-state-selected);
@@ -284,6 +386,12 @@
   --_ov-border: transparent;
 }
 
+.Trigger[data-ov-variant='soft'],
+.Clear[data-ov-variant='soft'] {
+  --_ov-bg: var(--ov-color-state-selected);
+  --_ov-border: transparent;
+}
+
 .Trigger:focus-visible,
 .Clear:focus-visible {
   outline: none;
diff --git a/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx b/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx
index 19d11f4..448df2c 100644
--- a/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx
+++ b/packages/base-ui/src/components/autocomplete/Autocomplete.stories.tsx
@@ -79,8 +79,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   parameters: {
     controls: {
diff --git a/packages/base-ui/src/components/autocomplete/Autocomplete.test.tsx b/packages/base-ui/src/components/autocomplete/Autocomplete.test.tsx
index dd61b00..d9a273b 100644
--- a/packages/base-ui/src/components/autocomplete/Autocomplete.test.tsx
+++ b/packages/base-ui/src/components/autocomplete/Autocomplete.test.tsx
@@ -41,4 +41,100 @@ describe('Autocomplete', () => {
 
     expect(screen.getByText('feature')).toBeInTheDocument();
   });
+
+  it('applies xs size data attribute to input', () => {
+    renderWithTheme(
+      <Autocomplete.Root items={tags} defaultOpen size="xs">
+        <Autocomplete.Input placeholder="Search tags xs" />
+        <Autocomplete.Portal>
+          <Autocomplete.Positioner>
+            <Autocomplete.Popup>
+              <Autocomplete.List>
+                {(tag: Tag) => (
+                  <Autocomplete.Item key={tag.id} value={tag}>
+                    {tag.value}
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </Autocomplete.Popup>
+          </Autocomplete.Positioner>
+        </Autocomplete.Portal>
+      </Autocomplete.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Search tags xs');
+    expect(input).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute to input', () => {
+    renderWithTheme(
+      <Autocomplete.Root items={tags} defaultOpen size="xl">
+        <Autocomplete.Input placeholder="Search tags xl" />
+        <Autocomplete.Portal>
+          <Autocomplete.Positioner>
+            <Autocomplete.Popup>
+              <Autocomplete.List>
+                {(tag: Tag) => (
+                  <Autocomplete.Item key={tag.id} value={tag}>
+                    {tag.value}
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </Autocomplete.Popup>
+          </Autocomplete.Positioner>
+        </Autocomplete.Portal>
+      </Autocomplete.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Search tags xl');
+    expect(input).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color data attribute to input', () => {
+    renderWithTheme(
+      <Autocomplete.Root items={tags} defaultOpen color="discovery">
+        <Autocomplete.Input placeholder="Search tags discovery" />
+        <Autocomplete.Portal>
+          <Autocomplete.Positioner>
+            <Autocomplete.Popup>
+              <Autocomplete.List>
+                {(tag: Tag) => (
+                  <Autocomplete.Item key={tag.id} value={tag}>
+                    {tag.value}
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </Autocomplete.Popup>
+          </Autocomplete.Positioner>
+        </Autocomplete.Portal>
+      </Autocomplete.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Search tags discovery');
+    expect(input).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('applies secondary color data attribute to input', () => {
+    renderWithTheme(
+      <Autocomplete.Root items={tags} defaultOpen color="secondary">
+        <Autocomplete.Input placeholder="Search tags secondary" />
+        <Autocomplete.Portal>
+          <Autocomplete.Positioner>
+            <Autocomplete.Popup>
+              <Autocomplete.List>
+                {(tag: Tag) => (
+                  <Autocomplete.Item key={tag.id} value={tag}>
+                    {tag.value}
+                  </Autocomplete.Item>
+                )}
+              </Autocomplete.List>
+            </Autocomplete.Popup>
+          </Autocomplete.Positioner>
+        </Autocomplete.Portal>
+      </Autocomplete.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Search tags secondary');
+    expect(input).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx b/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx
index 1d0e808..e743088 100644
--- a/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx
+++ b/packages/base-ui/src/components/avatar-group/AvatarGroup.stories.tsx
@@ -25,10 +25,10 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     shape: { control: 'inline-radio', options: ['circle', 'rounded'] },
-    overlap: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    overlap: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     deterministic: { control: 'boolean' },
     max: { control: { type: 'number', min: 1, max: 8, step: 1 } },
     total: { control: { type: 'number', min: 1, max: 99, step: 1 } },
diff --git a/packages/base-ui/src/components/avatar/Avatar.module.css b/packages/base-ui/src/components/avatar/Avatar.module.css
index c1cd8db..85f4f68 100644
--- a/packages/base-ui/src/components/avatar/Avatar.module.css
+++ b/packages/base-ui/src/components/avatar/Avatar.module.css
@@ -27,6 +27,12 @@
   border-radius: var(--ov-size-avatar-radius-rounded);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-size: var(--ov-size-avatar-xs, var(--ov-size-avatar-sm));
+  --_ov-font-size: var(--ov-size-avatar-font-size-xs, var(--ov-size-avatar-font-size-sm));
+  --_ov-icon-size: var(--ov-size-avatar-icon-size-xs, var(--ov-size-avatar-icon-size-sm));
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-size: var(--ov-size-avatar-sm);
   --_ov-font-size: var(--ov-size-avatar-font-size-sm);
@@ -39,6 +45,12 @@
   --_ov-icon-size: var(--ov-size-avatar-icon-size-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-size: var(--ov-size-avatar-xl, var(--ov-size-avatar-lg));
+  --_ov-font-size: var(--ov-size-avatar-font-size-xl, var(--ov-size-avatar-font-size-lg));
+  --_ov-icon-size: var(--ov-size-avatar-icon-size-xl, var(--ov-size-avatar-icon-size-lg));
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-bg-surface-raised);
   --_ov-accent-fg: var(--ov-color-fg-default);
@@ -79,6 +91,30 @@
   --_ov-accent-soft-fg: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: var(--_ov-accent-bg);
   --_ov-fg: var(--_ov-accent-fg);
diff --git a/packages/base-ui/src/components/avatar/Avatar.stories.tsx b/packages/base-ui/src/components/avatar/Avatar.stories.tsx
index 98ae388..e14b53f 100644
--- a/packages/base-ui/src/components/avatar/Avatar.stories.tsx
+++ b/packages/base-ui/src/components/avatar/Avatar.stories.tsx
@@ -56,8 +56,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     shape: { control: 'inline-radio', options: ['circle', 'rounded'] },
     deterministic: { control: 'boolean' },
     name: { control: 'text' },
diff --git a/packages/base-ui/src/components/avatar/Avatar.test.tsx b/packages/base-ui/src/components/avatar/Avatar.test.tsx
index 0e634d4..55772bd 100644
--- a/packages/base-ui/src/components/avatar/Avatar.test.tsx
+++ b/packages/base-ui/src/components/avatar/Avatar.test.tsx
@@ -38,6 +38,26 @@ describe('Avatar', () => {
     expect(screen.getByTestId('avatar-icon')).toBeInTheDocument();
   });
 
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(<Avatar name="A B" size="xs" />);
+    let root = screen.getByText('AB').closest('[data-ov-avatar-root="true"]');
+    expect(root).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<Avatar name="A B" size="xl" />);
+    root = screen.getByText('AB').closest('[data-ov-avatar-root="true"]');
+    expect(root).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(<Avatar name="C D" color="discovery" />);
+    let root = screen.getByText('CD').closest('[data-ov-avatar-root="true"]');
+    expect(root).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<Avatar name="C D" color="secondary" />);
+    root = screen.getByText('CD').closest('[data-ov-avatar-root="true"]');
+    expect(root).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('supports non-deterministic fallback mode', () => {
     renderWithTheme(<Avatar name="Riley Brooks" deterministic={false} />);
 
diff --git a/packages/base-ui/src/components/badge/Badge.module.css b/packages/base-ui/src/components/badge/Badge.module.css
index 17a2c5f..0468b62 100644
--- a/packages/base-ui/src/components/badge/Badge.module.css
+++ b/packages/base-ui/src/components/badge/Badge.module.css
@@ -55,6 +55,21 @@
 }
 
 /* ── Color variants ── */
+.Badge[data-ov-color='info'] {
+  --_ov-bg: var(--ov-color-info);
+  --_ov-fg: var(--ov-color-fg-inverse);
+}
+
+.Badge[data-ov-color='discovery'] {
+  --_ov-bg: var(--ov-color-discovery);
+  --_ov-fg: var(--ov-color-fg-inverse);
+}
+
+.Badge[data-ov-color='secondary'] {
+  --_ov-bg: var(--ov-color-secondary);
+  --_ov-fg: var(--ov-color-fg-inverse);
+}
+
 .Badge[data-ov-color='neutral'] {
   --_ov-bg: var(--ov-color-bg-surface-raised);
   --_ov-fg: var(--ov-color-fg-default);
@@ -80,6 +95,16 @@
   --_ov-fg: var(--ov-color-fg-inverse);
 }
 
+/* ── Size: xs ── */
+.Badge[data-ov-size='xs'] {
+  --_ov-badge-min-w: 14px;
+  --_ov-badge-h: 14px;
+  --_ov-badge-pad: 0 3px;
+  --_ov-badge-radius: 7px;
+  --_ov-badge-font: 0.5rem;
+  --_ov-dot-size: 5px;
+}
+
 /* ── Size: sm ── */
 .Badge[data-ov-size='sm'] {
   --_ov-badge-min-w: 16px;
@@ -100,6 +125,16 @@
   --_ov-dot-size: 14px;
 }
 
+/* ── Size: xl ── */
+.Badge[data-ov-size='xl'] {
+  --_ov-badge-min-w: 26px;
+  --_ov-badge-h: 26px;
+  --_ov-badge-pad: 0 7px;
+  --_ov-badge-radius: 13px;
+  --_ov-badge-font: 0.875rem;
+  --_ov-dot-size: 16px;
+}
+
 /* ── Position variants (rectangular) ── */
 .Badge[data-ov-position='top-right'] {
   top: 0;
diff --git a/packages/base-ui/src/components/badge/Badge.stories.tsx b/packages/base-ui/src/components/badge/Badge.stories.tsx
index 41b8a55..52d99d0 100644
--- a/packages/base-ui/src/components/badge/Badge.stories.tsx
+++ b/packages/base-ui/src/components/badge/Badge.stories.tsx
@@ -21,12 +21,12 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['standard', 'dot'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
     position: {
       control: 'select',
       options: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
     },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     overlap: { control: 'inline-radio', options: ['rectangular', 'circular'] },
     max: { control: 'number' },
     content: { control: 'text' },
diff --git a/packages/base-ui/src/components/badge/Badge.test.tsx b/packages/base-ui/src/components/badge/Badge.test.tsx
index a6a3e05..712f9f9 100644
--- a/packages/base-ui/src/components/badge/Badge.test.tsx
+++ b/packages/base-ui/src/components/badge/Badge.test.tsx
@@ -147,6 +147,41 @@ describe('Badge', () => {
     expect(badge).toBeInTheDocument();
   });
 
+  it('xs size prop applies data attribute', () => {
+    renderWithTheme(
+      <Badge content={1} size="xs">
+        <span>Icon</span>
+      </Badge>,
+    );
+    expect(document.querySelector('[data-ov-size="xs"]')).toBeInTheDocument();
+  });
+
+  it('xl size prop applies data attribute', () => {
+    renderWithTheme(
+      <Badge content={1} size="xl">
+        <span>Icon</span>
+      </Badge>,
+    );
+    expect(document.querySelector('[data-ov-size="xl"]')).toBeInTheDocument();
+  });
+
+  it('discovery and secondary color variants apply data attributes', () => {
+    const { unmount } = renderWithTheme(
+      <Badge content={1} color="discovery">
+        <span>Icon</span>
+      </Badge>,
+    );
+    expect(document.querySelector('[data-ov-color="discovery"]')).toBeInTheDocument();
+    unmount();
+
+    renderWithTheme(
+      <Badge content={1} color="secondary">
+        <span>Icon</span>
+      </Badge>,
+    );
+    expect(document.querySelector('[data-ov-color="secondary"]')).toBeInTheDocument();
+  });
+
   it('overlap prop applies data attribute for circular', () => {
     renderWithTheme(
       <Badge content={1} overlap="circular">
diff --git a/packages/base-ui/src/components/badge/Badge.tsx b/packages/base-ui/src/components/badge/Badge.tsx
index 9f8b684..d24786f 100644
--- a/packages/base-ui/src/components/badge/Badge.tsx
+++ b/packages/base-ui/src/components/badge/Badge.tsx
@@ -4,8 +4,8 @@ import styles from './Badge.module.css';
 
 export type BadgeVariant = 'standard' | 'dot';
 export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-export type BadgeColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
-export type BadgeSize = 'sm' | 'md' | 'lg';
+export type BadgeColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'discovery' | 'secondary';
+export type BadgeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type BadgeOverlap = 'rectangular' | 'circular';
 
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color' | 'content'> {
diff --git a/packages/base-ui/src/components/banner/Banner.module.css b/packages/base-ui/src/components/banner/Banner.module.css
index 602d6f6..f649b43 100644
--- a/packages/base-ui/src/components/banner/Banner.module.css
+++ b/packages/base-ui/src/components/banner/Banner.module.css
@@ -22,6 +22,15 @@
   font-size: var(--_ov-body-font-size);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-padding-inline: var(--ov-size-banner-padding-inline-xs);
+  --_ov-padding-block: var(--ov-size-banner-padding-block-xs);
+  --_ov-gap: var(--ov-size-banner-gap-xs);
+  --_ov-icon-size: var(--ov-size-banner-icon-size-xs);
+  --_ov-title-font-size: var(--ov-size-banner-title-font-size-xs);
+  --_ov-body-font-size: var(--ov-size-banner-body-font-size-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-padding-inline: var(--ov-size-banner-padding-inline-sm);
   --_ov-padding-block: var(--ov-size-banner-padding-block-sm);
@@ -40,6 +49,15 @@
   --_ov-body-font-size: var(--ov-size-banner-body-font-size-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-padding-inline: var(--ov-size-banner-padding-inline-xl);
+  --_ov-padding-block: var(--ov-size-banner-padding-block-xl);
+  --_ov-gap: var(--ov-size-banner-gap-xl);
+  --_ov-icon-size: var(--ov-size-banner-icon-size-xl);
+  --_ov-title-font-size: var(--ov-size-banner-title-font-size-xl);
+  --_ov-body-font-size: var(--ov-size-banner-body-font-size-xl);
+}
+
 /* Color mappings */
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-bg-surface-raised);
@@ -83,6 +101,20 @@
   --_ov-accent-soft-bg: var(--ov-color-info-soft);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-discovery);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-secondary);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+}
+
 /* Variant mappings */
 .Root[data-ov-variant='solid'] {
   --_ov-bg: var(--_ov-accent-bg);
diff --git a/packages/base-ui/src/components/banner/Banner.stories.tsx b/packages/base-ui/src/components/banner/Banner.stories.tsx
index 569d487..0b6b95f 100644
--- a/packages/base-ui/src/components/banner/Banner.stories.tsx
+++ b/packages/base-ui/src/components/banner/Banner.stories.tsx
@@ -31,9 +31,9 @@ const meta = {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
     color: {
       control: 'select',
-      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'],
+      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'],
     },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <Banner {...args} style={{ maxWidth: 480 }}>
diff --git a/packages/base-ui/src/components/banner/Banner.test.tsx b/packages/base-ui/src/components/banner/Banner.test.tsx
index 12ee867..42d71b7 100644
--- a/packages/base-ui/src/components/banner/Banner.test.tsx
+++ b/packages/base-ui/src/components/banner/Banner.test.tsx
@@ -52,4 +52,44 @@ describe('Banner', () => {
     );
     expect(screen.getByRole('alert')).toHaveAttribute('data-ov-color', 'info');
   });
+
+  it('applies xs and xl size data attributes', () => {
+    const { rerender } = renderWithTheme(
+      <Banner size="xs">
+        <Banner.Content>
+          <Banner.Title>Title</Banner.Title>
+        </Banner.Content>
+      </Banner>,
+    );
+    expect(screen.getByRole('alert')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <Banner size="xl">
+        <Banner.Content>
+          <Banner.Title>Title</Banner.Title>
+        </Banner.Content>
+      </Banner>,
+    );
+    expect(screen.getByRole('alert')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(
+      <Banner color="discovery">
+        <Banner.Content>
+          <Banner.Title>Discovery</Banner.Title>
+        </Banner.Content>
+      </Banner>,
+    );
+    expect(screen.getByRole('alert')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <Banner color="secondary">
+        <Banner.Content>
+          <Banner.Title>Secondary</Banner.Title>
+        </Banner.Content>
+      </Banner>,
+    );
+    expect(screen.getByRole('alert')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/basic-list/BasicList.stories.tsx b/packages/base-ui/src/components/basic-list/BasicList.stories.tsx
index 9192f7a..c37e7a4 100644
--- a/packages/base-ui/src/components/basic-list/BasicList.stories.tsx
+++ b/packages/base-ui/src/components/basic-list/BasicList.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta = {
   argTypes: {
     size: {
       control: 'inline-radio',
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Controls the overall size of list items (font size, icon size, spacing).',
       table: { defaultValue: { summary: 'md' } },
     },
diff --git a/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx b/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx
index 87b6235..5334d50 100644
--- a/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx
+++ b/packages/base-ui/src/components/breadcrumbs/Breadcrumbs.stories.tsx
@@ -20,7 +20,7 @@ const meta = {
     maxItems: { control: 'number' },
     itemsBeforeCollapse: { control: 'number' },
     itemsAfterCollapse: { control: 'number' },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 } satisfies Meta<typeof Breadcrumbs>;
 
diff --git a/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx b/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx
index 9a1596f..fed1f44 100644
--- a/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx
+++ b/packages/base-ui/src/components/button-group/ButtonGroup.stories.tsx
@@ -14,8 +14,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
     attached: { control: 'boolean' },
   },
diff --git a/packages/base-ui/src/components/button/Button.module.css b/packages/base-ui/src/components/button/Button.module.css
index 37c53ea..456819f 100644
--- a/packages/base-ui/src/components/button/Button.module.css
+++ b/packages/base-ui/src/components/button/Button.module.css
@@ -53,6 +53,14 @@
   cursor: not-allowed;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-size-button-height-xs);
+  --_ov-padding-inline: var(--ov-size-button-padding-inline-xs);
+  --_ov-font-size: var(--ov-size-button-font-size-xs);
+  --_ov-content-gap: var(--ov-space-stack-xs);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-size-button-height-sm);
   --_ov-padding-inline: var(--ov-size-button-padding-inline-sm);
@@ -69,6 +77,14 @@
   --_ov-decorator-size: var(--ov-size-icon-button-icon-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-size-button-height-xl);
+  --_ov-padding-inline: var(--ov-size-button-padding-inline-xl);
+  --_ov-font-size: var(--ov-size-button-font-size-xl);
+  --_ov-content-gap: var(--ov-space-inline-control);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xl);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-bg-surface-raised);
   --_ov-accent-fg: var(--ov-color-fg-default);
@@ -114,6 +130,33 @@
   --_ov-accent-ghost-fg: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+  --_ov-accent-ghost-fg: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+  --_ov-accent-ghost-fg: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+  --_ov-accent-ghost-fg: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: var(--_ov-accent-bg);
   --_ov-fg: var(--_ov-accent-fg);
diff --git a/packages/base-ui/src/components/button/Button.stories.tsx b/packages/base-ui/src/components/button/Button.stories.tsx
index e26bea7..ecebb5f 100644
--- a/packages/base-ui/src/components/button/Button.stories.tsx
+++ b/packages/base-ui/src/components/button/Button.stories.tsx
@@ -68,8 +68,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     startIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS },
     endIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS },
     startDecorator: { control: false, table: { disable: true } },
diff --git a/packages/base-ui/src/components/button/Button.test.tsx b/packages/base-ui/src/components/button/Button.test.tsx
index 7a23ff1..9325c1b 100644
--- a/packages/base-ui/src/components/button/Button.test.tsx
+++ b/packages/base-ui/src/components/button/Button.test.tsx
@@ -36,4 +36,28 @@ describe('Button', () => {
     expect(button.querySelector('[data-ov-slot="start-decorator"]')).toBeInTheDocument();
     expect(button.querySelector('[data-ov-slot="end-decorator"]')).toBeInTheDocument();
   });
+
+  it('renders with xs size', () => {
+    renderWithTheme(<Button size="xs">Tiny</Button>);
+    const button = screen.getByRole('button', { name: 'Tiny' });
+    expect(button).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('renders with xl size', () => {
+    renderWithTheme(<Button size="xl">Hero</Button>);
+    const button = screen.getByRole('button', { name: 'Hero' });
+    expect(button).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders with discovery color', () => {
+    renderWithTheme(<Button color="discovery">New</Button>);
+    const button = screen.getByRole('button', { name: 'New' });
+    expect(button).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders with secondary color', () => {
+    renderWithTheme(<Button color="secondary">Meta</Button>);
+    const button = screen.getByRole('button', { name: 'Meta' });
+    expect(button).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/card/Card.module.css b/packages/base-ui/src/components/card/Card.module.css
index 1ffdf0b..c210afa 100644
--- a/packages/base-ui/src/components/card/Card.module.css
+++ b/packages/base-ui/src/components/card/Card.module.css
@@ -43,6 +43,23 @@
   overflow: visible;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-padding-inline: var(--ov-size-card-padding-inline-xs, var(--ov-size-card-padding-inline-sm));
+  --_ov-padding-block: var(--ov-size-card-padding-block-xs, var(--ov-size-card-padding-block-sm));
+  --_ov-gap: var(--ov-size-card-gap-xs, var(--ov-size-card-gap-sm));
+  --_ov-footer-padding-block: var(--ov-size-card-footer-padding-block-xs, var(--ov-size-card-footer-padding-block-sm));
+  --_ov-footer-gap: var(--ov-size-card-footer-gap-xs, var(--ov-size-card-footer-gap-sm));
+  --_ov-action-height: var(--ov-size-card-action-height-xs, var(--ov-size-card-action-height-sm));
+  --_ov-action-padding-inline: var(--ov-size-card-action-padding-inline-xs, var(--ov-size-card-action-padding-inline-sm));
+  --_ov-action-font-size: var(--ov-size-card-action-font-size-xs, var(--ov-size-card-action-font-size-sm));
+  --_ov-title-font-size: var(--ov-size-card-title-font-size-xs, var(--ov-size-card-title-font-size-sm));
+  --_ov-body-font-size: var(--ov-size-card-body-font-size-xs, var(--ov-size-card-body-font-size-sm));
+  --_ov-description-font-size: var(--ov-size-card-description-font-size-xs, var(--ov-size-card-description-font-size-sm));
+  --_ov-stat-font-size: var(--ov-size-card-stat-font-size-xs, var(--ov-size-card-stat-font-size-sm));
+  --_ov-eyebrow-font-size: var(--ov-size-card-eyebrow-font-size-xs, var(--ov-size-card-eyebrow-font-size-sm));
+  --_ov-indicator-dot: var(--ov-size-card-indicator-dot-xs, var(--ov-size-card-indicator-dot-sm));
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-padding-inline: var(--ov-size-card-padding-inline-sm);
   --_ov-padding-block: var(--ov-size-card-padding-block-sm);
@@ -77,6 +94,23 @@
   --_ov-indicator-dot: var(--ov-size-card-indicator-dot-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-padding-inline: var(--ov-size-card-padding-inline-xl, var(--ov-size-card-padding-inline-lg));
+  --_ov-padding-block: var(--ov-size-card-padding-block-xl, var(--ov-size-card-padding-block-lg));
+  --_ov-gap: var(--ov-size-card-gap-xl, var(--ov-size-card-gap-lg));
+  --_ov-footer-padding-block: var(--ov-size-card-footer-padding-block-xl, var(--ov-size-card-footer-padding-block-lg));
+  --_ov-footer-gap: var(--ov-size-card-footer-gap-xl, var(--ov-size-card-footer-gap-lg));
+  --_ov-action-height: var(--ov-size-card-action-height-xl, var(--ov-size-card-action-height-lg));
+  --_ov-action-padding-inline: var(--ov-size-card-action-padding-inline-xl, var(--ov-size-card-action-padding-inline-lg));
+  --_ov-action-font-size: var(--ov-size-card-action-font-size-xl, var(--ov-size-card-action-font-size-lg));
+  --_ov-title-font-size: var(--ov-size-card-title-font-size-xl, var(--ov-size-card-title-font-size-lg));
+  --_ov-body-font-size: var(--ov-size-card-body-font-size-xl, var(--ov-size-card-body-font-size-lg));
+  --_ov-description-font-size: var(--ov-size-card-description-font-size-xl, var(--ov-size-card-description-font-size-lg));
+  --_ov-stat-font-size: var(--ov-size-card-stat-font-size-xl, var(--ov-size-card-stat-font-size-lg));
+  --_ov-eyebrow-font-size: var(--ov-size-card-eyebrow-font-size-xl, var(--ov-size-card-eyebrow-font-size-lg));
+  --_ov-indicator-dot: var(--ov-size-card-indicator-dot-xl, var(--ov-size-card-indicator-dot-lg));
+}
+
 /* ─── Surface levels ─── */
 
 .Root[data-ov-surface='base'] {
@@ -142,6 +176,24 @@
   --_ov-accent-fg: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+  --_ov-accent-fg: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-accent-fg: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-accent-fg: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--_ov-surface-bg) 86%, var(--_ov-accent) 14%);
   --_ov-border: color-mix(
diff --git a/packages/base-ui/src/components/card/Card.stories.tsx b/packages/base-ui/src/components/card/Card.stories.tsx
index c04de77..ac3e4af 100644
--- a/packages/base-ui/src/components/card/Card.stories.tsx
+++ b/packages/base-ui/src/components/card/Card.stories.tsx
@@ -15,8 +15,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     elevation: { control: 'inline-radio', options: [0, 1, 2, 3] },
     surface: {
       control: 'select',
diff --git a/packages/base-ui/src/components/card/Card.test.tsx b/packages/base-ui/src/components/card/Card.test.tsx
index d8139f9..471617e 100644
--- a/packages/base-ui/src/components/card/Card.test.tsx
+++ b/packages/base-ui/src/components/card/Card.test.tsx
@@ -290,6 +290,46 @@ describe('Card', () => {
     expect(group).toHaveAttribute('data-ov-gap', 'lg');
   });
 
+  it('renders xs size', () => {
+    renderWithTheme(
+      <Card size="xs">
+        <Card.Body>Content</Card.Body>
+      </Card>,
+    );
+    const card = screen.getByText('Content').closest('section');
+    expect(card).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('renders xl size', () => {
+    renderWithTheme(
+      <Card size="xl">
+        <Card.Body>Content</Card.Body>
+      </Card>,
+    );
+    const card = screen.getByText('Content').closest('section');
+    expect(card).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery color', () => {
+    renderWithTheme(
+      <Card color="discovery">
+        <Card.Body>Content</Card.Body>
+      </Card>,
+    );
+    const card = screen.getByText('Content').closest('section');
+    expect(card).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders secondary color', () => {
+    renderWithTheme(
+      <Card color="secondary">
+        <Card.Body>Content</Card.Body>
+      </Card>,
+    );
+    const card = screen.getByText('Content').closest('section');
+    expect(card).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders Group with auto columns', () => {
     renderWithTheme(
       <Card.Group columns="auto" data-testid="group">
diff --git a/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx b/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx
index 6f5562d..f465cd4 100644
--- a/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx
+++ b/packages/base-ui/src/components/checkbox-group/CheckboxGroup.stories.tsx
@@ -14,8 +14,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     orientation: { control: 'inline-radio', options: ['vertical', 'horizontal'] },
   },
   render: (args) => (
diff --git a/packages/base-ui/src/components/checkbox/Checkbox.module.css b/packages/base-ui/src/components/checkbox/Checkbox.module.css
index 56d3e08..3d14ab6 100644
--- a/packages/base-ui/src/components/checkbox/Checkbox.module.css
+++ b/packages/base-ui/src/components/checkbox/Checkbox.module.css
@@ -54,6 +54,12 @@
   column-gap: 0;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-size: var(--ov-size-choice-control-xs);
+  --_ov-indicator-size: var(--ov-size-choice-indicator-xs);
+  --_ov-gap: var(--ov-size-choice-gap-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-size: var(--ov-size-choice-control-sm);
   --_ov-indicator-size: var(--ov-size-choice-indicator-sm);
@@ -66,6 +72,12 @@
   --_ov-gap: var(--ov-size-choice-gap-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-control-size: var(--ov-size-choice-control-xl);
+  --_ov-indicator-size: var(--ov-size-choice-indicator-xl);
+  --_ov-gap: var(--ov-size-choice-gap-xl);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-brand-500);
   --_ov-accent-fg: var(--ov-color-fg-inverse);
@@ -110,6 +122,33 @@
   --_ov-focus-border: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+  --_ov-focus-border: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+  --_ov-focus-border: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+  --_ov-focus-border: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-control-bg-checked: var(--_ov-accent-bg);
   --_ov-control-border-checked: color-mix(in srgb, var(--_ov-accent-bg) 84%, black 16%);
@@ -318,12 +357,20 @@
   line-height: 1.4;
 }
 
+.Root[data-ov-size='xs'] .Label {
+  font-size: var(--ov-font-size-caption);
+}
+
 .Root[data-ov-size='sm'] .Label {
   font-size: var(--ov-font-size-caption);
 }
 
 .Root[data-ov-size='lg'] .Label {
-  font-size: 1rem; /* restores original 16px — body token resolves to 14px which removes the size progression */
+  font-size: var(--ov-size-button-font-size-lg);
+}
+
+.Root[data-ov-size='xl'] .Label {
+  font-size: var(--ov-size-button-font-size-lg);
 }
 
 .Item {
diff --git a/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx b/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx
index 04987bd..0537a74 100644
--- a/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx
+++ b/packages/base-ui/src/components/checkbox/Checkbox.stories.tsx
@@ -21,8 +21,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     defaultChecked: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
     labelPosition: { control: 'inline-radio', options: ['start', 'end'] },
diff --git a/packages/base-ui/src/components/checkbox/Checkbox.test.tsx b/packages/base-ui/src/components/checkbox/Checkbox.test.tsx
index 7066f2d..c582a48 100644
--- a/packages/base-ui/src/components/checkbox/Checkbox.test.tsx
+++ b/packages/base-ui/src/components/checkbox/Checkbox.test.tsx
@@ -72,4 +72,38 @@ describe('Checkbox', () => {
     expect(checkbox).toHaveAttribute('data-ov-label-position', 'start');
     expect(checkbox).toHaveAttribute('data-ov-layout', 'spread');
   });
+
+  it('applies xs size attribute', () => {
+    renderWithTheme(<Checkbox.Item size="xs">Tiny option</Checkbox.Item>);
+    const checkbox = screen.getByRole('checkbox', { name: 'Tiny option' });
+    expect(checkbox).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size attribute', () => {
+    renderWithTheme(<Checkbox.Item size="xl">Large option</Checkbox.Item>);
+    const checkbox = screen.getByRole('checkbox', { name: 'Large option' });
+    expect(checkbox).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color attribute', () => {
+    renderWithTheme(
+      <Checkbox.Item color="discovery" defaultChecked>
+        Discovery feature
+      </Checkbox.Item>,
+    );
+    const checkbox = screen.getByRole('checkbox', { name: 'Discovery feature' });
+    expect(checkbox).toHaveAttribute('data-ov-color', 'discovery');
+    expect(checkbox).toHaveAttribute('data-checked');
+  });
+
+  it('applies secondary color attribute', () => {
+    renderWithTheme(
+      <Checkbox.Item color="secondary" defaultChecked>
+        Secondary option
+      </Checkbox.Item>,
+    );
+    const checkbox = screen.getByRole('checkbox', { name: 'Secondary option' });
+    expect(checkbox).toHaveAttribute('data-ov-color', 'secondary');
+    expect(checkbox).toHaveAttribute('data-checked');
+  });
 });
diff --git a/packages/base-ui/src/components/chip/Chip.module.css b/packages/base-ui/src/components/chip/Chip.module.css
index 2dc4003..540ac1b 100644
--- a/packages/base-ui/src/components/chip/Chip.module.css
+++ b/packages/base-ui/src/components/chip/Chip.module.css
@@ -74,6 +74,16 @@
   padding-inline-end: var(--_ov-decorator-inset);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-height: var(--ov-size-chip-height-xs);
+  --_ov-padding-inline: var(--ov-size-chip-padding-inline-xs);
+  --_ov-font-size: var(--ov-size-chip-font-size-xs);
+  --_ov-gap: var(--ov-size-chip-gap-xs);
+  --_ov-icon-size: var(--ov-size-chip-icon-size-xs);
+  --_ov-radius: var(--ov-size-chip-radius-xs);
+  --_ov-decorator-inset: 3px;
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-height: var(--ov-size-chip-height-sm);
   --_ov-padding-inline: var(--ov-size-chip-padding-inline-sm);
@@ -94,6 +104,16 @@
   --_ov-decorator-inset: 6px; /* half of 12px text-side padding */
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-height: var(--ov-size-chip-height-xl);
+  --_ov-padding-inline: var(--ov-size-chip-padding-inline-xl);
+  --_ov-font-size: var(--ov-size-chip-font-size-xl);
+  --_ov-gap: var(--ov-size-chip-gap-xl);
+  --_ov-icon-size: var(--ov-size-chip-icon-size-xl);
+  --_ov-radius: var(--ov-size-chip-radius-xl);
+  --_ov-decorator-inset: 8px;
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-bg-surface-raised);
   --_ov-accent-fg: var(--ov-color-fg-default);
@@ -139,6 +159,33 @@
   --_ov-accent-ghost-fg: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+  --_ov-accent-ghost-fg: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+  --_ov-accent-ghost-fg: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+  --_ov-accent-ghost-fg: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: var(--_ov-accent-bg);
   --_ov-fg: var(--_ov-accent-fg);
diff --git a/packages/base-ui/src/components/chip/Chip.stories.tsx b/packages/base-ui/src/components/chip/Chip.stories.tsx
index b5af310..de6eced 100644
--- a/packages/base-ui/src/components/chip/Chip.stories.tsx
+++ b/packages/base-ui/src/components/chip/Chip.stories.tsx
@@ -55,8 +55,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     mono: { control: 'boolean' },
     clickable: { control: 'boolean' },
     startIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS },
diff --git a/packages/base-ui/src/components/chip/Chip.test.tsx b/packages/base-ui/src/components/chip/Chip.test.tsx
index ace89e0..e37c28d 100644
--- a/packages/base-ui/src/components/chip/Chip.test.tsx
+++ b/packages/base-ui/src/components/chip/Chip.test.tsx
@@ -60,6 +60,30 @@ describe('Chip', () => {
     expect(chip).toHaveAttribute('data-ov-clickable', 'true');
   });
 
+  it('applies xs size data attribute', () => {
+    renderWithTheme(<Chip size="xs">Tiny</Chip>);
+    const chip = screen.getByText('Tiny').closest('[data-ov-size]');
+    expect(chip).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(<Chip size="xl">Large</Chip>);
+    const chip = screen.getByText('Large').closest('[data-ov-size]');
+    expect(chip).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color data attribute', () => {
+    renderWithTheme(<Chip color="discovery">Discover</Chip>);
+    const chip = screen.getByText('Discover').closest('[data-ov-color]');
+    expect(chip).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('applies secondary color data attribute', () => {
+    renderWithTheme(<Chip color="secondary">Secondary</Chip>);
+    const chip = screen.getByText('Secondary').closest('[data-ov-color]');
+    expect(chip).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   describe('Chip.Group', () => {
     it('renders children in a wrapping row by default', () => {
       renderWithTheme(
diff --git a/packages/base-ui/src/components/code-block/CodeBlock.module.css b/packages/base-ui/src/components/code-block/CodeBlock.module.css
index 82d4341..035b2a9 100644
--- a/packages/base-ui/src/components/code-block/CodeBlock.module.css
+++ b/packages/base-ui/src/components/code-block/CodeBlock.module.css
@@ -51,6 +51,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface-overlay) 84%, var(--_ov-selected-bg) 16%);
 }
diff --git a/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx b/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx
index 31c812f..e956dc3 100644
--- a/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx
+++ b/packages/base-ui/src/components/code-block/CodeBlock.stories.tsx
@@ -52,8 +52,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     lineNumbers: { control: 'boolean' },
     copyable: { control: 'boolean' },
     wrap: { control: 'boolean' },
diff --git a/packages/base-ui/src/components/code-block/CodeBlock.test.tsx b/packages/base-ui/src/components/code-block/CodeBlock.test.tsx
index bc6b4a6..a7ccd6c 100644
--- a/packages/base-ui/src/components/code-block/CodeBlock.test.tsx
+++ b/packages/base-ui/src/components/code-block/CodeBlock.test.tsx
@@ -47,4 +47,15 @@ describe('CodeBlock', () => {
     const root = screen.getByText('a-very-long-line').closest('[data-ov-wrap]');
     expect(root).toHaveAttribute('data-ov-wrap', 'true');
   });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(
+      <CodeBlock code="hello" color="discovery" />,
+    );
+    const root = screen.getByText('hello').closest('[data-ov-color]');
+    expect(root).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<CodeBlock code="hello" color="secondary" />);
+    expect(screen.getByText('hello').closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/combobox/Combobox.module.css b/packages/base-ui/src/components/combobox/Combobox.module.css
index 09d51dc..1c3f370 100644
--- a/packages/base-ui/src/components/combobox/Combobox.module.css
+++ b/packages/base-ui/src/components/combobox/Combobox.module.css
@@ -34,6 +34,11 @@
   box-shadow: 0 0 0 1px var(--ov-color-state-focus-ring);
 }
 
+.Input[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-font-size: var(--ov-font-size-caption);
+}
+
 .Input[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -43,6 +48,15 @@
   --_ov-control-height: var(--ov-control-height-lg);
 }
 
+.Input[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+}
+
+.Input[data-ov-color='neutral'] {
+  --_ov-focus: var(--ov-color-border-default);
+  --_ov-accent-soft: var(--ov-color-state-selected);
+}
+
 .Input[data-ov-color='brand'] {
   --_ov-focus: var(--ov-color-brand-400);
   --_ov-accent-soft: var(--ov-color-accent-soft);
@@ -63,6 +77,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Input[data-ov-color='info'] {
+  --_ov-focus: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Input[data-ov-color='discovery'] {
+  --_ov-focus: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Input[data-ov-color='secondary'] {
+  --_ov-focus: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Input[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent-soft) 14%);
 }
@@ -76,6 +105,11 @@
   --_ov-border: transparent;
 }
 
+.Input[data-ov-variant='soft'] {
+  --_ov-bg: var(--_ov-accent-soft);
+  --_ov-border: transparent;
+}
+
 .Positioner {
   z-index: var(--ov-z-popup, 120);
 }
@@ -106,6 +140,17 @@
   padding: var(--_ov-popup-padding);
 }
 
+.Popup[data-ov-size='xs'] {
+  --_ov-popup-padding: calc(var(--ov-size-list-item-gap) - 2px);
+  --_ov-list-gap: calc(var(--ov-size-list-item-gap) - 2px);
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xs);
+  --_ov-item-height: var(--ov-size-list-item-height-xs);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xs);
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-sm);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-sm);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-sm);
+}
+
 .Popup[data-ov-size='sm'] {
   --_ov-popup-padding: calc(var(--ov-size-list-item-gap) - 1px);
   --_ov-list-gap: calc(var(--ov-size-list-item-gap) - 1px);
@@ -128,6 +173,21 @@
   --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
 }
 
+.Popup[data-ov-size='xl'] {
+  --_ov-popup-padding: calc(var(--ov-size-list-item-gap) + 2px);
+  --_ov-list-gap: calc(var(--ov-size-list-item-gap) + 2px);
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xl);
+  --_ov-item-height: var(--ov-size-list-item-height-xl);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xl);
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-lg);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-lg);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
+}
+
+.Popup[data-ov-color='neutral'] {
+  --_ov-selected-bg: var(--ov-color-state-selected);
+}
+
 .Popup[data-ov-color='brand'] {
   --_ov-selected-bg: var(--ov-color-accent-soft);
 }
@@ -144,6 +204,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 .List {
   margin: 0;
   padding: 0;
@@ -268,6 +340,11 @@
     color var(--ov-duration-interactive) var(--ov-ease-standard);
 }
 
+.Trigger[data-ov-size='xs'],
+.Clear[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+}
+
 .Trigger[data-ov-size='sm'],
 .Clear[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
@@ -278,6 +355,16 @@
   --_ov-control-height: var(--ov-control-height-lg);
 }
 
+.Trigger[data-ov-size='xl'],
+.Clear[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+}
+
+.Trigger[data-ov-color='neutral'],
+.Clear[data-ov-color='neutral'] {
+  --_ov-fg: var(--ov-color-fg-muted);
+}
+
 .Trigger[data-ov-color='brand'],
 .Clear[data-ov-color='brand'] {
   --_ov-fg: var(--ov-color-brand-400);
@@ -298,6 +385,21 @@
   --_ov-fg: var(--ov-color-danger);
 }
 
+.Trigger[data-ov-color='info'],
+.Clear[data-ov-color='info'] {
+  --_ov-fg: var(--ov-color-info);
+}
+
+.Trigger[data-ov-color='discovery'],
+.Clear[data-ov-color='discovery'] {
+  --_ov-fg: var(--ov-color-discovery);
+}
+
+.Trigger[data-ov-color='secondary'],
+.Clear[data-ov-color='secondary'] {
+  --_ov-fg: var(--ov-color-secondary);
+}
+
 .Trigger[data-ov-variant='solid'],
 .Clear[data-ov-variant='solid'] {
   --_ov-bg: var(--ov-color-state-selected);
@@ -315,6 +417,12 @@
   --_ov-border: transparent;
 }
 
+.Trigger[data-ov-variant='soft'],
+.Clear[data-ov-variant='soft'] {
+  --_ov-bg: var(--ov-color-state-selected);
+  --_ov-border: transparent;
+}
+
 .Trigger:focus-visible,
 .Clear:focus-visible,
 .ChipRemove:focus-visible {
diff --git a/packages/base-ui/src/components/combobox/Combobox.stories.tsx b/packages/base-ui/src/components/combobox/Combobox.stories.tsx
index 2328865..b0ee666 100644
--- a/packages/base-ui/src/components/combobox/Combobox.stories.tsx
+++ b/packages/base-ui/src/components/combobox/Combobox.stories.tsx
@@ -88,8 +88,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   parameters: {
     controls: {
diff --git a/packages/base-ui/src/components/combobox/Combobox.test.tsx b/packages/base-ui/src/components/combobox/Combobox.test.tsx
index 50e99c8..fb828cb 100644
--- a/packages/base-ui/src/components/combobox/Combobox.test.tsx
+++ b/packages/base-ui/src/components/combobox/Combobox.test.tsx
@@ -49,4 +49,124 @@ describe('Combobox', () => {
 
     expect(screen.getByText('Local Runtime')).toBeInTheDocument();
   });
+
+  it('applies xs size data attribute to input', () => {
+    renderWithTheme(
+      <Combobox.Root
+        defaultOpen
+        size="xs"
+        itemToStringLabel={(item: Runtime) => item.label}
+        itemToStringValue={(item: Runtime) => item.id}
+        items={runtimes}
+      >
+        <Combobox.Input placeholder="Select runtime xs" />
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                {(runtime: Runtime) => (
+                  <Combobox.Item key={runtime.id} value={runtime}>
+                    {runtime.label}
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Select runtime xs');
+    expect(input).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute to input', () => {
+    renderWithTheme(
+      <Combobox.Root
+        defaultOpen
+        size="xl"
+        itemToStringLabel={(item: Runtime) => item.label}
+        itemToStringValue={(item: Runtime) => item.id}
+        items={runtimes}
+      >
+        <Combobox.Input placeholder="Select runtime xl" />
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                {(runtime: Runtime) => (
+                  <Combobox.Item key={runtime.id} value={runtime}>
+                    {runtime.label}
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Select runtime xl');
+    expect(input).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color data attribute to input', () => {
+    renderWithTheme(
+      <Combobox.Root
+        defaultOpen
+        color="discovery"
+        itemToStringLabel={(item: Runtime) => item.label}
+        itemToStringValue={(item: Runtime) => item.id}
+        items={runtimes}
+      >
+        <Combobox.Input placeholder="Select runtime discovery" />
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                {(runtime: Runtime) => (
+                  <Combobox.Item key={runtime.id} value={runtime}>
+                    {runtime.label}
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Select runtime discovery');
+    expect(input).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('applies secondary color data attribute to input', () => {
+    renderWithTheme(
+      <Combobox.Root
+        defaultOpen
+        color="secondary"
+        itemToStringLabel={(item: Runtime) => item.label}
+        itemToStringValue={(item: Runtime) => item.id}
+        items={runtimes}
+      >
+        <Combobox.Input placeholder="Select runtime secondary" />
+        <Combobox.Portal>
+          <Combobox.Positioner>
+            <Combobox.Popup>
+              <Combobox.List>
+                {(runtime: Runtime) => (
+                  <Combobox.Item key={runtime.id} value={runtime}>
+                    {runtime.label}
+                  </Combobox.Item>
+                )}
+              </Combobox.List>
+            </Combobox.Popup>
+          </Combobox.Positioner>
+        </Combobox.Portal>
+      </Combobox.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('Select runtime secondary');
+    expect(input).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx b/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx
index 44f03b6..9e9dd0a 100644
--- a/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx
+++ b/packages/base-ui/src/components/confirm-button/ConfirmButton.stories.tsx
@@ -21,11 +21,11 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     confirmColor: {
       control: 'select',
-      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'],
+      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'],
     },
     confirmTimeout: { control: { type: 'number', min: 500, max: 10000, step: 500 } },
     onConfirm: { action: 'onConfirm' },
diff --git a/packages/base-ui/src/components/context-menu/ContextMenu.module.css b/packages/base-ui/src/components/context-menu/ContextMenu.module.css
index 9ac0cd7..f5d9193 100644
--- a/packages/base-ui/src/components/context-menu/ContextMenu.module.css
+++ b/packages/base-ui/src/components/context-menu/ContextMenu.module.css
@@ -75,6 +75,35 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
+.Popup[data-ov-variant='solid'] {
+  --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface-overlay) 86%, var(--_ov-selected-bg) 14%);
+}
+
+.Popup[data-ov-variant='soft'] {
+  --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface-overlay) 90%, var(--_ov-selected-bg) 10%);
+}
+
+.Popup[data-ov-variant='outline'] {
+  --_ov-border: color-mix(in srgb, var(--ov-color-border-default) 50%, var(--_ov-selected-bg) 50%);
+}
+
+.Popup[data-ov-variant='ghost'] {
+  --_ov-bg: var(--ov-color-bg-surface-overlay);
+  --_ov-border: transparent;
+}
+
 .GroupLabel {
   padding-inline: var(--_ov-item-padding-inline);
   margin-block-start: var(--_ov-group-label-gap-top);
diff --git a/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx b/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx
index c34fd94..24762ba 100644
--- a/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx
+++ b/packages/base-ui/src/components/context-menu/ContextMenu.stories.tsx
@@ -13,8 +13,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <ContextMenu.Root {...args}>
diff --git a/packages/base-ui/src/components/context-menu/ContextMenu.test.tsx b/packages/base-ui/src/components/context-menu/ContextMenu.test.tsx
index 1411203..cb20822 100644
--- a/packages/base-ui/src/components/context-menu/ContextMenu.test.tsx
+++ b/packages/base-ui/src/components/context-menu/ContextMenu.test.tsx
@@ -4,6 +4,40 @@ import { renderWithTheme } from '../../test/render';
 import { ContextMenu } from './ContextMenu';
 
 describe('ContextMenu', () => {
+  it('renders discovery color on menu items', () => {
+    renderWithTheme(
+      <ContextMenu.Root color="discovery" size="md" variant="solid">
+        <ContextMenu.Trigger>Surface</ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Positioner>
+            <ContextMenu.Popup>
+              <ContextMenu.Item>Action</ContextMenu.Item>
+            </ContextMenu.Popup>
+          </ContextMenu.Positioner>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>,
+    );
+    fireEvent.contextMenu(screen.getByText('Surface'));
+    expect(screen.getByText('Action')).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders secondary color on menu items', () => {
+    renderWithTheme(
+      <ContextMenu.Root color="secondary" size="md" variant="soft">
+        <ContextMenu.Trigger>Surface</ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Positioner>
+            <ContextMenu.Popup>
+              <ContextMenu.Item>Action</ContextMenu.Item>
+            </ContextMenu.Popup>
+          </ContextMenu.Positioner>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>,
+    );
+    fireEvent.contextMenu(screen.getByText('Surface'));
+    expect(screen.getByText('Action')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('opens on right click and applies themed attributes to menu items', () => {
     renderWithTheme(
       <ContextMenu.Root color="brand" size="lg" variant="soft">
diff --git a/packages/base-ui/src/components/data-table/DataTable.Nested.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.Nested.stories.tsx
index e9a99c8..f525e36 100644
--- a/packages/base-ui/src/components/data-table/DataTable.Nested.stories.tsx
+++ b/packages/base-ui/src/components/data-table/DataTable.Nested.stories.tsx
@@ -350,7 +350,7 @@ const podColumns: ColumnDef<Pod, unknown>[] = [
     enableResizing: false,
     meta: { align: 'center' },
     cell: () => (
-      <IconButton dense variant="ghost" color="neutral" size="sm" aria-label="Pod actions">
+      <IconButton variant="ghost" color="neutral" size="sm" aria-label="Pod actions">
         <LuEllipsisVertical />
       </IconButton>
     ),
diff --git a/packages/base-ui/src/components/data-table/DataTable.Pinning.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.Pinning.stories.tsx
index 2040430..9d54b77 100644
--- a/packages/base-ui/src/components/data-table/DataTable.Pinning.stories.tsx
+++ b/packages/base-ui/src/components/data-table/DataTable.Pinning.stories.tsx
@@ -67,7 +67,7 @@ const actionsColumn: ColumnDef<Pod, unknown> = {
   id: 'actions',
   header: '',
   cell: () => (
-    <IconButton dense variant="ghost" color="neutral" size="sm" aria-label="Row actions">
+    <IconButton variant="ghost" color="neutral" size="sm" aria-label="Row actions">
       <LuEllipsisVertical />
     </IconButton>
   ),
diff --git a/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx
index d58cad0..8a7a8a2 100644
--- a/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx
+++ b/packages/base-ui/src/components/data-table/DataTable.Selection.stories.tsx
@@ -72,8 +72,8 @@ const meta: Meta<SelectionStoryArgs> = {
   tags: ['autodocs'],
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 };
 
diff --git a/packages/base-ui/src/components/data-table/DataTable.Virtualized.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.Virtualized.stories.tsx
index 3b73149..bb1e3dc 100644
--- a/packages/base-ui/src/components/data-table/DataTable.Virtualized.stories.tsx
+++ b/packages/base-ui/src/components/data-table/DataTable.Virtualized.stories.tsx
@@ -84,7 +84,7 @@ const actionsColumn: ColumnDef<LogEntry, unknown> = {
   id: 'actions',
   header: '',
   cell: () => (
-    <IconButton dense variant="ghost" color="neutral" size="sm" aria-label="Row actions">
+    <IconButton variant="ghost" color="neutral" size="sm" aria-label="Row actions">
       <LuEllipsisVertical />
     </IconButton>
   ),
diff --git a/packages/base-ui/src/components/data-table/DataTable.module.css b/packages/base-ui/src/components/data-table/DataTable.module.css
index f2a778e..ad6b922 100644
--- a/packages/base-ui/src/components/data-table/DataTable.module.css
+++ b/packages/base-ui/src/components/data-table/DataTable.module.css
@@ -52,6 +52,14 @@
 
 /* --- Size variants --- */
 
+.Root[data-ov-size='xs'] {
+  --_ov-cell-padding-inline: var(--ov-size-table-cell-padding-inline-xs);
+  --_ov-cell-padding-block: var(--ov-size-table-cell-padding-block-xs);
+  --_ov-cell-font-size: var(--ov-size-table-cell-font-size-xs);
+  --_ov-header-font-size: var(--ov-size-table-header-font-size-xs);
+  --_ov-row-height: var(--ov-size-table-row-height-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-cell-padding-inline: var(--ov-size-table-cell-padding-inline-sm);
   --_ov-cell-padding-block: var(--ov-size-table-cell-padding-block-sm);
@@ -68,6 +76,14 @@
   --_ov-row-height: var(--ov-size-table-row-height-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-cell-padding-inline: var(--ov-size-table-cell-padding-inline-xl);
+  --_ov-cell-padding-block: var(--ov-size-table-cell-padding-block-xl);
+  --_ov-cell-font-size: var(--ov-size-table-cell-font-size-xl);
+  --_ov-header-font-size: var(--ov-size-table-header-font-size-xl);
+  --_ov-row-height: var(--ov-size-table-row-height-xl);
+}
+
 /* --- Color variants --- */
 
 .Root[data-ov-color='neutral'] {
@@ -95,6 +111,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 /* --- Visual variants --- */
 
 .Root[data-ov-variant='solid'] {
diff --git a/packages/base-ui/src/components/data-table/DataTable.stories.tsx b/packages/base-ui/src/components/data-table/DataTable.stories.tsx
index a1648cd..f2b6ce1 100644
--- a/packages/base-ui/src/components/data-table/DataTable.stories.tsx
+++ b/packages/base-ui/src/components/data-table/DataTable.stories.tsx
@@ -56,8 +56,8 @@ const meta: Meta = {
   tags: ['autodocs'],
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 };
 
diff --git a/packages/base-ui/src/components/data-table/DataTable.test.tsx b/packages/base-ui/src/components/data-table/DataTable.test.tsx
index 44181bb..c5f8820 100644
--- a/packages/base-ui/src/components/data-table/DataTable.test.tsx
+++ b/packages/base-ui/src/components/data-table/DataTable.test.tsx
@@ -27,8 +27,8 @@ const columns: ColumnDef<Person, unknown>[] = [
 
 function TestTable(props: {
   variant?: 'solid' | 'soft' | 'outline' | 'ghost';
-  color?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
-  size?: 'sm' | 'md' | 'lg';
+  color?: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'discovery' | 'secondary';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   hoverable?: boolean;
   stickyHeader?: boolean;
   striped?: boolean;
@@ -66,6 +66,26 @@ describe('DataTable', () => {
     expect(root).toHaveAttribute('data-ov-size', 'sm');
   });
 
+  it('applies xs size data attribute', () => {
+    renderWithTheme(<TestTable size="xs" />);
+    expect(screen.getByTestId('dt-root')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(<TestTable size="xl" />);
+    expect(screen.getByTestId('dt-root')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color data attribute', () => {
+    renderWithTheme(<TestTable color="discovery" />);
+    expect(screen.getByTestId('dt-root')).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('applies secondary color data attribute', () => {
+    renderWithTheme(<TestTable color="secondary" />);
+    expect(screen.getByTestId('dt-root')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('supports hoverable, stickyHeader, and striped flags', () => {
     renderWithTheme(<TestTable hoverable stickyHeader striped />);
     const root = screen.getByTestId('dt-root');
diff --git a/packages/base-ui/src/components/data-table/DataTableColumnVisibility.tsx b/packages/base-ui/src/components/data-table/DataTableColumnVisibility.tsx
index 07e12a5..a67b487 100644
--- a/packages/base-ui/src/components/data-table/DataTableColumnVisibility.tsx
+++ b/packages/base-ui/src/components/data-table/DataTableColumnVisibility.tsx
@@ -21,7 +21,6 @@ export const DataTableColumnVisibility = forwardRef<HTMLDivElement, DataTableCol
           <Popover.Trigger
             render={
               <IconButton
-                dense
                 variant="ghost"
                 color="neutral"
                 size="sm"
diff --git a/packages/base-ui/src/components/data-table/DataTablePagination.tsx b/packages/base-ui/src/components/data-table/DataTablePagination.tsx
index a7c0a7b..ac976c9 100644
--- a/packages/base-ui/src/components/data-table/DataTablePagination.tsx
+++ b/packages/base-ui/src/components/data-table/DataTablePagination.tsx
@@ -30,7 +30,6 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
         </div>
         <div className={styles.PaginationControls}>
           <IconButton
-            dense
             variant="ghost"
             color="neutral"
             size="sm"
@@ -41,7 +40,6 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             <LuChevronsLeft />
           </IconButton>
           <IconButton
-            dense
             variant="ghost"
             color="neutral"
             size="sm"
@@ -52,7 +50,6 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             <LuChevronLeft />
           </IconButton>
           <IconButton
-            dense
             variant="ghost"
             color="neutral"
             size="sm"
@@ -63,7 +60,6 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             <LuChevronRight />
           </IconButton>
           <IconButton
-            dense
             variant="ghost"
             color="neutral"
             size="sm"
diff --git a/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx b/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx
index d0d91cc..a033b5f 100644
--- a/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx
+++ b/packages/base-ui/src/components/description-list/DescriptionList.stories.tsx
@@ -13,7 +13,7 @@ const meta = {
   },
   argTypes: {
     layout: { control: 'inline-radio', options: ['horizontal', 'vertical', 'grid'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     columns: { control: 'inline-radio', options: [1, 2, 3] },
   },
 } satisfies Meta<DescriptionListProps>;
diff --git a/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css b/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css
index 1cf5589..4677bd1 100644
--- a/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css
+++ b/packages/base-ui/src/components/editor-tabs/EditorTabs.module.css
@@ -142,10 +142,25 @@
   --_ov-tab-active-border: var(--ov-color-info);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-tab-active-border: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-tab-active-border: var(--ov-color-secondary);
+}
+
 /* ---------------------------------------------------------------------------
    Size overrides
    --------------------------------------------------------------------------- */
 
+.Root[data-ov-size='xs'] {
+  --_ov-tab-height: 22px;
+  --_ov-tab-font-size: var(--ov-font-size-caption);
+  --_ov-tab-padding-x: 6px;
+  --_ov-tab-padding-trailing: 3px;
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-tab-height: 28px;
   --_ov-tab-font-size: var(--ov-font-size-caption); /* 0.6875rem (11px) original; caption (12px) is closest semantic token */
@@ -158,6 +173,11 @@
   --_ov-tab-padding-x: 14px;
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-tab-height: 48px;
+  --_ov-tab-padding-x: 18px;
+}
+
 .Viewport {
   display: flex;
   flex: 1 1 0%;
@@ -230,7 +250,7 @@
 }
 
 .Tab[data-active] {
-  background: var(--_ov-tab-active-bg);
+  background: var(--ov-color-bg-surface-raised);
   color: var(--_ov-tab-active-fg);
   border-bottom-color: var(--_ov-tab-active-border);
 }
diff --git a/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx b/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx
index 5a35290..59ac0f2 100644
--- a/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx
+++ b/packages/base-ui/src/components/editor-tabs/EditorTabs.stories.tsx
@@ -46,12 +46,12 @@ const meta: Meta<typeof EditorTabs> = {
     },
     color: {
       control: 'select',
-      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'],
+      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'],
       description: 'Active indicator color',
     },
     size: {
       control: 'select',
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Tab size',
     },
     activeId: { control: 'text', description: 'Currently active tab ID (controlled)' },
diff --git a/packages/base-ui/src/components/editor-tabs/EditorTabs.test.tsx b/packages/base-ui/src/components/editor-tabs/EditorTabs.test.tsx
index a318be9..01de3fe 100644
--- a/packages/base-ui/src/components/editor-tabs/EditorTabs.test.tsx
+++ b/packages/base-ui/src/components/editor-tabs/EditorTabs.test.tsx
@@ -249,6 +249,24 @@ describe('EditorTabs', () => {
     expect(root).toHaveAttribute('data-ov-variant', 'pill');
   });
 
+  it('applies xs and xl size data attributes', () => {
+    const tabs: TabDescriptor[] = [{ id: '1', title: 'Tab 1' }];
+    const { rerender } = renderWithTheme(<EditorTabs tabs={tabs} size="xs" />);
+    expect(screen.getByRole('tablist')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<EditorTabs tabs={tabs} size="xl" />);
+    expect(screen.getByRole('tablist')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const tabs: TabDescriptor[] = [{ id: '1', title: 'Tab 1' }];
+    const { rerender } = renderWithTheme(<EditorTabs tabs={tabs} color="discovery" />);
+    expect(screen.getByRole('tablist')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<EditorTabs tabs={tabs} color="secondary" />);
+    expect(screen.getByRole('tablist')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('detachable tab wires onDetachCommit through without crashing', () => {
     // Full pointer drag simulation is not feasible in jsdom (dnd-kit requires
     // setPointerCapture, getBoundingClientRect, etc.). The useTabDetach hook
diff --git a/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx b/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx
index 1062cc1..fd321df 100644
--- a/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx
+++ b/packages/base-ui/src/components/empty-state/EmptyState.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     size: 'md',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     title: { control: 'text' },
     description: { control: 'text' },
   },
diff --git a/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx b/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx
index 4e520e7..271205c 100644
--- a/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx
+++ b/packages/base-ui/src/components/filter-bar/FilterBar.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
     size: 'md',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 } satisfies Meta<typeof FilterBar>;
 
diff --git a/packages/base-ui/src/components/filter-bar/FilterBar.tsx b/packages/base-ui/src/components/filter-bar/FilterBar.tsx
index 96d9cc7..016edf6 100644
--- a/packages/base-ui/src/components/filter-bar/FilterBar.tsx
+++ b/packages/base-ui/src/components/filter-bar/FilterBar.tsx
@@ -85,7 +85,6 @@ const FilterBarChip = forwardRef<HTMLElement, FilterBarChipProps>(
             <IconButton
               variant="ghost"
               size={size}
-              dense
               aria-label="Remove filter"
               onClick={handleRemoveClick}
             >
@@ -121,7 +120,6 @@ const FilterBarAdd = forwardRef<HTMLButtonElement, FilterBarAddProps>(
         ref={ref as never}
         variant="ghost"
         size={size}
-        dense
         aria-label="Add filter"
         {...props}
       >
@@ -151,7 +149,6 @@ const FilterBarClear = forwardRef<HTMLButtonElement, FilterBarClearProps>(
         ref={ref as never}
         variant="ghost"
         size={size}
-        dense
         aria-label={typeof children === 'string' ? children : 'Clear all'}
         {...props}
       >
diff --git a/packages/base-ui/src/components/find-bar/FindBar.tsx b/packages/base-ui/src/components/find-bar/FindBar.tsx
index 15517b4..e6dba36 100644
--- a/packages/base-ui/src/components/find-bar/FindBar.tsx
+++ b/packages/base-ui/src/components/find-bar/FindBar.tsx
@@ -246,7 +246,6 @@ export const FindBar = forwardRef<HTMLDivElement, FindBarProps>(function FindBar
             <IconButton
               variant="ghost"
               size="sm"
-              dense
               onClick={onReplace}
               disabled={!onReplace}
               aria-label="Replace"
@@ -257,7 +256,6 @@ export const FindBar = forwardRef<HTMLDivElement, FindBarProps>(function FindBar
             <IconButton
               variant="ghost"
               size="sm"
-              dense
               onClick={onReplaceAll}
               disabled={!onReplaceAll}
               aria-label="Replace all"
diff --git a/packages/base-ui/src/components/form-field/FormField.stories.tsx b/packages/base-ui/src/components/form-field/FormField.stories.tsx
index 6764605..4dc14fc 100644
--- a/packages/base-ui/src/components/form-field/FormField.stories.tsx
+++ b/packages/base-ui/src/components/form-field/FormField.stories.tsx
@@ -25,7 +25,7 @@ const meta = {
     required: false,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     required: { control: 'boolean' },
     description: { control: 'text' },
     error: { control: 'text' },
diff --git a/packages/base-ui/src/components/icon-button/IconButton.module.css b/packages/base-ui/src/components/icon-button/IconButton.module.css
index ce89200..0fca131 100644
--- a/packages/base-ui/src/components/icon-button/IconButton.module.css
+++ b/packages/base-ui/src/components/icon-button/IconButton.module.css
@@ -4,9 +4,14 @@
   inline-size: var(--_ov-control-height);
   block-size: var(--_ov-control-height);
   min-inline-size: var(--_ov-control-height);
+  min-width: var(--_ov-control-height);
   padding: 0;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-icon-size: var(--ov-size-icon-button-icon-sm);
 }
@@ -15,29 +20,8 @@
   --_ov-icon-size: var(--ov-size-icon-button-icon-lg);
 }
 
-.Root[data-ov-dense='true'] {
-  --_ov-icon-pad: 2px;
-  --_ov-control-height: calc(var(--_ov-icon-size) + (var(--_ov-icon-pad) * 2));
-
-  inline-size: var(--_ov-control-height);
-  block-size: var(--_ov-control-height);
-  min-inline-size: var(--_ov-control-height);
-  min-block-size: var(--_ov-control-height);
-  padding: 0;
-  border-radius: calc(var(--ov-radius-control) - 3px);
-  line-height: 1;
-}
-
-.Root[data-ov-dense='true'][data-ov-size='sm'] {
-  --_ov-icon-pad: 2px;
-}
-
-.Root[data-ov-dense='true'][data-ov-size='md'] {
-  --_ov-icon-pad: 2px;
-}
-
-.Root[data-ov-dense='true'][data-ov-size='lg'] {
-  --_ov-icon-pad: 3px;
+.Root[data-ov-size='xl'] {
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xl);
 }
 
 .Root :where(svg) {
diff --git a/packages/base-ui/src/components/icon-button/IconButton.stories.tsx b/packages/base-ui/src/components/icon-button/IconButton.stories.tsx
index ea170bf..b463cf4 100644
--- a/packages/base-ui/src/components/icon-button/IconButton.stories.tsx
+++ b/packages/base-ui/src/components/icon-button/IconButton.stories.tsx
@@ -10,7 +10,6 @@ const meta = {
     variant: 'soft',
     color: 'neutral',
     size: 'md',
-    dense: false,
     children: (
       <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden>
         <circle cx="7" cy="7" r="4.5" />
@@ -20,9 +19,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
-    dense: { control: 'boolean' },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 } satisfies Meta<typeof IconButton>;
 
diff --git a/packages/base-ui/src/components/icon-button/IconButton.test.tsx b/packages/base-ui/src/components/icon-button/IconButton.test.tsx
index 891c6cb..0ae9a9b 100644
--- a/packages/base-ui/src/components/icon-button/IconButton.test.tsx
+++ b/packages/base-ui/src/components/icon-button/IconButton.test.tsx
@@ -3,19 +3,39 @@ import { describe, expect, it } from 'vitest';
 import { renderWithTheme } from '../../test/render';
 import { IconButton } from './IconButton';
 
+const TestIcon = () => (
+  <svg aria-hidden viewBox="0 0 16 16"><path d="M1 1h14v14H1z" /></svg>
+);
+
 describe('IconButton', () => {
-  it('renders icon-only button with style attributes', () => {
+  it('renders with style attributes', () => {
     renderWithTheme(
       <IconButton aria-label="Search" size="lg" variant="outline" color="brand">
-        <svg aria-hidden viewBox="0 0 16 16">
-          <path d="M1 1h14v14H1z" />
-        </svg>
+        <TestIcon />
       </IconButton>,
     );
-
     const button = screen.getByRole('button', { name: 'Search' });
     expect(button).toHaveAttribute('data-ov-size', 'lg');
     expect(button).toHaveAttribute('data-ov-variant', 'outline');
     expect(button).toHaveAttribute('data-ov-color', 'brand');
   });
+
+  it('renders with xs size', () => {
+    renderWithTheme(
+      <IconButton aria-label="Tiny" size="xs"><TestIcon /></IconButton>,
+    );
+    expect(screen.getByRole('button', { name: 'Tiny' })).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('renders with xl size', () => {
+    renderWithTheme(
+      <IconButton aria-label="Big" size="xl"><TestIcon /></IconButton>,
+    );
+    expect(screen.getByRole('button', { name: 'Big' })).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('does not accept dense prop', () => {
+    // @ts-expect-error dense prop was removed
+    renderWithTheme(<IconButton aria-label="X" dense><TestIcon /></IconButton>);
+  });
 });
diff --git a/packages/base-ui/src/components/icon-button/IconButton.tsx b/packages/base-ui/src/components/icon-button/IconButton.tsx
index 499da4d..d7098df 100644
--- a/packages/base-ui/src/components/icon-button/IconButton.tsx
+++ b/packages/base-ui/src/components/icon-button/IconButton.tsx
@@ -5,18 +5,16 @@ import styles from './IconButton.module.css';
 
 export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
   children: ReactNode;
-  dense?: boolean;
 }
 
 export const IconButton = forwardRef<HTMLElement, IconButtonProps>(function IconButton(
-  { className, dense = false, ...props },
+  { className, ...props },
   ref,
 ) {
   return (
     <Button
       ref={ref}
       className={withBaseClassName(styles.Root, className)}
-      data-ov-dense={dense ? 'true' : undefined}
       {...props}
     />
   );
diff --git a/packages/base-ui/src/components/input/Input.module.css b/packages/base-ui/src/components/input/Input.module.css
index 893e5dd..73005c8 100644
--- a/packages/base-ui/src/components/input/Input.module.css
+++ b/packages/base-ui/src/components/input/Input.module.css
@@ -17,6 +17,14 @@
   font-family: var(--ov-font-sans);
 }
 
+:is(.Root, .ControlShell)[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-font-size: var(--ov-size-button-font-size-xs);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) - 4px);
+  --_ov-gap: calc(var(--ov-space-stack-sm) - 4px);
+  --_ov-icon-size: var(--ov-size-icon-button-icon-sm);
+}
+
 :is(.Root, .ControlShell)[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -32,6 +40,14 @@
   --_ov-icon-size: var(--ov-size-icon-button-icon-lg);
 }
 
+:is(.Root, .ControlShell)[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+  --_ov-font-size: var(--ov-size-button-font-size-xl);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) + 4px);
+  --_ov-gap: calc(var(--ov-space-stack-md) + 2px);
+  --_ov-icon-size: var(--ov-size-icon-button-icon-lg);
+}
+
 :is(.Root, .ControlShell)[data-ov-color='neutral'] {
   --_ov-accent: var(--ov-color-border-default);
   --_ov-accent-soft: var(--ov-color-state-selected);
@@ -61,6 +77,24 @@
   --_ov-focus: var(--ov-color-danger);
 }
 
+:is(.Root, .ControlShell)[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+  --_ov-focus: var(--ov-color-info);
+}
+
+:is(.Root, .ControlShell)[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-focus: var(--ov-color-discovery);
+}
+
+:is(.Root, .ControlShell)[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-focus: var(--ov-color-secondary);
+}
+
 :is(.Root, .ControlShell)[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent) 14%);
   --_ov-border: color-mix(in srgb, var(--_ov-accent) 68%, var(--ov-color-border-default) 32%);
diff --git a/packages/base-ui/src/components/input/Input.stories.tsx b/packages/base-ui/src/components/input/Input.stories.tsx
index 712098d..3c97d97 100644
--- a/packages/base-ui/src/components/input/Input.stories.tsx
+++ b/packages/base-ui/src/components/input/Input.stories.tsx
@@ -21,8 +21,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     mono: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
diff --git a/packages/base-ui/src/components/input/Input.test.tsx b/packages/base-ui/src/components/input/Input.test.tsx
index 720815c..d494bab 100644
--- a/packages/base-ui/src/components/input/Input.test.tsx
+++ b/packages/base-ui/src/components/input/Input.test.tsx
@@ -57,4 +57,48 @@ describe('Input', () => {
     const shell = screen.getByPlaceholderText('Required').closest('[data-ov-variant]');
     expect(shell).toBeInTheDocument();
   });
+
+  it('renders with xs size', () => {
+    renderWithTheme(
+      <Input.Root size="xs">
+        <Input.Control placeholder="xs-input" />
+      </Input.Root>,
+    );
+
+    const shell = screen.getByPlaceholderText('xs-input').closest('[data-ov-size]');
+    expect(shell).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('renders with xl size', () => {
+    renderWithTheme(
+      <Input.Root size="xl">
+        <Input.Control placeholder="xl-input" />
+      </Input.Root>,
+    );
+
+    const shell = screen.getByPlaceholderText('xl-input').closest('[data-ov-size]');
+    expect(shell).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders with discovery color', () => {
+    renderWithTheme(
+      <Input.Root color="discovery">
+        <Input.Control placeholder="discovery-input" />
+      </Input.Root>,
+    );
+
+    const shell = screen.getByPlaceholderText('discovery-input').closest('[data-ov-color]');
+    expect(shell).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders with secondary color', () => {
+    renderWithTheme(
+      <Input.Root color="secondary">
+        <Input.Control placeholder="secondary-input" />
+      </Input.Root>,
+    );
+
+    const shell = screen.getByPlaceholderText('secondary-input').closest('[data-ov-color]');
+    expect(shell).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/list/List.module.css b/packages/base-ui/src/components/list/List.module.css
index bb03c7f..b677c20 100644
--- a/packages/base-ui/src/components/list/List.module.css
+++ b/packages/base-ui/src/components/list/List.module.css
@@ -78,6 +78,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 /* ---------------------------------------------------------------------------
  * Viewport
  * --------------------------------------------------------------------------- */
diff --git a/packages/base-ui/src/components/list/List.stories.tsx b/packages/base-ui/src/components/list/List.stories.tsx
index 8ca3781..fb135fe 100644
--- a/packages/base-ui/src/components/list/List.stories.tsx
+++ b/packages/base-ui/src/components/list/List.stories.tsx
@@ -27,7 +27,7 @@ const meta: Meta<typeof List> = {
   argTypes: {
     size: {
       control: 'inline-radio',
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Controls the overall size of list items (font size, icon size, spacing).',
       table: { defaultValue: { summary: 'md' } },
     },
diff --git a/packages/base-ui/src/components/list/List.test.tsx b/packages/base-ui/src/components/list/List.test.tsx
index a37114f..682d6b2 100644
--- a/packages/base-ui/src/components/list/List.test.tsx
+++ b/packages/base-ui/src/components/list/List.test.tsx
@@ -39,6 +39,14 @@ describe('List', () => {
     expect(root).toHaveAttribute('data-ov-density', 'default');
   });
 
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(<TestList color="discovery" />);
+    expect(screen.getByTestId('list-root')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<TestList color="secondary" />);
+    expect(screen.getByTestId('list-root')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders with custom data attributes', () => {
     renderWithTheme(<TestList variant="outline" color="brand" size="sm" density="compact" />);
     const root = screen.getByTestId('list-root');
diff --git a/packages/base-ui/src/components/menu/Menu.module.css b/packages/base-ui/src/components/menu/Menu.module.css
index 96c418a..4a75424 100644
--- a/packages/base-ui/src/components/menu/Menu.module.css
+++ b/packages/base-ui/src/components/menu/Menu.module.css
@@ -74,6 +74,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 .GroupLabel {
   padding-inline: var(--_ov-item-padding-inline);
   margin-block-start: var(--_ov-group-label-gap-top);
@@ -232,6 +244,29 @@
   --_ov-fg: var(--ov-color-fg-inverse);
 }
 
+.Trigger[data-ov-color='info'] {
+  --_ov-bg: var(--ov-color-info);
+  --_ov-border: var(--ov-color-info);
+  --_ov-fg: var(--ov-color-fg-inverse);
+}
+
+.Trigger[data-ov-color='discovery'] {
+  --_ov-bg: var(--ov-color-discovery);
+  --_ov-border: var(--ov-color-discovery);
+  --_ov-fg: var(--ov-color-fg-inverse);
+}
+
+.Trigger[data-ov-color='secondary'] {
+  --_ov-bg: var(--ov-color-secondary);
+  --_ov-border: var(--ov-color-secondary);
+  --_ov-fg: var(--ov-color-fg-inverse);
+}
+
+.Trigger[data-ov-variant='solid'] {
+  --_ov-bg: var(--ov-color-bg-surface-raised);
+  --_ov-border: var(--ov-color-border-default);
+}
+
 .Trigger[data-ov-variant='soft'] {
   --_ov-bg: var(--ov-color-state-selected);
   --_ov-border: transparent;
diff --git a/packages/base-ui/src/components/menu/Menu.stories.tsx b/packages/base-ui/src/components/menu/Menu.stories.tsx
index 2201806..84a85b8 100644
--- a/packages/base-ui/src/components/menu/Menu.stories.tsx
+++ b/packages/base-ui/src/components/menu/Menu.stories.tsx
@@ -20,8 +20,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   parameters: {
     docs: {
diff --git a/packages/base-ui/src/components/menu/Menu.test.tsx b/packages/base-ui/src/components/menu/Menu.test.tsx
index 1b75fa0..69ecc6a 100644
--- a/packages/base-ui/src/components/menu/Menu.test.tsx
+++ b/packages/base-ui/src/components/menu/Menu.test.tsx
@@ -4,6 +4,38 @@ import { renderWithTheme } from '../../test/render';
 import { Menu } from './Menu';
 
 describe('Menu', () => {
+  it('renders discovery and secondary colors on menu items', () => {
+    renderWithTheme(
+      <Menu.Root defaultOpen color="discovery">
+        <Menu.Trigger>Open</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Positioner>
+            <Menu.Popup>
+              <Menu.Item>Item A</Menu.Item>
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>,
+    );
+    expect(screen.getByText('Item A')).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders secondary color on menu items', () => {
+    renderWithTheme(
+      <Menu.Root defaultOpen color="secondary">
+        <Menu.Trigger>Open</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Positioner>
+            <Menu.Popup>
+              <Menu.Item>Item B</Menu.Item>
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>,
+    );
+    expect(screen.getByText('Item B')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders themed popup and items', () => {
     renderWithTheme(
       <Menu.Root defaultOpen color="brand" size="sm" variant="outline">
diff --git a/packages/base-ui/src/components/meter/Meter.module.css b/packages/base-ui/src/components/meter/Meter.module.css
index 8a4e62b..381eaad 100644
--- a/packages/base-ui/src/components/meter/Meter.module.css
+++ b/packages/base-ui/src/components/meter/Meter.module.css
@@ -1,14 +1,17 @@
 .Root {
   --_ov-meter-height: 0.5rem;
   --_ov-meter-fill: var(--ov-color-brand-500);
-  --_space-stack-xs: 4px; /* --ov-space-stack-xs; no semantic token for 4px yet */
 
   display: flex;
   flex-direction: column;
-  gap: var(--_space-stack-xs);
+  gap: var(--ov-space-stack-xs);
   width: 100%;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-meter-height: 0.125rem;
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-meter-height: 0.25rem;
 }
@@ -21,6 +24,10 @@
   --_ov-meter-height: 0.75rem;
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-meter-height: 1rem;
+}
+
 /* Zone-based colors (auto-derived from value/thresholds) */
 .Root[data-ov-zone='medium'] {
   --_ov-meter-fill: var(--ov-color-success);
@@ -59,6 +66,14 @@
   --_ov-meter-fill: var(--ov-color-info);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-meter-fill: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-meter-fill: var(--ov-color-secondary);
+}
+
 .Label {
   font-size: var(--ov-font-size-caption);
   color: var(--ov-color-fg-muted);
diff --git a/packages/base-ui/src/components/meter/Meter.stories.tsx b/packages/base-ui/src/components/meter/Meter.stories.tsx
index b4f9ff8..b24650b 100644
--- a/packages/base-ui/src/components/meter/Meter.stories.tsx
+++ b/packages/base-ui/src/components/meter/Meter.stories.tsx
@@ -14,8 +14,8 @@ const meta = {
   },
   argTypes: {
     value: { control: { type: 'range', min: 0, max: 100 } },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
-    color: { control: 'select', options: [undefined, 'neutral', 'brand', 'success', 'warning', 'danger', 'info'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    color: { control: 'select', options: [undefined, 'neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
   },
 } satisfies Meta<typeof Meter>;
 
diff --git a/packages/base-ui/src/components/meter/Meter.test.tsx b/packages/base-ui/src/components/meter/Meter.test.tsx
index 73fe634..1887104 100644
--- a/packages/base-ui/src/components/meter/Meter.test.tsx
+++ b/packages/base-ui/src/components/meter/Meter.test.tsx
@@ -77,4 +77,22 @@ describe('Meter', () => {
     renderWithTheme(<Meter value={50} className="custom" aria-label="CPU" />);
     expect(screen.getByRole('meter')).toHaveClass('custom');
   });
+
+  it('applies xs size data attribute', () => {
+    renderWithTheme(<Meter value={50} size="xs" aria-label="CPU" />);
+    expect(screen.getByRole('meter')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(<Meter value={50} size="xl" aria-label="CPU" />);
+    expect(screen.getByRole('meter')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(<Meter value={50} color="discovery" aria-label="CPU" />);
+    expect(screen.getByRole('meter')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<Meter value={50} color="secondary" aria-label="CPU" />);
+    expect(screen.getByRole('meter')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/multi-select/MultiSelect.module.css b/packages/base-ui/src/components/multi-select/MultiSelect.module.css
index 1cbb8c7..3e4e930 100644
--- a/packages/base-ui/src/components/multi-select/MultiSelect.module.css
+++ b/packages/base-ui/src/components/multi-select/MultiSelect.module.css
@@ -42,6 +42,11 @@
   cursor: text;
 }
 
+.Control[data-ov-size='xs'] {
+  --_ov-control-min-height: var(--ov-control-height-xs);
+  --_ov-control-padding-block: 1px;
+}
+
 .Control[data-ov-size='sm'] {
   --_ov-control-min-height: var(--ov-control-height-sm);
   --_ov-control-padding-block: 2px;
@@ -52,6 +57,16 @@
   --_ov-control-padding-block: 4px;
 }
 
+.Control[data-ov-size='xl'] {
+  --_ov-control-min-height: var(--ov-control-height-xl);
+  --_ov-control-padding-block: 5px;
+}
+
+.Control[data-ov-color='neutral'] {
+  --_ov-focus: var(--ov-color-border-default);
+  --_ov-accent-soft: var(--ov-color-state-selected);
+}
+
 .Control[data-ov-color='brand'] {
   --_ov-focus: var(--ov-color-brand-400);
   --_ov-accent-soft: var(--ov-color-accent-soft);
@@ -72,6 +87,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Control[data-ov-color='info'] {
+  --_ov-focus: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Control[data-ov-color='discovery'] {
+  --_ov-focus: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Control[data-ov-color='secondary'] {
+  --_ov-focus: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Control[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent-soft) 14%);
 }
@@ -85,6 +115,11 @@
   --_ov-border: transparent;
 }
 
+.Control[data-ov-variant='soft'] {
+  --_ov-bg: var(--_ov-accent-soft);
+  --_ov-border: transparent;
+}
+
 .Control:focus-within,
 .Control:has(.Trigger[data-popup-open]) {
   border-color: var(--_ov-focus);
@@ -175,6 +210,12 @@
   outline: none;
 }
 
+.Popup[data-ov-size='xs'] {
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xs);
+  --_ov-item-height: var(--ov-size-list-item-height-xs);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xs);
+}
+
 .Popup[data-ov-size='sm'] {
   --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-sm);
   --_ov-item-height: var(--ov-size-list-item-height-sm);
@@ -187,6 +228,16 @@
   --_ov-decorator-size: var(--ov-size-icon-button-icon-lg);
 }
 
+.Popup[data-ov-size='xl'] {
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xl);
+  --_ov-item-height: var(--ov-size-list-item-height-xl);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xl);
+}
+
+.Popup[data-ov-color='neutral'] {
+  --_ov-selected-bg: var(--ov-color-state-selected);
+}
+
 .Popup[data-ov-color='brand'] {
   --_ov-selected-bg: var(--ov-color-accent-soft);
 }
@@ -203,6 +254,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 .SearchShell {
   display: flex;
   align-items: center;
diff --git a/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx b/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx
index 4d8874e..f27c55c 100644
--- a/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx
+++ b/packages/base-ui/src/components/multi-select/MultiSelect.stories.tsx
@@ -45,8 +45,8 @@ type MultiSelectStoryArgs = PrimitiveArgs & Pick<ObjectArgs, 'defaultIds'>;
 
 const sharedArgTypes = {
   variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-  color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-  size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+  color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+  size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   label: { control: 'text' },
   placeholder: { control: 'text' },
   searchPlaceholder: { control: 'text' },
diff --git a/packages/base-ui/src/components/multi-select/MultiSelect.test.tsx b/packages/base-ui/src/components/multi-select/MultiSelect.test.tsx
index 39491b4..c3753a8 100644
--- a/packages/base-ui/src/components/multi-select/MultiSelect.test.tsx
+++ b/packages/base-ui/src/components/multi-select/MultiSelect.test.tsx
@@ -78,6 +78,58 @@ describe('MultiSelect', () => {
     expect(screen.getByText('+1')).toBeInTheDocument();
   });
 
+  it('applies xs size data attribute to control', () => {
+    renderWithTheme(
+      <MultiSelect
+        items={['default', 'kube-public']}
+        size="xs"
+      />,
+    );
+
+    const control = document.querySelector('[data-ov-slot="control"]');
+    expect(control).not.toBeNull();
+    expect(control).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute to control', () => {
+    renderWithTheme(
+      <MultiSelect
+        items={['default', 'kube-public']}
+        size="xl"
+      />,
+    );
+
+    const control = document.querySelector('[data-ov-slot="control"]');
+    expect(control).not.toBeNull();
+    expect(control).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color data attribute to control', () => {
+    renderWithTheme(
+      <MultiSelect
+        items={['default', 'kube-public']}
+        color="discovery"
+      />,
+    );
+
+    const control = document.querySelector('[data-ov-slot="control"]');
+    expect(control).not.toBeNull();
+    expect(control).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('applies secondary color data attribute to control', () => {
+    renderWithTheme(
+      <MultiSelect
+        items={['default', 'kube-public']}
+        color="secondary"
+      />,
+    );
+
+    const control = document.querySelector('[data-ov-slot="control"]');
+    expect(control).not.toBeNull();
+    expect(control).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('clears all selected values from the clear action', async () => {
     const user = userEvent.setup();
 
diff --git a/packages/base-ui/src/components/multi-select/MultiSelect.tsx b/packages/base-ui/src/components/multi-select/MultiSelect.tsx
index b5928b8..43c0b1e 100644
--- a/packages/base-ui/src/components/multi-select/MultiSelect.tsx
+++ b/packages/base-ui/src/components/multi-select/MultiSelect.tsx
@@ -168,7 +168,6 @@ export function MultiSelect<Item = string>({
     (clearProps: any) => (
       <IconButton
         {...clearProps}
-        dense
         variant="ghost"
         color={color}
         size={size}
@@ -188,7 +187,6 @@ export function MultiSelect<Item = string>({
     (triggerProps: any) => (
       <IconButton
         {...triggerProps}
-        dense
         variant="ghost"
         color={color}
         size={size}
@@ -284,7 +282,6 @@ export function MultiSelect<Item = string>({
                                 render={(removeProps) => (
                                   <IconButton
                                     {...removeProps}
-                                    dense
                                     variant="ghost"
                                     color={color}
                                     size={size}
diff --git a/packages/base-ui/src/components/nav-list/NavList.stories.tsx b/packages/base-ui/src/components/nav-list/NavList.stories.tsx
index 77ae862..3ec197d 100644
--- a/packages/base-ui/src/components/nav-list/NavList.stories.tsx
+++ b/packages/base-ui/src/components/nav-list/NavList.stories.tsx
@@ -24,7 +24,7 @@ const meta: Meta = {
   argTypes: {
     size: {
       control: 'inline-radio',
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Controls the overall size of list items (font size, icon size, spacing).',
       table: { defaultValue: { summary: 'md' } },
     },
diff --git a/packages/base-ui/src/components/number-input/NumberInput.module.css b/packages/base-ui/src/components/number-input/NumberInput.module.css
index 9d06e37..19dbc5a 100644
--- a/packages/base-ui/src/components/number-input/NumberInput.module.css
+++ b/packages/base-ui/src/components/number-input/NumberInput.module.css
@@ -16,6 +16,14 @@
   font-family: var(--ov-font-sans);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs, var(--ov-control-height-sm));
+  --_ov-font-size: var(--ov-font-size-caption);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) - 4px);
+  --_ov-stepper-width: var(--ov-control-height-xs, var(--ov-control-height-sm));
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xs, var(--ov-size-icon-button-icon-sm));
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -31,6 +39,13 @@
   --_ov-icon-size: var(--ov-size-icon-button-icon-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl, var(--ov-control-height-lg));
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) + 4px);
+  --_ov-stepper-width: var(--ov-control-height-xl, var(--ov-control-height-lg));
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xl, var(--ov-size-icon-button-icon-lg));
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent: var(--ov-color-border-default);
   --_ov-accent-soft: var(--ov-color-state-selected);
@@ -60,6 +75,24 @@
   --_ov-focus: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+  --_ov-focus: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-focus: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-focus: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent) 14%);
   --_ov-border: color-mix(in srgb, var(--_ov-accent) 68%, var(--ov-color-border-default) 32%);
diff --git a/packages/base-ui/src/components/number-input/NumberInput.stories.tsx b/packages/base-ui/src/components/number-input/NumberInput.stories.tsx
index 6c6afb3..206d2ef 100644
--- a/packages/base-ui/src/components/number-input/NumberInput.stories.tsx
+++ b/packages/base-ui/src/components/number-input/NumberInput.stories.tsx
@@ -17,8 +17,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     disabled: { control: 'boolean' },
   },
   parameters: {
diff --git a/packages/base-ui/src/components/number-input/NumberInput.test.tsx b/packages/base-ui/src/components/number-input/NumberInput.test.tsx
index 753425d..8880a96 100644
--- a/packages/base-ui/src/components/number-input/NumberInput.test.tsx
+++ b/packages/base-ui/src/components/number-input/NumberInput.test.tsx
@@ -47,4 +47,53 @@ describe('NumberInput', () => {
     await user.click(screen.getByRole('button', { name: 'Decrease' }));
     expect(input).toHaveValue('2');
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(
+      <NumberInput.Root defaultValue={1} size="xs">
+        <NumberInput.Group>
+          <NumberInput.Decrement aria-label="Decrease" />
+          <NumberInput.Input aria-label="Value" />
+          <NumberInput.Increment aria-label="Increase" />
+        </NumberInput.Group>
+      </NumberInput.Root>,
+    );
+    const input = screen.getByRole('textbox', { name: 'Value' });
+    expect(input.closest('[data-ov-size]')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <NumberInput.Root defaultValue={1} size="xl">
+        <NumberInput.Group>
+          <NumberInput.Decrement aria-label="Decrease" />
+          <NumberInput.Input aria-label="Value" />
+          <NumberInput.Increment aria-label="Increase" />
+        </NumberInput.Group>
+      </NumberInput.Root>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Value' }).closest('[data-ov-size]')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(
+      <NumberInput.Root defaultValue={1} color="discovery">
+        <NumberInput.Group>
+          <NumberInput.Decrement aria-label="Decrease" />
+          <NumberInput.Input aria-label="Value" />
+          <NumberInput.Increment aria-label="Increase" />
+        </NumberInput.Group>
+      </NumberInput.Root>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Value' }).closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <NumberInput.Root defaultValue={1} color="secondary">
+        <NumberInput.Group>
+          <NumberInput.Decrement aria-label="Decrease" />
+          <NumberInput.Input aria-label="Value" />
+          <NumberInput.Increment aria-label="Increase" />
+        </NumberInput.Group>
+      </NumberInput.Root>,
+    );
+    expect(screen.getByRole('textbox', { name: 'Value' }).closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/pagination/Pagination.module.css b/packages/base-ui/src/components/pagination/Pagination.module.css
index 6ac07a4..cdd134a 100644
--- a/packages/base-ui/src/components/pagination/Pagination.module.css
+++ b/packages/base-ui/src/components/pagination/Pagination.module.css
@@ -2,8 +2,7 @@
   --_ov-item-height: var(--ov-size-button-height-sm);
   --_ov-item-min-width: var(--ov-size-button-height-sm);
   --_ov-font-size: var(--ov-size-button-font-size-sm);
-  /* TODO: replace 4px with var(--ov-space-stack-xs) when token is available */
-  --_ov-gap: 4px; /* local alias for xs gap; no --ov-space-stack-xs semantic token yet */
+  --_ov-gap: var(--ov-space-stack-xs);
 
   display: inline-flex;
   align-items: center;
@@ -12,16 +11,28 @@
 
 /* ── Size variants ─────────────────────────────────────────────── */
 
+.Root[data-ov-size='xs'] {
+  --_ov-item-height: var(--ov-size-button-height-xs);
+  --_ov-item-min-width: var(--ov-size-button-height-xs);
+  --_ov-font-size: var(--ov-font-size-caption);
+}
+
 .Root[data-ov-size='sm'] {
-  --_ov-item-height: 1.5rem;
-  --_ov-item-min-width: 1.5rem;
+  --_ov-item-height: var(--ov-size-button-height-sm);
+  --_ov-item-min-width: var(--ov-size-button-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
 }
 
 .Root[data-ov-size='lg'] {
-  --_ov-item-height: var(--ov-size-button-height-md);
-  --_ov-item-min-width: var(--ov-size-button-height-md);
-  --_ov-font-size: var(--ov-size-button-font-size-md);
+  --_ov-item-height: var(--ov-size-button-height-lg);
+  --_ov-item-min-width: var(--ov-size-button-height-lg);
+  --_ov-font-size: var(--ov-size-button-font-size-lg);
+}
+
+.Root[data-ov-size='xl'] {
+  --_ov-item-height: var(--ov-size-button-height-xl);
+  --_ov-item-min-width: var(--ov-size-button-height-xl);
+  --_ov-font-size: var(--ov-size-button-font-size-xl);
 }
 
 /* ── Page / nav button ─────────────────────────────────────────── */
diff --git a/packages/base-ui/src/components/pagination/Pagination.stories.tsx b/packages/base-ui/src/components/pagination/Pagination.stories.tsx
index 531c056..46692a0 100644
--- a/packages/base-ui/src/components/pagination/Pagination.stories.tsx
+++ b/packages/base-ui/src/components/pagination/Pagination.stories.tsx
@@ -82,7 +82,7 @@ const meta = {
     siblingCount: { control: { type: 'number', min: 0, max: 5 } },
     boundaryCount: { control: { type: 'number', min: 0, max: 5 } },
     showFirstLast: { control: 'boolean' },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     onChange: { action: 'onChange' },
   },
 } satisfies Meta<typeof Pagination>;
diff --git a/packages/base-ui/src/components/pagination/Pagination.test.tsx b/packages/base-ui/src/components/pagination/Pagination.test.tsx
index d0b02d6..500b512 100644
--- a/packages/base-ui/src/components/pagination/Pagination.test.tsx
+++ b/packages/base-ui/src/components/pagination/Pagination.test.tsx
@@ -124,6 +124,20 @@ describe('Pagination', () => {
     expect(nav).toHaveAttribute('data-ov-size', 'sm');
   });
 
+  it('applies xs size data attribute', () => {
+    const { container } = renderWithTheme(
+      <Pagination count={5} page={1} onChange={() => {}} size="xs" />,
+    );
+    expect(container.querySelector('nav')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    const { container } = renderWithTheme(
+      <Pagination count={5} page={1} onChange={() => {}} size="xl" />,
+    );
+    expect(container.querySelector('nav')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
   it('navigates to previous page on Prev click', () => {
     const onChange = vi.fn();
     renderWithTheme(<Pagination count={5} page={3} onChange={onChange} />);
diff --git a/packages/base-ui/src/components/popover/Popover.module.css b/packages/base-ui/src/components/popover/Popover.module.css
index 54defa5..7230b4d 100644
--- a/packages/base-ui/src/components/popover/Popover.module.css
+++ b/packages/base-ui/src/components/popover/Popover.module.css
@@ -165,6 +165,18 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Arrow {
   --_ov-bg: var(--ov-color-bg-surface);
   --_ov-border: var(--ov-color-border-default);
@@ -203,6 +215,18 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Arrow[data-ov-color='info'] {
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Arrow[data-ov-color='discovery'] {
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Arrow[data-ov-color='secondary'] {
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Arrow[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 84%, var(--_ov-accent-soft) 16%);
   --_ov-border: color-mix(
diff --git a/packages/base-ui/src/components/popover/Popover.stories.tsx b/packages/base-ui/src/components/popover/Popover.stories.tsx
index 40ff761..ba77076 100644
--- a/packages/base-ui/src/components/popover/Popover.stories.tsx
+++ b/packages/base-ui/src/components/popover/Popover.stories.tsx
@@ -13,8 +13,8 @@ const meta: Meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   parameters: {
     controls: {
diff --git a/packages/base-ui/src/components/popover/Popover.test.tsx b/packages/base-ui/src/components/popover/Popover.test.tsx
index d937f96..6cd0493 100644
--- a/packages/base-ui/src/components/popover/Popover.test.tsx
+++ b/packages/base-ui/src/components/popover/Popover.test.tsx
@@ -4,6 +4,40 @@ import { renderWithTheme } from '../../test/render';
 import { Popover } from './Popover';
 
 describe('Popover', () => {
+  it('renders discovery and secondary colors on popup', () => {
+    renderWithTheme(
+      <Popover.Root defaultOpen color="discovery">
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Positioner>
+            <Popover.Popup>
+              <Popover.Title>Title</Popover.Title>
+            </Popover.Popup>
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>,
+    );
+    const popup = screen.getByText('Title').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders secondary color on popup', () => {
+    renderWithTheme(
+      <Popover.Root defaultOpen color="secondary">
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Positioner>
+            <Popover.Popup>
+              <Popover.Title>Title</Popover.Title>
+            </Popover.Popup>
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>,
+    );
+    const popup = screen.getByText('Title').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders themed popup and close action when opened', () => {
     renderWithTheme(
       <Popover.Root defaultOpen color="brand" size="lg" variant="solid">
diff --git a/packages/base-ui/src/components/progress/Progress.module.css b/packages/base-ui/src/components/progress/Progress.module.css
index 73e47eb..2ae0045 100644
--- a/packages/base-ui/src/components/progress/Progress.module.css
+++ b/packages/base-ui/src/components/progress/Progress.module.css
@@ -12,6 +12,10 @@
   overflow: hidden;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-height: var(--ov-size-progress-height-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-height: var(--ov-size-progress-height-sm);
 }
@@ -20,6 +24,10 @@
   --_ov-height: var(--ov-size-progress-height-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-height: var(--ov-size-progress-height-xl);
+}
+
 /* Color: set the accent fill */
 .Root[data-ov-color='neutral'] {
   --_ov-accent: var(--ov-color-fg-muted);
@@ -45,6 +53,14 @@
   --_ov-accent: var(--ov-color-info);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+}
+
 /* Variant: solid — full-color bar on inset track */
 .Root[data-ov-variant='solid'] {
   --_ov-fill: var(--_ov-accent);
diff --git a/packages/base-ui/src/components/progress/Progress.stories.tsx b/packages/base-ui/src/components/progress/Progress.stories.tsx
index 87106a1..2b94640 100644
--- a/packages/base-ui/src/components/progress/Progress.stories.tsx
+++ b/packages/base-ui/src/components/progress/Progress.stories.tsx
@@ -16,9 +16,9 @@ const meta = {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
     color: {
       control: 'select',
-      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'],
+      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'],
     },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => <Progress {...args} style={{ width: 320 }} aria-label="Demo progress" />,
 } satisfies Meta<typeof Progress>;
diff --git a/packages/base-ui/src/components/progress/Progress.test.tsx b/packages/base-ui/src/components/progress/Progress.test.tsx
index 6148653..3c6e836 100644
--- a/packages/base-ui/src/components/progress/Progress.test.tsx
+++ b/packages/base-ui/src/components/progress/Progress.test.tsx
@@ -32,4 +32,22 @@ describe('Progress', () => {
     expect(el).toHaveAttribute('data-ov-color', 'success');
     expect(el).toHaveAttribute('data-ov-size', 'lg');
   });
+
+  it('applies xs size data attribute', () => {
+    renderWithTheme(<Progress value={50} size="xs" aria-label="xs" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(<Progress value={50} size="xl" aria-label="xl" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(<Progress value={50} color="discovery" aria-label="disc" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<Progress value={50} color="secondary" aria-label="sec" />);
+    expect(screen.getByRole('progressbar')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx b/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx
index a05ee5c..a76f6a4 100644
--- a/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx
+++ b/packages/base-ui/src/components/radio-group/RadioGroup.stories.tsx
@@ -14,8 +14,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     orientation: { control: 'inline-radio', options: ['vertical', 'horizontal'] },
   },
   render: (args) => (
diff --git a/packages/base-ui/src/components/radio/Radio.module.css b/packages/base-ui/src/components/radio/Radio.module.css
index 94627e5..37d627b 100644
--- a/packages/base-ui/src/components/radio/Radio.module.css
+++ b/packages/base-ui/src/components/radio/Radio.module.css
@@ -26,6 +26,12 @@
   user-select: none;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-size: var(--ov-size-choice-control-xs);
+  --_ov-indicator-size: var(--ov-size-choice-indicator-xs);
+  --_ov-gap: var(--ov-size-choice-gap-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-size: var(--ov-size-choice-control-sm);
   --_ov-indicator-size: var(--ov-size-choice-indicator-sm);
@@ -38,6 +44,12 @@
   --_ov-gap: var(--ov-size-choice-gap-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-control-size: var(--ov-size-choice-control-xl);
+  --_ov-indicator-size: var(--ov-size-choice-indicator-xl);
+  --_ov-gap: var(--ov-size-choice-gap-xl);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-brand-500);
   --_ov-accent-fg: var(--ov-color-fg-inverse);
@@ -82,6 +94,33 @@
   --_ov-focus-border: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+  --_ov-focus-border: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+  --_ov-focus-border: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+  --_ov-focus-border: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-control-bg-checked: var(--_ov-accent-bg);
   --_ov-control-border-checked: color-mix(in srgb, var(--_ov-accent-bg) 84%, black 16%);
@@ -198,12 +237,20 @@
   line-height: 1.4;
 }
 
+.Root[data-ov-size='xs'] .Label {
+  font-size: var(--ov-font-size-caption);
+}
+
 .Root[data-ov-size='sm'] .Label {
   font-size: var(--ov-font-size-caption);
 }
 
 .Root[data-ov-size='lg'] .Label {
-  font-size: 1rem; /* restores original 16px — body token resolves to 14px which removes the size progression */
+  font-size: var(--ov-size-button-font-size-lg);
+}
+
+.Root[data-ov-size='xl'] .Label {
+  font-size: var(--ov-size-button-font-size-lg);
 }
 
 .Item {
diff --git a/packages/base-ui/src/components/radio/Radio.stories.tsx b/packages/base-ui/src/components/radio/Radio.stories.tsx
index d75216e..ed45aa3 100644
--- a/packages/base-ui/src/components/radio/Radio.stories.tsx
+++ b/packages/base-ui/src/components/radio/Radio.stories.tsx
@@ -18,8 +18,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     disabled: { control: 'boolean' },
   },
   render: (args) => (
diff --git a/packages/base-ui/src/components/radio/Radio.test.tsx b/packages/base-ui/src/components/radio/Radio.test.tsx
index c31f1b3..24bdc53 100644
--- a/packages/base-ui/src/components/radio/Radio.test.tsx
+++ b/packages/base-ui/src/components/radio/Radio.test.tsx
@@ -32,4 +32,54 @@ describe('Radio', () => {
 
     expect(screen.getByTestId('dot')).toBeInTheDocument();
   });
+
+  it('applies xs size attribute', () => {
+    renderWithTheme(
+      <RadioGroup>
+        <Radio.Item value="a" size="xs">
+          Tiny option
+        </Radio.Item>
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole('radio', { name: 'Tiny option' });
+    expect(radio).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size attribute', () => {
+    renderWithTheme(
+      <RadioGroup>
+        <Radio.Item value="a" size="xl">
+          Large option
+        </Radio.Item>
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole('radio', { name: 'Large option' });
+    expect(radio).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color attribute', () => {
+    renderWithTheme(
+      <RadioGroup defaultValue="a">
+        <Radio.Item value="a" color="discovery">
+          Discovery feature
+        </Radio.Item>
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole('radio', { name: 'Discovery feature' });
+    expect(radio).toHaveAttribute('data-ov-color', 'discovery');
+    expect(radio).toHaveAttribute('data-checked');
+  });
+
+  it('applies secondary color attribute', () => {
+    renderWithTheme(
+      <RadioGroup defaultValue="a">
+        <Radio.Item value="a" color="secondary">
+          Secondary option
+        </Radio.Item>
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole('radio', { name: 'Secondary option' });
+    expect(radio).toHaveAttribute('data-ov-color', 'secondary');
+    expect(radio).toHaveAttribute('data-checked');
+  });
 });
diff --git a/packages/base-ui/src/components/row-list/RowList.stories.tsx b/packages/base-ui/src/components/row-list/RowList.stories.tsx
index a196b5d..0bb3476 100644
--- a/packages/base-ui/src/components/row-list/RowList.stories.tsx
+++ b/packages/base-ui/src/components/row-list/RowList.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta = {
   argTypes: {
     size: {
       control: 'inline-radio',
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Controls the overall size of list items.',
       table: { defaultValue: { summary: 'md' } },
     },
diff --git a/packages/base-ui/src/components/scroll-area/ScrollArea.module.css b/packages/base-ui/src/components/scroll-area/ScrollArea.module.css
index 6cb8cc4..b515518 100644
--- a/packages/base-ui/src/components/scroll-area/ScrollArea.module.css
+++ b/packages/base-ui/src/components/scroll-area/ScrollArea.module.css
@@ -9,6 +9,11 @@
   scrollbar-color: var(--_ov-thumb) var(--_ov-track);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-scrollbar-size: var(--ov-size-scrollarea-scrollbar-xs, var(--ov-size-scrollarea-scrollbar-sm));
+  scrollbar-width: thin;
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-scrollbar-size: var(--ov-size-scrollarea-scrollbar-sm);
   scrollbar-width: thin;
@@ -19,6 +24,11 @@
   scrollbar-width: auto;
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-scrollbar-size: var(--ov-size-scrollarea-scrollbar-xl, var(--ov-size-scrollarea-scrollbar-lg));
+  scrollbar-width: auto;
+}
+
 .Root[data-ov-orientation='vertical'] {
   overflow-y: auto;
   overflow-x: hidden;
diff --git a/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx b/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx
index 209d96a..1d52c09 100644
--- a/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx
+++ b/packages/base-ui/src/components/scroll-area/ScrollArea.stories.tsx
@@ -11,7 +11,7 @@ const meta = {
   },
   argTypes: {
     orientation: { control: 'inline-radio', options: ['vertical', 'horizontal', 'both'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <ScrollArea
diff --git a/packages/base-ui/src/components/scroll-area/ScrollArea.test.tsx b/packages/base-ui/src/components/scroll-area/ScrollArea.test.tsx
index be6b443..6b407bf 100644
--- a/packages/base-ui/src/components/scroll-area/ScrollArea.test.tsx
+++ b/packages/base-ui/src/components/scroll-area/ScrollArea.test.tsx
@@ -17,6 +17,16 @@ describe('ScrollArea', () => {
     expect(el).toHaveAttribute('tabindex', '0');
   });
 
+  it('accepts xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(
+      <ScrollArea size="xs" data-testid="scroll"><p>Content</p></ScrollArea>,
+    );
+    expect(screen.getByTestId('scroll')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<ScrollArea size="xl" data-testid="scroll"><p>Content</p></ScrollArea>);
+    expect(screen.getByTestId('scroll')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
   it('accepts custom orientation and size', () => {
     renderWithTheme(
       <ScrollArea orientation="both" size="sm" data-testid="scroll">
diff --git a/packages/base-ui/src/components/search-input/SearchInput.stories.tsx b/packages/base-ui/src/components/search-input/SearchInput.stories.tsx
index cb78b89..2cd7a6a 100644
--- a/packages/base-ui/src/components/search-input/SearchInput.stories.tsx
+++ b/packages/base-ui/src/components/search-input/SearchInput.stories.tsx
@@ -17,8 +17,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     clearable: { control: 'boolean' },
     disabled: { control: 'boolean' },
     startDecorator: { control: false, table: { disable: true } },
diff --git a/packages/base-ui/src/components/search-input/SearchInput.tsx b/packages/base-ui/src/components/search-input/SearchInput.tsx
index 8a45429..d7b6243 100644
--- a/packages/base-ui/src/components/search-input/SearchInput.tsx
+++ b/packages/base-ui/src/components/search-input/SearchInput.tsx
@@ -156,7 +156,6 @@ export const SearchInput = forwardRef<ElementRef<typeof Input.Control>, SearchIn
               {showClearButton ? (
                 <IconButton
                   className={styles.ClearButton}
-                  dense
                   variant="ghost"
                   color={resolvedColor ?? 'neutral'}
                   size={resolvedSize}
diff --git a/packages/base-ui/src/components/segmented-control/SegmentedControl.module.css b/packages/base-ui/src/components/segmented-control/SegmentedControl.module.css
index 89745ed..7d898a0 100644
--- a/packages/base-ui/src/components/segmented-control/SegmentedControl.module.css
+++ b/packages/base-ui/src/components/segmented-control/SegmentedControl.module.css
@@ -8,6 +8,11 @@
   background: var(--ov-color-bg-inset);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-sc-height: 1.25rem;
+  font-size: var(--ov-font-size-caption);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-sc-height: 1.5rem;
   font-size: var(--ov-font-size-caption);
@@ -23,6 +28,11 @@
   font-size: var(--ov-font-size-body);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-sc-height: 3rem;
+  font-size: var(--ov-font-size-body);
+}
+
 .Root[data-ov-disabled='true'] {
   opacity: 0.5;
   pointer-events: none;
diff --git a/packages/base-ui/src/components/segmented-control/SegmentedControl.stories.tsx b/packages/base-ui/src/components/segmented-control/SegmentedControl.stories.tsx
index f7c6ef0..38c94ce 100644
--- a/packages/base-ui/src/components/segmented-control/SegmentedControl.stories.tsx
+++ b/packages/base-ui/src/components/segmented-control/SegmentedControl.stories.tsx
@@ -15,7 +15,7 @@ const meta = {
     children: null,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     disabled: { control: 'boolean' },
   },
 } satisfies Meta<typeof SegmentedControl>;
diff --git a/packages/base-ui/src/components/segmented-control/SegmentedControl.test.tsx b/packages/base-ui/src/components/segmented-control/SegmentedControl.test.tsx
index 7560a4a..e689d60 100644
--- a/packages/base-ui/src/components/segmented-control/SegmentedControl.test.tsx
+++ b/packages/base-ui/src/components/segmented-control/SegmentedControl.test.tsx
@@ -142,4 +142,20 @@ describe('SegmentedControl', () => {
 
     expect(screen.getByRole('radiogroup')).toHaveClass('custom');
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(
+      <SegmentedControl size="xs" aria-label="View">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+      </SegmentedControl>,
+    );
+    expect(screen.getByRole('radiogroup')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <SegmentedControl size="xl" aria-label="View">
+        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
+      </SegmentedControl>,
+    );
+    expect(screen.getByRole('radiogroup')).toHaveAttribute('data-ov-size', 'xl');
+  });
 });
diff --git a/packages/base-ui/src/components/select/Select.module.css b/packages/base-ui/src/components/select/Select.module.css
index 7363fd5..a5554d2 100644
--- a/packages/base-ui/src/components/select/Select.module.css
+++ b/packages/base-ui/src/components/select/Select.module.css
@@ -44,6 +44,12 @@
   outline: none;
 }
 
+.Trigger[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-font-size: var(--ov-font-size-caption);
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xs);
+}
+
 .Trigger[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -55,6 +61,16 @@
   --_ov-icon-size: var(--ov-size-icon-button-icon-lg);
 }
 
+.Trigger[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+  --_ov-icon-size: var(--ov-size-icon-button-icon-xl);
+}
+
+.Trigger[data-ov-color='neutral'] {
+  --_ov-focus: var(--ov-color-border-default);
+  --_ov-accent-soft: var(--ov-color-state-selected);
+}
+
 .Trigger[data-ov-color='brand'] {
   --_ov-focus: var(--ov-color-brand-400);
   --_ov-accent-soft: var(--ov-color-accent-soft);
@@ -75,6 +91,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Trigger[data-ov-color='info'] {
+  --_ov-focus: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Trigger[data-ov-color='discovery'] {
+  --_ov-focus: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Trigger[data-ov-color='secondary'] {
+  --_ov-focus: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Trigger[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent-soft) 14%);
 }
@@ -88,6 +119,11 @@
   --_ov-border: transparent;
 }
 
+.Trigger[data-ov-variant='soft'] {
+  --_ov-bg: var(--_ov-accent-soft);
+  --_ov-border: transparent;
+}
+
 .Trigger[data-disabled] {
   opacity: var(--ov-opacity-disabled, 0.45);
   cursor: not-allowed;
@@ -177,6 +213,16 @@
   outline: none;
 }
 
+.Popup[data-ov-size='xs'] {
+  --_ov-popup-padding: 2px;
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xs);
+  --_ov-item-height: var(--ov-size-list-item-height-xs);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xs);
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-sm);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-sm);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-sm);
+}
+
 .Popup[data-ov-size='sm'] {
   --_ov-popup-padding: 3px;
   --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-sm);
@@ -197,6 +243,20 @@
   --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
 }
 
+.Popup[data-ov-size='xl'] {
+  --_ov-popup-padding: 6px;
+  --_ov-item-padding-inline: var(--ov-size-list-item-padding-inline-xl);
+  --_ov-item-height: var(--ov-size-list-item-height-xl);
+  --_ov-decorator-size: var(--ov-size-icon-button-icon-xl);
+  --_ov-group-label-font-size: var(--ov-size-list-group-label-font-size-lg);
+  --_ov-group-label-gap-top: var(--ov-size-list-group-label-gap-top-lg);
+  --_ov-group-label-gap-after: var(--ov-size-list-group-label-gap-after-lg);
+}
+
+.Popup[data-ov-color='neutral'] {
+  --_ov-selected-bg: var(--ov-color-state-selected);
+}
+
 .Popup[data-ov-color='brand'] {
   --_ov-selected-bg: var(--ov-color-accent-soft);
 }
@@ -213,6 +273,18 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='info'] {
+  --_ov-selected-bg: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Popup[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 .List {
   margin: 0;
   padding: 0;
diff --git a/packages/base-ui/src/components/select/Select.stories.tsx b/packages/base-ui/src/components/select/Select.stories.tsx
index 80f6d79..d12f610 100644
--- a/packages/base-ui/src/components/select/Select.stories.tsx
+++ b/packages/base-ui/src/components/select/Select.stories.tsx
@@ -88,8 +88,8 @@ type SelectStoryArgs = PrimitiveSingleArgs &
 
 const sharedArgTypes = {
   variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-  color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-  size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+  color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+  size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   selectionIndicator: { control: 'inline-radio', options: ['auto', 'always', 'never'] },
   label: { control: 'text' },
   placeholder: { control: 'text' },
diff --git a/packages/base-ui/src/components/select/Select.test.tsx b/packages/base-ui/src/components/select/Select.test.tsx
index e843272..1c32eb0 100644
--- a/packages/base-ui/src/components/select/Select.test.tsx
+++ b/packages/base-ui/src/components/select/Select.test.tsx
@@ -43,6 +43,126 @@ describe('Select', () => {
     expect(item).toHaveAttribute('data-ov-variant', 'outline');
   });
 
+  it('applies xs size data attributes to trigger and items', async () => {
+    await act(async () => {
+      renderWithTheme(
+        <Select.Root open size="xs">
+          <Select.Trigger data-testid="select-trigger-xs">
+            <Select.Value placeholder="Select runtime" />
+            <Select.Icon>v</Select.Icon>
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Positioner>
+              <Select.Popup>
+                <Select.List>
+                  <Select.Item value="local">
+                    <Select.ItemText>Local Runtime</Select.ItemText>
+                  </Select.Item>
+                </Select.List>
+              </Select.Popup>
+            </Select.Positioner>
+          </Select.Portal>
+        </Select.Root>,
+      );
+    });
+
+    const trigger = screen.getByTestId('select-trigger-xs');
+    expect(trigger).toHaveAttribute('data-ov-size', 'xs');
+
+    const item = await screen.findByRole('option', { name: 'Local Runtime' });
+    expect(item).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attributes to trigger and items', async () => {
+    await act(async () => {
+      renderWithTheme(
+        <Select.Root open size="xl">
+          <Select.Trigger data-testid="select-trigger-xl">
+            <Select.Value placeholder="Select runtime" />
+            <Select.Icon>v</Select.Icon>
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Positioner>
+              <Select.Popup>
+                <Select.List>
+                  <Select.Item value="local">
+                    <Select.ItemText>Local Runtime</Select.ItemText>
+                  </Select.Item>
+                </Select.List>
+              </Select.Popup>
+            </Select.Positioner>
+          </Select.Portal>
+        </Select.Root>,
+      );
+    });
+
+    const trigger = screen.getByTestId('select-trigger-xl');
+    expect(trigger).toHaveAttribute('data-ov-size', 'xl');
+
+    const item = await screen.findByRole('option', { name: 'Local Runtime' });
+    expect(item).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color data attributes to trigger and items', async () => {
+    await act(async () => {
+      renderWithTheme(
+        <Select.Root open color="discovery">
+          <Select.Trigger data-testid="select-trigger-discovery">
+            <Select.Value placeholder="Select runtime" />
+            <Select.Icon>v</Select.Icon>
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Positioner>
+              <Select.Popup>
+                <Select.List>
+                  <Select.Item value="local">
+                    <Select.ItemText>Local Runtime</Select.ItemText>
+                  </Select.Item>
+                </Select.List>
+              </Select.Popup>
+            </Select.Positioner>
+          </Select.Portal>
+        </Select.Root>,
+      );
+    });
+
+    const trigger = screen.getByTestId('select-trigger-discovery');
+    expect(trigger).toHaveAttribute('data-ov-color', 'discovery');
+
+    const item = await screen.findByRole('option', { name: 'Local Runtime' });
+    expect(item).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('applies secondary color data attributes to trigger and items', async () => {
+    await act(async () => {
+      renderWithTheme(
+        <Select.Root open color="secondary">
+          <Select.Trigger data-testid="select-trigger-secondary">
+            <Select.Value placeholder="Select runtime" />
+            <Select.Icon>v</Select.Icon>
+          </Select.Trigger>
+          <Select.Portal>
+            <Select.Positioner>
+              <Select.Popup>
+                <Select.List>
+                  <Select.Item value="local">
+                    <Select.ItemText>Local Runtime</Select.ItemText>
+                  </Select.Item>
+                </Select.List>
+              </Select.Popup>
+            </Select.Positioner>
+          </Select.Portal>
+        </Select.Root>,
+      );
+    });
+
+    const trigger = screen.getByTestId('select-trigger-secondary');
+    expect(trigger).toHaveAttribute('data-ov-color', 'secondary');
+
+    const item = await screen.findByRole('option', { name: 'Local Runtime' });
+    expect(item).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('does not render selection indicators by default in single-select mode', async () => {
     await act(async () => {
       renderWithTheme(
diff --git a/packages/base-ui/src/components/separator/Separator.module.css b/packages/base-ui/src/components/separator/Separator.module.css
index 2a16dc0..2976cbf 100644
--- a/packages/base-ui/src/components/separator/Separator.module.css
+++ b/packages/base-ui/src/components/separator/Separator.module.css
@@ -10,6 +10,12 @@
   flex-shrink: 0;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-separator-thickness: var(--ov-size-separator-thickness-xs, 1px);
+  --_ov-separator-inset: var(--ov-size-separator-inset-xs, 4px);
+  --_ov-separator-label-size: var(--ov-size-separator-label-font-size-xs, 0.625rem);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-separator-thickness: var(--ov-size-separator-thickness-sm, 1px);
   --_ov-separator-inset: var(--ov-size-separator-inset-sm, 8px);
@@ -22,6 +28,12 @@
   --_ov-separator-label-size: var(--ov-size-separator-label-font-size-lg, 0.8125rem);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-separator-thickness: var(--ov-size-separator-thickness-xl, 4px);
+  --_ov-separator-inset: var(--ov-size-separator-inset-xl, 20px);
+  --_ov-separator-label-size: var(--ov-size-separator-label-font-size-xl, 0.875rem);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-separator-color: color-mix(in srgb, var(--ov-color-fg-muted) 62%, transparent 38%);
 }
@@ -58,6 +70,30 @@
   );
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-separator-color: color-mix(
+    in srgb,
+    var(--ov-color-info) 66%,
+    var(--ov-color-border-default) 34%
+  );
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-separator-color: color-mix(
+    in srgb,
+    var(--ov-color-discovery) 66%,
+    var(--ov-color-border-default) 34%
+  );
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-separator-color: color-mix(
+    in srgb,
+    var(--ov-color-secondary) 66%,
+    var(--ov-color-border-default) 34%
+  );
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-separator-color: color-mix(
     in srgb,
diff --git a/packages/base-ui/src/components/separator/Separator.stories.tsx b/packages/base-ui/src/components/separator/Separator.stories.tsx
index d8d53c0..76f8ceb 100644
--- a/packages/base-ui/src/components/separator/Separator.stories.tsx
+++ b/packages/base-ui/src/components/separator/Separator.stories.tsx
@@ -19,8 +19,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
     inset: { control: 'inline-radio', options: ['none', 'start', 'end', 'middle'] },
     labelAlign: { control: 'inline-radio', options: ['start', 'center', 'end'] },
diff --git a/packages/base-ui/src/components/separator/Separator.test.tsx b/packages/base-ui/src/components/separator/Separator.test.tsx
index b6617c1..94cad6a 100644
--- a/packages/base-ui/src/components/separator/Separator.test.tsx
+++ b/packages/base-ui/src/components/separator/Separator.test.tsx
@@ -23,6 +23,22 @@ describe('Separator', () => {
     expect(separator).toHaveAttribute('aria-orientation', 'vertical');
   });
 
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(<Separator size="xs" data-testid="sep" />);
+    expect(screen.getByTestId('sep')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<Separator size="xl" data-testid="sep" />);
+    expect(screen.getByTestId('sep')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(<Separator color="discovery" data-testid="sep" />);
+    expect(screen.getByTestId('sep')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<Separator color="secondary" data-testid="sep" />);
+    expect(screen.getByTestId('sep')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('supports decorative and labeled usage', () => {
     renderWithTheme(
       <>
diff --git a/packages/base-ui/src/components/sheet/Sheet.module.css b/packages/base-ui/src/components/sheet/Sheet.module.css
index 5c267da..84ba62e 100644
--- a/packages/base-ui/src/components/sheet/Sheet.module.css
+++ b/packages/base-ui/src/components/sheet/Sheet.module.css
@@ -43,6 +43,10 @@
   --_ov-surface-bg: var(--ov-color-bg-elevated);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-padding: var(--ov-size-sheet-padding-xs, var(--ov-size-sheet-padding-sm));
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-padding: var(--ov-size-sheet-padding-sm);
 }
@@ -51,6 +55,10 @@
   --_ov-padding: var(--ov-size-sheet-padding-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-padding: var(--ov-size-sheet-padding-xl, var(--ov-size-sheet-padding-lg));
+}
+
 .Root[data-ov-elevation='1'] {
   --_ov-shadow: var(--_sheet-shadow-sm);
 }
@@ -99,6 +107,18 @@
   --_ov-accent-fg: var(--ov-color-info);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-accent-fg: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-accent-fg: var(--ov-color-secondary);
+}
+
 /* Variants: tint the surface background, don't replace it */
 .Root[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--_ov-surface-bg) 86%, var(--_ov-accent) 14%);
diff --git a/packages/base-ui/src/components/sheet/Sheet.stories.tsx b/packages/base-ui/src/components/sheet/Sheet.stories.tsx
index daa0b48..ed87ae9 100644
--- a/packages/base-ui/src/components/sheet/Sheet.stories.tsx
+++ b/packages/base-ui/src/components/sheet/Sheet.stories.tsx
@@ -17,9 +17,9 @@ const meta = {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
     color: {
       control: 'select',
-      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'],
+      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'],
     },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     elevation: { control: 'inline-radio', options: [0, 1, 2, 3] },
     surface: {
       control: 'select',
diff --git a/packages/base-ui/src/components/sheet/Sheet.test.tsx b/packages/base-ui/src/components/sheet/Sheet.test.tsx
index 527f6e8..e1a36e5 100644
--- a/packages/base-ui/src/components/sheet/Sheet.test.tsx
+++ b/packages/base-ui/src/components/sheet/Sheet.test.tsx
@@ -27,6 +27,22 @@ describe('Sheet', () => {
     expect(el).toHaveAttribute('data-ov-size', 'sm');
     expect(el).toHaveAttribute('data-ov-elevation', '2');
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(<Sheet size="xs">XS</Sheet>);
+    expect(screen.getByText('XS')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<Sheet size="xl">XL</Sheet>);
+    expect(screen.getByText('XL')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(<Sheet color="discovery">Discovery</Sheet>);
+    expect(screen.getByText('Discovery')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<Sheet color="secondary">Secondary</Sheet>);
+    expect(screen.getByText('Secondary')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
 
 describe('Paper', () => {
diff --git a/packages/base-ui/src/components/skeleton/Skeleton.module.css b/packages/base-ui/src/components/skeleton/Skeleton.module.css
index 5dde556..01c4340 100644
--- a/packages/base-ui/src/components/skeleton/Skeleton.module.css
+++ b/packages/base-ui/src/components/skeleton/Skeleton.module.css
@@ -33,6 +33,10 @@
 
 /* ---------- Size variants ---------- */
 
+.Root[data-ov-variant='text'][data-ov-size='xs'] {
+  height: 0.625em;
+}
+
 .Root[data-ov-variant='text'][data-ov-size='sm'] {
   height: 0.75em;
 }
@@ -45,6 +49,10 @@
   height: 1.25em;
 }
 
+.Root[data-ov-variant='text'][data-ov-size='xl'] {
+  height: 1.5em;
+}
+
 /* ---------- Pulse animation ---------- */
 
 .Root[data-ov-animation='pulse'] {
diff --git a/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx b/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx
index d17936a..a72b5d3 100644
--- a/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx
+++ b/packages/base-ui/src/components/skeleton/Skeleton.stories.tsx
@@ -29,7 +29,7 @@ const meta = {
   argTypes: {
     variant: { control: 'inline-radio', options: ['text', 'circular', 'rectangular', 'rounded'] },
     animation: { control: 'inline-radio', options: ['pulse', 'wave', 'none'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     width: { control: 'text' },
     height: { control: 'text' },
     lines: { control: 'number' },
diff --git a/packages/base-ui/src/components/skeleton/Skeleton.test.tsx b/packages/base-ui/src/components/skeleton/Skeleton.test.tsx
index ecc431d..6c5f14f 100644
--- a/packages/base-ui/src/components/skeleton/Skeleton.test.tsx
+++ b/packages/base-ui/src/components/skeleton/Skeleton.test.tsx
@@ -87,4 +87,16 @@ describe('Skeleton', () => {
     const el = screen.getByTestId('skeleton');
     expect(el).toHaveAttribute('data-ov-component', 'skeleton');
   });
+
+  it('applies xs size data attribute for text variant', () => {
+    renderWithTheme(<Skeleton variant="text" size="xs" data-testid="skeleton" />);
+    const el = screen.getByTestId('skeleton');
+    expect(el).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute for text variant', () => {
+    renderWithTheme(<Skeleton variant="text" size="xl" data-testid="skeleton" />);
+    const el = screen.getByTestId('skeleton');
+    expect(el).toHaveAttribute('data-ov-size', 'xl');
+  });
 });
diff --git a/packages/base-ui/src/components/skeleton/Skeleton.tsx b/packages/base-ui/src/components/skeleton/Skeleton.tsx
index 68be44e..a2f7af8 100644
--- a/packages/base-ui/src/components/skeleton/Skeleton.tsx
+++ b/packages/base-ui/src/components/skeleton/Skeleton.tsx
@@ -4,7 +4,7 @@ import styles from './Skeleton.module.css';
 
 export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
 
-export type SkeletonSize = 'sm' | 'md' | 'lg';
+export type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
   variant?: SkeletonVariant;
diff --git a/packages/base-ui/src/components/slider/Slider.module.css b/packages/base-ui/src/components/slider/Slider.module.css
index 15ceefe..222108a 100644
--- a/packages/base-ui/src/components/slider/Slider.module.css
+++ b/packages/base-ui/src/components/slider/Slider.module.css
@@ -28,6 +28,13 @@
   min-width: 0;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs, var(--ov-control-height-sm));
+  --_ov-thumb-size: var(--ov-size-choice-control-xs, var(--ov-size-choice-control-sm));
+  --_ov-label-size: var(--ov-font-size-caption);
+  --_ov-value-size: var(--ov-font-size-caption);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-thumb-size: var(--ov-size-choice-control-sm);
@@ -42,6 +49,13 @@
   --_ov-value-size: var(--ov-font-size-body);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl, var(--ov-control-height-lg));
+  --_ov-thumb-size: var(--ov-size-choice-control-xl, var(--ov-size-choice-control-lg));
+  --_ov-label-size: var(--ov-font-size-body);
+  --_ov-value-size: var(--ov-font-size-body);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent: var(--ov-color-brand-400);
   --_ov-accent-soft: var(--ov-color-state-selected);
@@ -71,6 +85,24 @@
   --_ov-focus-border: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+  --_ov-focus-border: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-focus-border: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-focus-border: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-track-bg: color-mix(
     in srgb,
diff --git a/packages/base-ui/src/components/slider/Slider.stories.tsx b/packages/base-ui/src/components/slider/Slider.stories.tsx
index 988594d..e34f16e 100644
--- a/packages/base-ui/src/components/slider/Slider.stories.tsx
+++ b/packages/base-ui/src/components/slider/Slider.stories.tsx
@@ -62,8 +62,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     thumbAlignment: { control: 'inline-radio', options: ['center', 'edge', 'edge-client-only'] },
     orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
     disabled: { control: 'boolean' },
diff --git a/packages/base-ui/src/components/slider/Slider.test.tsx b/packages/base-ui/src/components/slider/Slider.test.tsx
index 7678d9f..87aba50 100644
--- a/packages/base-ui/src/components/slider/Slider.test.tsx
+++ b/packages/base-ui/src/components/slider/Slider.test.tsx
@@ -72,4 +72,56 @@ describe('Slider', () => {
     const thumbs = screen.getAllByRole('slider');
     expect(thumbs).toHaveLength(2);
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(
+      <Slider.Root size="xs" defaultValue={30} data-testid="slider-root" aria-label="Volume">
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Indicator />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    expect(screen.getByTestId('slider-root')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <Slider.Root size="xl" defaultValue={30} data-testid="slider-root" aria-label="Volume">
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Indicator />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    expect(screen.getByTestId('slider-root')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(
+      <Slider.Root color="discovery" defaultValue={30} data-testid="slider-root" aria-label="Volume">
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Indicator />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    expect(screen.getByTestId('slider-root')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <Slider.Root color="secondary" defaultValue={30} data-testid="slider-root" aria-label="Volume">
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Indicator />
+            <Slider.Thumb />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    expect(screen.getByTestId('slider-root')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/spinner/Spinner.module.css b/packages/base-ui/src/components/spinner/Spinner.module.css
index f3512ef..6cc2c06 100644
--- a/packages/base-ui/src/components/spinner/Spinner.module.css
+++ b/packages/base-ui/src/components/spinner/Spinner.module.css
@@ -16,6 +16,10 @@
   flex-shrink: 0;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-size: var(--ov-size-spinner-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-size: var(--ov-size-spinner-sm);
 }
@@ -24,6 +28,10 @@
   --_ov-size: var(--ov-size-spinner-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-size: var(--ov-size-spinner-xl);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-color: var(--ov-color-fg-muted);
 }
@@ -48,6 +56,14 @@
   --_ov-color: var(--ov-color-info);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-color: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-color: var(--ov-color-secondary);
+}
+
 .Bar {
   position: absolute;
   width: 9%;
diff --git a/packages/base-ui/src/components/spinner/Spinner.stories.tsx b/packages/base-ui/src/components/spinner/Spinner.stories.tsx
index 7c01035..97e0ecb 100644
--- a/packages/base-ui/src/components/spinner/Spinner.stories.tsx
+++ b/packages/base-ui/src/components/spinner/Spinner.stories.tsx
@@ -10,10 +10,10 @@ const meta = {
     color: 'neutral',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     color: {
       control: 'select',
-      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info'],
+      options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'],
     },
   },
 } satisfies Meta<typeof Spinner>;
diff --git a/packages/base-ui/src/components/spinner/Spinner.test.tsx b/packages/base-ui/src/components/spinner/Spinner.test.tsx
index acf57f0..bc53901 100644
--- a/packages/base-ui/src/components/spinner/Spinner.test.tsx
+++ b/packages/base-ui/src/components/spinner/Spinner.test.tsx
@@ -21,4 +21,22 @@ describe('Spinner', () => {
     expect(el).toHaveAttribute('data-ov-color', 'brand');
     expect(el).toHaveAttribute('aria-label', 'Please wait');
   });
+
+  it('applies xs size data attribute', () => {
+    renderWithTheme(<Spinner size="xs" />);
+    expect(screen.getByRole('status')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(<Spinner size="xl" />);
+    expect(screen.getByRole('status')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(<Spinner color="discovery" />);
+    expect(screen.getByRole('status')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<Spinner color="secondary" />);
+    expect(screen.getByRole('status')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/split-button/SplitButton.module.css b/packages/base-ui/src/components/split-button/SplitButton.module.css
index 570f9d1..994e66b 100644
--- a/packages/base-ui/src/components/split-button/SplitButton.module.css
+++ b/packages/base-ui/src/components/split-button/SplitButton.module.css
@@ -100,6 +100,13 @@
 
 /* ----------------------------- Size variants ------------------------------ */
 
+.Action[data-ov-size='xs'],
+.MenuTrigger[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-size-button-height-xs);
+  --_ov-padding-inline: var(--ov-size-button-padding-inline-xs);
+  --_ov-font-size: var(--ov-size-button-font-size-xs);
+}
+
 .Action[data-ov-size='sm'],
 .MenuTrigger[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-size-button-height-sm);
@@ -114,6 +121,13 @@
   --_ov-font-size: var(--ov-size-button-font-size-lg);
 }
 
+.Action[data-ov-size='xl'],
+.MenuTrigger[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-size-button-height-xl);
+  --_ov-padding-inline: var(--ov-size-button-padding-inline-xl);
+  --_ov-font-size: var(--ov-size-button-font-size-xl);
+}
+
 /* ----------------------------- Color accents ------------------------------ */
 
 .Action[data-ov-color='neutral'],
@@ -166,6 +180,36 @@
   --_ov-accent-ghost-fg: var(--ov-color-danger);
 }
 
+.Action[data-ov-color='info'],
+.MenuTrigger[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+  --_ov-accent-ghost-fg: var(--ov-color-info);
+}
+
+.Action[data-ov-color='discovery'],
+.MenuTrigger[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+  --_ov-accent-ghost-fg: var(--ov-color-discovery);
+}
+
+.Action[data-ov-color='secondary'],
+.MenuTrigger[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+  --_ov-accent-ghost-fg: var(--ov-color-secondary);
+}
+
 /* --------------------------- Variant overrides ----------------------------- */
 
 .Action[data-ov-variant='solid'],
diff --git a/packages/base-ui/src/components/split-button/SplitButton.stories.tsx b/packages/base-ui/src/components/split-button/SplitButton.stories.tsx
index 5d95de4..32c81a4 100644
--- a/packages/base-ui/src/components/split-button/SplitButton.stories.tsx
+++ b/packages/base-ui/src/components/split-button/SplitButton.stories.tsx
@@ -17,8 +17,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 } satisfies Meta<SplitButtonProps>;
 
diff --git a/packages/base-ui/src/components/split-button/SplitButton.test.tsx b/packages/base-ui/src/components/split-button/SplitButton.test.tsx
index f412b5a..d5ba51a 100644
--- a/packages/base-ui/src/components/split-button/SplitButton.test.tsx
+++ b/packages/base-ui/src/components/split-button/SplitButton.test.tsx
@@ -125,4 +125,48 @@ describe('SplitButton', () => {
 
     expect(ref.current).toBeInstanceOf(HTMLDivElement);
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(
+      <SplitButton size="xs">
+        <SplitButton.Action data-testid="action">Save</SplitButton.Action>
+        <SplitButton.Menu>
+          <Menu.Item>Save as Draft</Menu.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+    expect(screen.getByTestId('action')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <SplitButton size="xl">
+        <SplitButton.Action data-testid="action">Save</SplitButton.Action>
+        <SplitButton.Menu>
+          <Menu.Item>Save as Draft</Menu.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+    expect(screen.getByTestId('action')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(
+      <SplitButton color="discovery">
+        <SplitButton.Action data-testid="action">Save</SplitButton.Action>
+        <SplitButton.Menu>
+          <Menu.Item>Save as Draft</Menu.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+    expect(screen.getByTestId('action')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <SplitButton color="secondary">
+        <SplitButton.Action data-testid="action">Save</SplitButton.Action>
+        <SplitButton.Menu>
+          <Menu.Item>Save as Draft</Menu.Item>
+        </SplitButton.Menu>
+      </SplitButton>,
+    );
+    expect(screen.getByTestId('action')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/split-button/SplitButton.tsx b/packages/base-ui/src/components/split-button/SplitButton.tsx
index 59df0b7..0a0ddf6 100644
--- a/packages/base-ui/src/components/split-button/SplitButton.tsx
+++ b/packages/base-ui/src/components/split-button/SplitButton.tsx
@@ -15,7 +15,7 @@ import styles from './SplitButton.module.css';
 
 /* ---------------------------------- Types --------------------------------- */
 
-export type SplitButtonColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+export type SplitButtonColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'discovery' | 'secondary';
 
 export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
   variant?: ComponentVariant;
diff --git a/packages/base-ui/src/components/stat-row/StatRow.module.css b/packages/base-ui/src/components/stat-row/StatRow.module.css
index 8833391..76e02f9 100644
--- a/packages/base-ui/src/components/stat-row/StatRow.module.css
+++ b/packages/base-ui/src/components/stat-row/StatRow.module.css
@@ -93,3 +93,11 @@
 .Item[data-ov-color='info'] {
   --_ov-stat-item-color: var(--ov-color-info);
 }
+
+.Item[data-ov-color='discovery'] {
+  --_ov-stat-item-color: var(--ov-color-discovery);
+}
+
+.Item[data-ov-color='secondary'] {
+  --_ov-stat-item-color: var(--ov-color-secondary);
+}
diff --git a/packages/base-ui/src/components/stat-row/StatRow.stories.tsx b/packages/base-ui/src/components/stat-row/StatRow.stories.tsx
index 9994a4d..238f8ff 100644
--- a/packages/base-ui/src/components/stat-row/StatRow.stories.tsx
+++ b/packages/base-ui/src/components/stat-row/StatRow.stories.tsx
@@ -21,7 +21,7 @@ const meta = {
   component: StatRow,
   tags: ['autodocs'],
   argTypes: {
-    size: { control: 'radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     separator: { control: 'text' },
   },
 } satisfies Meta<StatRowProps>;
diff --git a/packages/base-ui/src/components/stat-row/StatRow.test.tsx b/packages/base-ui/src/components/stat-row/StatRow.test.tsx
index 85e8383..3caaf32 100644
--- a/packages/base-ui/src/components/stat-row/StatRow.test.tsx
+++ b/packages/base-ui/src/components/stat-row/StatRow.test.tsx
@@ -130,4 +130,20 @@ describe('StatRow', () => {
     const dividers = screen.getByTestId('row').querySelectorAll('[aria-hidden]');
     expect(dividers).toHaveLength(0);
   });
+
+  it('renders discovery and secondary colors on item', () => {
+    const { rerender } = renderWithTheme(
+      <StatRow>
+        <StatRow.Item color="discovery" data-testid="item">Val</StatRow.Item>
+      </StatRow>,
+    );
+    expect(screen.getByTestId('item')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <StatRow>
+        <StatRow.Item color="secondary" data-testid="item">Val</StatRow.Item>
+      </StatRow>,
+    );
+    expect(screen.getByTestId('item')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/status-bar/StatusBar.module.css b/packages/base-ui/src/components/status-bar/StatusBar.module.css
index d5e1421..d81389b 100644
--- a/packages/base-ui/src/components/status-bar/StatusBar.module.css
+++ b/packages/base-ui/src/components/status-bar/StatusBar.module.css
@@ -183,3 +183,11 @@
 .IconItem[data-ov-color='info'] {
   --_ov-sb-icon-item-color: var(--ov-color-info);
 }
+
+.IconItem[data-ov-color='discovery'] {
+  --_ov-sb-icon-item-color: var(--ov-color-discovery);
+}
+
+.IconItem[data-ov-color='secondary'] {
+  --_ov-sb-icon-item-color: var(--ov-color-secondary);
+}
diff --git a/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx b/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx
index ad90a2a..5099eb6 100644
--- a/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx
+++ b/packages/base-ui/src/components/status-bar/StatusBar.stories.tsx
@@ -23,7 +23,7 @@ const meta = {
     size: 'sm',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <StatusBar {...args}>
diff --git a/packages/base-ui/src/components/status-bar/StatusBar.test.tsx b/packages/base-ui/src/components/status-bar/StatusBar.test.tsx
index b26c232..345b9a9 100644
--- a/packages/base-ui/src/components/status-bar/StatusBar.test.tsx
+++ b/packages/base-ui/src/components/status-bar/StatusBar.test.tsx
@@ -324,6 +324,30 @@ describe('StatusBar.IconItem', () => {
 
     expect(screen.getByTestId('ii')).toHaveAttribute('data-ov-active', 'true');
   });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(
+      <StatusBar>
+        <StatusBar.Section>
+          <StatusBar.IconItem icon={<svg />} color="discovery" data-testid="ii">
+            Discover
+          </StatusBar.IconItem>
+        </StatusBar.Section>
+      </StatusBar>,
+    );
+    expect(screen.getByTestId('ii')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <StatusBar>
+        <StatusBar.Section>
+          <StatusBar.IconItem icon={<svg />} color="secondary" data-testid="ii">
+            Secondary
+          </StatusBar.IconItem>
+        </StatusBar.Section>
+      </StatusBar>,
+    );
+    expect(screen.getByTestId('ii')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
 
 describe('StatusBar size propagation via context', () => {
diff --git a/packages/base-ui/src/components/status-dot/StatusDot.module.css b/packages/base-ui/src/components/status-dot/StatusDot.module.css
index 7a00eaf..569ec4e 100644
--- a/packages/base-ui/src/components/status-dot/StatusDot.module.css
+++ b/packages/base-ui/src/components/status-dot/StatusDot.module.css
@@ -27,12 +27,20 @@
 
 /* ---- Size ---- */
 
+.Root[data-ov-size='xs'] {
+  --_ov-dot-size: 4px;
+  --_ov-pulse-spread: 3px;
+  --_ov-label-font-size: var(--ov-font-size-xs);
+
+  gap: var(--ov-space-stack-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-dot-size: 6px;
   --_ov-pulse-spread: 4px;
   --_ov-label-font-size: var(--ov-font-size-xs);
 
-  gap: var(--ov-space-stack-xs, 4px);
+  gap: var(--ov-space-stack-xs);
 }
 
 .Root[data-ov-size='lg'] {
@@ -43,6 +51,14 @@
   gap: var(--ov-space-stack-sm, 8px);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-dot-size: 12px;
+  --_ov-pulse-spread: 10px;
+  --_ov-label-font-size: var(--ov-font-size-lg);
+
+  gap: var(--ov-space-stack-sm, 8px);
+}
+
 /* ---- Status colors ---- */
 
 .Root[data-ov-status='success'] {
diff --git a/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx b/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx
index 44d4ca3..34f7307 100644
--- a/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx
+++ b/packages/base-ui/src/components/status-dot/StatusDot.stories.tsx
@@ -17,7 +17,7 @@ const meta = {
       control: 'select',
       options: ['success', 'warning', 'danger', 'info', 'neutral', 'pending'],
     },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     pulse: { control: 'boolean' },
     pulseIntensity: { control: 'inline-radio', options: ['subtle', 'default', 'strong'] },
     label: { control: 'text' },
diff --git a/packages/base-ui/src/components/status-dot/StatusDot.test.tsx b/packages/base-ui/src/components/status-dot/StatusDot.test.tsx
index 971e2b1..ce16a43 100644
--- a/packages/base-ui/src/components/status-dot/StatusDot.test.tsx
+++ b/packages/base-ui/src/components/status-dot/StatusDot.test.tsx
@@ -51,7 +51,7 @@ describe('StatusDot', () => {
   });
 
   it('applies correct data attribute for each size', () => {
-    const sizes = ['sm', 'md', 'lg'] as const;
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
     for (const size of sizes) {
       const { container, unmount } = renderWithTheme(<StatusDot size={size} />);
       const root = container.firstElementChild as HTMLElement;
diff --git a/packages/base-ui/src/components/status-dot/StatusDot.tsx b/packages/base-ui/src/components/status-dot/StatusDot.tsx
index d704822..857d840 100644
--- a/packages/base-ui/src/components/status-dot/StatusDot.tsx
+++ b/packages/base-ui/src/components/status-dot/StatusDot.tsx
@@ -11,7 +11,7 @@ export interface StatusDotProps extends HTMLAttributes<HTMLSpanElement> {
   pulse?: boolean;
   /** Controls the visual intensity of the pulse animation. */
   pulseIntensity?: StatusDotPulseIntensity;
-  size?: 'sm' | 'md' | 'lg';
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(function StatusDot(
diff --git a/packages/base-ui/src/components/switch/Switch.module.css b/packages/base-ui/src/components/switch/Switch.module.css
index dcf7c69..222a78b 100644
--- a/packages/base-ui/src/components/switch/Switch.module.css
+++ b/packages/base-ui/src/components/switch/Switch.module.css
@@ -37,6 +37,12 @@
     box-shadow var(--ov-duration-interactive) var(--ov-ease-standard);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-track-width: var(--ov-size-switch-track-width-xs);
+  --_ov-track-height: var(--ov-size-switch-track-height-xs);
+  --_ov-thumb-size: var(--ov-size-switch-thumb-size-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-track-width: var(--ov-size-switch-track-width-sm);
   --_ov-track-height: var(--ov-size-switch-track-height-sm);
@@ -49,6 +55,12 @@
   --_ov-thumb-size: var(--ov-size-switch-thumb-size-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-track-width: var(--ov-size-switch-track-width-xl);
+  --_ov-track-height: var(--ov-size-switch-track-height-xl);
+  --_ov-thumb-size: var(--ov-size-switch-thumb-size-xl);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent-bg: var(--ov-color-brand-500);
   --_ov-accent-border: var(--ov-color-brand-400);
@@ -83,6 +95,27 @@
   --_ov-focus-border: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-focus-border: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-focus-border: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-focus-border: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-track-bg-on: var(--_ov-accent-bg);
   --_ov-track-border-on: color-mix(in srgb, var(--_ov-accent-bg) 82%, black 18%);
@@ -165,6 +198,10 @@
   user-select: none;
 }
 
+.Field[data-ov-size='xs'] {
+  gap: var(--ov-size-switch-gap-xs);
+}
+
 .Field[data-ov-size='sm'] {
   gap: var(--ov-size-switch-gap-sm);
 }
@@ -173,6 +210,10 @@
   gap: var(--ov-size-switch-gap-lg);
 }
 
+.Field[data-ov-size='xl'] {
+  gap: var(--ov-size-switch-gap-xl);
+}
+
 .Field[data-ov-layout='spread'] {
   display: flex;
   width: 100%;
diff --git a/packages/base-ui/src/components/switch/Switch.stories.tsx b/packages/base-ui/src/components/switch/Switch.stories.tsx
index b871bf1..0c6db12 100644
--- a/packages/base-ui/src/components/switch/Switch.stories.tsx
+++ b/packages/base-ui/src/components/switch/Switch.stories.tsx
@@ -18,8 +18,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     defaultChecked: { control: 'boolean' },
     labelPosition: { control: 'inline-radio', options: ['start', 'end'] },
     layout: { control: 'inline-radio', options: ['inline', 'spread'] },
diff --git a/packages/base-ui/src/components/switch/Switch.test.tsx b/packages/base-ui/src/components/switch/Switch.test.tsx
index 64f17cb..6b0856e 100644
--- a/packages/base-ui/src/components/switch/Switch.test.tsx
+++ b/packages/base-ui/src/components/switch/Switch.test.tsx
@@ -59,4 +59,38 @@ describe('Switch', () => {
     expect(field).toHaveAttribute('data-ov-label-position', 'start');
     expect(field).toHaveAttribute('data-ov-layout', 'spread');
   });
+
+  it('applies xs size attribute', () => {
+    renderWithTheme(<Switch size="xs">Tiny toggle</Switch>);
+    const toggle = screen.getByRole('switch', { name: 'Tiny toggle' });
+    expect(toggle).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size attribute', () => {
+    renderWithTheme(<Switch size="xl">Large toggle</Switch>);
+    const toggle = screen.getByRole('switch', { name: 'Large toggle' });
+    expect(toggle).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery color attribute', () => {
+    renderWithTheme(
+      <Switch color="discovery" defaultChecked>
+        Discovery feature
+      </Switch>,
+    );
+    const toggle = screen.getByRole('switch', { name: 'Discovery feature' });
+    expect(toggle).toHaveAttribute('data-ov-color', 'discovery');
+    expect(toggle).toHaveAttribute('data-checked');
+  });
+
+  it('applies secondary color attribute', () => {
+    renderWithTheme(
+      <Switch color="secondary" defaultChecked>
+        Secondary option
+      </Switch>,
+    );
+    const toggle = screen.getByRole('switch', { name: 'Secondary option' });
+    expect(toggle).toHaveAttribute('data-ov-color', 'secondary');
+    expect(toggle).toHaveAttribute('data-checked');
+  });
 });
diff --git a/packages/base-ui/src/components/table/Table.module.css b/packages/base-ui/src/components/table/Table.module.css
index a09e8e9..c3094b9 100644
--- a/packages/base-ui/src/components/table/Table.module.css
+++ b/packages/base-ui/src/components/table/Table.module.css
@@ -39,6 +39,14 @@
   table-layout: fixed;
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-cell-padding-inline: var(--ov-size-table-cell-padding-inline-xs);
+  --_ov-cell-padding-block: var(--ov-size-table-cell-padding-block-xs);
+  --_ov-cell-font-size: var(--ov-size-table-cell-font-size-xs);
+  --_ov-header-font-size: var(--ov-size-table-header-font-size-xs);
+  --_ov-caption-font-size: var(--ov-size-table-caption-font-size-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-cell-padding-inline: var(--ov-size-table-cell-padding-inline-sm);
   --_ov-cell-padding-block: var(--ov-size-table-cell-padding-block-sm);
@@ -55,6 +63,14 @@
   --_ov-caption-font-size: var(--ov-size-table-caption-font-size-lg);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-cell-padding-inline: var(--ov-size-table-cell-padding-inline-xl);
+  --_ov-cell-padding-block: var(--ov-size-table-cell-padding-block-xl);
+  --_ov-cell-font-size: var(--ov-size-table-cell-font-size-xl);
+  --_ov-header-font-size: var(--ov-size-table-header-font-size-xl);
+  --_ov-caption-font-size: var(--ov-size-table-caption-font-size-xl);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent: var(--ov-color-border-strong);
   --_ov-accent-soft: var(--ov-color-state-selected);
@@ -80,6 +96,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-table-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent-soft) 14%);
   --_ov-table-header-bg: color-mix(
diff --git a/packages/base-ui/src/components/table/Table.stories.tsx b/packages/base-ui/src/components/table/Table.stories.tsx
index 9a57bd2..7b15660 100644
--- a/packages/base-ui/src/components/table/Table.stories.tsx
+++ b/packages/base-ui/src/components/table/Table.stories.tsx
@@ -91,8 +91,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     layout: { control: 'inline-radio', options: ['auto', 'fixed'] },
     striped: { control: 'boolean' },
     hoverable: { control: 'boolean' },
diff --git a/packages/base-ui/src/components/table/Table.test.tsx b/packages/base-ui/src/components/table/Table.test.tsx
index dafa59d..5a29487 100644
--- a/packages/base-ui/src/components/table/Table.test.tsx
+++ b/packages/base-ui/src/components/table/Table.test.tsx
@@ -26,6 +26,56 @@ describe('Table', () => {
     expect(table).toHaveAttribute('data-ov-size', 'sm');
   });
 
+  it('applies xs size data attribute', () => {
+    renderWithTheme(
+      <Table.Root size="xs" data-testid="table-root">
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Value</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>,
+    );
+    expect(screen.getByTestId('table-root')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('applies xl size data attribute', () => {
+    renderWithTheme(
+      <Table.Root size="xl" data-testid="table-root">
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Value</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>,
+    );
+    expect(screen.getByTestId('table-root')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(
+      <Table.Root color="discovery" data-testid="table-root">
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Value</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>,
+    );
+    expect(screen.getByTestId('table-root')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <Table.Root color="secondary" data-testid="table-root">
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Value</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>,
+    );
+    expect(screen.getByTestId('table-root')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('supports sticky headers, striping, and hover flags', () => {
     renderWithTheme(
       <Table.Root stickyHeader striped hoverable data-testid="table-root">
diff --git a/packages/base-ui/src/components/tabs/Tabs.module.css b/packages/base-ui/src/components/tabs/Tabs.module.css
index d859db5..ddc884d 100644
--- a/packages/base-ui/src/components/tabs/Tabs.module.css
+++ b/packages/base-ui/src/components/tabs/Tabs.module.css
@@ -1,10 +1,12 @@
 .Root {
   --_ov-tab-height: var(--ov-control-height-md);
   --_ov-tab-font-size: var(--ov-font-size-body);
+  --_ov-tab-icon-size: var(--ov-size-icon-button-icon-md);
   --_ov-list-bg: var(--ov-color-bg-surface-raised);
   --_ov-list-border: var(--ov-color-border-default);
   --_ov-tab-fg: var(--ov-color-fg-muted);
   --_ov-tab-fg-active: var(--ov-color-fg-default);
+  --_ov-tab-fg-hover: var(--ov-color-fg-default);
   --_ov-tab-bg-hover: var(--ov-color-state-hover);
   --_ov-tab-bg-active: var(--ov-color-state-selected);
   --_ov-indicator: var(--ov-color-brand-400);
@@ -15,13 +17,26 @@
   font-family: var(--ov-font-sans);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-tab-height: var(--ov-control-height-xs);
+  --_ov-tab-font-size: var(--ov-font-size-caption);
+  --_ov-tab-icon-size: var(--ov-size-icon-button-icon-xs);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-tab-height: var(--ov-control-height-sm);
   --_ov-tab-font-size: var(--ov-font-size-caption);
+  --_ov-tab-icon-size: var(--ov-size-icon-button-icon-sm);
 }
 
 .Root[data-ov-size='lg'] {
   --_ov-tab-height: var(--ov-control-height-lg);
+  --_ov-tab-icon-size: var(--ov-size-icon-button-icon-lg);
+}
+
+.Root[data-ov-size='xl'] {
+  --_ov-tab-height: var(--ov-control-height-xl);
+  --_ov-tab-icon-size: var(--ov-size-icon-button-icon-xl);
 }
 
 .Root[data-ov-color='neutral'] {
@@ -49,6 +64,21 @@
   --_ov-tab-bg-active: var(--ov-color-danger-soft);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-indicator: var(--ov-color-info);
+  --_ov-tab-bg-active: var(--ov-color-info-soft);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-indicator: var(--ov-color-discovery);
+  --_ov-tab-bg-active: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-indicator: var(--ov-color-secondary);
+  --_ov-tab-bg-active: var(--ov-color-secondary-soft);
+}
+
 .Root[data-ov-variant='outline'] {
   --_ov-list-bg: transparent;
   --_ov-list-border: var(--ov-color-border-default);
@@ -97,13 +127,18 @@
   height: var(--_ov-tab-height);
 }
 
-.Root[data-ov-variant='flat'] .Tab[data-selected] {
-  background: transparent;
+.Root[data-ov-variant='flat'] .Tab[data-active] {
+  background: var(--ov-color-bg-surface-raised);
   color: var(--_ov-tab-fg-active);
+  border-radius: var(--ov-primitive-radius-sm) var(--ov-primitive-radius-sm) 0 0;
+  box-shadow: inset 0 2px 0 var(--_ov-indicator);
 }
 
 .Root[data-ov-variant='flat'] .Indicator {
-  border-radius: 0;
+  border-radius: var(--ov-primitive-radius-sm) var(--ov-primitive-radius-sm) 0 0;
+  height: 2px;
+  top: 0;
+  bottom: auto;
 }
 
 .Root[data-ov-variant='flat'] .Panel {
@@ -127,8 +162,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--ov-space-stack-xs);
   height: calc(var(--_ov-tab-height) - 4px);
-  padding: 0 calc(var(--ov-space-inline-control) + var(--ov-space-stack-sm));
+  padding: 0 var(--ov-space-inline-control);
   border: 0;
   border-radius: calc(var(--ov-radius-control) - 2px);
   background: transparent;
@@ -146,9 +182,10 @@
 
 .Tab:hover {
   background: var(--_ov-tab-bg-hover);
+  color: var(--_ov-tab-fg-hover);
 }
 
-.Tab[data-selected] {
+.Tab[data-active] {
   color: var(--_ov-tab-fg-active);
   background: var(--_ov-tab-bg-active);
 }
@@ -160,7 +197,9 @@
 .TabDecorator {
   display: inline-flex;
   align-items: center;
-  margin-left: var(--ov-space-stack-xs, 4px);
+  justify-content: center;
+  width: var(--_ov-tab-icon-size, 16px);
+  height: var(--_ov-tab-icon-size, 16px);
   flex-shrink: 0;
 }
 
diff --git a/packages/base-ui/src/components/tabs/Tabs.stories.tsx b/packages/base-ui/src/components/tabs/Tabs.stories.tsx
index 24b3991..b5487f4 100644
--- a/packages/base-ui/src/components/tabs/Tabs.stories.tsx
+++ b/packages/base-ui/src/components/tabs/Tabs.stories.tsx
@@ -12,8 +12,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost', 'flat'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <Tabs.Root {...args} defaultValue="overview" style={{ width: 520 }}>
diff --git a/packages/base-ui/src/components/tabs/Tabs.test.tsx b/packages/base-ui/src/components/tabs/Tabs.test.tsx
index b2af37f..99e2d70 100644
--- a/packages/base-ui/src/components/tabs/Tabs.test.tsx
+++ b/packages/base-ui/src/components/tabs/Tabs.test.tsx
@@ -42,6 +42,54 @@ describe('Tabs', () => {
     expect(screen.getByRole('tab', { name: /Queued/ })).toContainElement(screen.getByTestId('badge'));
   });
 
+  it('applies xs and xl size data attributes', () => {
+    const { rerender } = renderWithTheme(
+      <Tabs.Root defaultValue="a" size="xs">
+        <Tabs.List aria-label="Sections">
+          <Tabs.Tab value="a">Tab</Tabs.Tab>
+          <Tabs.Indicator />
+        </Tabs.List>
+        <Tabs.Panel value="a">Content</Tabs.Panel>
+      </Tabs.Root>,
+    );
+    expect(screen.getByRole('tablist').closest('[data-ov-size]')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <Tabs.Root defaultValue="a" size="xl">
+        <Tabs.List aria-label="Sections">
+          <Tabs.Tab value="a">Tab</Tabs.Tab>
+          <Tabs.Indicator />
+        </Tabs.List>
+        <Tabs.Panel value="a">Content</Tabs.Panel>
+      </Tabs.Root>,
+    );
+    expect(screen.getByRole('tablist').closest('[data-ov-size]')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('applies discovery and secondary color data attributes', () => {
+    const { rerender } = renderWithTheme(
+      <Tabs.Root defaultValue="a" color="discovery">
+        <Tabs.List aria-label="Sections">
+          <Tabs.Tab value="a">Tab</Tabs.Tab>
+          <Tabs.Indicator />
+        </Tabs.List>
+        <Tabs.Panel value="a">Content</Tabs.Panel>
+      </Tabs.Root>,
+    );
+    expect(screen.getByRole('tablist').closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <Tabs.Root defaultValue="a" color="secondary">
+        <Tabs.List aria-label="Sections">
+          <Tabs.Tab value="a">Tab</Tabs.Tab>
+          <Tabs.Indicator />
+        </Tabs.List>
+        <Tabs.Panel value="a">Content</Tabs.Panel>
+      </Tabs.Root>,
+    );
+    expect(screen.getByRole('tablist').closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('applies style data attributes', () => {
     renderWithTheme(
       <Tabs.Root defaultValue="overview" variant="outline" color="success" size="lg">
diff --git a/packages/base-ui/src/components/tabs/Tabs.tsx b/packages/base-ui/src/components/tabs/Tabs.tsx
index a9e4964..259a704 100644
--- a/packages/base-ui/src/components/tabs/Tabs.tsx
+++ b/packages/base-ui/src/components/tabs/Tabs.tsx
@@ -12,7 +12,9 @@ export interface TabsRootProps extends BaseTabs.Root.Props, Omit<StyledComponent
 }
 export type TabsListProps = BaseTabs.List.Props;
 export type TabsTabProps = BaseTabs.Tab.Props & {
-  /** Slot rendered after the tab label (e.g. Badge, icon, count) */
+  /** Slot rendered before the tab label (e.g. icon) */
+  startDecorator?: ReactNode;
+  /** Slot rendered after the tab label (e.g. Badge, count) */
   endDecorator?: ReactNode;
 };
 export type TabsPanelProps = BaseTabs.Panel.Props;
@@ -46,7 +48,7 @@ const TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(
 });
 
 const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(function TabsTab(
-  { className, endDecorator, children, ...props },
+  { className, startDecorator, endDecorator, children, ...props },
   ref,
 ) {
   return (
@@ -55,6 +57,7 @@ const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(function TabsTab(
       className={withBaseClassName<BaseTabs.Tab.State>(styles.Tab, className)}
       {...props}
     >
+      {startDecorator != null && <span className={styles.TabDecorator}>{startDecorator}</span>}
       {children}
       {endDecorator != null && <span className={styles.TabDecorator}>{endDecorator}</span>}
     </BaseTabs.Tab>
diff --git a/packages/base-ui/src/components/tag-input/TagInput.module.css b/packages/base-ui/src/components/tag-input/TagInput.module.css
index 9554442..b453a87 100644
--- a/packages/base-ui/src/components/tag-input/TagInput.module.css
+++ b/packages/base-ui/src/components/tag-input/TagInput.module.css
@@ -20,6 +20,11 @@
     box-shadow var(--ov-duration-interactive) var(--ov-ease-standard);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-min-height: var(--ov-size-button-height-xs, var(--ov-size-button-height-sm));
+  --_ov-font-size: var(--ov-font-size-caption);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-min-height: var(--ov-size-button-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -30,6 +35,11 @@
   --_ov-font-size: var(--ov-font-size-subheading);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-min-height: var(--ov-size-button-height-xl, var(--ov-size-button-height-lg));
+  --_ov-font-size: var(--ov-font-size-subheading);
+}
+
 .Root[data-ov-focused='true'] {
   border-color: var(--ov-color-border-focus);
   box-shadow: 0 0 0 1px var(--ov-color-state-focus-ring);
diff --git a/packages/base-ui/src/components/tag-input/TagInput.stories.tsx b/packages/base-ui/src/components/tag-input/TagInput.stories.tsx
index 356b015..a269192 100644
--- a/packages/base-ui/src/components/tag-input/TagInput.stories.tsx
+++ b/packages/base-ui/src/components/tag-input/TagInput.stories.tsx
@@ -17,7 +17,7 @@ const meta = {
     allowDuplicates: false,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     disabled: { control: 'boolean' },
     allowDuplicates: { control: 'boolean' },
     max: { control: 'number' },
diff --git a/packages/base-ui/src/components/tag-input/TagInput.test.tsx b/packages/base-ui/src/components/tag-input/TagInput.test.tsx
index 03a1d82..ffa4bec 100644
--- a/packages/base-ui/src/components/tag-input/TagInput.test.tsx
+++ b/packages/base-ui/src/components/tag-input/TagInput.test.tsx
@@ -188,4 +188,14 @@ describe('TagInput', () => {
 
     expect(onChange).toHaveBeenCalledWith(['hello']);
   });
+
+  it('renders xs and xl sizes', () => {
+    const { container, rerender } = renderWithTheme(
+      <TagInput value={[]} onChange={() => {}} size="xs" />,
+    );
+    expect(container.firstChild as HTMLElement).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<TagInput value={[]} onChange={() => {}} size="xl" />);
+    expect(container.firstChild as HTMLElement).toHaveAttribute('data-ov-size', 'xl');
+  });
 });
diff --git a/packages/base-ui/src/components/text-area/TextArea.module.css b/packages/base-ui/src/components/text-area/TextArea.module.css
index 63d6203..eb892e1 100644
--- a/packages/base-ui/src/components/text-area/TextArea.module.css
+++ b/packages/base-ui/src/components/text-area/TextArea.module.css
@@ -16,6 +16,13 @@
   font-family: var(--ov-font-sans);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-font-size: var(--ov-size-button-font-size-xs);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) - 4px);
+  --_ov-padding-block: calc(var(--ov-space-stack-sm) - 4px);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -25,10 +32,18 @@
 
 .Root[data-ov-size='lg'] {
   --_ov-control-height: var(--ov-control-height-lg);
+  --_ov-font-size: var(--ov-size-button-font-size-lg);
   --_ov-padding-inline: calc(var(--ov-space-inline-control) + 2px);
   --_ov-padding-block: var(--ov-space-stack-md);
 }
 
+.Root[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+  --_ov-font-size: var(--ov-size-button-font-size-xl);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) + 4px);
+  --_ov-padding-block: calc(var(--ov-space-stack-md) + 2px);
+}
+
 .Root[data-ov-color='neutral'] {
   --_ov-accent: var(--ov-color-border-default);
   --_ov-accent-soft: var(--ov-color-state-selected);
@@ -58,6 +73,24 @@
   --_ov-focus: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+  --_ov-focus: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-focus: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-focus: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent) 14%);
   --_ov-border: color-mix(in srgb, var(--_ov-accent) 68%, var(--ov-color-border-default) 32%);
diff --git a/packages/base-ui/src/components/text-area/TextArea.stories.tsx b/packages/base-ui/src/components/text-area/TextArea.stories.tsx
index c8d6af5..a2602d9 100644
--- a/packages/base-ui/src/components/text-area/TextArea.stories.tsx
+++ b/packages/base-ui/src/components/text-area/TextArea.stories.tsx
@@ -18,8 +18,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     mono: { control: 'boolean' },
     resize: { control: 'inline-radio', options: ['none', 'vertical', 'horizontal', 'both'] },
     disabled: { control: 'boolean' },
diff --git a/packages/base-ui/src/components/text-area/TextArea.test.tsx b/packages/base-ui/src/components/text-area/TextArea.test.tsx
index 288db65..24aed8d 100644
--- a/packages/base-ui/src/components/text-area/TextArea.test.tsx
+++ b/packages/base-ui/src/components/text-area/TextArea.test.tsx
@@ -47,4 +47,48 @@ describe('TextArea', () => {
     const textarea = screen.getByPlaceholderText('Resizable');
     expect(textarea.style.getPropertyValue('--_textarea-resize')).toBe('none');
   });
+
+  it('renders with xs size', () => {
+    renderWithTheme(
+      <TextArea.Root size="xs">
+        <TextArea.Control placeholder="xs-textarea" />
+      </TextArea.Root>,
+    );
+
+    const textarea = screen.getByPlaceholderText('xs-textarea');
+    expect(textarea).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('renders with xl size', () => {
+    renderWithTheme(
+      <TextArea.Root size="xl">
+        <TextArea.Control placeholder="xl-textarea" />
+      </TextArea.Root>,
+    );
+
+    const textarea = screen.getByPlaceholderText('xl-textarea');
+    expect(textarea).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders with discovery color', () => {
+    renderWithTheme(
+      <TextArea.Root color="discovery">
+        <TextArea.Control placeholder="discovery-textarea" />
+      </TextArea.Root>,
+    );
+
+    const textarea = screen.getByPlaceholderText('discovery-textarea');
+    expect(textarea).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders with secondary color', () => {
+    renderWithTheme(
+      <TextArea.Root color="secondary">
+        <TextArea.Control placeholder="secondary-textarea" />
+      </TextArea.Root>,
+    );
+
+    const textarea = screen.getByPlaceholderText('secondary-textarea');
+    expect(textarea).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/text-field/TextField.module.css b/packages/base-ui/src/components/text-field/TextField.module.css
index 706865d..b7efe84 100644
--- a/packages/base-ui/src/components/text-field/TextField.module.css
+++ b/packages/base-ui/src/components/text-field/TextField.module.css
@@ -15,6 +15,12 @@
   font-family: var(--ov-font-sans);
 }
 
+.Root[data-ov-size='xs'] {
+  --_ov-control-height: var(--ov-control-height-xs);
+  --_ov-font-size: var(--ov-size-button-font-size-xs);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) - 4px);
+}
+
 .Root[data-ov-size='sm'] {
   --_ov-control-height: var(--ov-control-height-sm);
   --_ov-font-size: var(--ov-font-size-caption);
@@ -22,6 +28,13 @@
 
 .Root[data-ov-size='lg'] {
   --_ov-control-height: var(--ov-control-height-lg);
+  --_ov-font-size: var(--ov-size-button-font-size-lg);
+}
+
+.Root[data-ov-size='xl'] {
+  --_ov-control-height: var(--ov-control-height-xl);
+  --_ov-font-size: var(--ov-size-button-font-size-xl);
+  --_ov-padding-inline: calc(var(--ov-space-inline-control) + 4px);
 }
 
 .Root[data-ov-color='neutral'] {
@@ -53,6 +66,24 @@
   --_ov-focus: var(--ov-color-danger);
 }
 
+.Root[data-ov-color='info'] {
+  --_ov-accent: var(--ov-color-info);
+  --_ov-accent-soft: var(--ov-color-info-soft);
+  --_ov-focus: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent: var(--ov-color-discovery);
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+  --_ov-focus: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent: var(--ov-color-secondary);
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+  --_ov-focus: var(--ov-color-secondary);
+}
+
 .Root[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface) 86%, var(--_ov-accent) 14%);
   --_ov-border: color-mix(in srgb, var(--_ov-accent) 68%, var(--ov-color-border-default) 32%);
diff --git a/packages/base-ui/src/components/text-field/TextField.stories.tsx b/packages/base-ui/src/components/text-field/TextField.stories.tsx
index 944977a..b5d3525 100644
--- a/packages/base-ui/src/components/text-field/TextField.stories.tsx
+++ b/packages/base-ui/src/components/text-field/TextField.stories.tsx
@@ -13,8 +13,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <div style={{ width: 360 }}>
diff --git a/packages/base-ui/src/components/text-field/TextField.test.tsx b/packages/base-ui/src/components/text-field/TextField.test.tsx
index 4caf421..2196066 100644
--- a/packages/base-ui/src/components/text-field/TextField.test.tsx
+++ b/packages/base-ui/src/components/text-field/TextField.test.tsx
@@ -29,4 +29,48 @@ describe('TextField', () => {
     fireEvent.change(input, { target: { value: 'dev-cluster' } });
     expect(input).toHaveValue('dev-cluster');
   });
+
+  it('renders with xs size', () => {
+    renderWithTheme(
+      <TextField.Root size="xs">
+        <TextField.Control placeholder="xs-field" />
+      </TextField.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('xs-field');
+    expect(input.closest('[data-ov-size]')).toHaveAttribute('data-ov-size', 'xs');
+  });
+
+  it('renders with xl size', () => {
+    renderWithTheme(
+      <TextField.Root size="xl">
+        <TextField.Control placeholder="xl-field" />
+      </TextField.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('xl-field');
+    expect(input.closest('[data-ov-size]')).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders with discovery color', () => {
+    renderWithTheme(
+      <TextField.Root color="discovery">
+        <TextField.Control placeholder="discovery-field" />
+      </TextField.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('discovery-field');
+    expect(input.closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders with secondary color', () => {
+    renderWithTheme(
+      <TextField.Root color="secondary">
+        <TextField.Control placeholder="secondary-field" />
+      </TextField.Root>,
+    );
+
+    const input = screen.getByPlaceholderText('secondary-field');
+    expect(input.closest('[data-ov-color]')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/timeline/Timeline.module.css b/packages/base-ui/src/components/timeline/Timeline.module.css
index eec00f9..3a998ff 100644
--- a/packages/base-ui/src/components/timeline/Timeline.module.css
+++ b/packages/base-ui/src/components/timeline/Timeline.module.css
@@ -267,6 +267,14 @@
   --_ov-timeline-dot-color: var(--ov-color-info);
 }
 
+.Item[data-ov-color='discovery'] {
+  --_ov-timeline-dot-color: var(--ov-color-discovery);
+}
+
+.Item[data-ov-color='secondary'] {
+  --_ov-timeline-dot-color: var(--ov-color-secondary);
+}
+
 /* ---------------------------------------------------------------------------
    Group
    --------------------------------------------------------------------------- */
diff --git a/packages/base-ui/src/components/timeline/Timeline.stories.tsx b/packages/base-ui/src/components/timeline/Timeline.stories.tsx
index 1dea245..bcdc7c7 100644
--- a/packages/base-ui/src/components/timeline/Timeline.stories.tsx
+++ b/packages/base-ui/src/components/timeline/Timeline.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     children: null,
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
 } satisfies Meta<typeof Timeline>;
 
diff --git a/packages/base-ui/src/components/timeline/Timeline.test.tsx b/packages/base-ui/src/components/timeline/Timeline.test.tsx
index 1bdc4f1..c35b96a 100644
--- a/packages/base-ui/src/components/timeline/Timeline.test.tsx
+++ b/packages/base-ui/src/components/timeline/Timeline.test.tsx
@@ -233,4 +233,20 @@ describe('Timeline', () => {
 
     expect(screen.queryByRole('button')).not.toBeInTheDocument();
   });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(
+      <Timeline>
+        <Timeline.Item color="discovery" data-testid="item">Event</Timeline.Item>
+      </Timeline>,
+    );
+    expect(screen.getByTestId('item')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(
+      <Timeline>
+        <Timeline.Item color="secondary" data-testid="item">Event</Timeline.Item>
+      </Timeline>,
+    );
+    expect(screen.getByTestId('item')).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/toast/Toast.module.css b/packages/base-ui/src/components/toast/Toast.module.css
index c0c7d54..9b40455 100644
--- a/packages/base-ui/src/components/toast/Toast.module.css
+++ b/packages/base-ui/src/components/toast/Toast.module.css
@@ -96,6 +96,14 @@
   --_ov-border-accent: var(--ov-color-info);
 }
 
+.Toast[data-ov-severity='discovery'] {
+  --_ov-border-accent: var(--ov-color-discovery);
+}
+
+.Toast[data-ov-severity='secondary'] {
+  --_ov-border-accent: var(--ov-color-secondary);
+}
+
 /* ------------------------------------------------------------------ */
 /* Surface variants                                                    */
 /* ------------------------------------------------------------------ */
diff --git a/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx b/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx
index a2a58f6..75be185 100644
--- a/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx
+++ b/packages/base-ui/src/components/toggle-button-group/ToggleButtonGroup.stories.tsx
@@ -16,8 +16,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
     attached: { control: 'boolean' },
     multiple: { control: 'boolean' },
diff --git a/packages/base-ui/src/components/toggle-button/ToggleButton.module.css b/packages/base-ui/src/components/toggle-button/ToggleButton.module.css
index c7ef4ea..fdb26e6 100644
--- a/packages/base-ui/src/components/toggle-button/ToggleButton.module.css
+++ b/packages/base-ui/src/components/toggle-button/ToggleButton.module.css
@@ -1,3 +1,34 @@
+/* ─── Color accent vars (mirrors Button.module.css for new colors) ─── */
+
+.Root[data-ov-color='info'] {
+  --_ov-accent-bg: var(--ov-color-info);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-info);
+  --_ov-accent-soft-bg: var(--ov-color-info-soft);
+  --_ov-accent-soft-fg: var(--ov-color-info);
+  --_ov-accent-ghost-fg: var(--ov-color-info);
+}
+
+.Root[data-ov-color='discovery'] {
+  --_ov-accent-bg: var(--ov-color-discovery);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-discovery);
+  --_ov-accent-soft-bg: var(--ov-color-discovery-soft);
+  --_ov-accent-soft-fg: var(--ov-color-discovery);
+  --_ov-accent-ghost-fg: var(--ov-color-discovery);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-accent-bg: var(--ov-color-secondary);
+  --_ov-accent-fg: var(--ov-color-fg-inverse);
+  --_ov-accent-border: var(--ov-color-secondary);
+  --_ov-accent-soft-bg: var(--ov-color-secondary-soft);
+  --_ov-accent-soft-fg: var(--ov-color-secondary);
+  --_ov-accent-ghost-fg: var(--ov-color-secondary);
+}
+
+/* ─── Pressed states ─── */
+
 .Root[data-pressed] {
   --_ov-toggle-selected-bg: var(--_ov-accent-soft-bg);
   --_ov-toggle-selected-fg: var(--_ov-accent-soft-fg);
diff --git a/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx b/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx
index 385e819..ae10d64 100644
--- a/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx
+++ b/packages/base-ui/src/components/toggle-button/ToggleButton.stories.tsx
@@ -54,8 +54,8 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     defaultPressed: { control: 'boolean' },
     startIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS },
     endIcon: { control: 'select', options: DECORATOR_ICON_OPTIONS },
diff --git a/packages/base-ui/src/components/toggle-button/ToggleButton.test.tsx b/packages/base-ui/src/components/toggle-button/ToggleButton.test.tsx
index f85981d..b9a420b 100644
--- a/packages/base-ui/src/components/toggle-button/ToggleButton.test.tsx
+++ b/packages/base-ui/src/components/toggle-button/ToggleButton.test.tsx
@@ -43,4 +43,20 @@ describe('ToggleButton', () => {
     expect(button.querySelector('[data-ov-slot="end-decorator"]')).toBeTruthy();
     expect(screen.getByTestId('left')).toBeInTheDocument();
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(<ToggleButton size="xs">Tag</ToggleButton>);
+    expect(screen.getByRole('button', { name: 'Tag' })).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(<ToggleButton size="xl">Tag</ToggleButton>);
+    expect(screen.getByRole('button', { name: 'Tag' })).toHaveAttribute('data-ov-size', 'xl');
+  });
+
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(<ToggleButton color="discovery">Tag</ToggleButton>);
+    expect(screen.getByRole('button', { name: 'Tag' })).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<ToggleButton color="secondary">Tag</ToggleButton>);
+    expect(screen.getByRole('button', { name: 'Tag' })).toHaveAttribute('data-ov-color', 'secondary');
+  });
 });
diff --git a/packages/base-ui/src/components/toolbar/Toolbar.module.css b/packages/base-ui/src/components/toolbar/Toolbar.module.css
index 3983f25..b8a0c32 100644
--- a/packages/base-ui/src/components/toolbar/Toolbar.module.css
+++ b/packages/base-ui/src/components/toolbar/Toolbar.module.css
@@ -4,28 +4,36 @@
   align-items: center;
   gap: var(--ov-space-stack-sm);
   background: transparent;
-  min-height: var(--_ov-toolbar-height, 2.25rem);
+  min-height: var(--_ov-toolbar-height, var(--ov-control-height-md));
 }
 
-.Root[data-ov-size='sm'] {
-  --_ov-toolbar-height: 1.75rem;
+.Root[data-ov-size='xs'] {
+  --_ov-toolbar-height: var(--ov-control-height-xs);
+  font-size: var(--ov-size-button-font-size-xs);
+}
 
-  font-size: var(--ov-font-size-caption);
+.Root[data-ov-size='sm'] {
+  --_ov-toolbar-height: var(--ov-control-height-sm);
+  font-size: var(--ov-size-button-font-size-sm);
 }
 
 .Root[data-ov-size='md'] {
-  --_ov-toolbar-height: 2.25rem;
+  --_ov-toolbar-height: var(--ov-control-height-md);
 }
 
 .Root[data-ov-size='lg'] {
-  --_ov-toolbar-height: 2.75rem;
+  --_ov-toolbar-height: var(--ov-control-height-lg);
+}
+
+.Root[data-ov-size='xl'] {
+  --_ov-toolbar-height: var(--ov-control-height-xl);
 }
 
 .Group {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: var(--_ov-toolbar-group-gap, 4px); /* --ov-space-stack-xs; no semantic token for 4px spacing */
+  gap: var(--_ov-toolbar-group-gap, var(--ov-space-stack-xs));
 }
 
 .Separator {
diff --git a/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx b/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx
index 15c9820..1290aeb 100644
--- a/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx
+++ b/packages/base-ui/src/components/toolbar/Toolbar.stories.tsx
@@ -31,7 +31,7 @@ const meta = {
     'aria-label': 'Toolbar',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   render: (args) => (
     <Toolbar {...args}>
diff --git a/packages/base-ui/src/components/toolbar/Toolbar.test.tsx b/packages/base-ui/src/components/toolbar/Toolbar.test.tsx
index 6e4be66..76797a1 100644
--- a/packages/base-ui/src/components/toolbar/Toolbar.test.tsx
+++ b/packages/base-ui/src/components/toolbar/Toolbar.test.tsx
@@ -139,4 +139,20 @@ describe('Toolbar', () => {
       expect(screen.getByTestId('g')).toHaveClass('group-custom');
     });
   });
+
+  it('renders xs and xl sizes', () => {
+    const { rerender } = renderWithTheme(
+      <Toolbar role="toolbar" aria-label="Actions" size="xs">
+        content
+      </Toolbar>,
+    );
+    expect(screen.getByRole('toolbar')).toHaveAttribute('data-ov-size', 'xs');
+
+    rerender(
+      <Toolbar role="toolbar" aria-label="Actions" size="xl">
+        content
+      </Toolbar>,
+    );
+    expect(screen.getByRole('toolbar')).toHaveAttribute('data-ov-size', 'xl');
+  });
 });
diff --git a/packages/base-ui/src/components/tooltip/Tooltip.module.css b/packages/base-ui/src/components/tooltip/Tooltip.module.css
index a88ab5e..ab6609b 100644
--- a/packages/base-ui/src/components/tooltip/Tooltip.module.css
+++ b/packages/base-ui/src/components/tooltip/Tooltip.module.css
@@ -6,84 +6,11 @@
   z-index: var(--ov-z-tooltip, 140);
 }
 
+/* Trigger is a pass-through — no visual styling.
+   The trigger's appearance comes from whatever element is inside it
+   (e.g., IconButton, Button, Chip). The Tooltip only adds behavior. */
 .Trigger {
-  --_ov-height: var(--ov-size-button-height-md);
-  --_ov-padding-inline: var(--ov-size-button-padding-inline-md);
-  --_ov-bg: var(--ov-color-bg-surface-raised);
-  --_ov-border: var(--ov-color-border-default);
-  --_ov-fg: var(--ov-color-fg-default);
-  --_ov-bg-hover: var(--ov-color-state-hover);
-  --_ov-bg-pressed: var(--ov-color-state-pressed);
-
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--_ov-height);
-  padding: 0 var(--_ov-padding-inline);
-  border-radius: var(--ov-radius-control);
-  border: 1px solid var(--_ov-border);
-  background: var(--_ov-bg);
-  color: var(--_ov-fg);
-  font-family: var(--ov-font-sans);
-  font-size: var(--ov-font-size-body);
-  font-weight: var(--ov-font-weight-label);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    background-color var(--ov-duration-interactive) var(--ov-ease-standard),
-    border-color var(--ov-duration-interactive) var(--ov-ease-standard),
-    color var(--ov-duration-interactive) var(--ov-ease-standard);
-}
-
-.Trigger[data-ov-size='sm'] {
-  --_ov-height: var(--ov-size-button-height-sm);
-  --_ov-padding-inline: var(--ov-size-button-padding-inline-sm);
-  font-size: var(--ov-font-size-caption);
-}
-
-.Trigger[data-ov-size='lg'] {
-  --_ov-height: var(--ov-size-button-height-lg);
-  --_ov-padding-inline: var(--ov-size-button-padding-inline-lg);
-}
-
-.Trigger[data-ov-color='brand'] {
-  --_ov-bg: var(--ov-color-brand-500);
-  --_ov-border: var(--ov-color-brand-400);
-  --_ov-fg: var(--ov-color-fg-inverse);
-}
-
-.Trigger[data-ov-color='danger'] {
-  --_ov-bg: var(--ov-color-danger);
-  --_ov-border: var(--ov-color-danger);
-  --_ov-fg: var(--ov-color-fg-inverse);
-}
-
-.Trigger[data-ov-variant='soft'] {
-  --_ov-bg: var(--ov-color-state-selected);
-  --_ov-border: transparent;
-}
-
-.Trigger[data-ov-variant='outline'] {
-  --_ov-bg: transparent;
-}
-
-.Trigger[data-ov-variant='ghost'] {
-  --_ov-bg: transparent;
-  --_ov-border: transparent;
-}
-
-.Trigger:hover {
-  background: var(--_ov-bg-hover);
-}
-
-.Trigger:active {
-  background: var(--_ov-bg-pressed);
-}
-
-.Trigger:focus-visible {
-  outline: none;
-  border-color: var(--ov-color-border-focus);
-  box-shadow: 0 0 0 1px var(--ov-color-state-focus-ring);
 }
 
 .Popup {
@@ -148,7 +75,21 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Popup[data-ov-color='neutral'] {
+  --_ov-accent-soft: var(--ov-color-state-selected);
+}
+
+.Popup[data-ov-color='info'] {
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Popup[data-ov-color='discovery'] {
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
 
+.Popup[data-ov-color='secondary'] {
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
 
 .Arrow {
   --_ov-bg: var(--ov-color-bg-surface-overlay);
@@ -188,6 +129,22 @@
   --_ov-accent-soft: var(--ov-color-danger-soft);
 }
 
+.Arrow[data-ov-color='neutral'] {
+  --_ov-accent-soft: var(--ov-color-state-selected);
+}
+
+.Arrow[data-ov-color='info'] {
+  --_ov-accent-soft: var(--ov-color-info-soft);
+}
+
+.Arrow[data-ov-color='discovery'] {
+  --_ov-accent-soft: var(--ov-color-discovery-soft);
+}
+
+.Arrow[data-ov-color='secondary'] {
+  --_ov-accent-soft: var(--ov-color-secondary-soft);
+}
+
 .Arrow[data-ov-variant='solid'] {
   --_ov-bg: color-mix(in srgb, var(--ov-color-bg-surface-overlay) 82%, var(--_ov-accent-soft) 18%);
 }
diff --git a/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx b/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx
index 52a2a17..27d2c04 100644
--- a/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx
+++ b/packages/base-ui/src/components/tooltip/Tooltip.stories.tsx
@@ -12,8 +12,8 @@ const meta: Meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['solid', 'soft', 'outline', 'ghost'] },
-    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['neutral', 'brand', 'success', 'warning', 'danger', 'info', 'discovery', 'secondary'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
   },
   parameters: {
     controls: {
diff --git a/packages/base-ui/src/components/tooltip/Tooltip.test.tsx b/packages/base-ui/src/components/tooltip/Tooltip.test.tsx
index c3fa177..a6a57e0 100644
--- a/packages/base-ui/src/components/tooltip/Tooltip.test.tsx
+++ b/packages/base-ui/src/components/tooltip/Tooltip.test.tsx
@@ -5,6 +5,51 @@ import { renderWithTheme } from '../../test/render';
 import { Tooltip } from './Tooltip';
 
 describe('Tooltip', () => {
+  it('renders neutral color on popup', () => {
+    renderWithTheme(
+      <Tooltip.Root defaultOpen color="neutral">
+        <Tooltip.Trigger>Hover</Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Positioner>
+            <Tooltip.Popup>Neutral tip</Tooltip.Popup>
+          </Tooltip.Positioner>
+        </Tooltip.Portal>
+      </Tooltip.Root>,
+    );
+    const popup = screen.getByText('Neutral tip').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'neutral');
+  });
+
+  it('renders discovery color on popup', () => {
+    renderWithTheme(
+      <Tooltip.Root defaultOpen color="discovery">
+        <Tooltip.Trigger>Hover</Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Positioner>
+            <Tooltip.Popup>Discovery tip</Tooltip.Popup>
+          </Tooltip.Positioner>
+        </Tooltip.Portal>
+      </Tooltip.Root>,
+    );
+    const popup = screen.getByText('Discovery tip').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'discovery');
+  });
+
+  it('renders secondary color on popup', () => {
+    renderWithTheme(
+      <Tooltip.Root defaultOpen color="secondary">
+        <Tooltip.Trigger>Hover</Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Positioner>
+            <Tooltip.Popup>Secondary tip</Tooltip.Popup>
+          </Tooltip.Positioner>
+        </Tooltip.Portal>
+      </Tooltip.Root>,
+    );
+    const popup = screen.getByText('Secondary tip').closest('[data-ov-color]');
+    expect(popup).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders themed popup when opened', () => {
     renderWithTheme(
       <Tooltip.Root defaultOpen color="warning" size="sm" variant="outline">
diff --git a/packages/base-ui/src/components/tree-list/TreeList.module.css b/packages/base-ui/src/components/tree-list/TreeList.module.css
index bfd86b3..6cc38f8 100644
--- a/packages/base-ui/src/components/tree-list/TreeList.module.css
+++ b/packages/base-ui/src/components/tree-list/TreeList.module.css
@@ -83,6 +83,14 @@
   --_ov-selected-bg: var(--ov-color-danger-soft);
 }
 
+.Root[data-ov-color='discovery'] {
+  --_ov-selected-bg: var(--ov-color-discovery-soft);
+}
+
+.Root[data-ov-color='secondary'] {
+  --_ov-selected-bg: var(--ov-color-secondary-soft);
+}
+
 /* ---------------------------------------------------------------------------
  * Viewport — themed scrollbar matching ScrollArea
  * Uses scrollbar-gutter: stable to prevent layout shift.
diff --git a/packages/base-ui/src/components/tree-list/TreeList.stories.tsx b/packages/base-ui/src/components/tree-list/TreeList.stories.tsx
index 9e82388..96b063c 100644
--- a/packages/base-ui/src/components/tree-list/TreeList.stories.tsx
+++ b/packages/base-ui/src/components/tree-list/TreeList.stories.tsx
@@ -237,7 +237,7 @@ const meta: Meta<PlaygroundArgs> = {
   argTypes: {
     size: {
       control: 'inline-radio',
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
       description: 'Controls the overall size of tree items (font size, icon size, spacing).',
       table: { defaultValue: { summary: 'md' } },
     },
diff --git a/packages/base-ui/src/components/tree-list/TreeList.test.tsx b/packages/base-ui/src/components/tree-list/TreeList.test.tsx
index 0117982..3239cc8 100644
--- a/packages/base-ui/src/components/tree-list/TreeList.test.tsx
+++ b/packages/base-ui/src/components/tree-list/TreeList.test.tsx
@@ -105,6 +105,14 @@ describe('TreeList', () => {
     expect(root).toHaveAttribute('data-ov-density', 'default');
   });
 
+  it('renders discovery and secondary colors', () => {
+    const { rerender } = renderWithTheme(<TestTree color="discovery" />);
+    expect(screen.getByTestId('tree-root')).toHaveAttribute('data-ov-color', 'discovery');
+
+    rerender(<TestTree color="secondary" />);
+    expect(screen.getByTestId('tree-root')).toHaveAttribute('data-ov-color', 'secondary');
+  });
+
   it('renders all visible item labels', () => {
     renderWithTheme(<TestTree />);
     expect(screen.getByText('src')).toBeInTheDocument();
diff --git a/packages/base-ui/src/components/typography/Blockquote.stories.tsx b/packages/base-ui/src/components/typography/Blockquote.stories.tsx
index 1923ec3..f06860a 100644
--- a/packages/base-ui/src/components/typography/Blockquote.stories.tsx
+++ b/packages/base-ui/src/components/typography/Blockquote.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
   },
   argTypes: {
     variant: { control: 'inline-radio', options: ['emphasis', 'plain'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Caption.stories.tsx b/packages/base-ui/src/components/typography/Caption.stories.tsx
index 678276f..431195e 100644
--- a/packages/base-ui/src/components/typography/Caption.stories.tsx
+++ b/packages/base-ui/src/components/typography/Caption.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
   },
   argTypes: {
     as: { control: 'inline-radio', options: ['span', 'p', 'div'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Code.stories.tsx b/packages/base-ui/src/components/typography/Code.stories.tsx
index 6259ca2..7a003ed 100644
--- a/packages/base-ui/src/components/typography/Code.stories.tsx
+++ b/packages/base-ui/src/components/typography/Code.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     children: '/api/v1/models',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Em.stories.tsx b/packages/base-ui/src/components/typography/Em.stories.tsx
index 8bcbf7b..6043aa3 100644
--- a/packages/base-ui/src/components/typography/Em.stories.tsx
+++ b/packages/base-ui/src/components/typography/Em.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     children: 'Emphasized guidance text',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Heading.stories.tsx b/packages/base-ui/src/components/typography/Heading.stories.tsx
index 3e96989..cde6296 100644
--- a/packages/base-ui/src/components/typography/Heading.stories.tsx
+++ b/packages/base-ui/src/components/typography/Heading.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
   },
   argTypes: {
     level: { control: 'inline-radio', options: [1, 2, 3, 4, 5, 6] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Hotkey.stories.tsx b/packages/base-ui/src/components/typography/Hotkey.stories.tsx
index 7352bbb..b9dad93 100644
--- a/packages/base-ui/src/components/typography/Hotkey.stories.tsx
+++ b/packages/base-ui/src/components/typography/Hotkey.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     children: 'CMD+K',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Link.stories.tsx b/packages/base-ui/src/components/typography/Link.stories.tsx
index 0d0c9c3..67b2ac1 100644
--- a/packages/base-ui/src/components/typography/Link.stories.tsx
+++ b/packages/base-ui/src/components/typography/Link.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
     children: 'Open runtime diagnostics and troubleshooting docs',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Overline.stories.tsx b/packages/base-ui/src/components/typography/Overline.stories.tsx
index b9d5aab..6542b3e 100644
--- a/packages/base-ui/src/components/typography/Overline.stories.tsx
+++ b/packages/base-ui/src/components/typography/Overline.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
   },
   argTypes: {
     as: { control: 'inline-radio', options: ['span', 'p', 'div'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Quote.stories.tsx b/packages/base-ui/src/components/typography/Quote.stories.tsx
index 4ff154f..9da2a61 100644
--- a/packages/base-ui/src/components/typography/Quote.stories.tsx
+++ b/packages/base-ui/src/components/typography/Quote.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     children: 'quoted guidance',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Strong.stories.tsx b/packages/base-ui/src/components/typography/Strong.stories.tsx
index 8a2ea1c..84d9dbd 100644
--- a/packages/base-ui/src/components/typography/Strong.stories.tsx
+++ b/packages/base-ui/src/components/typography/Strong.stories.tsx
@@ -12,7 +12,7 @@ const meta = {
     children: 'Strongly emphasized text',
   },
   argTypes: {
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Text.stories.tsx b/packages/base-ui/src/components/typography/Text.stories.tsx
index bcfe486..0bb9d18 100644
--- a/packages/base-ui/src/components/typography/Text.stories.tsx
+++ b/packages/base-ui/src/components/typography/Text.stories.tsx
@@ -16,7 +16,7 @@ const meta = {
   },
   argTypes: {
     as: { control: 'inline-radio', options: ['span', 'p', 'div', 'label'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/components/typography/Underline.stories.tsx b/packages/base-ui/src/components/typography/Underline.stories.tsx
index 8ff0b61..4d9f649 100644
--- a/packages/base-ui/src/components/typography/Underline.stories.tsx
+++ b/packages/base-ui/src/components/typography/Underline.stories.tsx
@@ -14,7 +14,7 @@ const meta = {
   },
   argTypes: {
     as: { control: 'inline-radio', options: ['u', 'span'] },
-    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
     tone: {
       control: 'select',
       options: ['default', 'muted', 'subtle', 'brand', 'success', 'warning', 'danger'],
diff --git a/packages/base-ui/src/system/types.ts b/packages/base-ui/src/system/types.ts
index d9833e8..e451bed 100644
--- a/packages/base-ui/src/system/types.ts
+++ b/packages/base-ui/src/system/types.ts
@@ -1,6 +1,6 @@
 export type ComponentVariant = 'solid' | 'soft' | 'outline' | 'ghost';
-export type ComponentColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info';
-export type ComponentSize = 'sm' | 'md' | 'lg';
+export type ComponentColor = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'discovery' | 'secondary';
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type Spacing = 0 | 1 | 2 | 3 | 4;
 export type SurfaceElevation = 0 | 1 | 2 | 3;
diff --git a/packages/base-ui/src/theme/styles.css b/packages/base-ui/src/theme/styles.css
index 09e0a44..c26c846 100644
--- a/packages/base-ui/src/theme/styles.css
+++ b/packages/base-ui/src/theme/styles.css
@@ -109,6 +109,7 @@
   --ov-space-stack-sm: var(--ov-primitive-space-2);
   --ov-space-stack-md: var(--ov-primitive-space-3);
   --ov-space-stack-lg: var(--ov-primitive-space-4);
+  --ov-space-stack-xs: var(--ov-primitive-space-1);
 
   --ov-radius-control: var(--ov-primitive-radius-md);
   --ov-radius-surface: var(--ov-primitive-radius-lg);
@@ -118,89 +119,139 @@
   --ov-duration-panel: var(--ov-primitive-duration-normal);
   --ov-ease-standard: var(--ov-primitive-ease-standard);
 
-  --ov-control-height-sm: 28px;
-  --ov-control-height-md: 36px;
-  --ov-control-height-lg: 42px;
+  --ov-control-height-xs: 18px;
+  --ov-control-height-sm: 22px;
+  --ov-control-height-md: 26px;
+  --ov-control-height-lg: 32px;
+  --ov-control-height-xl: 40px;
   --ov-list-row-height: 34px;
   --ov-panel-padding: 16px;
-  --ov-size-button-height-sm: 28px;
-  --ov-size-button-height-md: 36px;
-  --ov-size-button-height-lg: 44px;
-  --ov-size-button-padding-inline-sm: 10px;
-  --ov-size-button-padding-inline-md: 12px;
-  --ov-size-button-padding-inline-lg: 22px;
-  --ov-size-button-font-size-sm: var(--ov-font-size-caption);
-  --ov-size-button-font-size-md: var(--ov-font-size-body);
-  --ov-size-button-font-size-lg: var(--ov-primitive-font-size-16);
-  --ov-size-card-padding-inline-sm: 12px;
-  --ov-size-card-padding-inline-md: 16px;
-  --ov-size-card-padding-inline-lg: 24px;
-  --ov-size-card-padding-block-sm: 10px;
-  --ov-size-card-padding-block-md: 16px;
-  --ov-size-card-padding-block-lg: 22px;
-  --ov-size-card-gap-sm: 8px;
-  --ov-size-card-gap-md: 12px;
-  --ov-size-card-gap-lg: 16px;
-  --ov-size-card-footer-padding-block-sm: 6px;
-  --ov-size-card-footer-padding-block-md: 10px;
-  --ov-size-card-footer-padding-block-lg: 12px;
-  --ov-size-card-footer-gap-sm: 8px;
-  --ov-size-card-footer-gap-md: 10px;
-  --ov-size-card-footer-gap-lg: 12px;
-  --ov-size-card-action-height-sm: 24px;
-  --ov-size-card-action-height-md: 30px;
-  --ov-size-card-action-height-lg: 38px;
-  --ov-size-card-action-padding-inline-sm: 8px;
-  --ov-size-card-action-padding-inline-md: 10px;
-  --ov-size-card-action-padding-inline-lg: 16px;
-  --ov-size-card-action-font-size-sm: var(--ov-font-size-caption);
-  --ov-size-card-action-font-size-md: var(--ov-font-size-body);
-  --ov-size-card-action-font-size-lg: var(--ov-primitive-font-size-16);
-  --ov-size-card-title-font-size-sm: var(--ov-primitive-font-size-13);
-  --ov-size-card-title-font-size-md: var(--ov-font-size-body);
-  --ov-size-card-title-font-size-lg: var(--ov-primitive-font-size-16);
-  --ov-size-card-body-font-size-sm: var(--ov-primitive-font-size-13);
-  --ov-size-card-body-font-size-md: var(--ov-font-size-body);
-  --ov-size-card-body-font-size-lg: var(--ov-primitive-font-size-16);
+  --ov-size-button-height-xs: 18px;
+  --ov-size-button-height-sm: 22px;
+  --ov-size-button-height-md: 26px;
+  --ov-size-button-height-lg: 32px;
+  --ov-size-button-height-xl: 40px;
+  --ov-size-button-padding-inline-xs: 4px;
+  --ov-size-button-padding-inline-sm: 6px;
+  --ov-size-button-padding-inline-md: 8px;
+  --ov-size-button-padding-inline-lg: 12px;
+  --ov-size-button-padding-inline-xl: 16px;
+  --ov-size-button-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-button-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-button-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-button-font-size-lg: var(--ov-primitive-font-size-13);
+  --ov-size-button-font-size-xl: var(--ov-primitive-font-size-14);
+  --ov-size-card-padding-inline-xs: 6px;
+  --ov-size-card-padding-inline-sm: 8px;
+  --ov-size-card-padding-inline-md: 12px;
+  --ov-size-card-padding-inline-lg: 16px;
+  --ov-size-card-padding-inline-xl: 24px;
+  --ov-size-card-padding-block-xs: 4px;
+  --ov-size-card-padding-block-sm: 6px;
+  --ov-size-card-padding-block-md: 10px;
+  --ov-size-card-padding-block-lg: 16px;
+  --ov-size-card-padding-block-xl: 22px;
+  --ov-size-card-gap-xs: 4px;
+  --ov-size-card-gap-sm: 6px;
+  --ov-size-card-gap-md: 8px;
+  --ov-size-card-gap-lg: 12px;
+  --ov-size-card-gap-xl: 16px;
+  --ov-size-card-footer-padding-block-xs: 3px;
+  --ov-size-card-footer-padding-block-sm: 4px;
+  --ov-size-card-footer-padding-block-md: 6px;
+  --ov-size-card-footer-padding-block-lg: 10px;
+  --ov-size-card-footer-padding-block-xl: 12px;
+  --ov-size-card-footer-gap-xs: 4px;
+  --ov-size-card-footer-gap-sm: 6px;
+  --ov-size-card-footer-gap-md: 8px;
+  --ov-size-card-footer-gap-lg: 10px;
+  --ov-size-card-footer-gap-xl: 12px;
+  --ov-size-card-action-height-xs: 16px;
+  --ov-size-card-action-height-sm: 20px;
+  --ov-size-card-action-height-md: 24px;
+  --ov-size-card-action-height-lg: 30px;
+  --ov-size-card-action-height-xl: 38px;
+  --ov-size-card-action-padding-inline-xs: 4px;
+  --ov-size-card-action-padding-inline-sm: 6px;
+  --ov-size-card-action-padding-inline-md: 8px;
+  --ov-size-card-action-padding-inline-lg: 10px;
+  --ov-size-card-action-padding-inline-xl: 16px;
+  --ov-size-card-action-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-card-action-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-card-action-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-card-action-font-size-lg: var(--ov-primitive-font-size-14);
+  --ov-size-card-action-font-size-xl: var(--ov-primitive-font-size-16);
+  --ov-size-card-title-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-card-title-font-size-sm: var(--ov-primitive-font-size-12);
+  --ov-size-card-title-font-size-md: var(--ov-primitive-font-size-13);
+  --ov-size-card-title-font-size-lg: var(--ov-primitive-font-size-14);
+  --ov-size-card-title-font-size-xl: var(--ov-primitive-font-size-16);
+  --ov-size-card-body-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-card-body-font-size-sm: var(--ov-primitive-font-size-12);
+  --ov-size-card-body-font-size-md: var(--ov-primitive-font-size-13);
+  --ov-size-card-body-font-size-lg: var(--ov-primitive-font-size-14);
+  --ov-size-card-body-font-size-xl: var(--ov-primitive-font-size-16);
+  --ov-size-card-description-font-size-xs: var(--ov-primitive-font-size-11);
   --ov-size-card-description-font-size-sm: var(--ov-primitive-font-size-11);
-  --ov-size-card-description-font-size-md: var(--ov-font-size-caption);
-  --ov-size-card-description-font-size-lg: var(--ov-primitive-font-size-13);
-  --ov-size-card-stat-font-size-sm: 1.25rem;
-  --ov-size-card-stat-font-size-md: 1.625rem;
-  --ov-size-card-stat-font-size-lg: 2rem;
+  --ov-size-card-description-font-size-md: var(--ov-primitive-font-size-11);
+  --ov-size-card-description-font-size-lg: var(--ov-primitive-font-size-12);
+  --ov-size-card-description-font-size-xl: var(--ov-primitive-font-size-13);
+  --ov-size-card-stat-font-size-xs: 0.875rem;
+  --ov-size-card-stat-font-size-sm: 1rem;
+  --ov-size-card-stat-font-size-md: 1.25rem;
+  --ov-size-card-stat-font-size-lg: 1.625rem;
+  --ov-size-card-stat-font-size-xl: 2rem;
+  --ov-size-card-eyebrow-font-size-xs: var(--ov-primitive-font-size-11);
   --ov-size-card-eyebrow-font-size-sm: var(--ov-primitive-font-size-11);
   --ov-size-card-eyebrow-font-size-md: var(--ov-primitive-font-size-11);
-  --ov-size-card-eyebrow-font-size-lg: var(--ov-primitive-font-size-12);
-  --ov-size-card-indicator-dot-sm: 6px;
-  --ov-size-card-indicator-dot-md: 8px;
-  --ov-size-card-indicator-dot-lg: 10px;
-  --ov-size-card-group-gap-sm: 8px;
-  --ov-size-card-group-gap-md: 12px;
-  --ov-size-card-group-gap-lg: 16px;
+  --ov-size-card-eyebrow-font-size-lg: var(--ov-primitive-font-size-11);
+  --ov-size-card-eyebrow-font-size-xl: var(--ov-primitive-font-size-12);
+  --ov-size-card-indicator-dot-xs: 4px;
+  --ov-size-card-indicator-dot-sm: 5px;
+  --ov-size-card-indicator-dot-md: 6px;
+  --ov-size-card-indicator-dot-lg: 8px;
+  --ov-size-card-indicator-dot-xl: 10px;
+  --ov-size-card-group-gap-xs: 4px;
+  --ov-size-card-group-gap-sm: 6px;
+  --ov-size-card-group-gap-md: 8px;
+  --ov-size-card-group-gap-lg: 12px;
+  --ov-size-card-group-gap-xl: 16px;
+  --ov-size-icon-button-icon-xs: 12px;
   --ov-size-icon-button-icon-sm: 14px;
   --ov-size-icon-button-icon-md: 16px;
   --ov-size-icon-button-icon-lg: 18px;
+  --ov-size-icon-button-icon-xl: 20px;
   --ov-size-button-group-gap: 8px;
   --ov-size-chip-radius: var(--ov-radius-control);
   --ov-size-chip-radius-sm: var(--ov-primitive-radius-sm);
   --ov-size-chip-radius-md: var(--ov-radius-control);
   --ov-size-chip-radius-lg: var(--ov-radius-control);
   --ov-size-chip-group-gap: 6px;
-  --ov-size-chip-height-sm: 20px;
-  --ov-size-chip-height-md: 24px;
-  --ov-size-chip-height-lg: 28px;
-  --ov-size-chip-padding-inline-sm: 8px;
-  --ov-size-chip-padding-inline-md: 10px;
-  --ov-size-chip-padding-inline-lg: 12px;
+  --ov-size-chip-height-xs: 16px;
+  --ov-size-chip-height-sm: 18px;
+  --ov-size-chip-height-md: 20px;
+  --ov-size-chip-height-lg: 24px;
+  --ov-size-chip-height-xl: 28px;
+  --ov-size-chip-padding-inline-xs: 4px;
+  --ov-size-chip-padding-inline-sm: 6px;
+  --ov-size-chip-padding-inline-md: 8px;
+  --ov-size-chip-padding-inline-lg: 10px;
+  --ov-size-chip-padding-inline-xl: 12px;
+  --ov-size-chip-font-size-xs: var(--ov-primitive-font-size-11);
   --ov-size-chip-font-size-sm: var(--ov-primitive-font-size-11);
-  --ov-size-chip-font-size-md: var(--ov-font-size-caption);
-  --ov-size-chip-font-size-lg: var(--ov-primitive-font-size-13);
-  --ov-size-chip-gap-sm: 4px;
-  --ov-size-chip-gap-md: 6px;
-  --ov-size-chip-gap-lg: 8px;
+  --ov-size-chip-font-size-md: var(--ov-primitive-font-size-11);
+  --ov-size-chip-font-size-lg: var(--ov-primitive-font-size-12);
+  --ov-size-chip-font-size-xl: var(--ov-primitive-font-size-13);
+  --ov-size-chip-gap-xs: 2px;
+  --ov-size-chip-gap-sm: 3px;
+  --ov-size-chip-gap-md: 4px;
+  --ov-size-chip-gap-lg: 6px;
+  --ov-size-chip-gap-xl: 8px;
+  --ov-size-chip-icon-size-xs: 10px;
   --ov-size-chip-icon-size-sm: 12px;
-  --ov-size-chip-icon-size-md: 14px;
-  --ov-size-chip-icon-size-lg: 16px;
+  --ov-size-chip-icon-size-md: 12px;
+  --ov-size-chip-icon-size-lg: 14px;
+  --ov-size-chip-icon-size-xl: 16px;
   --ov-size-typography-text-sm: var(--ov-font-size-caption);
   --ov-size-typography-text-md: var(--ov-font-size-body);
   --ov-size-typography-text-lg: var(--ov-primitive-font-size-16);
@@ -224,146 +275,224 @@
   --ov-size-typography-hotkey-padding-block: 3px;
   --ov-size-typography-hotkey-radius: calc(var(--ov-radius-control) - 2px);
   --ov-size-typography-hotkey-min-height: 22px;
-  --ov-size-avatar-sm: 24px;
-  --ov-size-avatar-md: 32px;
-  --ov-size-avatar-lg: 40px;
-  --ov-size-avatar-font-size-sm: var(--ov-font-size-caption);
-  --ov-size-avatar-font-size-md: var(--ov-primitive-font-size-13);
-  --ov-size-avatar-font-size-lg: var(--ov-font-size-body);
+  --ov-size-avatar-xs: 18px;
+  --ov-size-avatar-sm: 22px;
+  --ov-size-avatar-md: 26px;
+  --ov-size-avatar-lg: 32px;
+  --ov-size-avatar-xl: 40px;
+  --ov-size-avatar-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-avatar-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-avatar-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-avatar-font-size-lg: var(--ov-primitive-font-size-13);
+  --ov-size-avatar-font-size-xl: var(--ov-primitive-font-size-14);
+  --ov-size-avatar-icon-size-xs: 10px;
   --ov-size-avatar-icon-size-sm: 12px;
-  --ov-size-avatar-icon-size-md: 16px;
-  --ov-size-avatar-icon-size-lg: 18px;
+  --ov-size-avatar-icon-size-md: 14px;
+  --ov-size-avatar-icon-size-lg: 16px;
+  --ov-size-avatar-icon-size-xl: 18px;
   --ov-size-avatar-radius-rounded: var(--ov-radius-control);
-  --ov-size-avatar-group-overlap-sm: 8px;
-  --ov-size-avatar-group-overlap-md: 10px;
-  --ov-size-avatar-group-overlap-lg: 12px;
-  --ov-size-choice-control-sm: 16px;
-  --ov-size-choice-control-md: 18px;
-  --ov-size-choice-control-lg: 20px;
-  --ov-size-choice-indicator-sm: 10px;
-  --ov-size-choice-indicator-md: 12px;
-  --ov-size-choice-indicator-lg: 14px;
-  --ov-size-choice-gap-sm: 8px;
-  --ov-size-choice-gap-md: 10px;
-  --ov-size-choice-gap-lg: 12px;
+  --ov-size-avatar-group-overlap-xs: 6px;
+  --ov-size-avatar-group-overlap-sm: 7px;
+  --ov-size-avatar-group-overlap-md: 8px;
+  --ov-size-avatar-group-overlap-lg: 10px;
+  --ov-size-avatar-group-overlap-xl: 12px;
+  --ov-size-choice-control-xs: 12px;
+  --ov-size-choice-control-sm: 14px;
+  --ov-size-choice-control-md: 16px;
+  --ov-size-choice-control-lg: 18px;
+  --ov-size-choice-control-xl: 20px;
+  --ov-size-choice-indicator-xs: 8px;
+  --ov-size-choice-indicator-sm: 9px;
+  --ov-size-choice-indicator-md: 10px;
+  --ov-size-choice-indicator-lg: 12px;
+  --ov-size-choice-indicator-xl: 14px;
+  --ov-size-choice-gap-xs: 6px;
+  --ov-size-choice-gap-sm: 7px;
+  --ov-size-choice-gap-md: 8px;
+  --ov-size-choice-gap-lg: 10px;
+  --ov-size-choice-gap-xl: 12px;
   --ov-size-choice-radius: var(--ov-primitive-radius-sm);
-  --ov-size-switch-track-width-sm: 34px;
-  --ov-size-switch-track-width-md: 40px;
-  --ov-size-switch-track-width-lg: 46px;
-  --ov-size-switch-track-height-sm: 20px;
-  --ov-size-switch-track-height-md: 24px;
-  --ov-size-switch-track-height-lg: 28px;
-  --ov-size-switch-thumb-size-sm: 16px;
-  --ov-size-switch-thumb-size-md: 20px;
-  --ov-size-switch-thumb-size-lg: 24px;
-  --ov-size-switch-gap-sm: 8px;
-  --ov-size-switch-gap-md: 10px;
-  --ov-size-switch-gap-lg: 12px;
+  --ov-size-switch-track-width-xs: 26px;
+  --ov-size-switch-track-width-sm: 30px;
+  --ov-size-switch-track-width-md: 34px;
+  --ov-size-switch-track-width-lg: 40px;
+  --ov-size-switch-track-width-xl: 46px;
+  --ov-size-switch-track-height-xs: 14px;
+  --ov-size-switch-track-height-sm: 16px;
+  --ov-size-switch-track-height-md: 20px;
+  --ov-size-switch-track-height-lg: 24px;
+  --ov-size-switch-track-height-xl: 28px;
+  --ov-size-switch-thumb-size-xs: 10px;
+  --ov-size-switch-thumb-size-sm: 12px;
+  --ov-size-switch-thumb-size-md: 16px;
+  --ov-size-switch-thumb-size-lg: 20px;
+  --ov-size-switch-thumb-size-xl: 24px;
+  --ov-size-switch-gap-xs: 6px;
+  --ov-size-switch-gap-sm: 7px;
+  --ov-size-switch-gap-md: 8px;
+  --ov-size-switch-gap-lg: 10px;
+  --ov-size-switch-gap-xl: 12px;
   --ov-size-list-item-gap: 4px;
   --ov-size-list-item-radius: var(--ov-radius-control);
+  --ov-size-list-item-height-xs: 18px;
   --ov-size-list-item-height-sm: 22px;
-  --ov-size-list-item-height-md: 30px;
-  --ov-size-list-item-height-lg: 36px;
-  --ov-size-list-item-padding-inline-sm: 7px;
-  --ov-size-list-item-padding-inline-md: 10px;
-  --ov-size-list-item-padding-inline-lg: 12px;
-  --ov-size-list-group-label-font-size-sm: var(--ov-font-size-caption);
-  --ov-size-list-group-label-font-size-md: var(--ov-primitive-font-size-13);
-  --ov-size-list-group-label-font-size-lg: var(--ov-font-size-body);
+  --ov-size-list-item-height-md: 26px;
+  --ov-size-list-item-height-lg: 30px;
+  --ov-size-list-item-height-xl: 36px;
+  --ov-size-list-item-padding-inline-xs: 4px;
+  --ov-size-list-item-padding-inline-sm: 6px;
+  --ov-size-list-item-padding-inline-md: 8px;
+  --ov-size-list-item-padding-inline-lg: 10px;
+  --ov-size-list-item-padding-inline-xl: 12px;
+  --ov-size-list-group-label-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-list-group-label-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-list-group-label-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-list-group-label-font-size-lg: var(--ov-primitive-font-size-13);
+  --ov-size-list-group-label-font-size-xl: var(--ov-primitive-font-size-14);
+  --ov-size-list-group-label-gap-top-xs: 1px;
   --ov-size-list-group-label-gap-top-sm: 2px;
-  --ov-size-list-group-label-gap-top-md: 4px;
-  --ov-size-list-group-label-gap-top-lg: 6px;
-  --ov-size-list-group-label-gap-after-sm: 4px;
-  --ov-size-list-group-label-gap-after-md: 6px;
-  --ov-size-list-group-label-gap-after-lg: 8px;
+  --ov-size-list-group-label-gap-top-md: 3px;
+  --ov-size-list-group-label-gap-top-lg: 4px;
+  --ov-size-list-group-label-gap-top-xl: 6px;
+  --ov-size-list-group-label-gap-after-xs: 2px;
+  --ov-size-list-group-label-gap-after-sm: 3px;
+  --ov-size-list-group-label-gap-after-md: 4px;
+  --ov-size-list-group-label-gap-after-lg: 6px;
+  --ov-size-list-group-label-gap-after-xl: 8px;
+  --ov-size-separator-thickness-xs: 1px;
   --ov-size-separator-thickness-sm: 1px;
-  --ov-size-separator-thickness-md: 2px;
-  --ov-size-separator-thickness-lg: 3px;
-  --ov-size-separator-inset-sm: 8px;
-  --ov-size-separator-inset-md: 12px;
-  --ov-size-separator-inset-lg: 16px;
+  --ov-size-separator-thickness-md: 1px;
+  --ov-size-separator-thickness-lg: 2px;
+  --ov-size-separator-thickness-xl: 3px;
+  --ov-size-separator-inset-xs: 4px;
+  --ov-size-separator-inset-sm: 6px;
+  --ov-size-separator-inset-md: 8px;
+  --ov-size-separator-inset-lg: 12px;
+  --ov-size-separator-inset-xl: 16px;
+  --ov-size-separator-label-font-size-xs: var(--ov-primitive-font-size-11);
   --ov-size-separator-label-font-size-sm: var(--ov-primitive-font-size-11);
-  --ov-size-separator-label-font-size-md: var(--ov-font-size-caption);
-  --ov-size-separator-label-font-size-lg: var(--ov-primitive-font-size-13);
+  --ov-size-separator-label-font-size-md: var(--ov-primitive-font-size-11);
+  --ov-size-separator-label-font-size-lg: var(--ov-primitive-font-size-12);
+  --ov-size-separator-label-font-size-xl: var(--ov-primitive-font-size-13);
   --ov-size-separator-min-block-size: 20px;
   --ov-size-action-list-gap: 4px;
-  --ov-size-action-list-item-height-sm: 24px;
-  --ov-size-action-list-item-height-md: 30px;
-  --ov-size-action-list-item-height-lg: 36px;
-  --ov-size-action-list-item-padding-inline-sm: 8px;
-  --ov-size-action-list-item-padding-inline-md: 12px;
-  --ov-size-action-list-item-padding-inline-lg: 14px;
+  --ov-size-action-list-item-height-xs: 18px;
+  --ov-size-action-list-item-height-sm: 22px;
+  --ov-size-action-list-item-height-md: 26px;
+  --ov-size-action-list-item-height-lg: 30px;
+  --ov-size-action-list-item-height-xl: 36px;
+  --ov-size-action-list-item-padding-inline-xs: 4px;
+  --ov-size-action-list-item-padding-inline-sm: 6px;
+  --ov-size-action-list-item-padding-inline-md: 8px;
+  --ov-size-action-list-item-padding-inline-lg: 12px;
+  --ov-size-action-list-item-padding-inline-xl: 14px;
+  --ov-size-action-list-icon-size-xs: 12px;
   --ov-size-action-list-icon-size-sm: 14px;
   --ov-size-action-list-icon-size-md: 16px;
   --ov-size-action-list-icon-size-lg: 18px;
-  --ov-size-action-list-shortcut-min-width-sm: 28px;
-  --ov-size-action-list-shortcut-min-width-md: 34px;
-  --ov-size-action-list-shortcut-min-width-lg: 40px;
+  --ov-size-action-list-icon-size-xl: 20px;
+  --ov-size-action-list-shortcut-min-width-xs: 22px;
+  --ov-size-action-list-shortcut-min-width-sm: 26px;
+  --ov-size-action-list-shortcut-min-width-md: 30px;
+  --ov-size-action-list-shortcut-min-width-lg: 34px;
+  --ov-size-action-list-shortcut-min-width-xl: 40px;
   --ov-size-table-radius: var(--ov-radius-surface);
-  --ov-size-table-cell-padding-inline-sm: 10px;
-  --ov-size-table-cell-padding-inline-md: 14px;
-  --ov-size-table-cell-padding-inline-lg: 16px;
-  --ov-size-table-cell-padding-block-sm: 7px;
-  --ov-size-table-cell-padding-block-md: 10px;
-  --ov-size-table-cell-padding-block-lg: 12px;
-  --ov-size-table-header-font-size-sm: var(--ov-primitive-font-size-13);
-  --ov-size-table-header-font-size-md: var(--ov-font-size-body);
-  --ov-size-table-header-font-size-lg: var(--ov-primitive-font-size-16);
-  --ov-size-table-cell-font-size-sm: var(--ov-font-size-caption);
-  --ov-size-table-cell-font-size-md: var(--ov-font-size-body);
-  --ov-size-table-cell-font-size-lg: var(--ov-primitive-font-size-16);
+  --ov-size-table-cell-padding-inline-xs: 6px;
+  --ov-size-table-cell-padding-inline-sm: 8px;
+  --ov-size-table-cell-padding-inline-md: 10px;
+  --ov-size-table-cell-padding-inline-lg: 14px;
+  --ov-size-table-cell-padding-inline-xl: 16px;
+  --ov-size-table-cell-padding-block-xs: 3px;
+  --ov-size-table-cell-padding-block-sm: 4px;
+  --ov-size-table-cell-padding-block-md: 6px;
+  --ov-size-table-cell-padding-block-lg: 10px;
+  --ov-size-table-cell-padding-block-xl: 12px;
+  --ov-size-table-header-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-table-header-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-table-header-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-table-header-font-size-lg: var(--ov-primitive-font-size-14);
+  --ov-size-table-header-font-size-xl: var(--ov-primitive-font-size-16);
+  --ov-size-table-cell-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-table-cell-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-table-cell-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-table-cell-font-size-lg: var(--ov-primitive-font-size-14);
+  --ov-size-table-cell-font-size-xl: var(--ov-primitive-font-size-16);
+  --ov-size-table-caption-font-size-xs: var(--ov-primitive-font-size-11);
   --ov-size-table-caption-font-size-sm: var(--ov-primitive-font-size-11);
-  --ov-size-table-caption-font-size-md: var(--ov-font-size-caption);
-  --ov-size-table-caption-font-size-lg: var(--ov-primitive-font-size-13);
-  --ov-size-table-row-height-sm: 30px;
-  --ov-size-table-row-height-md: 36px;
-  --ov-size-table-row-height-lg: 44px;
+  --ov-size-table-caption-font-size-md: var(--ov-primitive-font-size-11);
+  --ov-size-table-caption-font-size-lg: var(--ov-primitive-font-size-12);
+  --ov-size-table-caption-font-size-xl: var(--ov-primitive-font-size-13);
+  --ov-size-table-row-height-xs: 22px;
+  --ov-size-table-row-height-sm: 26px;
+  --ov-size-table-row-height-md: 30px;
+  --ov-size-table-row-height-lg: 36px;
+  --ov-size-table-row-height-xl: 44px;
   --ov-size-table-resize-handle-width: 4px;
   --ov-size-table-expand-indent: 24px;
   --ov-size-table-nested-inset: 24px;
 
-  --ov-size-sheet-padding-sm: 8px;
-  --ov-size-sheet-padding-md: 16px;
-  --ov-size-sheet-padding-lg: 24px;
+  --ov-size-sheet-padding-xs: 4px;
+  --ov-size-sheet-padding-sm: 6px;
+  --ov-size-sheet-padding-md: 12px;
+  --ov-size-sheet-padding-lg: 16px;
+  --ov-size-sheet-padding-xl: 24px;
   --ov-size-container-sm: 640px;
   --ov-size-container-md: 768px;
   --ov-size-container-lg: 1024px;
   --ov-size-container-xl: 1280px;
   --ov-size-container-gutter: var(--ov-primitive-space-4);
   --ov-size-image-list-gap: var(--ov-primitive-space-2);
-  --ov-size-banner-padding-inline-sm: 10px;
-  --ov-size-banner-padding-inline-md: 14px;
-  --ov-size-banner-padding-inline-lg: 18px;
-  --ov-size-banner-padding-block-sm: 8px;
-  --ov-size-banner-padding-block-md: 12px;
-  --ov-size-banner-padding-block-lg: 16px;
-  --ov-size-banner-gap-sm: 8px;
-  --ov-size-banner-gap-md: 10px;
-  --ov-size-banner-gap-lg: 12px;
-  --ov-size-banner-icon-size-sm: 16px;
-  --ov-size-banner-icon-size-md: 18px;
-  --ov-size-banner-icon-size-lg: 20px;
-  --ov-size-banner-title-font-size-sm: var(--ov-primitive-font-size-13);
-  --ov-size-banner-title-font-size-md: var(--ov-font-size-body);
-  --ov-size-banner-title-font-size-lg: var(--ov-primitive-font-size-16);
-  --ov-size-banner-body-font-size-sm: var(--ov-font-size-caption);
-  --ov-size-banner-body-font-size-md: var(--ov-primitive-font-size-13);
-  --ov-size-banner-body-font-size-lg: var(--ov-font-size-body);
-  --ov-size-progress-height-sm: 4px;
-  --ov-size-progress-height-md: 6px;
-  --ov-size-progress-height-lg: 8px;
+  --ov-size-banner-padding-inline-xs: 6px;
+  --ov-size-banner-padding-inline-sm: 8px;
+  --ov-size-banner-padding-inline-md: 10px;
+  --ov-size-banner-padding-inline-lg: 14px;
+  --ov-size-banner-padding-inline-xl: 18px;
+  --ov-size-banner-padding-block-xs: 4px;
+  --ov-size-banner-padding-block-sm: 6px;
+  --ov-size-banner-padding-block-md: 8px;
+  --ov-size-banner-padding-block-lg: 12px;
+  --ov-size-banner-padding-block-xl: 16px;
+  --ov-size-banner-gap-xs: 4px;
+  --ov-size-banner-gap-sm: 6px;
+  --ov-size-banner-gap-md: 8px;
+  --ov-size-banner-gap-lg: 10px;
+  --ov-size-banner-gap-xl: 12px;
+  --ov-size-banner-icon-size-xs: 12px;
+  --ov-size-banner-icon-size-sm: 14px;
+  --ov-size-banner-icon-size-md: 16px;
+  --ov-size-banner-icon-size-lg: 18px;
+  --ov-size-banner-icon-size-xl: 20px;
+  --ov-size-banner-title-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-banner-title-font-size-sm: var(--ov-primitive-font-size-12);
+  --ov-size-banner-title-font-size-md: var(--ov-primitive-font-size-13);
+  --ov-size-banner-title-font-size-lg: var(--ov-primitive-font-size-14);
+  --ov-size-banner-title-font-size-xl: var(--ov-primitive-font-size-16);
+  --ov-size-banner-body-font-size-xs: var(--ov-primitive-font-size-11);
+  --ov-size-banner-body-font-size-sm: var(--ov-primitive-font-size-11);
+  --ov-size-banner-body-font-size-md: var(--ov-primitive-font-size-12);
+  --ov-size-banner-body-font-size-lg: var(--ov-primitive-font-size-13);
+  --ov-size-banner-body-font-size-xl: var(--ov-primitive-font-size-14);
+  --ov-size-progress-height-xs: 2px;
+  --ov-size-progress-height-sm: 3px;
+  --ov-size-progress-height-md: 4px;
+  --ov-size-progress-height-lg: 6px;
+  --ov-size-progress-height-xl: 8px;
   --ov-size-progress-radius: 999px;
   --ov-color-progress-track: var(--ov-color-bg-inset);
   --ov-color-progress-fill: var(--ov-color-brand-500);
+  --ov-size-scrollarea-scrollbar-xs: 4px;
   --ov-size-scrollarea-scrollbar-sm: 6px;
   --ov-size-scrollarea-scrollbar-md: 8px;
   --ov-size-scrollarea-scrollbar-lg: 10px;
+  --ov-size-scrollarea-scrollbar-xl: 12px;
   --ov-color-scrollarea-thumb: var(--ov-primitive-gray-500);
   --ov-color-scrollarea-thumb-hover: var(--ov-primitive-gray-600);
   --ov-color-scrollarea-track: transparent;
-  --ov-size-spinner-sm: 16px;
-  --ov-size-spinner-md: 20px;
-  --ov-size-spinner-lg: 28px;
+  --ov-size-spinner-xs: 12px;
+  --ov-size-spinner-sm: 14px;
+  --ov-size-spinner-md: 16px;
+  --ov-size-spinner-lg: 20px;
+  --ov-size-spinner-xl: 28px;
   --ov-size-drawer-handle-thickness: 4px;
   --ov-size-drawer-handle-length: 32px;
   --ov-color-drawer-handle: var(--ov-color-border-strong);
@@ -402,6 +531,10 @@
   --ov-color-danger-soft: rgb(196 95 95 / 0.17);
   --ov-color-info: #7092e8;
   --ov-color-info-soft: rgb(112 146 232 / 0.17);
+  --ov-color-discovery: var(--ov-primitive-purple-500);
+  --ov-color-discovery-soft: rgb(147 99 219 / 0.17);
+  --ov-color-secondary: var(--ov-primitive-cyan-500);
+  --ov-color-secondary-soft: rgb(63 176 201 / 0.17);
 
   --ov-color-state-hover: rgb(161 169 182 / 0.11);
   --ov-color-state-pressed: rgb(161 169 182 / 0.2);
@@ -548,6 +681,10 @@
   --ov-color-danger-soft: rgb(173 79 79 / 0.12);
   --ov-color-info: #5a7fe2;
   --ov-color-info-soft: rgb(90 127 226 / 0.12);
+  --ov-color-discovery: var(--ov-primitive-purple-600);
+  --ov-color-discovery-soft: rgb(124 78 196 / 0.12);
+  --ov-color-secondary: var(--ov-primitive-cyan-600);
+  --ov-color-secondary-soft: rgb(46 151 174 / 0.12);
 
   --ov-color-state-hover: rgb(75 85 100 / 0.08);
   --ov-color-state-pressed: rgb(75 85 100 / 0.14);
@@ -653,6 +790,10 @@
   --ov-color-danger-soft: rgb(255 159 159 / 0.24);
   --ov-color-info: #a6c8ff;
   --ov-color-info-soft: rgb(166 200 255 / 0.25);
+  --ov-color-discovery: var(--ov-primitive-purple-300);
+  --ov-color-discovery-soft: rgb(184 154 238 / 0.25);
+  --ov-color-secondary: var(--ov-primitive-cyan-300);
+  --ov-color-secondary-soft: rgb(122 212 232 / 0.25);
 
   --ov-color-state-hover: rgb(255 255 255 / 0.16);
   --ov-color-state-pressed: rgb(255 255 255 / 0.24);
@@ -750,6 +891,10 @@
   --ov-color-danger-soft: rgb(143 0 0 / 0.16);
   --ov-color-info: #004ad7;
   --ov-color-info-soft: rgb(0 74 215 / 0.16);
+  --ov-color-discovery: var(--ov-primitive-purple-600);
+  --ov-color-discovery-soft: rgb(124 78 196 / 0.16);
+  --ov-color-secondary: var(--ov-primitive-cyan-600);
+  --ov-color-secondary-soft: rgb(46 151 174 / 0.16);
 
   --ov-color-state-hover: rgb(0 0 0 / 0.08);
   --ov-color-state-pressed: rgb(0 0 0 / 0.14);
@@ -852,6 +997,10 @@
   --ov-color-danger-soft: rgb(212 85 85 / 0.15);
   --ov-color-info: var(--ov-color-brand-400);
   --ov-color-info-soft: rgb(99 145 255 / 0.15);
+  --ov-color-discovery: var(--ov-primitive-purple-500);
+  --ov-color-discovery-soft: rgb(147 99 219 / 0.15);
+  --ov-color-secondary: var(--ov-primitive-cyan-500);
+  --ov-color-secondary-soft: rgb(63 176 201 / 0.15);
 
   --ov-color-state-hover: rgb(160 170 185 / 0.09);
   --ov-color-state-pressed: rgb(160 170 185 / 0.16);
@@ -897,6 +1046,10 @@
   --ov-color-danger-soft: rgb(212 85 85 / 0.15);
   --ov-color-info: var(--ov-color-brand-400);
   --ov-color-info-soft: rgb(105 160 255 / 0.15);
+  --ov-color-discovery: var(--ov-primitive-purple-500);
+  --ov-color-discovery-soft: rgb(147 99 219 / 0.15);
+  --ov-color-secondary: var(--ov-primitive-cyan-500);
+  --ov-color-secondary-soft: rgb(63 176 201 / 0.15);
 
   --ov-color-state-hover: rgb(160 160 160 / 0.09);
   --ov-color-state-pressed: rgb(160 160 160 / 0.16);
@@ -942,6 +1095,10 @@
   --ov-color-danger-soft: rgb(212 85 85 / 0.13);
   --ov-color-info: var(--ov-color-brand-400);
   --ov-color-info-soft: rgb(107 155 255 / 0.13);
+  --ov-color-discovery: var(--ov-primitive-purple-500);
+  --ov-color-discovery-soft: rgb(147 99 219 / 0.13);
+  --ov-color-secondary: var(--ov-primitive-cyan-500);
+  --ov-color-secondary-soft: rgb(63 176 201 / 0.13);
 
   --ov-color-state-hover: rgb(160 165 175 / 0.08);
   --ov-color-state-pressed: rgb(160 165 175 / 0.14);