diff --git a/exec/cli.js b/exec/cli.js
index 92ed266..37ab204 100755
--- a/exec/cli.js
+++ b/exec/cli.js
@@ -18,7 +18,7 @@ Initialization Summary:`),a.info(`  Components Dir: ${f.bold(N)}`),a.info(`  CSS
 ${r.name} (${i})
 `),a.info(`Status:                ${d?f.green("installed"):f.dim("available")}`),a.info(`Install:               ${f.bold(b.installCommand)}`),a.info(`Exports:               ${g.join(", ")||r.name}`),a.info(`NPM Dependencies:      ${b.dependencies.join(", ")||"none"}`),a.info(`Registry Dependencies: ${b.registryDependencies.join(", ")||"none"}`),x.length>0){a.bold(`
 Props Definitions:`);for(let k of x)console.log(`
-${k}`)}console.log()}async function ge(e="AGENTS.md",t){let s=await I(),i=T(s),r=t??await $(),p=S((r==null?void 0:r.componentsDir)??i.components)||i.components,o=S((r==null?void 0:r.cssDir)??i.css),l=o?`${o}/dashkit.css`:"dashkit.css",c=u.resolve(process.cwd(),e),n=Object.keys(w).sort((m,g)=>m.localeCompare(g)),d=["<!-- dashkit:ai-rules:start -->","## Dashkit UI \u2014 AI Assistant Guidelines","",`- **Components Directory**: \`${p}\` (import from \`${p}/<Component>\` or barrel \`${p}\`)`,`- **Theme & Tokens File**: \`${l}\``,"- **Install Components**: `bunx carllosnc/dashkit add <components...>`","- **Inspect Component Props**: `bunx carllosnc/dashkit info <component> --json`",`- **Available Components (${n.length})**: ${n.map(m=>`\`${m}\``).join(", ")}`,"","### 3-Tier AI Customization Protocol",`1. **Global Theme (\`${l}\`)**: Edit \`:root\` / \`.dark\` variables (\`--ds-primary\`, \`--ds-bg\`, \`--ds-card\`, \`--radius\`, \`--ds-primary-gradient\`) or set \`data-primary\` / \`data-base\` attributes. Never scatter inline theme classes across pages.`,`2. **Component Variants (\`${p}/<Component>/<Component>.tsx\`)**: Edit \`cva(...)\` variants directly inside the component file when changing a component across the app.`,'3. **Instance Overrides (`className` & `data-slot`)**: Use `className` (merged via `cn()`) or `data-slot` selectors (`className="[&_[data-slot=label]]:uppercase"`) for one-off tweaks.',"","### Component API Patterns","- **Compound (`children`)**: `Card` (`CardHeader`, `CardContent`, `CardFooter`), `Tabs` (`TabsList`, `TabsTrigger`, `TabsContent`), `Accordion` (`AccordionItem`, `AccordionTrigger`, `AccordionContent`), `Modal` (`ModalHeader`, `ModalContent`, `ModalFooter`), `Drawer` (`DrawerHeader`, `DrawerContent`, `DrawerFooter`), `Dropdown`, `Popover`, `Table`, `Navbar`, `Breadcrumb`, `Stepper`.","- **Prop-Driven (`options` / props)**: `Select` & `Combobox` use `options={[{ value, label }]}`; `Input`, `Textarea`, `DatePicker`, `DateField`, `ColorPicker`, `CopyField`, `OtpInput`, `Checkbox`, `Radio`, `Switch`, `Slider` take `label`, `description`/`helperText`, `error` as props; `StatsCard` takes `title`, `value`, `trend`, `status`, `chart`.","<!-- dashkit:ai-rules:end -->"].join(`
+${k}`)}console.log()}async function ge(e="AGENTS.md",t){let s=await I(),i=T(s),r=t??await $(),p=S((r==null?void 0:r.componentsDir)??i.components)||i.components,o=S((r==null?void 0:r.cssDir)??i.css),l=o?`${o}/dashkit.css`:"dashkit.css",c=u.resolve(process.cwd(),e),n=Object.keys(w).sort((m,g)=>m.localeCompare(g)),d=["<!-- dashkit:ai-rules:start -->","## Dashkit UI \u2014 AI Assistant Guidelines","",`- **Components Directory**: \`${p}\` (import from \`${p}/<Component>\` or barrel \`${p}\`)`,`- **Theme & Tokens File**: \`${l}\``,"- **Install Components**: `bunx carllosnc/dashkit add <components...>`","- **Inspect Component Props**: `bunx carllosnc/dashkit info <component> --json`",`- **Available Components (${n.length})**: ${n.map(m=>`\`${m}\``).join(", ")}`,"","### 3-Tier AI Customization Protocol",`1. **Global Theme (\`${l}\`)**: Edit \`:root\` / \`.dark\` variables (\`--ds-primary\`, \`--ds-bg\`, \`--ds-card\`, \`--radius\`, \`--ds-pill-radius\`, \`--ds-border-width\`, \`--ds-button-border\`, \`--ds-button-shadow\`, \`--ds-card-shadow\`, \`--ds-input-shadow\`, \`--ds-primary-gradient\`) or set \`data-primary\` / \`data-base\` attributes. Never scatter inline theme classes across pages.`,`2. **Component Variants (\`${p}/<Component>/<Component>.tsx\`)**: Edit \`cva(...)\` variants directly inside the component file when changing a component across the app.`,'3. **Instance Overrides (`className` & `data-slot`)**: Use `className` (merged via `cn()`) or `data-slot` selectors (`className="[&_[data-slot=label]]:uppercase"`) for one-off tweaks.',"","### Component API Patterns","- **Compound (`children`)**: `Card` (`CardHeader`, `CardContent`, `CardFooter`), `Tabs` (`TabsList`, `TabsTrigger`, `TabsContent`), `Accordion` (`AccordionItem`, `AccordionTrigger`, `AccordionContent`), `Modal` (`ModalHeader`, `ModalContent`, `ModalFooter`), `Drawer` (`DrawerHeader`, `DrawerContent`, `DrawerFooter`), `Dropdown`, `Popover`, `Table`, `Navbar`, `Breadcrumb`, `Stepper`.","- **Prop-Driven (`options` / props)**: `Select` & `Combobox` use `options={[{ value, label }]}`; `Input`, `Textarea`, `DatePicker`, `DateField`, `ColorPicker`, `CopyField`, `OtpInput`, `Checkbox`, `Radio`, `Switch`, `Slider` take `label`, `description`/`helperText`, `error` as props; `StatsCard` takes `title`, `value`, `trend`, `status`, `chart`.","<!-- dashkit:ai-rules:end -->"].join(`
 `);if(await h.pathExists(c)){let m=await h.readFile(c,"utf8"),g=/<!-- dashkit:ai-rules:start -->[\s\S]*?<!-- dashkit:ai-rules:end -->/,x=g.test(m)?m.replace(g,d):`${m.trimEnd()}
 
 ${d}
diff --git a/public/llms-full.txt b/public/llms-full.txt
index ee1b069..f0b5de9 100644
--- a/public/llms-full.txt
+++ b/public/llms-full.txt
@@ -202,6 +202,7 @@ import { BentoGrid, BentoGridItem } from '@/dashkit/BentoGrid';
 
 By default, `BentoGrid` uses `gap="none"` to render a continuous `1px` hairline divider between cells without double borders—even when combining multi-row vertical spans (`rowSpan={2}`) and full-width spans (`colSpan="full"`).
 
+
   
     
       01 / Ingestion
@@ -259,6 +260,7 @@ By default, `BentoGrid` uses `gap="none"` to render a continuous `1px` hairline
     
   
 
+
 ```tsx
 <BentoGrid cols={{ base: 1, sm: 2, lg: 12 }} autoRows="minmax(140px, auto)">
   <BentoGridItem colSpan={{ base: 1, sm: 1, lg: 4 }}>Cell 1</BentoGridItem>
@@ -279,6 +281,7 @@ By default, `BentoGrid` uses `gap="none"` to render a continuous `1px` hairline
 
 Set `rounded="none"` for a sharp editorial or architectural blueprint layout where every outer corner and inner intersection meets at 90 degrees.
 
+
   
     
       col-span-4
@@ -300,6 +303,7 @@ Set `rounded="none"` for a sharp editorial or architectural blueprint layout whe
     
   
 
+
 ```tsx
 <BentoGrid cols={{ base: 1, md: 12 }} rounded="none" autoRows="minmax(120px, auto)">
   <BentoGridItem colSpan={{ base: 1, md: 4 }}>col-span-4</BentoGridItem>
@@ -317,6 +321,7 @@ Set `rounded="none"` for a sharp editorial or architectural blueprint layout whe
 
 Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shared hairline borders.
 
+
   
     
       Detached Bento Card (2 cols)
@@ -328,6 +333,7 @@ Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shar
     
   
 
+
 ```tsx
 <BentoGrid cols={3} gap="md">
   <BentoGridItem colSpan={2}>Detached Bento Card</BentoGridItem>
@@ -337,6 +343,7 @@ Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shar
 
 ### BentoGrid Props
 
+
 | Property | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `cols` | `BentoResponsiveValue` | `3` | Number of grid columns. Accepts a direct number (stacks on mobile, applies at md+) or a responsive breakpoint object ({ base, sm, md, lg, xl }). |
@@ -345,8 +352,10 @@ Pass `gap="sm" | "md" | "lg"` when you want detached Bento cards instead of shar
 | `rounded` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'xl'` | Controls the outer corner radius of the grid container. |
 | `autoRows` | `string` | - | Sets the CSS grid-auto-rows property (e.g., 'minmax(140px, auto)'). |
 
+
 ### BentoGridItem Props
 
+
 | Property | Type | Default | Description |
 | :--- | :--- | :--- | :--- |
 | `colSpan` | `BentoResponsiveValue<1..12 \| 'full'>` | `1` | Number of columns the cell spans. Accepts a direct value or a responsive breakpoint object. |
@@ -1566,6 +1575,60 @@ The component is highly accessible and supports a fluid layout for its triggers.
 </Tabs>
 ```
 
+### Pills Variant (Segmented Control)
+
+Use `variant="pills"` to render tabs inside a compact, segmented track with an elevated floating indicator that smoothly slides between options.
+
+
+  
+    
+      Overview
+      Analytics
+      Reports
+      Notifications
+    
+    
+      
+        Platform Overview
+        General metric summary across all edge environments.
+      
+    
+    
+      
+        Live Analytics
+        Real-time latency, request rate, and error rate telemetry.
+      
+    
+    
+      
+        Generated Reports
+        Weekly and monthly compliance export records.
+      
+    
+    
+      
+        Notification Feeds
+        System warnings and deployment completion triggers.
+      
+    
+  
+
+
+```tsx
+<Tabs defaultValue="overview" variant="pills">
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+    <TabsTrigger value="reports">Reports</TabsTrigger>
+    <TabsTrigger value="notifications">Notifications</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview metrics</TabsContent>
+  <TabsContent value="analytics">Analytics telemetry</TabsContent>
+  <TabsContent value="reports">Generated reports</TabsContent>
+  <TabsContent value="notifications">Notification feeds</TabsContent>
+</Tabs>
+```
+
 ### Icons & Advanced Previews
 
 You can easily integrate icons and complex child layouts within your tabs.
@@ -1649,6 +1712,7 @@ The indicator uses Framer Motion's `layoutId` to achieve a "sliding" effect when
 | `defaultValue` | `string` | - | The value of the tab that should be active on mount. |
 | `value` | `string` | - | The controlled value of the active tab. |
 | `onValueChange` | `(val: string) => void` | - | Callback fired when the active tab changes. |
+| `variant` | `'line' \| 'pills'` | `'line'` | Visual styling variant: 'line' for standard bottom-bordered tabs, 'pills' for segmented control. |
 | `children` | `ReactNode` | - | Content of the tabs container. |
 | `className` | `string` | - | Additional CSS classes for the container. |
 
diff --git a/public/llms.txt b/public/llms.txt
index d3cc0d8..e0a7ddb 100644
--- a/public/llms.txt
+++ b/public/llms.txt
@@ -47,6 +47,10 @@ Dashkit uses a two-layer token system in `dashkit.css`: `@theme inline` maps sem
 - `--ds-danger`, `--ds-success`, `--ds-warning`, `--ds-info` (plus `*-fg` pairs): Semantic feedback states.
 - `--ds-chart-1` through `--ds-chart-5`: Categorical data visualization palette.
 - `--radius`: Master border radius (`0.75rem` default). `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, and `--radius-2xl` scale proportionally from `--radius` (set `--radius: 0rem` for sharp corners).
+- `--ds-pill-radius`: Pill radius for `Button`, `Switch`, `Chip`, `Slider`, and `ProgressBar` (`calc(var(--radius) * 9999)` default; automatically becomes `0rem` when `--radius: 0rem`, or set explicitly e.g. `--ds-pill-radius: var(--radius-md)`).
+- `--ds-border-width`: Structural border width for Cards, Buttons, Chips, and Inputs (`1px` default; set to `2px` for Neo-Brutalism).
+- `--ds-button-border`: Border color for filled and soft Buttons (`transparent` default; set to `var(--ds-border)` or `var(--ds-primary)` for bordered buttons).
+- `--ds-button-shadow`, `--ds-button-outlined-shadow`, `--ds-button-soft-shadow`, `--ds-card-shadow`, `--ds-input-shadow`: Elevation or hard Neo-Brutalist offset shadows (e.g. `3px 3px 0px 0px var(--ds-border)`) or CRT glow shadows.
 - `--ds-primary-gradient` / `--ds-danger-gradient`: Optional gradient overrides (set to `none` for flat buttons).
 
 ### Dynamic Runtime Theme Attributes
diff --git a/public/registry.json b/public/registry.json
index cf24298..e1e6564 100644
--- a/public/registry.json
+++ b/public/registry.json
@@ -209,8 +209,8 @@
         "BentoGridItem"
       ],
       "propsDefinitions": [
-        "export interface BentoGridProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof bentoGridVariants> {\n  cols?: BentoResponsiveValue<BentoCols>;\n  autoRows?: string;\n}",
-        "export interface BentoGridItemProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<VariantProps<typeof bentoGridItemVariants>, 'divided'> {\n  colSpan?: BentoResponsiveValue<BentoColSpan>;\n  rowSpan?: BentoResponsiveValue<BentoRowSpan>;\n}"
+        "export interface BentoGridProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof bentoGridVariants> {\r\n  cols?: BentoResponsiveValue<BentoCols>;\r\n  autoRows?: string;\r\n}",
+        "export interface BentoGridItemProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    Omit<VariantProps<typeof bentoGridItemVariants>, 'divided'> {\r\n  colSpan?: BentoResponsiveValue<BentoColSpan>;\r\n  rowSpan?: BentoResponsiveValue<BentoRowSpan>;\r\n}"
       ]
     },
     "breadcrumb": {
diff --git a/scripts/commands.ts b/scripts/commands.ts
index d29f097..10d4084 100644
--- a/scripts/commands.ts
+++ b/scripts/commands.ts
@@ -800,7 +800,7 @@ async function writeAiRulesFile(
     `- **Available Components (${allSlugs.length})**: ${allSlugs.map((s) => `\`${s}\``).join(', ')}`,
     '',
     '### 3-Tier AI Customization Protocol',
-    `1. **Global Theme (\`${cssFile}\`)**: Edit \`:root\` / \`.dark\` variables (\`--ds-primary\`, \`--ds-bg\`, \`--ds-card\`, \`--radius\`, \`--ds-primary-gradient\`) or set \`data-primary\` / \`data-base\` attributes. Never scatter inline theme classes across pages.`,
+    `1. **Global Theme (\`${cssFile}\`)**: Edit \`:root\` / \`.dark\` variables (\`--ds-primary\`, \`--ds-bg\`, \`--ds-card\`, \`--radius\`, \`--ds-pill-radius\`, \`--ds-border-width\`, \`--ds-button-border\`, \`--ds-button-shadow\`, \`--ds-card-shadow\`, \`--ds-input-shadow\`, \`--ds-primary-gradient\`) or set \`data-primary\` / \`data-base\` attributes. Never scatter inline theme classes across pages.`,
     `2. **Component Variants (\`${componentsDir}/<Component>/<Component>.tsx\`)**: Edit \`cva(...)\` variants directly inside the component file when changing a component across the app.`,
     '3. **Instance Overrides (`className` & `data-slot`)**: Use `className` (merged via `cn()`) or `data-slot` selectors (`className="[&_[data-slot=label]]:uppercase"`) for one-off tweaks.',
     '',
diff --git a/scripts/generate-llms.ts b/scripts/generate-llms.ts
index ac959ed..27cd47f 100644
--- a/scripts/generate-llms.ts
+++ b/scripts/generate-llms.ts
@@ -257,6 +257,10 @@ export function generateLlmsTxt(): string {
   lines.push('- `--ds-danger`, `--ds-success`, `--ds-warning`, `--ds-info` (plus `*-fg` pairs): Semantic feedback states.');
   lines.push('- `--ds-chart-1` through `--ds-chart-5`: Categorical data visualization palette.');
   lines.push('- `--radius`: Master border radius (`0.75rem` default). `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`, and `--radius-2xl` scale proportionally from `--radius` (set `--radius: 0rem` for sharp corners).');
+  lines.push('- `--ds-pill-radius`: Pill radius for `Button`, `Switch`, `Chip`, `Slider`, and `ProgressBar` (`calc(var(--radius) * 9999)` default; automatically becomes `0rem` when `--radius: 0rem`, or set explicitly e.g. `--ds-pill-radius: var(--radius-md)`).');
+  lines.push('- `--ds-border-width`: Structural border width for Cards, Buttons, Chips, and Inputs (`1px` default; set to `2px` for Neo-Brutalism).');
+  lines.push('- `--ds-button-border`: Border color for filled and soft Buttons (`transparent` default; set to `var(--ds-border)` or `var(--ds-primary)` for bordered buttons).');
+  lines.push('- `--ds-button-shadow`, `--ds-button-outlined-shadow`, `--ds-button-soft-shadow`, `--ds-card-shadow`, `--ds-input-shadow`: Elevation or hard Neo-Brutalist offset shadows (e.g. `3px 3px 0px 0px var(--ds-border)`) or CRT glow shadows.');
   lines.push('- `--ds-primary-gradient` / `--ds-danger-gradient`: Optional gradient overrides (set to `none` for flat buttons).\n');
 
   lines.push('### Dynamic Runtime Theme Attributes');
diff --git a/scripts/tests/registry.test.ts b/scripts/tests/registry.test.ts
index 7155b0b..721e323 100644
--- a/scripts/tests/registry.test.ts
+++ b/scripts/tests/registry.test.ts
@@ -19,10 +19,10 @@ describe('Registry Integrity', () => {
   });
 
   it('should ensure all files in component folders are registered in registry.ts', () => {
-    // Get all subdirectories in src/dashkit, except 'utils'
+    // Get all subdirectories in src/dashkit, except 'utils' and 'presets'
     const subdirs = fs.readdirSync(componentsDir).filter((file) => {
       const fullPath = path.join(componentsDir, file);
-      return fs.statSync(fullPath).isDirectory() && file !== 'utils';
+      return fs.statSync(fullPath).isDirectory() && file !== 'utils' && file !== 'presets';
     });
 
     // Collect all registered files across all components, normalized to forward slashes
diff --git a/src/dashkit/Avatar/AvatarGroup.tsx b/src/dashkit/Avatar/AvatarGroup.tsx
index 7606693..e6b9946 100644
--- a/src/dashkit/Avatar/AvatarGroup.tsx
+++ b/src/dashkit/Avatar/AvatarGroup.tsx
@@ -42,7 +42,7 @@ export function AvatarGroup({ children, max, size = 'md', spacing = 'md', classN
         <Avatar
           fallback={`+${remainingCount}`}
           size={size}
-          className="bg-ds-900 text-white z-0 text-[10px] dark:bg-white dark:text-ds-900"
+          className="bg-ds-900 text-ds-50 z-0 text-[10px] dark:bg-ds-100 dark:text-ds-900"
         />
       )}
     </div>
diff --git a/src/dashkit/Badge/Badge.tsx b/src/dashkit/Badge/Badge.tsx
index 0ef61b7..a1e6128 100644
--- a/src/dashkit/Badge/Badge.tsx
+++ b/src/dashkit/Badge/Badge.tsx
@@ -27,7 +27,7 @@ const badgeVariants = cva(
     },
     compoundVariants: [
       // Base
-      { variant: 'solid', color: 'base', className: 'bg-ds-500 text-white' },
+      { variant: 'solid', color: 'base', className: 'bg-ds-600 text-ds-50 dark:bg-ds-500 dark:text-ds-950' },
       { variant: 'soft', color: 'base', className: 'bg-ds-500/15 text-ds-600 dark:text-ds-400 dark:bg-ds-500/20' },
       // Success
       { variant: 'solid', color: 'success', className: 'bg-ds-success-600 text-ds-success-50 dark:bg-ds-success-500 dark:text-ds-success-950' },
diff --git a/src/dashkit/Breadcrumb/BreadcrumbItem.tsx b/src/dashkit/Breadcrumb/BreadcrumbItem.tsx
index 6145d4b..7266efe 100644
--- a/src/dashkit/Breadcrumb/BreadcrumbItem.tsx
+++ b/src/dashkit/Breadcrumb/BreadcrumbItem.tsx
@@ -20,8 +20,8 @@ export const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProp
           href={href}
           className={cn(
             'flex items-center gap-1.5 text-sm transition-colors',
-            href ? 'text-ds-500 hover:text-ds-900 dark:text-ds-400 dark:hover:text-white' : 'text-ds-500 font-medium',
-            active && 'font-semibold text-ds-900 dark:text-white'
+            href ? 'text-ds-500 hover:text-ds-900 dark:text-ds-400 dark:hover:text-ds-100' : 'text-ds-500 font-medium',
+            active && 'font-semibold text-ds-900 dark:text-ds-100'
           )}
         >
           {children}
diff --git a/src/dashkit/Button/Button.tsx b/src/dashkit/Button/Button.tsx
index bc1be5c..4762ff4 100644
--- a/src/dashkit/Button/Button.tsx
+++ b/src/dashkit/Button/Button.tsx
@@ -16,9 +16,9 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        filled: '',
-        outlined: 'bg-card text-foreground border',
-        soft: '',
+        filled: 'border ds-button-surface',
+        outlined: 'bg-card text-foreground border ds-button-outlined-surface',
+        soft: 'border ds-button-soft-surface',
         ghost: 'bg-transparent border border-transparent',
       },
       color: {
@@ -31,7 +31,7 @@ const buttonVariants = cva(
         lg: 'h-11 text-base',
       },
       rounded: {
-        true: 'rounded-full',
+        true: 'rounded-full ds-pill',
         false: 'rounded-md',
       },
     },
@@ -40,7 +40,7 @@ const buttonVariants = cva(
       {
         variant: 'filled',
         color: 'primary',
-        className: 'ds-primary-gradient text-primary-foreground shadow-xs hover:brightness-105',
+        className: 'ds-primary-gradient text-primary-foreground hover:brightness-105',
       },
       {
         variant: 'filled',
@@ -51,7 +51,7 @@ const buttonVariants = cva(
       {
         variant: 'outlined',
         color: 'primary',
-        className: 'border-ds-300 hover:bg-ds-50 dark:border-ds-700 dark:hover:bg-ds-800/50 dark:hover:brightness-110',
+        className: 'border-border hover:bg-muted/60 dark:hover:bg-muted/60 dark:hover:brightness-110',
       },
       {
         variant: 'outlined',
diff --git a/src/dashkit/ButtonGroup/ButtonGroup.tsx b/src/dashkit/ButtonGroup/ButtonGroup.tsx
index 453128e..1c97cb7 100644
--- a/src/dashkit/ButtonGroup/ButtonGroup.tsx
+++ b/src/dashkit/ButtonGroup/ButtonGroup.tsx
@@ -45,9 +45,8 @@ export function ButtonGroupItem({
     <button
       className={cn(
         'ds-rounded relative inline-flex items-center justify-center font-medium text-sm h-9 px-4',
-        'bg-ds-0 text-foreground border border-ds-300 hover:bg-ds-50 transition-all cursor-pointer',
+        'bg-card text-foreground border border-border ds-border-width hover:bg-muted/60 transition-all cursor-pointer',
         'focus:outline-none focus:z-10 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring active:scale-[0.98]',
-        'dark:bg-ds-900 dark:border-ds-700 dark:hover:bg-ds-800',
         selected && 'bg-ds-200 text-foreground font-semibold z-10 shadow-xs dark:bg-ds-700 dark:text-foreground',
         className
       )}
diff --git a/src/dashkit/Card/Card.tsx b/src/dashkit/Card/Card.tsx
index 350a325..090410e 100644
--- a/src/dashkit/Card/Card.tsx
+++ b/src/dashkit/Card/Card.tsx
@@ -8,12 +8,12 @@ const cardVariants = cva(
   {
     variants: {
       bordered: {
-        true: 'border border-border/80',
+        true: 'border border-border/80 ds-border-width',
         false: 'border-0',
       },
       shadowed: {
         true: 'shadow-sm',
-        false: 'shadow-none',
+        false: 'shadow-none ds-card-shadow',
       },
     },
     defaultVariants: {
diff --git a/src/dashkit/Checkbox/Checkbox.tsx b/src/dashkit/Checkbox/Checkbox.tsx
index b73c6bc..d42490e 100644
--- a/src/dashkit/Checkbox/Checkbox.tsx
+++ b/src/dashkit/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             />
             <div
               className={cn(
-                'w-6 h-6 border-2 transition-all duration-200 flex items-center justify-center shrink-0 bg-background rounded-[4px]',
+                'w-6 h-6 border-2 transition-all duration-200 flex items-center justify-center shrink-0 bg-background rounded-[calc(var(--radius)*0.3333)] shadow-[var(--ds-input-shadow)]',
                 'border-border group-hover:border-ds-400 dark:group-hover:border-ds-500',
                 'peer-checked:border-primary peer-checked:bg-background',
                 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-transparent',
@@ -32,7 +32,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             />
             <div
               className={cn(
-                'absolute w-[13px] h-[13px] rounded-[2px] bg-primary transition-all duration-200 pointer-events-none opacity-0 scale-50',
+                'absolute w-[13px] h-[13px] rounded-[calc(var(--radius)*0.1667)] bg-primary transition-all duration-200 pointer-events-none opacity-0 scale-50',
                 'peer-checked:opacity-100 peer-checked:scale-100',
                 'peer-checked:peer-disabled:opacity-60'
               )}
diff --git a/src/dashkit/Chip/Chip.tsx b/src/dashkit/Chip/Chip.tsx
index b707c24..57192cd 100644
--- a/src/dashkit/Chip/Chip.tsx
+++ b/src/dashkit/Chip/Chip.tsx
@@ -7,13 +7,13 @@ export type ChipVariant = 'filled' | 'outlined' | 'tonal' | 'soft';
 export type ChipColor = 'base' | 'primary' | 'success' | 'warning' | 'danger' | 'error' | 'info';
 
 const chipVariants = cva(
-  'inline-flex items-center gap-1.5 h-8 px-3 rounded-full text-xs font-medium transition-all duration-200 border select-none',
+  'inline-flex items-center gap-1.5 h-8 px-3 rounded-full ds-pill text-xs font-medium transition-all duration-200 border ds-border-width select-none',
   {
     variants: {
       variant: {
-        tonal: '',
-        filled: '',
-        outlined: '',
+        tonal: 'ds-button-soft-surface',
+        filled: 'ds-button-surface',
+        outlined: 'ds-button-outlined-surface',
       },
       color: {
         base: '',
diff --git a/src/dashkit/CircularProgress/CircularProgress.tsx b/src/dashkit/CircularProgress/CircularProgress.tsx
index 347c73d..cad5516 100644
--- a/src/dashkit/CircularProgress/CircularProgress.tsx
+++ b/src/dashkit/CircularProgress/CircularProgress.tsx
@@ -29,18 +29,18 @@ const strokeWidthMap = {
 
 const softTrackColors: Record<NonNullable<CircularProgressProps['color']>, string> = {
   primary: 'text-primary/20',
-  success: 'text-emerald-500/20',
-  warning: 'text-amber-500/20',
-  danger: 'text-rose-500/20',
-  info: 'text-sky-500/20',
+  success: 'text-success/20',
+  warning: 'text-warning/20',
+  danger: 'text-danger/20',
+  info: 'text-info/20',
 };
 
 const indicatorColors: Record<NonNullable<CircularProgressProps['color']>, string> = {
   primary: 'text-primary',
-  success: 'text-emerald-500',
-  warning: 'text-amber-500',
-  danger: 'text-rose-500',
-  info: 'text-sky-500',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-danger',
+  info: 'text-info',
 };
 
 const valueSizeClasses: Record<string, string> = {
diff --git a/src/dashkit/ColorPicker/ColorPicker.tsx b/src/dashkit/ColorPicker/ColorPicker.tsx
index 2cc8c4d..23e2160 100644
--- a/src/dashkit/ColorPicker/ColorPicker.tsx
+++ b/src/dashkit/ColorPicker/ColorPicker.tsx
@@ -73,7 +73,7 @@ export function ColorPicker({
             type="button"
             aria-labelledby={label ? `${labelId} ${valueId}` : undefined}
             className={cn(
-              'flex items-center gap-3 w-full h-9 px-3 ds-rounded bg-input-bg border border-input-border text-sm text-input-fg outline-none transition-all duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-transparent hover:ring-2 hover:ring-ring hover:ring-offset-2 hover:ring-offset-transparent',
+              'flex items-center gap-3 w-full h-9 px-3 ds-rounded bg-input-bg border border-input-border ds-input-surface text-sm text-input-fg outline-none transition-all duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-transparent hover:ring-2 hover:ring-ring hover:ring-offset-2 hover:ring-offset-transparent',
               error && 'border-ds-danger-500/50'
             )}
           >
diff --git a/src/dashkit/Combobox/Combobox.tsx b/src/dashkit/Combobox/Combobox.tsx
index 0cbf0ab..32e6239 100644
--- a/src/dashkit/Combobox/Combobox.tsx
+++ b/src/dashkit/Combobox/Combobox.tsx
@@ -140,7 +140,7 @@ export function Combobox({
           placeholder={multiple && selectedOptions.length > 0 ? "Add more..." : placeholder}
           autoComplete="off"
           className={cn(
-            'w-full h-9 pl-10 pr-10 text-base sm:text-sm bg-input-bg text-input-fg border border-input-border ds-rounded outline-none transition-all duration-200 placeholder:text-muted-foreground focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 disabled:cursor-not-allowed disabled:opacity-50',
+            'w-full h-9 pl-10 pr-10 text-base sm:text-sm bg-input-bg text-input-fg border border-input-border ds-input-surface ds-rounded outline-none transition-all duration-200 placeholder:text-muted-foreground focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 disabled:cursor-not-allowed disabled:opacity-50',
             isOpen && 'border-input-focus ring-2 ring-input-focus/20'
           )}
         />
@@ -180,7 +180,7 @@ export function Combobox({
                 ? { top: triggerRect.bottom + 8 }
                 : { bottom: (window.innerHeight - triggerRect.top) + 8 }),
             }}
-            className="p-1 bg-popover text-popover-fg border border-popover-border ds-rounded shadow-lg overflow-hidden"
+            className="p-1 bg-popover text-popover-fg border border-popover-border ds-border-width ds-card-shadow ds-rounded shadow-lg overflow-hidden"
           >
             <div className="max-h-60 overflow-y-auto custom-scrollbar flex flex-col gap-0.5 font-sans pr-1">
               {filteredOptions.length === 0 ? (
diff --git a/src/dashkit/DatePicker/DatePicker.tsx b/src/dashkit/DatePicker/DatePicker.tsx
index ee7fbdc..df76bf0 100644
--- a/src/dashkit/DatePicker/DatePicker.tsx
+++ b/src/dashkit/DatePicker/DatePicker.tsx
@@ -61,7 +61,7 @@ export function DatePicker({
           aria-haspopup="dialog"
           aria-expanded={isOpen}
           className={cn(
-            'w-full px-4 h-9 text-sm bg-input-bg text-input-fg border border-input-border ds-rounded outline-none transition-all duration-200 text-left flex items-center justify-between gap-2 focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 disabled:cursor-not-allowed disabled:opacity-50',
+            'w-full px-4 h-9 text-sm bg-input-bg text-input-fg border border-input-border ds-input-surface ds-rounded outline-none transition-all duration-200 text-left flex items-center justify-between gap-2 focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 disabled:cursor-not-allowed disabled:opacity-50',
             className
           )}
         >
@@ -88,7 +88,7 @@ export function DatePicker({
               role="dialog"
               aria-label="Calendar"
               className={cn(
-                'w-[280px] bg-popover text-popover-fg border border-popover-border ds-rounded shadow-2xl p-4 overflow-hidden',
+                'w-[280px] bg-popover text-popover-fg border border-popover-border ds-border-width ds-card-shadow ds-rounded shadow-2xl p-4 overflow-hidden',
                 position === 'top' ? 'origin-bottom' : 'origin-top'
               )}
             >
diff --git a/src/dashkit/Dock/Dock.tsx b/src/dashkit/Dock/Dock.tsx
index 0309f32..0341ddd 100644
--- a/src/dashkit/Dock/Dock.tsx
+++ b/src/dashkit/Dock/Dock.tsx
@@ -14,7 +14,7 @@ export const Dock = React.forwardRef<HTMLDivElement, DockProps>(
       <div
         ref={ref}
         className={cn(
-          "mx-auto flex gap-3 rounded-full bg-ds-950/15 dark:bg-ds-0/10 backdrop-blur-lg p-2 border border-ds-950/5 dark:border-ds-0/10",
+          "mx-auto flex gap-3 rounded-full ds-pill bg-ds-950/15 dark:bg-ds-0/10 backdrop-blur-lg p-2 border border-ds-950/5 dark:border-ds-0/10",
           isVertical ? "flex-col items-center" : "flex-row items-center",
           className
         )}
diff --git a/src/dashkit/Dock/DockItem.tsx b/src/dashkit/Dock/DockItem.tsx
index 9a88e3f..55b2102 100644
--- a/src/dashkit/Dock/DockItem.tsx
+++ b/src/dashkit/Dock/DockItem.tsx
@@ -83,7 +83,7 @@ export const DockItem = React.forwardRef<HTMLButtonElement | HTMLAnchorElement,
 
     const commonProps = {
       className: cn(
-        "relative flex size-10 items-center justify-center rounded-full bg-white dark:bg-ds-950 text-ds-800 dark:text-ds-200 shadow-sm shrink-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ds-400",
+        "relative flex size-10 items-center justify-center rounded-full ds-pill bg-card dark:bg-ds-950 text-ds-800 dark:text-ds-200 shadow-sm shrink-0 cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ds-400",
         className
       ),
       onMouseEnter: () => setIsHovered(true),
diff --git a/src/dashkit/Dropdown/DropdownContent.tsx b/src/dashkit/Dropdown/DropdownContent.tsx
index 9b36444..d64eb8b 100644
--- a/src/dashkit/Dropdown/DropdownContent.tsx
+++ b/src/dashkit/Dropdown/DropdownContent.tsx
@@ -137,7 +137,7 @@ export function DropdownContent({
       {...getPortalThemeAttrs(triggerElement)}
       style={style}
       className={cn(
-        'min-w-[12rem] bg-popover/95 backdrop-blur-md text-popover-fg border border-popover-border/80 ds-rounded-lg shadow-lg p-1.5 overflow-hidden flex flex-col gap-0.5',
+        'min-w-[12rem] bg-popover/95 backdrop-blur-md text-popover-fg border border-popover-border/80 ds-border-width ds-card-shadow ds-rounded-lg shadow-lg p-1.5 overflow-hidden flex flex-col gap-0.5',
         animProps.originClass,
         className
       )}
diff --git a/src/dashkit/Dropdown/DropdownItem.tsx b/src/dashkit/Dropdown/DropdownItem.tsx
index 2ba197d..bb27b15 100644
--- a/src/dashkit/Dropdown/DropdownItem.tsx
+++ b/src/dashkit/Dropdown/DropdownItem.tsx
@@ -38,7 +38,7 @@ export function DropdownItem({
       onClick={handleClick}
       className={cn(
         'flex w-full items-center gap-2 px-2.5 py-1.5 text-sm font-medium ds-rounded transition-colors text-left text-popover-fg hover:bg-popover-item duration-150 disabled:opacity-50 disabled:cursor-not-allowed',
-        destructive && 'text-red-500 hover:text-red-600 dark:hover:bg-red-500/10',
+        destructive && 'text-danger hover:text-ds-danger-600 dark:hover:bg-danger/10',
         selected && 'bg-popover-item-selected text-popover-item-selected-fg font-semibold',
         className
       )}
diff --git a/src/dashkit/FloatActionMenu/FloatActionMenu.tsx b/src/dashkit/FloatActionMenu/FloatActionMenu.tsx
index 6dfdea6..0d52253 100644
--- a/src/dashkit/FloatActionMenu/FloatActionMenu.tsx
+++ b/src/dashkit/FloatActionMenu/FloatActionMenu.tsx
@@ -65,8 +65,8 @@ export function FloatActionMenu({
         className={cn(
           'flex items-center gap-2.5 px-4 py-3 ds-rounded active:scale-95 transition-all cursor-pointer relative z-10 shadow-lg',
           variant === 'primary'
-            ? 'ds-primary-gradient text-white hover:brightness-105 border border-white/10'
-            : 'bg-ds-900 text-white dark:bg-ds-100 dark:text-ds-950 hover:bg-ds-800 dark:hover:bg-ds-200 border border-border',
+            ? 'ds-primary-gradient text-primary-foreground hover:brightness-105 border border-transparent ds-button-surface'
+            : 'bg-ds-900 text-ds-50 dark:bg-ds-100 dark:text-ds-950 hover:bg-ds-800 dark:hover:bg-ds-200 border border-border ds-button-surface',
           buttonClassName
         )}
       >
@@ -86,7 +86,7 @@ export function FloatActionMenu({
             key="menu"
             ref={menuRef}
             className={cn(
-              'absolute w-[calc(100vw-3rem)] sm:w-[400px] max-w-[400px] min-h-[300px] bg-white dark:bg-ds-900 ds-rounded shadow-2xl border border-border dark:border-ds-800 overflow-hidden flex flex-col z-20',
+              'absolute w-[calc(100vw-3rem)] sm:w-[400px] max-w-[400px] min-h-[300px] bg-card text-card-foreground ds-rounded shadow-2xl border border-border ds-border-width ds-card-shadow overflow-hidden flex flex-col z-20',
               MENU_POSITION_CLASSES[position],
               menuClassName
             )}
diff --git a/src/dashkit/IconButton/IconButton.test.tsx b/src/dashkit/IconButton/IconButton.test.tsx
index e119a92..663c63c 100644
--- a/src/dashkit/IconButton/IconButton.test.tsx
+++ b/src/dashkit/IconButton/IconButton.test.tsx
@@ -40,7 +40,7 @@ describe('IconButton', () => {
 
     rerender(<IconButton icon={<FiPlus />} variant="outlined" />);
     button = screen.getByRole('button');
-    expect(button).toHaveClass('border-ds-300');
+    expect(button).toHaveClass('border-border');
   });
 
   it('applies size modifiers correctly', () => {
diff --git a/src/dashkit/IconButton/IconButton.tsx b/src/dashkit/IconButton/IconButton.tsx
index 20c0c50..5821be4 100644
--- a/src/dashkit/IconButton/IconButton.tsx
+++ b/src/dashkit/IconButton/IconButton.tsx
@@ -8,9 +8,9 @@ const iconButtonVariants = cva(
   {
     variants: {
       variant: {
-        filled: 'ds-primary-gradient text-primary-foreground border border-transparent hover:brightness-105',
-        outlined: 'bg-transparent text-foreground border border-ds-300 hover:bg-ds-50 hover:brightness-95 dark:border-ds-700 dark:hover:bg-ds-800/50 dark:hover:brightness-110',
-        soft: 'bg-secondary text-secondary-foreground border border-transparent hover:brightness-85 dark:hover:brightness-150',
+        filled: 'ds-primary-gradient text-primary-foreground border border-transparent ds-button-surface hover:brightness-105',
+        outlined: 'bg-card text-foreground border border-border ds-button-outlined-surface hover:bg-muted/60 hover:brightness-95 dark:hover:bg-muted/60 dark:hover:brightness-110',
+        soft: 'bg-secondary text-secondary-foreground border border-transparent ds-button-soft-surface hover:brightness-85 dark:hover:brightness-150',
         ghost: 'bg-transparent text-muted-foreground border border-transparent hover:bg-accent hover:text-accent-foreground hover:brightness-95 dark:hover:brightness-110',
       },
       size: {
@@ -19,7 +19,7 @@ const iconButtonVariants = cva(
         lg: 'size-11 text-base',
       },
       rounded: {
-        true: 'rounded-full',
+        true: 'rounded-full ds-pill',
         false: 'rounded-md',
       },
     },
diff --git a/src/dashkit/Input/Input.tsx b/src/dashkit/Input/Input.tsx
index 408f6d7..7ada417 100644
--- a/src/dashkit/Input/Input.tsx
+++ b/src/dashkit/Input/Input.tsx
@@ -3,7 +3,7 @@ import { cva } from 'class-variance-authority';
 import { cn } from '../utils/cn';
 
 const inputWrapperVariants = cva(
-  'relative flex items-center bg-input-bg border border-input-border ds-rounded outline-none transition-all duration-200 focus-within:border-input-focus focus-within:ring-2 focus-within:ring-input-focus/20',
+  'relative flex items-center bg-input-bg border border-input-border ds-input-surface ds-rounded outline-none transition-all duration-200 focus-within:border-input-focus focus-within:ring-2 focus-within:ring-input-focus/20',
   {
     variants: {
       size: {
diff --git a/src/dashkit/Modal/Modal.tsx b/src/dashkit/Modal/Modal.tsx
index 8b8ebb0..3fa6fec 100644
--- a/src/dashkit/Modal/Modal.tsx
+++ b/src/dashkit/Modal/Modal.tsx
@@ -9,7 +9,7 @@ import { useFocusTrap } from '../utils/useFocusTrap';
 import { Backdrop } from '../Backdrop/Backdrop';
 
 const modalContentVariants = cva(
-  'w-full bg-card text-card-foreground ds-rounded-lg border border-border/80 shadow-2xl overflow-hidden flex flex-col dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.06),0_25px_50px_-12px_rgba(0,0,0,0.7)]',
+  'w-full bg-card text-card-foreground ds-rounded-lg border border-border/80 ds-border-width ds-card-shadow shadow-2xl overflow-hidden flex flex-col dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.06),0_25px_50px_-12px_rgba(0,0,0,0.7)]',
   {
     variants: {
       size: {
diff --git a/src/dashkit/Modal/ModalHeader.tsx b/src/dashkit/Modal/ModalHeader.tsx
index e88a441..fab63c6 100644
--- a/src/dashkit/Modal/ModalHeader.tsx
+++ b/src/dashkit/Modal/ModalHeader.tsx
@@ -20,7 +20,7 @@ export function ModalHeader({ children, className, onClose }: ModalHeaderProps)
           icon={<FiX size={18} />}
           variant="ghost"
           onClick={onClose}
-          className="-mr-2 text-ds-600 dark:text-ds-400 hover:text-ds-900 dark:hover:text-white"
+          className="-mr-2 text-ds-600 dark:text-ds-400 hover:text-ds-900 dark:hover:text-foreground"
           aria-label="Close modal"
         />
       )}
diff --git a/src/dashkit/OtpInput/OtpInput.tsx b/src/dashkit/OtpInput/OtpInput.tsx
index f8c8d89..09d6399 100644
--- a/src/dashkit/OtpInput/OtpInput.tsx
+++ b/src/dashkit/OtpInput/OtpInput.tsx
@@ -60,7 +60,7 @@ export function OtpInput({
           onPaste={handlePaste}
           disabled={disabled}
           className={cn(
-            'w-10 h-12 sm:w-11 sm:h-13 text-center text-lg sm:text-xl font-bold bg-input-bg text-input-fg border border-input-border ds-rounded outline-none transition-all duration-300 focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 hover:border-input-focus',
+            'w-10 h-12 sm:w-11 sm:h-13 text-center text-lg sm:text-xl font-bold bg-input-bg text-input-fg border border-input-border ds-input-surface ds-rounded outline-none transition-all duration-300 focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 hover:border-input-focus',
             className
           )}
         />
diff --git a/src/dashkit/Popover/PopoverContent.tsx b/src/dashkit/Popover/PopoverContent.tsx
index e2a03e4..d6ca6c1 100644
--- a/src/dashkit/Popover/PopoverContent.tsx
+++ b/src/dashkit/Popover/PopoverContent.tsx
@@ -118,7 +118,7 @@ export function PopoverContent({
            transition={{ duration: 0.15, ease: 'easeOut' }}
            style={style}
            className={cn(
-             'w-72 max-w-[calc(100vw-2rem)] bg-popover/95 backdrop-blur-md text-popover-fg border border-popover-border/80 ds-rounded-lg shadow-xl dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05),0_20px_25px_-5px_rgba(0,0,0,0.5)] p-4 overflow-hidden',
+             'w-72 max-w-[calc(100vw-2rem)] bg-popover/95 backdrop-blur-md text-popover-fg border border-popover-border/80 ds-border-width ds-rounded-lg shadow-xl dark:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.05),0_20px_25px_-5px_rgba(0,0,0,0.5)] p-4 overflow-hidden',
              animProps.originClass,
              className
            )}
diff --git a/src/dashkit/ProgressBar/ProgressBar.tsx b/src/dashkit/ProgressBar/ProgressBar.tsx
index 19e27f3..bdfb468 100644
--- a/src/dashkit/ProgressBar/ProgressBar.tsx
+++ b/src/dashkit/ProgressBar/ProgressBar.tsx
@@ -8,7 +8,7 @@ export type ProgressBarColor = 'primary' | 'success' | 'warning' | 'danger' | 'i
 export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
 
 const progressTrackVariants = cva(
-  'bg-ds-200 dark:bg-ds-800 rounded-full overflow-hidden',
+  'bg-ds-200 dark:bg-ds-800 rounded-full ds-pill overflow-hidden',
   {
     variants: {
       position: {
@@ -29,7 +29,7 @@ const progressTrackVariants = cva(
   }
 );
 
-const progressFillVariants = cva('h-full rounded-full', {
+const progressFillVariants = cva('h-full rounded-full ds-pill', {
   variants: {
     color: {
       primary: 'bg-primary',
diff --git a/src/dashkit/Select/Select.tsx b/src/dashkit/Select/Select.tsx
index 76a4fd5..8c976a3 100644
--- a/src/dashkit/Select/Select.tsx
+++ b/src/dashkit/Select/Select.tsx
@@ -12,7 +12,7 @@ export interface SelectOption {
 }
 
 const selectTriggerVariants = cva(
-  'w-full text-left flex items-center justify-between gap-2 bg-input-bg text-input-fg border border-input-border ds-rounded outline-none transition-all duration-200 focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 disabled:cursor-not-allowed disabled:opacity-50',
+  'w-full text-left flex items-center justify-between gap-2 bg-input-bg text-input-fg border border-input-border ds-input-surface ds-rounded outline-none transition-all duration-200 focus:border-input-focus focus:ring-2 focus:ring-input-focus/20 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       size: {
@@ -144,7 +144,7 @@ export function Select({
               zIndex: 9999,
             }}
             className={cn(
-              'p-1 bg-popover/95 backdrop-blur-md text-popover-fg border border-popover-border/80 ds-rounded-lg shadow-lg overflow-hidden',
+              'p-1 bg-popover/95 backdrop-blur-md text-popover-fg border border-popover-border/80 ds-border-width ds-card-shadow ds-rounded-lg shadow-lg overflow-hidden',
               side === 'top' ? 'origin-bottom' : 'origin-top'
             )}
           >
diff --git a/src/dashkit/Slider/Slider.tsx b/src/dashkit/Slider/Slider.tsx
index 2cb5286..1400b67 100644
--- a/src/dashkit/Slider/Slider.tsx
+++ b/src/dashkit/Slider/Slider.tsx
@@ -51,13 +51,13 @@ export const Slider = forwardRef<HTMLInputElement, SliderProps>(
           </div>
         )}
         <div className="group relative flex items-center h-5 w-full">
-          <div className="absolute inset-x-0 h-1.5 rounded-full bg-ds-200 dark:bg-ds-800 pointer-events-none" />
+          <div className="absolute inset-x-0 h-1.5 rounded-full ds-pill bg-ds-200 dark:bg-ds-800 pointer-events-none" />
           <div
-            className="absolute left-0 h-1.5 rounded-full bg-primary pointer-events-none"
+            className="absolute left-0 h-1.5 rounded-full ds-pill bg-primary pointer-events-none"
             style={{ width: `${percentage}%` }}
           />
           <div
-            className="absolute w-4 h-4 rounded-full bg-white dark:bg-ds-0 border-2 border-primary shadow-sm pointer-events-none z-10 transition-[box-shadow,transform] duration-200 group-hover:ring-4 group-hover:ring-primary/10 group-has-[:focus-visible]:ring-4 group-has-[:focus-visible]:ring-primary/30"
+            className="absolute w-4 h-4 rounded-full ds-pill bg-ds-0 border-2 border-primary shadow-sm pointer-events-none z-10 transition-[box-shadow,transform] duration-200 group-hover:ring-4 group-hover:ring-primary/10 group-has-[:focus-visible]:ring-4 group-has-[:focus-visible]:ring-primary/30"
             style={{
               left: `calc(${percentage}% - 8px)`
             }}
diff --git a/src/dashkit/Stepper/Stepper.tsx b/src/dashkit/Stepper/Stepper.tsx
index 8361294..6937c1d 100644
--- a/src/dashkit/Stepper/Stepper.tsx
+++ b/src/dashkit/Stepper/Stepper.tsx
@@ -130,7 +130,7 @@ export function Step({
         {/* Step Icon */}
         <div
           className={cn(
-            'flex items-center justify-center size-8 rounded-full border-2 shrink-0 transition-colors duration-300 bg-card',
+            'flex items-center justify-center size-8 rounded-full ds-pill border-2 shrink-0 transition-colors duration-300 bg-card',
             (isCompleted || isActive)
               ? color === 'base'
                 ? isActive
diff --git a/src/dashkit/Switch/Switch.tsx b/src/dashkit/Switch/Switch.tsx
index c2c8c06..2a4b456 100644
--- a/src/dashkit/Switch/Switch.tsx
+++ b/src/dashkit/Switch/Switch.tsx
@@ -24,7 +24,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             />
             <div
               className={cn(
-                'w-11 h-6 bg-ds-200 dark:bg-ds-800 rounded-full transition-colors duration-200 border-2 border-transparent',
+                'w-11 h-6 bg-ds-200 dark:bg-ds-800 rounded-full ds-pill ds-input-surface transition-colors duration-200 border-2 border-border',
                 'group-hover:border-ds-400 dark:group-hover:border-ds-500',
                 'peer-checked:border-primary peer-checked:bg-primary',
                 'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-transparent',
@@ -33,7 +33,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
             />
             <div
               className={cn(
-                'absolute left-0.5 top-0.5 w-5 h-5 bg-white rounded-full transition-transform duration-200 shadow-sm pointer-events-none',
+                'absolute left-1 top-1 w-4 h-4 bg-ds-0 rounded-full ds-pill transition-transform duration-200 shadow-sm pointer-events-none',
                 'peer-checked:translate-x-5 peer-checked:bg-primary-foreground',
                 'peer-disabled:opacity-60 peer-disabled:cursor-not-allowed'
               )}
diff --git a/src/dashkit/SystemLogs/SystemLogs.tsx b/src/dashkit/SystemLogs/SystemLogs.tsx
index bfbde2b..5491b33 100644
--- a/src/dashkit/SystemLogs/SystemLogs.tsx
+++ b/src/dashkit/SystemLogs/SystemLogs.tsx
@@ -60,9 +60,9 @@ export const SystemLogs = React.forwardRef<HTMLDivElement, SystemLogsProps>(
     return (
       <div
         ref={ref}
-        className={cn('overflow-hidden ds-rounded border border-ds-300 dark:border-ds-700 bg-black shadow-lg', className)}
+        className={cn('overflow-hidden ds-rounded border border-border ds-border-width ds-card-shadow bg-ds-950 shadow-lg', className)}
       >
-        <div className="bg-zinc-950/50 dark:bg-white/[0.03] py-2.5 px-4 border-b border-white/10">
+        <div className="bg-ds-900/60 py-2.5 px-4 border-b border-ds-800">
           <div className="flex items-center gap-2">
             <FiTerminal className="text-ds-400" size={14} />
             <h3 className="text-xs text-ds-50 font-medium tracking-tight">{title}</h3>
@@ -92,7 +92,7 @@ export const SystemLogs = React.forwardRef<HTMLDivElement, SystemLogsProps>(
         </div>
 
         {(session || status) && (
-          <div className="px-4 py-2.5 bg-white/[0.02] border-t border-white/10 flex items-center justify-between min-h-[2.5rem]">
+          <div className="px-4 py-2.5 bg-ds-900/40 border-t border-ds-800 flex items-center justify-between min-h-[2.5rem]">
             {session ? (
               <span className="text-[10px] text-ds-500 uppercase font-bold tracking-wider h-5 inline-flex items-center leading-none translate-y-[0.5px]">
                 session: {session}
diff --git a/src/dashkit/Tabs/Tabs.tsx b/src/dashkit/Tabs/Tabs.tsx
index 22e764c..59187f1 100644
--- a/src/dashkit/Tabs/Tabs.tsx
+++ b/src/dashkit/Tabs/Tabs.tsx
@@ -18,7 +18,7 @@ const tabsVariants = cva('flex flex-col font-sans', {
   variants: {
     variant: {
       line: 'w-full',
-      pills: 'w-fit',
+      pills: 'w-full',
     },
   },
   defaultVariants: {
@@ -30,7 +30,7 @@ const tabsListVariants = cva('flex items-center', {
   variants: {
     variant: {
       line: 'w-full justify-start border-b border-border gap-6',
-      pills: 'inline-flex bg-muted p-0.5 ds-rounded-lg gap-0.5 border border-border/40',
+      pills: 'inline-flex w-fit bg-muted p-0.5 ds-rounded-lg gap-0.5 border border-border/40',
     },
   },
   defaultVariants: {
diff --git a/src/dashkit/Textarea/Textarea.tsx b/src/dashkit/Textarea/Textarea.tsx
index 67aee34..7981c54 100644
--- a/src/dashkit/Textarea/Textarea.tsx
+++ b/src/dashkit/Textarea/Textarea.tsx
@@ -53,7 +53,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           }
           className={cn(
             'w-full px-4 py-3 text-base sm:text-sm transition-all duration-200 ds-rounded outline-none',
-            'bg-input-bg text-input-fg border border-input-border',
+            'bg-input-bg text-input-fg border border-input-border ds-input-surface',
             'focus:border-input-focus focus:ring-2 focus:ring-input-focus/20',
             'placeholder:text-muted-foreground',
             'disabled:cursor-not-allowed disabled:opacity-50',
diff --git a/src/dashkit/dashkit.css b/src/dashkit/dashkit.css
index 8cf95ff..291d136 100644
--- a/src/dashkit/dashkit.css
+++ b/src/dashkit/dashkit.css
@@ -30,53 +30,53 @@
   --color-ds-primary-900:   var(--ds-color-primary-900, var(--color-blue-900));
   --color-ds-primary-950:   var(--ds-color-primary-950, var(--color-blue-950));
 
-  --color-ds-info-50:    var(--color-blue-50);
-  --color-ds-info-100:   var(--color-blue-100);
-  --color-ds-info-200:   var(--color-blue-200);
-  --color-ds-info-300:   var(--color-blue-300);
-  --color-ds-info-400:   var(--color-blue-400);
-  --color-ds-info-500:   var(--color-blue-500);
-  --color-ds-info-600:   var(--color-blue-600);
-  --color-ds-info-700:   var(--color-blue-700);
-  --color-ds-info-800:   var(--color-blue-800);
-  --color-ds-info-900:   var(--color-blue-900);
-  --color-ds-info-950:   var(--color-blue-950);
-
-  --color-ds-success-50:    var(--color-emerald-50);
-  --color-ds-success-100:   var(--color-emerald-100);
-  --color-ds-success-200:   var(--color-emerald-200);
-  --color-ds-success-300:   var(--color-emerald-300);
-  --color-ds-success-400:   var(--color-emerald-400);
-  --color-ds-success-500:   var(--color-emerald-500);
-  --color-ds-success-600:   var(--color-emerald-600);
-  --color-ds-success-700:   var(--color-emerald-700);
-  --color-ds-success-800:   var(--color-emerald-800);
-  --color-ds-success-900:   var(--color-emerald-900);
-  --color-ds-success-950:   var(--color-emerald-950);
-
-  --color-ds-warning-50:    var(--color-amber-50);
-  --color-ds-warning-100:   var(--color-amber-100);
-  --color-ds-warning-200:   var(--color-amber-200);
-  --color-ds-warning-300:   var(--color-amber-300);
-  --color-ds-warning-400:   var(--color-amber-400);
-  --color-ds-warning-500:   var(--color-amber-500);
-  --color-ds-warning-600:   var(--color-amber-600);
-  --color-ds-warning-700:   var(--color-amber-700);
-  --color-ds-warning-800:   var(--color-amber-800);
-  --color-ds-warning-900:   var(--color-amber-900);
-  --color-ds-warning-950:   var(--color-amber-950);
-
-  --color-ds-danger-50:    var(--color-red-50);
-  --color-ds-danger-100:   var(--color-red-100);
-  --color-ds-danger-200:   var(--color-red-200);
-  --color-ds-danger-300:   var(--color-red-300);
-  --color-ds-danger-400:   var(--color-red-400);
-  --color-ds-danger-500:   var(--color-red-500);
-  --color-ds-danger-600:   var(--color-red-600);
-  --color-ds-danger-700:   var(--color-red-700);
-  --color-ds-danger-800:   var(--color-red-800);
-  --color-ds-danger-900:   var(--color-red-900);
-  --color-ds-danger-950:   var(--color-red-950);
+  --color-ds-info-50:    var(--ds-color-info-50, var(--color-blue-50));
+  --color-ds-info-100:   var(--ds-color-info-100, var(--color-blue-100));
+  --color-ds-info-200:   var(--ds-color-info-200, var(--color-blue-200));
+  --color-ds-info-300:   var(--ds-color-info-300, var(--color-blue-300));
+  --color-ds-info-400:   var(--ds-color-info-400, var(--color-blue-400));
+  --color-ds-info-500:   var(--ds-color-info-500, var(--color-blue-500));
+  --color-ds-info-600:   var(--ds-color-info-600, var(--color-blue-600));
+  --color-ds-info-700:   var(--ds-color-info-700, var(--color-blue-700));
+  --color-ds-info-800:   var(--ds-color-info-800, var(--color-blue-800));
+  --color-ds-info-900:   var(--ds-color-info-900, var(--color-blue-900));
+  --color-ds-info-950:   var(--ds-color-info-950, var(--color-blue-950));
+
+  --color-ds-success-50:    var(--ds-color-success-50, var(--color-emerald-50));
+  --color-ds-success-100:   var(--ds-color-success-100, var(--color-emerald-100));
+  --color-ds-success-200:   var(--ds-color-success-200, var(--color-emerald-200));
+  --color-ds-success-300:   var(--ds-color-success-300, var(--color-emerald-300));
+  --color-ds-success-400:   var(--ds-color-success-400, var(--color-emerald-400));
+  --color-ds-success-500:   var(--ds-color-success-500, var(--color-emerald-500));
+  --color-ds-success-600:   var(--ds-color-success-600, var(--color-emerald-600));
+  --color-ds-success-700:   var(--ds-color-success-700, var(--color-emerald-700));
+  --color-ds-success-800:   var(--ds-color-success-800, var(--color-emerald-800));
+  --color-ds-success-900:   var(--ds-color-success-900, var(--color-emerald-900));
+  --color-ds-success-950:   var(--ds-color-success-950, var(--color-emerald-950));
+
+  --color-ds-warning-50:    var(--ds-color-warning-50, var(--color-amber-50));
+  --color-ds-warning-100:   var(--ds-color-warning-100, var(--color-amber-100));
+  --color-ds-warning-200:   var(--ds-color-warning-200, var(--color-amber-200));
+  --color-ds-warning-300:   var(--ds-color-warning-300, var(--color-amber-300));
+  --color-ds-warning-400:   var(--ds-color-warning-400, var(--color-amber-400));
+  --color-ds-warning-500:   var(--ds-color-warning-500, var(--color-amber-500));
+  --color-ds-warning-600:   var(--ds-color-warning-600, var(--color-amber-600));
+  --color-ds-warning-700:   var(--ds-color-warning-700, var(--color-amber-700));
+  --color-ds-warning-800:   var(--ds-color-warning-800, var(--color-amber-800));
+  --color-ds-warning-900:   var(--ds-color-warning-900, var(--color-amber-900));
+  --color-ds-warning-950:   var(--ds-color-warning-950, var(--color-amber-950));
+
+  --color-ds-danger-50:    var(--ds-color-danger-50, var(--color-red-50));
+  --color-ds-danger-100:   var(--ds-color-danger-100, var(--color-red-100));
+  --color-ds-danger-200:   var(--ds-color-danger-200, var(--color-red-200));
+  --color-ds-danger-300:   var(--ds-color-danger-300, var(--color-red-300));
+  --color-ds-danger-400:   var(--ds-color-danger-400, var(--color-red-400));
+  --color-ds-danger-500:   var(--ds-color-danger-500, var(--color-red-500));
+  --color-ds-danger-600:   var(--ds-color-danger-600, var(--color-red-600));
+  --color-ds-danger-700:   var(--ds-color-danger-700, var(--color-red-700));
+  --color-ds-danger-800:   var(--ds-color-danger-800, var(--color-red-800));
+  --color-ds-danger-900:   var(--ds-color-danger-900, var(--color-red-900));
+  --color-ds-danger-950:   var(--ds-color-danger-950, var(--color-red-950));
 
   --color-background: var(--ds-bg);
   --color-foreground: var(--ds-fg);
@@ -128,7 +128,6 @@
   --color-chart-4: var(--ds-chart-4);
   --color-chart-5: var(--ds-chart-5);
 
-  --radius: 0.75rem;
   --radius-xl: calc(var(--radius) * 1.3333);
   --radius-2xl: calc(var(--radius) * 1.6667);
   --radius-lg: var(--radius);
@@ -141,6 +140,16 @@
    2. Base Variable Definitions
 ──────────────────────────────────────────────── */
 :root {
+  --radius: 0.75rem;
+  --ds-pill-radius: calc(var(--radius) * 9999);
+  --ds-border-width: 1px;
+  --ds-button-border: transparent;
+  --ds-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --ds-button-outlined-shadow: none;
+  --ds-button-soft-shadow: none;
+  --ds-card-shadow: none;
+  --ds-input-shadow: none;
+
   --ds-bg: var(--color-ds-100);
   --ds-fg: var(--color-ds-800);
 
@@ -341,6 +350,34 @@
 @utility ds-surface-glass { @apply bg-popover/95 backdrop-blur-md; }
 @utility ds-active-press { @apply active:scale-[0.97] transition-transform duration-150 ease-out; }
 
+.ds-pill {
+  border-radius: var(--ds-pill-radius, 9999px);
+}
+.ds-border-width {
+  border-width: var(--ds-border-width, 1px);
+}
+.ds-card-shadow {
+  box-shadow: var(--ds-card-shadow, none);
+}
+.ds-input-surface {
+  border-width: var(--ds-border-width, 1px);
+  box-shadow: var(--ds-input-shadow, none);
+}
+.ds-button-surface {
+  border-width: var(--ds-border-width, 1px);
+  border-color: var(--ds-button-border, transparent);
+  box-shadow: var(--ds-button-shadow, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+}
+.ds-button-soft-surface {
+  border-width: var(--ds-border-width, 1px);
+  border-color: var(--ds-button-border, transparent);
+  box-shadow: var(--ds-button-soft-shadow, none);
+}
+.ds-button-outlined-surface {
+  border-width: var(--ds-border-width, 1px);
+  box-shadow: var(--ds-button-outlined-shadow, none);
+}
+
 
 /* ────────────────────────────────────────────────
    5. Colors utilities
diff --git a/src/dashkit/presets/brutalist.css b/src/dashkit/presets/brutalist.css
new file mode 100644
index 0000000..b09e7e9
--- /dev/null
+++ b/src/dashkit/presets/brutalist.css
@@ -0,0 +1,83 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+   Dashkit Preset: Brutalism
+   @preset brutalist
+   @recommended-attrs data-base="stone" data-primary="orange" data-preset="brutalist"
+   @description Sharp 0px geometry, 2px ink borders, flat solid fills, hard offset shadows.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+[data-preset="brutalist"] {
+  /* 1. Geometry & Surface Elevation */
+  --radius: 0rem;
+  --ds-pill-radius: 0rem;
+  --ds-border-width: 2px;
+  --ds-primary-gradient: none;
+  --ds-danger-gradient: none;
+
+  --ds-button-border: var(--ds-border);
+  --ds-button-shadow: 3px 3px 0px 0px var(--ds-border);
+  --ds-button-outlined-shadow: 3px 3px 0px 0px var(--ds-border);
+  --ds-button-soft-shadow: 3px 3px 0px 0px var(--ds-border);
+  --ds-card-shadow: 4px 4px 0px 0px var(--ds-border);
+  --ds-input-shadow: 2px 2px 0px 0px var(--ds-border);
+
+  /* 2. Core Surfaces & Borders (Light) */
+  --ds-bg: #f5f2eb;
+  --ds-fg: var(--color-ds-950);
+  --ds-card: #fffdf9;
+  --ds-card-fg: var(--color-ds-950);
+  --ds-popover: #fffdf9;
+  --ds-popover-fg: var(--color-ds-950);
+  --ds-popover-border: var(--color-ds-900);
+
+  --ds-border: var(--color-ds-900);
+  --ds-border-subtle: var(--color-ds-400);
+
+  /* 3. Interactive & Muted Tokens (Light) */
+  --ds-secondary: var(--color-ds-200);
+  --ds-secondary-fg: var(--color-ds-950);
+  --ds-muted: #ebe5d9;
+  --ds-muted-fg: var(--color-ds-700);
+
+  /* 4. Form Controls (Light) */
+  --ds-input-bg: #ffffff;
+  --ds-input-border: var(--color-ds-900);
+  --ds-input-focus: var(--color-ds-950);
+  --ds-input-fg: var(--color-ds-950);
+  --ds-input-ring: var(--color-ds-900);
+}
+
+.dark[data-preset="brutalist"],
+.dark [data-preset="brutalist"] {
+  /* Core Surfaces & Borders (Dark) */
+  --ds-bg: #121110;
+  --ds-fg: var(--color-ds-50);
+  --ds-card: #1c1917;
+  --ds-card-fg: var(--color-ds-50);
+  --ds-popover: #1c1917;
+  --ds-popover-fg: var(--color-ds-50);
+  --ds-popover-border: var(--color-ds-300);
+
+  --ds-border: var(--color-ds-300);
+  --ds-border-subtle: var(--color-ds-700);
+
+  /* Surface Elevation (Dark) */
+  --ds-button-border: var(--ds-border);
+  --ds-button-shadow: 3px 3px 0px 0px var(--ds-border);
+  --ds-button-outlined-shadow: 3px 3px 0px 0px var(--ds-border);
+  --ds-button-soft-shadow: 3px 3px 0px 0px var(--ds-border);
+  --ds-card-shadow: 4px 4px 0px 0px var(--ds-border);
+  --ds-input-shadow: 2px 2px 0px 0px var(--ds-border);
+
+  /* Interactive & Muted Tokens (Dark) */
+  --ds-secondary: var(--color-ds-800);
+  --ds-secondary-fg: var(--color-ds-50);
+  --ds-muted: var(--color-ds-800);
+  --ds-muted-fg: var(--color-ds-300);
+
+  /* Form Controls (Dark) */
+  --ds-input-bg: #0c0a09;
+  --ds-input-border: var(--color-ds-300);
+  --ds-input-focus: var(--color-ds-50);
+  --ds-input-fg: var(--color-ds-50);
+  --ds-input-ring: var(--color-ds-300);
+}
diff --git a/src/dashkit/presets/index.css b/src/dashkit/presets/index.css
new file mode 100644
index 0000000..5b50faf
--- /dev/null
+++ b/src/dashkit/presets/index.css
@@ -0,0 +1,6 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+   Dashkit Style Presets Showcase Barrel
+   Each preset is a self-contained token override layer on top of `dashkit.css`.
+   ───────────────────────────────────────────────────────────────────────────── */
+@import "./brutalist.css";
+@import "./matrix.css";
diff --git a/src/dashkit/presets/matrix.css b/src/dashkit/presets/matrix.css
new file mode 100644
index 0000000..dcab9b8
--- /dev/null
+++ b/src/dashkit/presets/matrix.css
@@ -0,0 +1,146 @@
+/* ─────────────────────────────────────────────────────────────────────────────
+   Dashkit Preset: Matrix
+   @preset matrix
+   @recommended-attrs class="dark" data-base="zinc" data-primary="green" data-preset="matrix"
+   @description Phosphor-green CRT terminal palette, 2px technical corners, monospace UI, subtle glow.
+   ───────────────────────────────────────────────────────────────────────────── */
+
+[data-preset="matrix"] {
+  /* 1. Geometry, Typography & Surface Elevation */
+  --radius: 0.125rem;
+  --ds-pill-radius: var(--radius-md);
+  --ds-border-width: 1px;
+  --ds-primary-gradient: none;
+  --ds-danger-gradient: none;
+  --font-sans: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+
+  --ds-button-border: #16a34a;
+  --ds-button-shadow: 0 0 10px -2px rgb(22 163 74 / 0.35);
+  --ds-button-outlined-shadow: 0 0 8px -2px rgb(22 163 74 / 0.2);
+  --ds-button-soft-shadow: none;
+  --ds-card-shadow: 0 0 20px -8px rgb(22 163 74 / 0.2);
+  --ds-input-shadow: inset 0 0 6px -2px rgb(22 163 74 / 0.15);
+
+  /* 2. Base Scale Override (Phosphor Green Monochromatic Ramp)
+     Ensures components using ds-0..ds-950 (Pagination, ProgressBar track,
+     ButtonGroup active state, Slider, Switch, Divider) match the CRT palette. */
+  --ds-color-0: #ecfdf5;
+  --ds-color-50: #ecfdf5;
+  --ds-color-100: #d1fae5;
+  --ds-color-200: #bbf7d0;
+  --ds-color-300: #86efac;
+  --ds-color-400: #4ade80;
+  --ds-color-500: #22c55e;
+  --ds-color-600: #16a34a;
+  --ds-color-700: #14532d;
+  --ds-color-800: #0a2612;
+  --ds-color-900: #05160a;
+  --ds-color-950: #020804;
+
+  /* 3. Info Scale Override (Terminal Cyan-Emerald Tint) */
+  --ds-color-info-50: #ecfdf5;
+  --ds-color-info-100: #d1fae5;
+  --ds-color-info-200: #a7f3d0;
+  --ds-color-info-300: #6ee7b7;
+  --ds-color-info-400: #34d399;
+  --ds-color-info-500: #10b981;
+  --ds-color-info-600: #059669;
+  --ds-color-info-700: #047857;
+  --ds-color-info-800: #065f46;
+  --ds-color-info-900: #064e3b;
+  --ds-color-info-950: #022c22;
+
+  /* 4. Core Surfaces & Borders (Light) */
+  --ds-bg: #ecfdf5;
+  --ds-fg: #052e16;
+  --ds-card: #f0fdf4;
+  --ds-card-fg: #052e16;
+  --ds-popover: #f0fdf4;
+  --ds-popover-fg: #052e16;
+  --ds-popover-border: #16a34a;
+  --ds-popover-item: #dcfce7;
+  --ds-popover-item-selected: #bbf7d0;
+  --ds-popover-item-selected-fg: #052e16;
+
+  --ds-border: #16a34a;
+  --ds-border-subtle: #86efac;
+
+  /* 5. Interactive & Muted Tokens (Light) */
+  --ds-primary: #15803d;
+  --ds-primary-fg: #f0fdf4;
+  --ds-secondary: #dcfce7;
+  --ds-secondary-fg: #052e16;
+  --ds-muted: #dcfce7;
+  --ds-muted-fg: #15803d;
+  --ds-accent: #bbf7d0;
+  --ds-accent-fg: #052e16;
+  --ds-info: #059669;
+  --ds-info-fg: #ecfdf5;
+
+  /* 6. Form Controls & Charts (Light) */
+  --ds-input-bg: #f0fdf4;
+  --ds-input-border: #16a34a;
+  --ds-input-focus: #15803d;
+  --ds-input-fg: #052e16;
+  --ds-input-ring: #22c55e;
+
+  --ds-chart-1: #16a34a;
+  --ds-chart-2: #059669;
+  --ds-chart-3: #65a30d;
+  --ds-chart-4: #0d9488;
+  --ds-chart-5: #10b981;
+}
+
+.dark[data-preset="matrix"],
+.dark [data-preset="matrix"] {
+  /* Phosphor highlight for ds-0 elements (Slider thumb, inverted Tooltip/Toast) */
+  --ds-color-0: #4ade80;
+
+  /* Core Surfaces & Borders (Dark CRT) */
+  --ds-bg: #020804;
+  --ds-fg: #4ade80;
+  --ds-card: #041007;
+  --ds-card-fg: #86efac;
+  --ds-popover: #051409;
+  --ds-popover-fg: #86efac;
+  --ds-popover-border: #15803d;
+  --ds-popover-item: #092210;
+  --ds-popover-item-selected: #14532d;
+  --ds-popover-item-selected-fg: #86efac;
+
+  --ds-border: #14532d;
+  --ds-border-subtle: #0a2914;
+
+  /* Interactive & Muted Tokens (Dark CRT) */
+  --ds-primary: #22c55e;
+  --ds-primary-fg: #020804;
+  --ds-secondary: #0a2612;
+  --ds-secondary-fg: #86efac;
+  --ds-muted: #07190c;
+  --ds-muted-fg: #4ade80;
+  --ds-accent: #14532d;
+  --ds-accent-fg: #86efac;
+  --ds-info: #10b981;
+  --ds-info-fg: #020804;
+
+  /* Surface Elevation (Dark CRT Glow) */
+  --ds-button-border: #22c55e;
+  --ds-button-shadow: 0 0 12px -2px rgb(34 197 94 / 0.45);
+  --ds-button-outlined-shadow: 0 0 10px -2px rgb(34 197 94 / 0.25);
+  --ds-button-soft-shadow: 0 0 8px -2px rgb(34 197 94 / 0.2);
+  --ds-card-shadow: 0 0 24px -8px rgb(34 197 94 / 0.22);
+  --ds-input-shadow: inset 0 0 8px -2px rgb(34 197 94 / 0.18);
+
+  /* Form Controls & Charts (Dark CRT) */
+  --ds-input-bg: #030c05;
+  --ds-input-border: #15803d;
+  --ds-input-focus: #22c55e;
+  --ds-input-fg: #86efac;
+  --ds-input-ring: #16a34a;
+
+  --ds-chart-1: #22c55e;
+  --ds-chart-2: #4ade80;
+  --ds-chart-3: #86efac;
+  --ds-chart-4: #10b981;
+  --ds-chart-5: #a3e635;
+}
diff --git a/src/dashkit/utils/portalTheme.test.ts b/src/dashkit/utils/portalTheme.test.ts
index bc0113b..6c14bd9 100644
--- a/src/dashkit/utils/portalTheme.test.ts
+++ b/src/dashkit/utils/portalTheme.test.ts
@@ -7,6 +7,7 @@ describe('getPortalThemeAttrs', () => {
     wrapper.setAttribute('data-primary', 'emerald');
     wrapper.setAttribute('data-base', 'stone');
     wrapper.setAttribute('data-dark-bg', 'oled');
+    wrapper.setAttribute('data-preset', 'brutalist');
 
     const child = document.createElement('button');
     wrapper.appendChild(child);
@@ -16,6 +17,7 @@ describe('getPortalThemeAttrs', () => {
       'data-primary': 'emerald',
       'data-base': 'stone',
       'data-dark-bg': 'oled',
+      'data-preset': 'brutalist',
     });
 
     document.body.removeChild(wrapper);
diff --git a/src/dashkit/utils/portalTheme.ts b/src/dashkit/utils/portalTheme.ts
index 255b8c9..7f71d1a 100644
--- a/src/dashkit/utils/portalTheme.ts
+++ b/src/dashkit/utils/portalTheme.ts
@@ -2,6 +2,7 @@ export interface PortalThemeAttrs {
   'data-primary'?: string;
   'data-base'?: string;
   'data-dark-bg'?: string;
+  'data-preset'?: string;
 }
 
 export function getPortalThemeAttrs(source?: Element | null): PortalThemeAttrs {
@@ -19,10 +20,12 @@ export function getPortalThemeAttrs(source?: Element | null): PortalThemeAttrs {
   const primary = el.closest('[data-primary]')?.getAttribute('data-primary');
   const base = el.closest('[data-base]')?.getAttribute('data-base');
   const darkBg = el.closest('[data-dark-bg]')?.getAttribute('data-dark-bg');
+  const preset = el.closest('[data-preset]')?.getAttribute('data-preset');
 
   if (primary) attrs['data-primary'] = primary;
   if (base) attrs['data-base'] = base;
   if (darkBg) attrs['data-dark-bg'] = darkBg;
+  if (preset) attrs['data-preset'] = preset;
 
   return attrs;
 }
diff --git a/src/index.css b/src/index.css
index 3f060d4..1b1ed44 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,6 +3,7 @@
 @import "@fontsource-variable/inter";
 @import "@fontsource-variable/jetbrains-mono";
 @import "./dashkit/dashkit.css";
+@import "./dashkit/presets/index.css";
 
 @theme {
   --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
diff --git a/src/layouts/MdxWrapper.tsx b/src/layouts/MdxWrapper.tsx
index a5d28c2..dabe273 100644
--- a/src/layouts/MdxWrapper.tsx
+++ b/src/layouts/MdxWrapper.tsx
@@ -81,6 +81,7 @@ import {
 } from '../dashkit/NavigationMenu';
 import { StatsCard } from '../dashkit/StatsCard/StatsCard';
 import { HiOutlineChartBarSquare, HiOutlineTicket } from 'react-icons/hi2';
+import { CustomizationPlayground } from '../partials/CustomizationPlayground';
 
 
 type MdxComponentProps = { components?: Record<string, ElementType> };
@@ -243,6 +244,7 @@ const components: Record<string, ElementType> = {
   BentoGridItem,
   HiOutlineChartBarSquare,
   HiOutlineTicket,
+  CustomizationPlayground,
   Preview: ({ children }: { children: ReactNode }) => (
     <div className="not-prose my-6 border bg-card border-border ds-rounded flex flex-col p-6 md:p-8 gap-4 items-start">
       {children}
diff --git a/src/pages/customization.mdx b/src/pages/customization.mdx
index 925234a..5f102b0 100644
--- a/src/pages/customization.mdx
+++ b/src/pages/customization.mdx
@@ -1,181 +1,115 @@
 # Customization
 
-Dashkit UI components are built to be deeply customizable through **CSS Design Tokens**. Instead of complex configuration files, Dashkit leverages **Tailwind CSS v4's CSS-first theme system** combined with a robust CSS variable architecture.
+> Architecture reference for AI agents and LLMs customizing Dashkit UI tokens, variants, and presets.
 
-All global and component-specific styles are defined in `src/dashkit.css`.
+## AI Customization Protocol (3 Tiers)
 
-## The Two-Layer Token System
+Always prioritize edits in this order:
 
-Dashkit uses a specialized two-layer system for managing design tokens:
+1. **Tier 1 — Global Theme (`src/dashkit/dashkit.css`)**: Global brand colors, neutral palettes, dark/OLED mode, border radius, and flat vs. gradient surfaces. Edit `:root` and `.dark` variables or apply `data-*` attributes.
+2. **Tier 2 — Component Variants (`src/dashkit/[Component]/[Component].tsx`)**: App-wide component styling changes. Edit the `cva(...)` definition directly inside the component file.
+3. **Tier 3 — Instance Overrides (`className` & `data-slot`)**: One-off layout tweaks on a single screen. Pass utility classes via `className`, or target internal slots via `data-slot` (e.g. `className="[&_[data-slot=label]]:uppercase"`).
 
-1.  **Tailwind Mappings (`@theme`)**: Maps semantic Tailwind names (like `bg-background` or `text-primary`) to underlying CSS variables.
-2.  **Theme Definitions (`:root` & `.dark`)**: Defines the actual values (colors, spacing, radii) for those variables in both light and dark modes.
+---
 
-## 1. Core Variables
+## Live Token & Preset Explorer
 
-The core variables control the foundation of your application. You can find these in the `:root` and `.dark` blocks of `src/dashkit.css`.
+<CustomizationPlayground />
 
-### Base Colors
-| Variable | Description |
-| :--- | :--- |
-| `--ds-bg` | Main application background |
-| `--ds-fg` | Main text color (foreground) |
-| `--ds-border` | Default border color |
+---
 
-### Surface Colors
-| Variable | Description |
-| :--- | :--- |
-| `--ds-card` | Background for cards and containers |
-| `--ds-card-fg` | Text color within cards |
-| `--ds-popover` | Background for dropdowns and menus |
+## Architecture: Tailwind v4 `@theme inline`
 
-### Interactive Colors
-| Variable | Description |
-| :--- | :--- |
-| `--ds-primary` | Primary brand color |
-| `--ds-secondary` | Secondary action color |
-| `--ds-accent` | Subtle highlight/selection color |
-
-### Feedback & Status Colors
-| Variable | Description |
-| :--- | :--- |
-| `--ds-danger` / `--ds-danger-fg` | Destructive/error actions and alerts |
-| `--ds-success` / `--ds-success-fg` | Success confirmations and positive status |
-| `--ds-warning` / `--ds-warning-fg` | Warnings and cautionary states |
-| `--ds-info` / `--ds-info-fg` | Informational indicators and tips |
-
-### Data Visualization Colors
-| Variable | Description |
-| :--- | :--- |
-| `--ds-chart-1` to `--ds-chart-5` | Distinct categorical colors for multi-series charts |
-
-## 2. Form & Input Tokens
-
-Input components use a specialized set of tokens to ensure consistency across the UI:
-
-```css
-:root {
-  --ds-input-bg: var(--color-ds-100);
-  --ds-input-border: var(--color-ds-300);
-  --ds-input-focus: var(--color-ds-400);
-  --ds-input-fg: var(--color-ds-900);
-  --ds-input-ring: var(--color-ds-300);
-}
-```
-
-## 3. Global Radius
-
-Dashkit uses a centralized radius system where all size tokens scale proportionally from `--radius`:
-
-| Variable | Default Formula / Value |
-| :--- | :--- |
-| `--radius` | `0.75rem` (master control) |
-| `--radius-sm` | `max(0px, calc(var(--radius) - 5px))` |
-| `--radius-md` | `max(0px, calc(var(--radius) - 3px))` |
-| `--radius-lg` | `var(--radius)` |
-| `--radius-xl` | `calc(var(--radius) * 1.3333)` |
-| `--radius-2xl` | `calc(var(--radius) * 1.6667)` |
-
-Changing `--radius` in `src/dashkit.css` (for example, setting `--radius: 0rem` for a sharp brutalist look or `1rem` for a soft rounded UI) automatically updates Cards, Modals, Inputs, Selects, and Surfaces across the entire library.
-
-## Customizing Your Theme
-
-### Dynamic Theme Switching (`data-base` & `data-primary`)
-
-Dashkit includes built-in support for dynamic base neutral palettes and primary brand colors. You can switch themes at runtime or scope them to specific sections using data attributes:
-
-```html
-<!-- Set globally on <html> or <body> -->
-<html data-base="slate" data-primary="violet">
-```
-
-Or scoped to a specific card or container:
-
-```tsx
-<div data-primary="emerald" data-base="stone">
-  <Button variant="filled">Emerald Action in Stone Surface</Button>
-</div>
-```
-
-#### Available Base Palettes (`data-base`)
-- `zinc` (default), `slate`, `gray`, `neutral`, `stone`, `taupe`, `mauve`, `mist`, `olive`
-
-#### Available Primary Palettes (`data-primary`)
-- `blue` (default), `violet`, `indigo`, `emerald`, `green`, `rose`, `orange`, `amber`, `cyan`, `teal`, `fuchsia`, `red`, `yellow`, `lime`, `sky`, `purple`, `pink`
-
-#### OLED Dark Mode (`data-dark-bg`)
-- `oled` (switches `.dark` background `--ds-bg` to pure `#000000` black)
-
-### Static Token Customization
-
-To customize Dashkit statically, edit the variables in `:root` and `.dark` inside `src/dashkit/dashkit.css`.
-
-### Example: Customizing Roundness
-
-Because `--radius-sm` through `--radius-2xl` are computed proportionally from `--radius`, changing `--radius` in `:root` updates the entire system:
-
-```css
-:root {
-  --radius: 1rem; /* Soft, rounded geometry (use 0rem for sharp corners) */
-}
-```
-
-### Example: Custom Brand Color
-
-To change the primary color to a custom purple:
+Dashkit connects semantic utility classes to CSS custom properties via `@theme inline` in `src/dashkit/dashkit.css`:
 
 ```css
-:root {
-  --ds-primary: #7c3aed; /* Violet 600 */
-  --ds-primary-fg: #ffffff;
-}
-
-.dark {
-  --ds-primary: #a78bfa; /* Violet 400 */
+@theme inline {
+  --color-background: var(--ds-bg);
+  --color-foreground: var(--ds-fg);
+  --color-card: var(--ds-card);
+  --color-popover: var(--ds-popover);
+  --color-border: var(--ds-border);
+  --color-primary: var(--ds-primary);
+  --color-primary-foreground: var(--ds-primary-fg);
+  --color-input-bg: var(--ds-input-bg);
+  --color-input-border: var(--ds-input-border);
+  --color-input-focus: var(--ds-input-focus);
+  --color-input-fg: var(--ds-input-fg);
 }
 ```
 
-## Creating Your Own Tokens
-
-When building your own components, you can add new tokens to the `:root` block to keep your design consistent:
-
-1.  **Define the token** in `dashkit.css`:
-    ```css
-    :root {
-      --ds-special-bg: var(--color-ds-primary-500);
-    }
-    ```
-2.  **Map it** in `@theme inline`:
-    ```css
-    @theme inline {
-      --color-special-bg: var(--ds-special-bg);
-    }
-    ```
-3.  **Use it** in your component:
-    ```tsx
-    <div className="bg-special-bg px-4 py-2">
-      My custom themed component
-    </div>
-    ```
-
-## AI-First Customization Protocol
-
-Dashkit is architected for **AI-driven customization via prompts**. Because you own the source code in `src/dashkit/`, AI agents should follow a strict 3-tier hierarchy instead of scattering inline classes across pages:
-
-1. **Tier 1 — Global Theme (`src/dashkit/dashkit.css`)**: Change `--ds-primary`, `--ds-bg`, `--ds-card`, `--radius`, or set `--ds-primary-gradient: none` for flat buttons.
-2. **Tier 2 — Component Variants (`src/dashkit/[Component]/[Component].tsx`)**: Edit `cva(...)` definitions directly in the component file when changing a component's default look or adding a new variant across the app.
-3. **Tier 3 — One-Off Overrides (`className` & `data-slot`)**: Use `className` for single-instance tweaks (the `cn` utility automatically resolves conflicts between standard Tailwind classes like `rounded-full` / `bg-none` and Dashkit's `ds-rounded*` / `ds-*-gradient`). For sub-elements inside form components (`Input`, `Select`, `Combobox`, `DatePicker`, etc.), target `data-slot` attributes (e.g., `className="[&_[data-slot=label]]:uppercase [&_[data-slot=trigger]]:rounded-full"`).
-
-### AI Prompt Example
-
-Copy and paste this prompt to quickly generate a unique theme:
-
-> **AI Prompt:**
-> "I want to create a new theme for Dashkit UI. The theme should use a professional 'Emerald and Slate' palette. Please update `dashkit.css` by:
-> 1. Updating the `:root` and `.dark` variables for bg, fg, primary, and secondary.
-> 2. Setting `--radius: 0.5rem` for a sharper, denser geometric profile.
-> 3. Ensuring inputs use a clean, bordered style with subtle rings.
-> Keep all page components pure without inline style overrides."
-
-
-
+---
+
+## Token Reference
+
+### Core Surfaces & Borders
+- `--ds-bg`: Base canvas background (`bg-background`)
+- `--ds-fg`: Main foreground text (`text-foreground`)
+- `--ds-card`: Card and panel surface (`bg-card`)
+- `--ds-card-fg`: Card text foreground (`text-card-foreground`)
+- `--ds-popover`: Floating surfaces for dropdowns, tooltips, dialogs (`bg-popover`)
+- `--ds-border`: Default border color (`border-border`)
+
+### Interactive & Brand Actions
+- `--ds-primary`: Primary action color (`bg-primary`, `text-primary`)
+- `--ds-primary-fg`: Text on primary action (`text-primary-foreground`)
+- `--ds-primary-gradient`: Linear gradient for filled buttons (`none` for flat style)
+- `--ds-secondary`: Secondary action background (`bg-secondary`)
+- `--ds-accent`: Subtle selection and hover highlight (`bg-accent`)
+
+### Status & Feedback
+- `--ds-danger` / `--ds-danger-fg`: Error and destructive actions (`text-danger`, `bg-danger`)
+- `--ds-success` / `--ds-success-fg`: Confirmation and positive indicators (`text-success`)
+- `--ds-warning` / `--ds-warning-fg`: Caution and warning alerts (`text-warning`)
+- `--ds-info` / `--ds-info-fg`: Informational badges and icons (`text-info`)
+
+### Form & Input Controls
+- `--ds-input-bg`: Input field background (`bg-input-bg`)
+- `--ds-input-border`: Unfocused input border (`border-input-border`)
+- `--ds-input-focus`: Focused ring and border highlight (`focus:border-input-focus`)
+- `--ds-input-fg`: Input value text color (`text-input-fg`)
+- `--ds-input-ring`: Focus ring box-shadow color
+
+### Geometry, Corner Radius & Tactile Shadows
+All corner radii derive dynamically from `--radius`. Modifying `--radius` updates all components instantly without React changes:
+- `--radius`: Master geometric scale (Default: `0.75rem`)
+- `--radius-sm`: Derived as `max(0px, calc(var(--radius) - 5px))` (Checkboxes, small Badges)
+- `--radius-md`: Derived as `max(0px, calc(var(--radius) - 3px))` (Inputs, Buttons)
+- `--radius-lg`: Derived as `var(--radius)` (Cards, Popovers)
+- `--radius-xl`: Derived as `calc(var(--radius) * 1.3333)` (Modals, Drawers)
+- `--radius-2xl`: Derived as `calc(var(--radius) * 1.6667)` (Hero containers)
+- `--ds-pill-radius`: Derived as `calc(var(--radius) * 9999)` (Pill Buttons, Switches, Chips, Sliders; set to `0rem` for square pills)
+- `--ds-border-width`: Structural border thickness for surfaces and controls (Default: `1px`, `2px` in Brutalism)
+- `--ds-card-shadow`: Surface elevation, hard offset, or glow shadow (Default: `none`)
+- `--ds-button-shadow`: Tactile elevation on buttons (Default: `0 1px 2px 0 rgb(0 0 0 / 0.05)`)
+- `--ds-button-border`: Border color for filled/soft buttons (Default: `transparent`, `var(--ds-border)` in Brutalism)
+
+---
+
+## Dynamic Runtime Attributes
+
+Dashkit supports instant dynamic switching via HTML attributes without changing CSS files:
+
+### Base Neutral Palette (`data-base`)
+Applies neutral gray scales (`ds-0` through `ds-950`):
+- Values: `zinc` (default), `slate`, `gray`, `neutral`, `stone`, `taupe`, `mauve`, `mist`, `olive`
+- Scope: Set on `<html data-base="...">` or scoped on any container `<div data-base="...">`
+
+### Primary Brand Color (`data-primary`)
+Applies primary brand swatches (`ds-primary-50` through `ds-primary-950`):
+- Values: `blue` (default), `violet`, `indigo`, `emerald`, `green`, `rose`, `orange`, `amber`, `cyan`, `teal`, `fuchsia`, `red`, `yellow`, `lime`, `sky`, `purple`, `pink`
+- Scope: Set on `<html data-primary="...">` or scoped on any container `<div data-primary="...">`
+
+### Dark & OLED Background (`data-dark-bg`)
+- `data-dark-bg="oled"`: Forces `.dark` background `--ds-bg` to pure `#000000` black.
+
+---
+
+## Preset Delta Layer (`src/dashkit/presets/`)
+
+Presets are token-override layers scoped to `[data-preset="<name>"]`:
+
+- `src/dashkit/dashkit.css`: Base engine and default token values.
+- `src/dashkit/presets/brutalist.css`: Neo-Brutalist preset (`--radius: 0rem`, `--ds-pill-radius: 0rem`, `--ds-border-width: 2px`, hard offset shadows).
+- `src/dashkit/presets/matrix.css`: Cyber Terminal preset (`--radius: 0.125rem`, phosphor green palette, CRT glow shadows, monospace font).
+- `src/dashkit/presets/index.css`: Preset aggregator.
diff --git a/src/pages/tabs.mdx b/src/pages/tabs.mdx
index f17afab..8703efb 100644
--- a/src/pages/tabs.mdx
+++ b/src/pages/tabs.mdx
@@ -52,6 +52,60 @@ The component is highly accessible and supports a fluid layout for its triggers.
 </Tabs>
 ```
 
+## Pills Variant (Segmented Control)
+
+Use `variant="pills"` to render tabs inside a compact, segmented track with an elevated floating indicator that smoothly slides between options.
+
+<div className="not-prose">
+  <Tabs defaultValue="overview" variant="pills">
+    <TabsList className="mb-6">
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="analytics">Analytics</TabsTrigger>
+      <TabsTrigger value="reports">Reports</TabsTrigger>
+      <TabsTrigger value="notifications">Notifications</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">
+      <div className="p-4 ds-rounded-lg border border-border bg-card">
+        <h4 className="text-base font-semibold text-foreground mb-1">Platform Overview</h4>
+        <p className="text-sm text-muted-foreground">General metric summary across all edge environments.</p>
+      </div>
+    </TabsContent>
+    <TabsContent value="analytics">
+      <div className="p-4 ds-rounded-lg border border-border bg-card">
+        <h4 className="text-base font-semibold text-foreground mb-1">Live Analytics</h4>
+        <p className="text-sm text-muted-foreground">Real-time latency, request rate, and error rate telemetry.</p>
+      </div>
+    </TabsContent>
+    <TabsContent value="reports">
+      <div className="p-4 ds-rounded-lg border border-border bg-card">
+        <h4 className="text-base font-semibold text-foreground mb-1">Generated Reports</h4>
+        <p className="text-sm text-muted-foreground">Weekly and monthly compliance export records.</p>
+      </div>
+    </TabsContent>
+    <TabsContent value="notifications">
+      <div className="p-4 ds-rounded-lg border border-border bg-card">
+        <h4 className="text-base font-semibold text-foreground mb-1">Notification Feeds</h4>
+        <p className="text-sm text-muted-foreground">System warnings and deployment completion triggers.</p>
+      </div>
+    </TabsContent>
+  </Tabs>
+</div>
+
+```tsx
+<Tabs defaultValue="overview" variant="pills">
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+    <TabsTrigger value="reports">Reports</TabsTrigger>
+    <TabsTrigger value="notifications">Notifications</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview metrics</TabsContent>
+  <TabsContent value="analytics">Analytics telemetry</TabsContent>
+  <TabsContent value="reports">Generated reports</TabsContent>
+  <TabsContent value="notifications">Notification feeds</TabsContent>
+</Tabs>
+```
+
 ## Icons & Advanced Previews
 
 You can easily integrate icons and complex child layouts within your tabs.
@@ -149,6 +203,12 @@ The indicator uses Framer Motion's `layoutId` to achieve a "sliding" effect when
     "defaultValue": "—",
     "description": "Callback fired when the active tab changes."
   },
+  {
+    "prop": "variant",
+    "type": "'line' | 'pills'",
+    "defaultValue": "'line'",
+    "description": "Visual styling variant: 'line' for standard bottom-bordered tabs, 'pills' for segmented control."
+  },
   {
     "prop": "children",
     "type": "ReactNode",
diff --git a/src/partials/CustomizationPlayground.tsx b/src/partials/CustomizationPlayground.tsx
new file mode 100644
index 0000000..5a27389
--- /dev/null
+++ b/src/partials/CustomizationPlayground.tsx
@@ -0,0 +1,333 @@
+import { useState } from 'react';
+import { useTheme } from './ThemeContext';
+import {
+  THEME_PRESETS,
+  BASE_COLORS,
+  PRIMARY_COLORS,
+  type BaseColor,
+  type PrimaryColor,
+} from './themeConfig';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '../dashkit/Card';
+import { Badge } from '../dashkit/Badge';
+import { Button } from '../dashkit/Button/Button';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from '../dashkit/Table/Table';
+import { FiCheck, FiCopy, FiRotateCcw, FiSun, FiMoon } from 'react-icons/fi';
+
+export function CustomizationPlayground() {
+  const {
+    theme,
+    toggleTheme,
+    baseColor,
+    setBaseColor,
+    primaryColor,
+    setPrimaryColor,
+    preset,
+    setPreset,
+  } = useTheme();
+
+  const [copiedCss, setCopiedCss] = useState(false);
+
+  const activePreset =
+    THEME_PRESETS.find(p => p.id === preset) ?? THEME_PRESETS[0];
+
+  const handleCopyCss = async () => {
+    try {
+      await navigator.clipboard.writeText(activePreset.cssSnippet);
+      setCopiedCss(true);
+      setTimeout(() => setCopiedCss(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy CSS snippet:', err);
+    }
+  };
+
+  return (
+    <div className="not-prose my-8 flex flex-col gap-6">
+      {/* 1. Preset Switcher Card */}
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-center justify-between gap-3">
+            <div>
+              <CardTitle>Interactive Theme Presets</CardTitle>
+              <CardDescription>
+                Select a preset below to transform the entire documentation site and inspect its live CSS tokens.
+              </CardDescription>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button
+                size="sm"
+                variant="outlined"
+                leftIcon={theme === 'dark' ? <FiSun size={14} /> : <FiMoon size={14} />}
+                onClick={toggleTheme}
+              >
+                {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+              </Button>
+              <Button
+                size="sm"
+                variant="soft"
+                leftIcon={<FiRotateCcw size={14} />}
+                onClick={() => setPreset('default')}
+                disabled={preset === 'default' && baseColor === 'zinc' && primaryColor === 'blue'}
+              >
+                Reset
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className="flex flex-col gap-6">
+          {/* Preset Option Cards (Stacked List) */}
+          <div className="flex flex-col gap-3">
+            {THEME_PRESETS.map(item => {
+              const isSelected = preset === item.id;
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  onClick={() => setPreset(item.id)}
+                  className={`w-full text-left p-4 ds-rounded-lg border transition-all cursor-pointer flex items-center gap-3.5 ${
+                    isSelected
+                      ? 'border-primary bg-primary/5 ring-2 ring-primary/30 shadow-sm'
+                      : 'border-border bg-card hover:bg-muted/40 hover:border-border/80'
+                  }`}
+                >
+                  <span
+                    className="size-3.5 rounded-full shrink-0 ring-2 ring-background"
+                    style={{ backgroundColor: item.accentHex }}
+                  />
+                  <div className="flex flex-col gap-0.5 min-w-0 flex-1">
+                    <div className="flex items-center gap-2.5">
+                      <span className="font-semibold text-sm text-foreground">
+                        {item.label}
+                      </span>
+                      <span className="text-xs text-muted-foreground font-medium">
+                        · {item.tagline}
+                      </span>
+                    </div>
+                    <p className="text-xs text-muted-foreground leading-relaxed">
+                      {item.description}
+                    </p>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Palette Fine-Tuning */}
+          <div className="flex flex-col gap-5 pt-3 border-t border-border">
+            <div className="space-y-2.5">
+              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Primary Brand Palette (`data-primary=&quot;{primaryColor}&quot;`)
+              </span>
+              <div className="flex flex-wrap gap-2">
+                {PRIMARY_COLORS.map(c => {
+                  const isSelected = primaryColor === c.id;
+                  return (
+                    <button
+                      key={c.id}
+                      type="button"
+                      onClick={() => setPrimaryColor(c.id as PrimaryColor)}
+                      title={c.label}
+                      aria-label={`Select ${c.label} primary color`}
+                      className={`size-7 rounded-full flex items-center justify-center transition-transform cursor-pointer ${
+                        isSelected
+                          ? 'ring-2 ring-primary ring-offset-2 ring-offset-background scale-110'
+                          : 'opacity-85 hover:opacity-100 hover:scale-105'
+                      }`}
+                      style={{ backgroundColor: c.color }}
+                    >
+                      {isSelected && <FiCheck size={12} className="text-white" />}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="space-y-2.5">
+              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Base Neutral Palette (`data-base=&quot;{baseColor}&quot;`)
+              </span>
+              <div className="flex flex-wrap gap-2">
+                {BASE_COLORS.map(c => {
+                  const isSelected = baseColor === c.id;
+                  return (
+                    <button
+                      key={c.id}
+                      type="button"
+                      onClick={() => setBaseColor(c.id as BaseColor)}
+                      title={c.label}
+                      aria-label={`Select ${c.label} base color`}
+                      className={`px-2.5 py-1 text-xs font-medium ds-rounded border transition-colors cursor-pointer flex items-center gap-1.5 ${
+                        isSelected
+                          ? 'border-primary bg-primary/10 text-foreground'
+                          : 'border-border bg-card text-muted-foreground hover:text-foreground'
+                      }`}
+                    >
+                      <span
+                        className="size-2.5 rounded-full"
+                        style={{ backgroundColor: c.color }}
+                      />
+                      {c.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 2. Dynamic Core Variables Table */}
+      <Card>
+        <CardHeader>
+          <div className="flex flex-wrap items-center justify-between gap-2">
+            <div>
+              <CardTitle>
+                Active Design Tokens — {activePreset.label} Preset
+              </CardTitle>
+              <CardDescription>
+                Real-time CSS custom properties currently powering the interface in Light and Dark modes.
+              </CardDescription>
+            </div>
+            <Badge variant="soft" color="primary" content={`--radius: ${activePreset.radius}`} />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Token Variable</TableHead>
+                <TableHead>Category</TableHead>
+                <TableHead>Light Value (`:root`)</TableHead>
+                <TableHead>Dark Value (`.dark`)</TableHead>
+                <TableHead>Role</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {activePreset.tokens.map(token => (
+                <TableRow key={token.variable}>
+                  <TableCell className="font-mono text-xs font-semibold text-foreground">
+                    {token.variable}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="soft" color="base" content={token.category} />
+                  </TableCell>
+                  <TableCell className="font-mono text-xs">
+                    <span className="inline-flex items-center gap-2">
+                      {token.lightPreviewColor && (
+                        <span
+                          className="size-3.5 ds-rounded-sm border border-border shrink-0"
+                          style={{ backgroundColor: token.lightPreviewColor }}
+                        />
+                      )}
+                      <span>{token.lightValue}</span>
+                    </span>
+                  </TableCell>
+                  <TableCell className="font-mono text-xs">
+                    <span className="inline-flex items-center gap-2">
+                      {token.darkPreviewColor && (
+                        <span
+                          className="size-3.5 ds-rounded-sm border border-border shrink-0"
+                          style={{ backgroundColor: token.darkPreviewColor }}
+                        />
+                      )}
+                      <span>{token.darkValue}</span>
+                    </span>
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {token.description}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* 3. Dynamic Radius Scale & Generated CSS */}
+      <div className="flex flex-col gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>Proportional Radius Scale</CardTitle>
+            <CardDescription>
+              All component corner tokens derive automatically from{' '}
+              <code className="font-mono text-xs text-foreground">
+                --radius: {activePreset.radius}
+              </code>
+              .
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            {(
+              [
+                ['--radius-sm', activePreset.radiusScale.sm, 'ds-rounded-sm'],
+                ['--radius-md', activePreset.radiusScale.md, 'ds-rounded-md'],
+                ['--radius-lg', activePreset.radiusScale.lg, 'ds-rounded-lg'],
+                ['--radius-xl', activePreset.radiusScale.xl, 'ds-rounded-xl'],
+                ['--radius-2xl', activePreset.radiusScale['2xl'], 'ds-rounded-2xl'],
+              ] as const
+            ).map(([tokenName, computedText, radiusClass]) => (
+              <div
+                key={tokenName}
+                className="flex items-center justify-between gap-3 p-2.5 border border-border bg-background ds-rounded"
+              >
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`size-8 bg-primary/15 border-2 border-primary ${radiusClass}`}
+                  />
+                  <div>
+                    <div className="font-mono text-xs font-semibold text-foreground">
+                      {tokenName}
+                    </div>
+                    <div className="font-mono text-[11px] text-muted-foreground">
+                      {computedText}
+                    </div>
+                  </div>
+                </div>
+                <Badge variant="soft" color="base" content={radiusClass} />
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between gap-2">
+              <div>
+                <CardTitle>Preset Source — `{activePreset.presetFile}`</CardTitle>
+                <CardDescription>
+                  Self-contained CSS token delta for <strong>{activePreset.label}</strong>. Copy into <code className="font-mono text-xs">src/dashkit/dashkit.css</code> or import from <code className="font-mono text-xs">{activePreset.presetFile}</code>.
+                </CardDescription>
+              </div>
+              <Button
+                size="sm"
+                variant="outlined"
+                leftIcon={copiedCss ? <FiCheck size={14} /> : <FiCopy size={14} />}
+                onClick={handleCopyCss}
+              >
+                {copiedCss ? 'Copied' : 'Copy CSS'}
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <pre className="p-4 bg-ds-950 text-ds-100 font-mono text-xs overflow-x-auto ds-rounded border border-border leading-relaxed">
+              <code>{activePreset.cssSnippet}</code>
+            </pre>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/src/partials/HomeExamples.tsx b/src/partials/HomeExamples.tsx
index 7f6b778..4529882 100644
--- a/src/partials/HomeExamples.tsx
+++ b/src/partials/HomeExamples.tsx
@@ -1,14 +1,71 @@
+import { Link } from 'react-router-dom';
+import { FiArrowUpRight } from 'react-icons/fi';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../dashkit/Tabs/Tabs';
+import { Button } from '../dashkit/Button/Button';
+import { useTheme } from './ThemeContext';
+import { THEME_PRESETS, type ThemePreset } from './themeConfig';
 import { ColumnOne } from './home-examples/ColumnOne';
 import { ColumnTwo } from './home-examples/ColumnTwo';
 import { ColumnThree } from './home-examples/ColumnThree';
 import { ColumnFour } from './home-examples/ColumnFour';
 
 export function HomeExamples() {
+  const { preset, setPreset } = useTheme();
+  const activePreset =
+    THEME_PRESETS.find(p => p.id === preset) ?? THEME_PRESETS[0];
+
   return (
     <>
+      {/* Live Theme Preset Switcher Bar */}
+      <div className="w-full max-w-[1600px] mx-auto px-4 pt-6 pb-2">
+        <div className="flex flex-row items-center justify-between gap-3 px-4 py-2 bg-card/80 backdrop-blur-sm border border-border ds-border-width ds-card-shadow ds-rounded-lg">
+          {/* Official Dashkit Tabs (variant="pills") */}
+          <div className="shrink-0">
+            <Tabs
+              variant="pills"
+              value={preset}
+              onValueChange={(val) => setPreset(val as ThemePreset)}
+            >
+              <TabsList>
+                {THEME_PRESETS.map(item => (
+                  <TabsTrigger
+                    key={item.id}
+                    value={item.id}
+                    className="gap-2 px-3 py-1.5 text-xs"
+                  >
+                    <span
+                      className="size-2 rounded-full shrink-0"
+                      style={{ backgroundColor: item.accentHex }}
+                    />
+                    <span>{item.label}</span>
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          </div>
+
+          {/* Preset Metadata & Docs Action */}
+          <div className="flex items-center gap-3 shrink-0 ml-auto">
+            <span className="hidden md:inline-flex items-center gap-1.5 font-mono text-xs text-muted-foreground">
+              <span className="text-foreground/80">{activePreset.tagline}</span>
+              <span className="opacity-40">/</span>
+              <span>{activePreset.radius}</span>
+            </span>
+
+            <Button
+              asChild
+              size="sm"
+              variant="outlined"
+              rightIcon={<FiArrowUpRight size={13} />}
+            >
+              <Link to="/docs/customization">Tokens</Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+
       {/* Mobile Tabbed View (< 768px) */}
-      <div className="block md:hidden w-full max-w-md mx-auto px-4 py-8">
+      <div className="block md:hidden w-full max-w-md mx-auto px-4 py-6">
         <Tabs defaultValue="forms">
           <TabsList className="grid grid-cols-4 mb-6">
             <TabsTrigger value="forms">Forms</TabsTrigger>
@@ -32,7 +89,7 @@ export function HomeExamples() {
       </div>
 
       {/* Desktop Multi-column Grid (>= 768px) */}
-      <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 w-full max-w-[1600px] mx-auto px-4 py-12 items-start">
+      <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-4 gap-4 w-full max-w-[1600px] mx-auto px-4 py-8 items-start">
         <ColumnOne />
         <ColumnTwo />
         <ColumnThree />
diff --git a/src/partials/ThemeContext.ts b/src/partials/ThemeContext.ts
index f55b44b..6ce5f91 100644
--- a/src/partials/ThemeContext.ts
+++ b/src/partials/ThemeContext.ts
@@ -1,8 +1,8 @@
 import { createContext, useContext } from 'react';
-import type { BaseColor, PrimaryColor, DarkBackground } from './themeConfig';
+import type { BaseColor, PrimaryColor, DarkBackground, ThemePreset } from './themeConfig';
 
 export type Theme = 'light' | 'dark';
-export type { BaseColor, PrimaryColor, DarkBackground };
+export type { BaseColor, PrimaryColor, DarkBackground, ThemePreset };
 
 export interface ThemeContextType {
   theme: Theme;
@@ -13,6 +13,8 @@ export interface ThemeContextType {
   setPrimaryColor: (primary: PrimaryColor) => void;
   darkBg: DarkBackground;
   setDarkBg: (bg: DarkBackground) => void;
+  preset: ThemePreset;
+  setPreset: (preset: ThemePreset) => void;
 }
 
 export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
diff --git a/src/partials/ThemeCustomizer.tsx b/src/partials/ThemeCustomizer.tsx
index badffbb..fa93dbd 100644
--- a/src/partials/ThemeCustomizer.tsx
+++ b/src/partials/ThemeCustomizer.tsx
@@ -2,6 +2,7 @@ import { useTheme } from './ThemeContext';
 import {
   BASE_COLORS,
   PRIMARY_COLORS,
+  THEME_PRESETS,
   type BaseColor,
   type PrimaryColor,
 } from './themeConfig';
@@ -23,13 +24,14 @@ export function ThemeCustomizer({ className, size = 'sm' }: ThemeCustomizerProps
     setBaseColor,
     primaryColor,
     setPrimaryColor,
+    preset,
+    setPreset,
   } = useTheme();
 
-  const isDefault = baseColor === 'zinc' && primaryColor === 'blue';
+  const isDefault = preset === 'default' && baseColor === 'zinc' && primaryColor === 'blue';
 
   const handleReset = () => {
-    setBaseColor('zinc');
-    setPrimaryColor('blue');
+    setPreset('default');
   };
 
   return (
@@ -44,12 +46,57 @@ export function ThemeCustomizer({ className, size = 'sm' }: ThemeCustomizerProps
         />
       </PopoverTrigger>
 
-      <PopoverContent align="end" side="bottom" sideOffset={8} className="w-[320px] p-4">
+      <PopoverContent align="end" side="bottom" sideOffset={8} className="w-[330px] p-4">
         <div className="space-y-4">
           {/* Header */}
           <div className="pb-3 border-b border-border">
             <h4 className="font-semibold text-sm text-foreground">Theme Customizer</h4>
-            <p className="text-xs text-muted-foreground">Adjust base & brand colors in real-time</p>
+            <p className="text-xs text-muted-foreground">Switch design presets & palettes in real-time</p>
+          </div>
+
+          {/* Preset Section */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Style Preset
+              </span>
+              <span className="text-xs font-semibold text-foreground">
+                {THEME_PRESETS.find(p => p.id === preset)?.label}
+              </span>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              {THEME_PRESETS.map(p => {
+                const isSelected = preset === p.id;
+                return (
+                  <button
+                    key={p.id}
+                    type="button"
+                    onClick={() => setPreset(p.id)}
+                    className={clsx(
+                      'px-3 py-2 text-left ds-rounded border transition-all cursor-pointer flex items-center justify-between gap-3',
+                      isSelected
+                        ? 'border-primary bg-primary/10 text-foreground ring-1 ring-primary'
+                        : 'border-border bg-card hover:bg-muted/60 text-muted-foreground hover:text-foreground'
+                    )}
+                  >
+                    <div className="flex items-center gap-2.5 min-w-0">
+                      <span
+                        className="size-2.5 rounded-full shrink-0"
+                        style={{ backgroundColor: p.accentHex }}
+                      />
+                      <div className="flex flex-col min-w-0">
+                        <span className="text-xs font-semibold text-foreground leading-tight">
+                          {p.label}
+                        </span>
+                        <span className="text-[11px] text-muted-foreground truncate leading-tight">
+                          {p.tagline}
+                        </span>
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
           </div>
 
           {/* Primary Color Section */}
diff --git a/src/partials/ThemeProvider.tsx b/src/partials/ThemeProvider.tsx
index 46016d9..5c2a7dd 100644
--- a/src/partials/ThemeProvider.tsx
+++ b/src/partials/ThemeProvider.tsx
@@ -5,7 +5,9 @@ import {
   type BaseColor,
   type PrimaryColor,
   type DarkBackground,
+  type ThemePreset,
 } from './ThemeContext';
+import { THEME_PRESETS } from './themeConfig';
 
 /**
  * Disables CSS transitions globally for a single tick during theme / palette switches.
@@ -68,6 +70,14 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     return 'midnight';
   });
 
+  const [preset, setPresetState] = useState<ThemePreset>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('dashkit-preset') as ThemePreset;
+      if (saved && THEME_PRESETS.some(p => p.id === saved)) return saved;
+    }
+    return 'default';
+  });
+
   const setBaseColor = (base: BaseColor) => {
     const restore = disableTransitions();
     setBaseColorState(base);
@@ -95,6 +105,40 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     restore();
   };
 
+  const setPreset = (nextPreset: ThemePreset) => {
+    const restore = disableTransitions();
+    const config = THEME_PRESETS.find(p => p.id === nextPreset) ?? THEME_PRESETS[0];
+    const root = window.document.documentElement;
+
+    setPresetState(nextPreset);
+    root.setAttribute('data-preset', nextPreset);
+    localStorage.setItem('dashkit-preset', nextPreset);
+
+    setBaseColorState(config.baseColor);
+    root.setAttribute('data-base', config.baseColor);
+    localStorage.setItem('dashkit-base-color', config.baseColor);
+
+    setPrimaryColorState(config.primaryColor);
+    root.setAttribute('data-primary', config.primaryColor);
+    localStorage.setItem('dashkit-primary-color', config.primaryColor);
+
+    setDarkBgState(config.darkBg);
+    root.setAttribute('data-dark-bg', config.darkBg);
+    localStorage.setItem('dashkit-dark-bg', config.darkBg);
+
+    if (config.preferredTheme) {
+      setTheme(config.preferredTheme);
+      if (config.preferredTheme === 'dark') {
+        root.classList.add('dark');
+      } else {
+        root.classList.remove('dark');
+      }
+      localStorage.setItem('theme', config.preferredTheme);
+    }
+
+    restore();
+  };
+
   const toggleTheme = () => {
     const restore = disableTransitions();
     setTheme(prev => {
@@ -122,6 +166,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     root.setAttribute('data-base', baseColor);
     root.setAttribute('data-primary', primaryColor);
     root.setAttribute('data-dark-bg', darkBg);
+    root.setAttribute('data-preset', preset);
   }, []);
 
   return (
@@ -135,6 +180,8 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
         setPrimaryColor,
         darkBg,
         setDarkBg,
+        preset,
+        setPreset,
       }}
     >
       {children}
diff --git a/src/partials/home-examples/ColumnOne.tsx b/src/partials/home-examples/ColumnOne.tsx
index fe1b9d5..4b53499 100644
--- a/src/partials/home-examples/ColumnOne.tsx
+++ b/src/partials/home-examples/ColumnOne.tsx
@@ -473,7 +473,7 @@ export function ColumnOne() {
             </div>
             <div className="flex items-center justify-between pt-1">
                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <span className="size-1.5 rounded-full bg-emerald-500 shrink-0" />
+                  <span className="size-1.5 rounded-full bg-success shrink-0" />
                   <span>Delivery Active (200 OK)</span>
                </div>
                <Button
diff --git a/src/partials/home-examples/ColumnThree.tsx b/src/partials/home-examples/ColumnThree.tsx
index 63c7579..f7a88c5 100644
--- a/src/partials/home-examples/ColumnThree.tsx
+++ b/src/partials/home-examples/ColumnThree.tsx
@@ -425,7 +425,7 @@ export function ColumnThree() {
             </div>
             <div className="flex items-center justify-between text-xs pt-1">
                <span className="text-muted-foreground">Automatic backup snapshot daily</span>
-               <span className="font-medium text-emerald-600 dark:text-emerald-400">Encrypted</span>
+               <span className="font-medium text-success">Encrypted</span>
             </div>
             <Button
                variant="outlined"
diff --git a/src/partials/themeConfig.ts b/src/partials/themeConfig.ts
index 0ce80a3..4a2293b 100644
--- a/src/partials/themeConfig.ts
+++ b/src/partials/themeConfig.ts
@@ -1,3 +1,6 @@
+import brutalistCssRaw from '../dashkit/presets/brutalist.css?raw';
+import matrixCssRaw from '../dashkit/presets/matrix.css?raw';
+
 export type BaseColor =
   | 'slate'
   | 'gray'
@@ -30,6 +33,8 @@ export type PrimaryColor =
 
 export type DarkBackground = 'midnight' | 'oled';
 
+export type ThemePreset = 'default' | 'brutalist' | 'matrix';
+
 export interface ColorOption<T extends string> {
   id: T;
   label: string;
@@ -42,6 +47,41 @@ export interface DarkBgOption {
   description: string;
 }
 
+export interface PresetTokenEntry {
+  variable: string;
+  category: 'Core & Surface' | 'Interactive' | 'Form & Geometry';
+  description: string;
+  lightValue: string;
+  darkValue: string;
+  lightPreviewColor?: string;
+  darkPreviewColor?: string;
+}
+
+export interface ThemePresetOption {
+  id: ThemePreset;
+  label: string;
+  tagline: string;
+  description: string;
+  baseColor: BaseColor;
+  primaryColor: PrimaryColor;
+  darkBg: DarkBackground;
+  preferredTheme?: 'light' | 'dark';
+  radius: string;
+  radiusScale: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+  };
+  fontLabel: string;
+  surfaceLabel: string;
+  accentHex: string;
+  presetFile: string;
+  tokens: PresetTokenEntry[];
+  cssSnippet: string;
+}
+
 export const BASE_COLORS: ColorOption<BaseColor>[] = [
   { id: 'slate', label: 'Slate', color: '#64748b' },
   { id: 'gray', label: 'Gray', color: '#6b7280' },
@@ -78,3 +118,459 @@ export const DARK_BG_OPTIONS: DarkBgOption[] = [
   { id: 'midnight', label: 'Midnight', description: 'Deep graphite dark mode' },
   { id: 'oled', label: 'OLED', description: 'Pure black #000000' },
 ];
+
+export const THEME_PRESETS: ThemePresetOption[] = [
+  {
+    id: 'default',
+    label: 'Default',
+    tagline: 'Clean & balanced',
+    description:
+      'Balanced 0.75rem geometry, Zinc neutral surfaces, Blue brand actions, and subtle depth gradients.',
+    baseColor: 'zinc',
+    primaryColor: 'blue',
+    darkBg: 'midnight',
+    radius: '0.75rem',
+    radiusScale: {
+      sm: '7px (calc(0.75rem - 5px))',
+      md: '9px (calc(0.75rem - 3px))',
+      lg: '12px (0.75rem)',
+      xl: '16px (calc(0.75rem * 1.3333))',
+      '2xl': '20px (calc(0.75rem * 1.6667))',
+    },
+    fontLabel: 'Inter Variable (Sans)',
+    surfaceLabel: 'Subtle tactile gradient',
+    accentHex: '#2563eb',
+    presetFile: 'src/dashkit/dashkit.css',
+    tokens: [
+      {
+        variable: '--ds-bg',
+        category: 'Core & Surface',
+        description: 'Main application background',
+        lightValue: 'var(--color-ds-100)',
+        darkValue: 'var(--color-ds-950)',
+        lightPreviewColor: '#f4f4f5',
+        darkPreviewColor: '#09090b',
+      },
+      {
+        variable: '--ds-fg',
+        category: 'Core & Surface',
+        description: 'Main foreground text color',
+        lightValue: 'var(--color-ds-800)',
+        darkValue: 'var(--color-ds-100)',
+        lightPreviewColor: '#27272a',
+        darkPreviewColor: '#f4f4f5',
+      },
+      {
+        variable: '--ds-card',
+        category: 'Core & Surface',
+        description: 'Surface color for Cards & containers',
+        lightValue: 'var(--color-ds-0)',
+        darkValue: 'var(--color-ds-900)',
+        lightPreviewColor: '#ffffff',
+        darkPreviewColor: '#18181b',
+      },
+      {
+        variable: '--ds-border',
+        category: 'Core & Surface',
+        description: 'Default structural border token',
+        lightValue: 'var(--color-ds-300)',
+        darkValue: 'var(--color-ds-800)',
+        lightPreviewColor: '#d4d4d8',
+        darkPreviewColor: '#27272a',
+      },
+      {
+        variable: '--ds-primary',
+        category: 'Interactive',
+        description: 'Primary brand action color',
+        lightValue: 'var(--color-ds-primary-600)',
+        darkValue: 'var(--color-ds-primary-500)',
+        lightPreviewColor: '#2563eb',
+        darkPreviewColor: '#3b82f6',
+      },
+      {
+        variable: '--ds-secondary',
+        category: 'Interactive',
+        description: 'Secondary neutral action fill',
+        lightValue: 'var(--color-ds-200)',
+        darkValue: 'var(--color-ds-800)',
+        lightPreviewColor: '#e4e4e7',
+        darkPreviewColor: '#27272a',
+      },
+      {
+        variable: '--ds-input-bg',
+        category: 'Form & Geometry',
+        description: 'Form control surface background',
+        lightValue: 'var(--color-ds-100)',
+        darkValue: 'var(--color-ds-800)',
+        lightPreviewColor: '#f4f4f5',
+        darkPreviewColor: '#27272a',
+      },
+      {
+        variable: '--ds-input-border',
+        category: 'Form & Geometry',
+        description: 'Form control border color',
+        lightValue: 'var(--color-ds-300)',
+        darkValue: 'var(--color-ds-700)',
+        lightPreviewColor: '#d4d4d8',
+        darkPreviewColor: '#3f3f46',
+      },
+      {
+        variable: '--radius',
+        category: 'Form & Geometry',
+        description: 'Master geometric corner radius',
+        lightValue: '0.75rem',
+        darkValue: '0.75rem',
+      },
+      {
+        variable: '--ds-pill-radius',
+        category: 'Form & Geometry',
+        description: 'Pill radius for Buttons, Chips, Switches & Sliders',
+        lightValue: 'calc(var(--radius) * 9999)',
+        darkValue: 'calc(var(--radius) * 9999)',
+      },
+      {
+        variable: '--ds-border-width',
+        category: 'Form & Geometry',
+        description: 'Structural border width for Cards, Buttons & Inputs',
+        lightValue: '1px',
+        darkValue: '1px',
+      },
+      {
+        variable: '--ds-button-shadow',
+        category: 'Interactive',
+        description: 'Elevation / offset shadow for Button controls',
+        lightValue: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        darkValue: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+      },
+      {
+        variable: '--ds-card-shadow',
+        category: 'Core & Surface',
+        description: 'Default elevation / offset shadow for Cards',
+        lightValue: 'none',
+        darkValue: 'none',
+      },
+      {
+        variable: '--ds-primary-gradient',
+        category: 'Form & Geometry',
+        description: 'Button fill elevation gradient',
+        lightValue: 'linear-gradient(to bottom, var(--ds-primary), ...)',
+        darkValue: 'linear-gradient(to bottom, var(--ds-primary), ...)',
+      },
+    ],
+    cssSnippet: `:root {
+  --radius: 0.75rem;
+  --ds-pill-radius: calc(var(--radius) * 9999);
+  --ds-border-width: 1px;
+  --ds-button-border: transparent;
+  --ds-button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --ds-card-shadow: none;
+  --ds-input-shadow: none;
+
+  --ds-bg: var(--color-ds-100);
+  --ds-fg: var(--color-ds-800);
+  --ds-card: var(--color-ds-0);
+  --ds-card-fg: var(--color-ds-900);
+  --ds-border: var(--color-ds-300);
+
+  --ds-primary: var(--color-ds-primary-600);
+  --ds-primary-fg: var(--color-white);
+
+  --ds-input-bg: var(--color-ds-100);
+  --ds-input-border: var(--color-ds-300);
+}
+
+.dark {
+  --ds-bg: var(--color-ds-950);
+  --ds-fg: var(--color-ds-100);
+  --ds-card: var(--color-ds-900);
+  --ds-card-fg: var(--color-ds-100);
+  --ds-border: var(--color-ds-800);
+
+  --ds-primary: var(--color-ds-primary-500);
+  --ds-input-bg: var(--color-ds-800);
+  --ds-input-border: var(--color-ds-700);
+}`,
+  },
+  {
+    id: 'brutalist',
+    label: 'Brutalism',
+    tagline: 'Sharp & high-contrast',
+    description:
+      'Zero border-radius (0rem), flat solid fills without gradients, warm architectural paper surfaces, stark borders, and punchy Orange accents.',
+    baseColor: 'stone',
+    primaryColor: 'orange',
+    darkBg: 'midnight',
+    preferredTheme: 'light',
+    radius: '0rem',
+    radiusScale: {
+      sm: '0px (max(0px, 0rem - 5px))',
+      md: '0px (max(0px, 0rem - 3px))',
+      lg: '0px (0rem)',
+      xl: '0px (calc(0rem * 1.3333))',
+      '2xl': '0px (calc(0rem * 1.6667))',
+    },
+    fontLabel: 'Inter Variable (Sans)',
+    surfaceLabel: 'Flat solid + Stark borders',
+    accentHex: '#ea580c',
+    presetFile: 'src/dashkit/presets/brutalist.css',
+    tokens: [
+      {
+        variable: '--ds-bg',
+        category: 'Core & Surface',
+        description: 'Warm archival stone background',
+        lightValue: '#f5f2eb',
+        darkValue: '#121110',
+        lightPreviewColor: '#f5f2eb',
+        darkPreviewColor: '#121110',
+      },
+      {
+        variable: '--ds-fg',
+        category: 'Core & Surface',
+        description: 'High-contrast ink foreground',
+        lightValue: 'var(--color-ds-950)',
+        darkValue: 'var(--color-ds-50)',
+        lightPreviewColor: '#0c0a09',
+        darkPreviewColor: '#fafaf9',
+      },
+      {
+        variable: '--ds-card',
+        category: 'Core & Surface',
+        description: 'Crisp cream/charcoal card surface',
+        lightValue: '#fffdf9',
+        darkValue: '#1c1917',
+        lightPreviewColor: '#fffdf9',
+        darkPreviewColor: '#1c1917',
+      },
+      {
+        variable: '--ds-border',
+        category: 'Core & Surface',
+        description: 'Stark architectural grid border',
+        lightValue: 'var(--color-ds-900)',
+        darkValue: 'var(--color-ds-300)',
+        lightPreviewColor: '#1c1917',
+        darkPreviewColor: '#d6d3d1',
+      },
+      {
+        variable: '--ds-primary',
+        category: 'Interactive',
+        description: 'Industrial safety orange accent',
+        lightValue: 'var(--color-ds-primary-600)',
+        darkValue: 'var(--color-ds-primary-500)',
+        lightPreviewColor: '#ea580c',
+        darkPreviewColor: '#f97316',
+      },
+      {
+        variable: '--ds-secondary',
+        category: 'Interactive',
+        description: 'Warm stone secondary surface',
+        lightValue: 'var(--color-ds-200)',
+        darkValue: 'var(--color-ds-800)',
+        lightPreviewColor: '#e7e5e4',
+        darkPreviewColor: '#292524',
+      },
+      {
+        variable: '--ds-input-bg',
+        category: 'Form & Geometry',
+        description: 'High-contrast input fill',
+        lightValue: '#ffffff',
+        darkValue: '#0c0a09',
+        lightPreviewColor: '#ffffff',
+        darkPreviewColor: '#0c0a09',
+      },
+      {
+        variable: '--ds-input-border',
+        category: 'Form & Geometry',
+        description: 'Stark ink border on form controls',
+        lightValue: 'var(--color-ds-900)',
+        darkValue: 'var(--color-ds-300)',
+        lightPreviewColor: '#1c1917',
+        darkPreviewColor: '#d6d3d1',
+      },
+      {
+        variable: '--radius',
+        category: 'Form & Geometry',
+        description: 'Sharp 90-degree corners everywhere',
+        lightValue: '0rem',
+        darkValue: '0rem',
+      },
+      {
+        variable: '--ds-pill-radius',
+        category: 'Form & Geometry',
+        description: 'Forces pill Buttons, Chips & Switches to 0px',
+        lightValue: '0rem',
+        darkValue: '0rem',
+      },
+      {
+        variable: '--ds-border-width',
+        category: 'Form & Geometry',
+        description: 'Bold 2px structural borders on Cards, Buttons & Inputs',
+        lightValue: '2px',
+        darkValue: '2px',
+      },
+      {
+        variable: '--ds-button-shadow',
+        category: 'Interactive',
+        description: 'Hard Neo-Brutalist offset shadow on Buttons',
+        lightValue: '3px 3px 0px 0px var(--ds-border)',
+        darkValue: '3px 3px 0px 0px var(--ds-border)',
+      },
+      {
+        variable: '--ds-card-shadow',
+        category: 'Core & Surface',
+        description: 'Hard Neo-Brutalist offset shadow on Cards',
+        lightValue: '4px 4px 0px 0px var(--ds-border)',
+        darkValue: '4px 4px 0px 0px var(--ds-border)',
+      },
+      {
+        variable: '--ds-primary-gradient',
+        category: 'Form & Geometry',
+        description: 'Pure flat solid buttons (no gradient)',
+        lightValue: 'none',
+        darkValue: 'none',
+      },
+    ],
+    cssSnippet: brutalistCssRaw.trim(),
+  },
+  {
+    id: 'matrix',
+    label: 'Matrix',
+    tagline: 'Cyber terminal',
+    description:
+      'Phosphor-green terminal palette on deep OLED black, crisp 2px technical corners (0.125rem), flat surfaces, and full-interface monospace typography.',
+    baseColor: 'zinc',
+    primaryColor: 'green',
+    darkBg: 'oled',
+    preferredTheme: 'dark',
+    radius: '0.125rem',
+    radiusScale: {
+      sm: '0px (max(0px, 2px - 5px))',
+      md: '0px (max(0px, 2px - 3px))',
+      lg: '2px (0.125rem)',
+      xl: '2.6px (calc(0.125rem * 1.3333))',
+      '2xl': '3.3px (calc(0.125rem * 1.6667))',
+    },
+    fontLabel: 'JetBrains Mono (Monospace)',
+    surfaceLabel: 'CRT Terminal Phosphor',
+    accentHex: '#22c55e',
+    presetFile: 'src/dashkit/presets/matrix.css',
+    tokens: [
+      {
+        variable: '--ds-bg',
+        category: 'Core & Surface',
+        description: 'Deep CRT terminal background',
+        lightValue: '#ecfdf5',
+        darkValue: '#020804',
+        lightPreviewColor: '#ecfdf5',
+        darkPreviewColor: '#020804',
+      },
+      {
+        variable: '--ds-fg',
+        category: 'Core & Surface',
+        description: 'Phosphor green foreground text & active indicators',
+        lightValue: '#052e16',
+        darkValue: '#4ade80',
+        lightPreviewColor: '#052e16',
+        darkPreviewColor: '#4ade80',
+      },
+      {
+        variable: '--ds-color-0..950',
+        category: 'Core & Surface',
+        description: 'Monochromatic phosphor green scale (tracks, pagination, tabs)',
+        lightValue: '#ecfdf5 → #020804',
+        darkValue: '#4ade80 → #020804',
+        lightPreviewColor: '#bbf7d0',
+        darkPreviewColor: '#0a2612',
+      },
+      {
+        variable: '--ds-card',
+        category: 'Core & Surface',
+        description: 'Terminal panel surface',
+        lightValue: '#f0fdf4',
+        darkValue: '#041007',
+        lightPreviewColor: '#f0fdf4',
+        darkPreviewColor: '#041007',
+      },
+      {
+        variable: '--ds-border',
+        category: 'Core & Surface',
+        description: 'Matrix grid line border',
+        lightValue: '#16a34a',
+        darkValue: '#14532d',
+        lightPreviewColor: '#16a34a',
+        darkPreviewColor: '#14532d',
+      },
+      {
+        variable: '--ds-primary',
+        category: 'Interactive',
+        description: 'Neon phosphor green action color',
+        lightValue: '#15803d',
+        darkValue: '#22c55e',
+        lightPreviewColor: '#15803d',
+        darkPreviewColor: '#22c55e',
+      },
+      {
+        variable: '--ds-secondary',
+        category: 'Interactive',
+        description: 'Subtle console highlight fill',
+        lightValue: '#dcfce7',
+        darkValue: '#092210',
+        lightPreviewColor: '#dcfce7',
+        darkPreviewColor: '#092210',
+      },
+      {
+        variable: '--ds-input-bg',
+        category: 'Form & Geometry',
+        description: 'Command-prompt input background',
+        lightValue: '#f0fdf4',
+        darkValue: '#030c05',
+        lightPreviewColor: '#f0fdf4',
+        darkPreviewColor: '#030c05',
+      },
+      {
+        variable: '--ds-input-border',
+        category: 'Form & Geometry',
+        description: 'Terminal input border',
+        lightValue: '#16a34a',
+        darkValue: '#15803d',
+        lightPreviewColor: '#16a34a',
+        darkPreviewColor: '#15803d',
+      },
+      {
+        variable: '--radius',
+        category: 'Form & Geometry',
+        description: 'Technical 2px micro-bevel radius',
+        lightValue: '0.125rem',
+        darkValue: '0.125rem',
+      },
+      {
+        variable: '--ds-pill-radius',
+        category: 'Form & Geometry',
+        description: 'Replaces round pills with 2px terminal corners',
+        lightValue: 'var(--radius-md)',
+        darkValue: 'var(--radius-md)',
+      },
+      {
+        variable: '--ds-button-shadow',
+        category: 'Interactive',
+        description: 'Phosphor CRT glow on Buttons',
+        lightValue: '0 0 10px -2px rgb(22 163 74 / 0.35)',
+        darkValue: '0 0 12px -2px rgb(34 197 94 / 0.45)',
+      },
+      {
+        variable: '--ds-card-shadow',
+        category: 'Core & Surface',
+        description: 'Subtle phosphor ambient glow on Cards',
+        lightValue: '0 0 20px -8px rgb(22 163 74 / 0.2)',
+        darkValue: '0 0 24px -8px rgb(34 197 94 / 0.22)',
+      },
+      {
+        variable: '--font-sans',
+        category: 'Form & Geometry',
+        description: 'Global monospace font override',
+        lightValue: 'var(--font-mono)',
+        darkValue: 'var(--font-mono)',
+      },
+    ],
+    cssSnippet: matrixCssRaw.trim(),
+  },
+];