diff --git a/CLAUDE.md b/CLAUDE.md
index b7851b75..32c64c64 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -462,6 +462,362 @@ export default function MyPage() {
7. **TypeScript**: Leverage type inference - the codebase has strong typing
8. **Component library first**: Always check if `@umami/react-zen` has what you need before writing custom UI
+## Niteshift Dials SDK
+
+**New capability for design prototyping!** The Dials SDK allows you to expose design parameters as runtime-adjustable "dials" that users can tweak via an overlay UI. This gives designers and PMs fine-grained control without requiring code changes.
+
+### Setup and Installation
+
+The Dials SDK lives in `packages/dials/` and is automatically built when you run `pnpm install` via the repo’s postinstall script. **Do not edit the SDK source or build pipeline unless the user explicitly instructs you to do so.** Your default interaction with dials should be importing the provided hooks inside app components.
+
+**Key files:**
+- `packages/dials/src/` – SDK source **(hands-off unless asked)**
+- `packages/dials/dist/` – Built package (gitignored, auto-generated)
+- `src/config/niteshift-manifest.ts` – Umami’s design system manifest for reference in app code
+
+If—*and only if*—a user asks you to modify the SDK internals, rebuild with:
+```bash
+pnpm --filter @niteshift/dials build
+```
+
+### When to Use Dials
+
+Only add dials when the user explicitly says they want “dials” (or otherwise asks for adjustable controls). When they do, prioritize these scenarios:
+- Subjective color/spacing/typography tweaks tied to design-system tokens
+- Layout variants or experimental sections the user wants to tune live
+- Feature toggles the user specifically calls out for dial-based control
+
+**Key principle**: Follow the user's direction—never invent dials on your own; create them only when requested, and let the user decide which values need adjustment.
+
+### Critical: Preserving Original Appearance
+
+**⚠️ EXTREMELY IMPORTANT: When adding dials to existing code, the defaults MUST ALWAYS preserve the exact original appearance.**
+
+Before adding dials to any component:
+
+1. **Document the original values** - Record what props/styles existed before dials
+2. **Match defaults exactly** - Dial defaults must produce identical output to pre-dial code
+3. **Use empty string for "no prop"** - If original had no prop, use `default: ''` not `'inherit'` or a value
+4. **Conditionally spread props** - Only pass props when they have truthy values
+
+**Example - WRONG approach:**
+```typescript
+// Original code (before dials):
+{label} // No size prop!
+
+// ❌ WRONG - adds size prop that wasn't there:
+const labelSize = useDynamicVariant('label-size', {
+ default: '1', // ❌ Original had NO size, this changes appearance!
+ options: ['0', '1', '2', '3'] as const,
+});
+{label}
+```
+
+**Example - CORRECT approach:**
+```typescript
+// Original code (before dials):
+{label} // No size prop!
+
+// ✅ CORRECT - empty string means "no change":
+const labelSize = useDynamicVariant('label-size', {
+ default: '', // ✅ Empty string = no size prop = matches original
+ options: ['', '0', '1', '2', '3'] as const, // First option is "default/none"
+});
+
+// ✅ CORRECT - only pass size if truthy:
+
+ {label}
+
+```
+
+**Why this matters:**
+- Users expect dials at default = original appearance
+- Dials should enable exploration, not force changes
+- Breaking the original look confuses users and defeats the purpose
+
+**Testing your defaults:**
+1. Add dials with defaults
+2. View the page - should look IDENTICAL to before dials
+3. Reset All in dials overlay - should look IDENTICAL to before dials
+4. Only when adjusting dials should appearance change
+
+### Design System Manifest
+
+The design system manifest is defined in `src/config/niteshift-manifest.ts` as a TypeScript module:
+- Colors (primary, base, accent, semantic)
+- Spacing scale (4px to 128px)
+- Typography (fonts, sizes, weights)
+- Border radius, shadows
+
+**Benefits of TypeScript manifest:**
+- Type-safe with full IDE autocomplete
+- Bundled with app (not publicly accessible)
+- No runtime HTTP fetch (faster)
+- Hot reload compatible
+
+Reference these tokens in dial configs to provide users with design system-aligned options.
+
+### Manifest-Powered Defaults
+
+**Smart defaults from the design system!** When you omit the `options` parameter in color and spacing dials, the SDK automatically pulls values from the design manifest. This reduces boilerplate and ensures consistency with your design system.
+
+**Color dials (design system defaults)**
+```typescript
+import { useDynamicColor } from '@niteshift/dials';
+
+const badgeColor = useDynamicColor('hero-badge-color', {
+ label: 'Hero Badge Color',
+ group: 'Hero Section',
+ default: 'var(--primary-color)',
+ manifestCategory: 'primary', // pulls tokens from designManifest.colors.primary
+ allowCustom: true,
+});
+
+return Top Performer;
+```
+
+**Spacing dials (design system defaults)**
+```typescript
+import { useDynamicSpacing } from '@niteshift/dials';
+
+const cardPadding = useDynamicSpacing('hero-card-padding', {
+ label: 'Hero Card Padding',
+ group: 'Hero Section',
+ default: 'var(--spacing-5)',
+ manifestCategory: 'spacing',
+});
+
+return {children};
+```
+
+// Manifest defaults (automatic - uses full spacing scale):
+const margin2 = useDynamicSpacing('margin-2', {
+ label: 'Margin',
+ default: '24px',
+ // options omitted - uses designManifest.spacing.values (4px to 128px)
+});
+```
+
+**When to use manifest defaults:**
+- ✅ You want design system consistency
+- ✅ You're prototyping and want quick setup
+- ✅ The default color category (accent) or spacing scale fits your needs
+- ❌ You need a specific subset of values
+- ❌ You're using custom values outside the design system
+
+### Available Dial Types
+
+#### Color Dials
+For any color value (backgrounds, text, borders, etc.):
+```typescript
+import { useDynamicColor } from '@niteshift/dials';
+
+const bgColor = useDynamicColor('hero-background', {
+ label: 'Hero Background Color',
+ description: 'Background color for the hero section',
+ group: 'Hero Section',
+ default: '#1a1a1a',
+ options: ['#1a1a1a', '#2d2d2d', '#404040', '#525252'], // From design system
+ allowCustom: true // Allows custom hex input
+});
+
+