Enhance all commands with consistent design principles

Commands updated with specific improvements:
- audit: Added Design Anti-Patterns section (pure gray, gray-on-color, nested cards, bounce/elastic, redundant copy)
- polish: Updated easing guidance, added tinted neutrals and gray-on-color checks
- animate: Added Timing & Easing section with quart/quint/expo curves, bounce/elastic warning
- bolder: Fixed color section (avoid purple-blue gradients), proper easing
- quieter: Added tinted grays guidance, gray-on-color fix
- simplify: Added nested cards warning, redundant copy removal
- colorize: Added OKLCH recommendation, gray-on-color fix
- clarify: Added redundant copy and placeholder-as-label warnings
- delight: Fixed spring animation to use ease-out-quart

Also fixed gray-on-color wording across all files:
- Use "shade of the background color" not "tinted text"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

dist/claude-code/.claude/commands/animate.md

@@ -65,7 +65,7 @@ Add motion systematically across these categories:
 - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
 - **Expand/collapse**: Height transition with overflow handling, icon rotation
 - **Loading states**: Skeleton screen fades, spinner animations, progress bars
-- **Success/error**: Color transitions, icon animations, shake or bounce effects
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
 - **Enable/disable**: Opacity transitions, cursor changes
 
 ### Navigation & Flow
@@ -90,6 +90,28 @@ Add motion systematically across these categories:
 
 Use appropriate techniques for each animation:
 
+### Timing & Easing
+
+**Durations by purpose:**
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
 ### CSS Animations
 ```css
 /* Prefer for simple, declarative animations */
@@ -124,13 +146,13 @@ Use appropriate techniques for each animation:
 ```
 
 **NEVER**:
-- Animate without purpose (every animation should have a reason)
-- Use long durations (>500ms feels laggy)
-- Animate layout properties (width, height, top, left) - use transform instead
-- Block interaction during animation (unless intentional)
-- Ignore reduced motion preferences (accessibility violation)
-- Animate everything (animation fatigue is real)
-- Create animations that draw more attention than content
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
 
 ## Verify Quality
 

dist/claude-code/.claude/commands/audit.md

@@ -41,6 +41,15 @@ Run comprehensive checks across multiple dimensions:
    - **Text scaling**: Layouts that break when text size increases
    - **Missing breakpoints**: No mobile/tablet variants
 
+5. **Design Anti-Patterns** - Check for:
+   - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint)
+   - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead)
+   - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy)
+   - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead)
+   - **Redundant copy**: Headers restating intros, repeated explanations
+   - **Placeholder as label**: Using placeholder text as the only field label
+   - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice
+
 **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
 
 ## Generate Comprehensive Report

dist/claude-code/.claude/commands/bolder.md

@@ -51,11 +51,12 @@ Systematically increase impact across these dimensions:
 - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
 
 ### Color Intensification
-- **Increase saturation**: Shift to more vibrant, energetic colors
-- **Bold palette**: Introduce unexpected color combinations
+- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
+- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
 - **Dominant color strategy**: Let one bold color own 60% of the design
 - **Sharp accents**: High-contrast accent colors that pop
-- **Gradients**: Rich, multi-stop gradients or mesh gradients
+- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
+- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
 
 ### Spatial Drama
 - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
@@ -72,10 +73,10 @@ Systematically increase impact across these dimensions:
 - **Custom elements**: Illustrative elements, custom icons, decorative details
 
 ### Motion & Animation
-- **Entrance choreography**: Staggered, dramatic page load animations
+- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
 - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
 - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
-- **Transitions**: Smooth, noticeable transitions between states
+- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
 
 ### Composition Boldness
 - **Hero moments**: Create clear focal points with dramatic treatment

dist/claude-code/.claude/commands/clarify.md

@@ -162,6 +162,8 @@ Every piece of copy should follow these rules:
 - Use humor for errors (be empathetic instead)
 - Assume technical knowledge
 - Vary terminology (pick one term and stick with it)
+- Repeat information (headers restating intros, redundant explanations)
+- Use placeholders as the only labels (they disappear when users type)
 
 ## Verify Improvements
 

dist/claude-code/.claude/commands/colorize.md

@@ -63,11 +63,13 @@ Add color systematically across these dimensions:
 - **Hover states**: Introduce color on interaction
 
 ### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
+- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
 - **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle gradients
+- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
 - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
 
+**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
+
 ### Data Visualization
 - **Charts & graphs**: Use color to encode categories or values
 - **Heatmaps**: Color intensity shows density or importance
@@ -113,11 +115,13 @@ Ensure color addition improves rather than overwhelms:
 **NEVER**:
 - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
 - Apply color randomly without semantic meaning
+- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
+- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
+- Use pure black (`#000`) or pure white (`#fff`) for large areas
 - Violate WCAG contrast requirements
 - Use color as the only indicator (accessibility issue)
 - Make everything colorful (defeats the purpose)
-- Choose colors that conflict with brand identity
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
+- Default to purple-blue gradients (AI slop aesthetic)
 
 ## Verify Color Addition
 

dist/claude-code/.claude/commands/delight.md

@@ -82,9 +82,10 @@ Add personality and joy through these methods:
 }
 
 /* Ripple effect on click */
-/* Spring animation on hover */
+/* Smooth lift on hover */
 .button:hover {
-  animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
 }
 ```
 

dist/claude-code/.claude/commands/polish.md

@@ -64,6 +64,8 @@ Work through these dimensions methodically:
 - **Theme consistency**: Works in all theme variants
 - **Color meaning**: Same colors mean same things throughout
 - **Accessible focus**: Focus indicators visible with sufficient contrast
+- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
+- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
 
 ### Interaction States
 
@@ -82,9 +84,9 @@ Every interactive element needs all states:
 
 ### Micro-interactions & Transitions
 
-- **Smooth transitions**: All state changes animated appropriately (200-300ms)
-- **Consistent easing**: Same easing curves for similar transitions
-- **No jank**: 60fps animations, no layout thrashing
+- **Smooth transitions**: All state changes animated appropriately (150-300ms)
+- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
+- **No jank**: 60fps animations, only animate transform and opacity
 - **Appropriate motion**: Motion serves purpose, not decoration
 - **Reduced motion**: Respects `prefers-reduced-motion`
 

dist/claude-code/.claude/commands/quieter.md

@@ -50,6 +50,8 @@ Systematically reduce intensity across these dimensions:
 - **Reduce color variety**: Use fewer colors more thoughtfully
 - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
 - **Gentler contrasts**: High contrast only where it matters most
+- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
+- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
 
 ### Visual Weight Reduction
 - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
@@ -64,9 +66,11 @@ Systematically reduce intensity across these dimensions:
 - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
 
 ### Motion Reduction
-- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
+- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
 - **Remove decorative animations**: Keep functional motion, remove flourishes
 - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
+- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
+- **Remove animations entirely** if they're not serving a clear purpose
 
 ### Composition Refinement
 - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling

dist/claude-code/.claude/commands/simplify.md

@@ -55,7 +55,8 @@ Systematically remove complexity across these dimensions:
 - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
 - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
 - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
-- **Flatten structure**: Reduce nesting, remove unnecessary containers
+- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
 - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
 
 ### Layout Simplification
@@ -78,6 +79,7 @@ Systematically remove complexity across these dimensions:
 - **Remove jargon**: Plain language always wins
 - **Scannable structure**: Short paragraphs, bullet points, clear headings
 - **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
 
 ### Code Simplification
 - **Remove unused code**: Dead CSS, unused components, orphaned files

dist/claude-code/.claude/skills/frontend-design/reference/color-and-contrast.md

@@ -97,7 +97,7 @@ The common mistake: using the accent color everywhere because it's "the brand co
 These commonly fail contrast or cause readability issues:
 
 - Light gray text on white (the #1 accessibility fail)
-- **Gray text on any colored background**—gray looks washed out and dead on color. Use a tinted version of the background color instead, or transparency
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
 - Red text on green background (or vice versa)—8% of men can't distinguish these
 - Blue text on red background (vibrates visually)
 - Yellow text on white (almost always fails)

dist/codex/.codex/prompts/animate.md

@@ -61,7 +61,7 @@ Add motion systematically across these categories:
 - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
 - **Expand/collapse**: Height transition with overflow handling, icon rotation
 - **Loading states**: Skeleton screen fades, spinner animations, progress bars
-- **Success/error**: Color transitions, icon animations, shake or bounce effects
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
 - **Enable/disable**: Opacity transitions, cursor changes
 
 ### Navigation & Flow
@@ -86,6 +86,28 @@ Add motion systematically across these categories:
 
 Use appropriate techniques for each animation:
 
+### Timing & Easing
+
+**Durations by purpose:**
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
 ### CSS Animations
 ```css
 /* Prefer for simple, declarative animations */
@@ -120,13 +142,13 @@ Use appropriate techniques for each animation:
 ```
 
 **NEVER**:
-- Animate without purpose (every animation should have a reason)
-- Use long durations (>500ms feels laggy)
-- Animate layout properties (width, height, top, left) - use transform instead
-- Block interaction during animation (unless intentional)
-- Ignore reduced motion preferences (accessibility violation)
-- Animate everything (animation fatigue is real)
-- Create animations that draw more attention than content
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
 
 ## Verify Quality
 

dist/codex/.codex/prompts/audit.md

@@ -37,6 +37,15 @@ Run comprehensive checks across multiple dimensions:
    - **Text scaling**: Layouts that break when text size increases
    - **Missing breakpoints**: No mobile/tablet variants
 
+5. **Design Anti-Patterns** - Check for:
+   - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint)
+   - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead)
+   - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy)
+   - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead)
+   - **Redundant copy**: Headers restating intros, repeated explanations
+   - **Placeholder as label**: Using placeholder text as the only field label
+   - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice
+
 **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
 
 ## Generate Comprehensive Report

dist/codex/.codex/prompts/bolder.md

@@ -47,11 +47,12 @@ Systematically increase impact across these dimensions:
 - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
 
 ### Color Intensification
-- **Increase saturation**: Shift to more vibrant, energetic colors
-- **Bold palette**: Introduce unexpected color combinations
+- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
+- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
 - **Dominant color strategy**: Let one bold color own 60% of the design
 - **Sharp accents**: High-contrast accent colors that pop
-- **Gradients**: Rich, multi-stop gradients or mesh gradients
+- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
+- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
 
 ### Spatial Drama
 - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
@@ -68,10 +69,10 @@ Systematically increase impact across these dimensions:
 - **Custom elements**: Illustrative elements, custom icons, decorative details
 
 ### Motion & Animation
-- **Entrance choreography**: Staggered, dramatic page load animations
+- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
 - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
 - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
-- **Transitions**: Smooth, noticeable transitions between states
+- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
 
 ### Composition Boldness
 - **Hero moments**: Create clear focal points with dramatic treatment

dist/codex/.codex/prompts/clarify.md

@@ -158,6 +158,8 @@ Every piece of copy should follow these rules:
 - Use humor for errors (be empathetic instead)
 - Assume technical knowledge
 - Vary terminology (pick one term and stick with it)
+- Repeat information (headers restating intros, redundant explanations)
+- Use placeholders as the only labels (they disappear when users type)
 
 ## Verify Improvements
 

dist/codex/.codex/prompts/colorize.md

@@ -59,11 +59,13 @@ Add color systematically across these dimensions:
 - **Hover states**: Introduce color on interaction
 
 ### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
+- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
 - **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle gradients
+- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
 - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
 
+**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
+
 ### Data Visualization
 - **Charts & graphs**: Use color to encode categories or values
 - **Heatmaps**: Color intensity shows density or importance
@@ -109,11 +111,13 @@ Ensure color addition improves rather than overwhelms:
 **NEVER**:
 - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
 - Apply color randomly without semantic meaning
+- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
+- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
+- Use pure black (`#000`) or pure white (`#fff`) for large areas
 - Violate WCAG contrast requirements
 - Use color as the only indicator (accessibility issue)
 - Make everything colorful (defeats the purpose)
-- Choose colors that conflict with brand identity
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
+- Default to purple-blue gradients (AI slop aesthetic)
 
 ## Verify Color Addition
 

dist/codex/.codex/prompts/delight.md

@@ -78,9 +78,10 @@ Add personality and joy through these methods:
 }
 
 /* Ripple effect on click */
-/* Spring animation on hover */
+/* Smooth lift on hover */
 .button:hover {
-  animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
 }
 ```
 

dist/codex/.codex/prompts/polish.md

@@ -60,6 +60,8 @@ Work through these dimensions methodically:
 - **Theme consistency**: Works in all theme variants
 - **Color meaning**: Same colors mean same things throughout
 - **Accessible focus**: Focus indicators visible with sufficient contrast
+- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
+- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
 
 ### Interaction States
 
@@ -78,9 +80,9 @@ Every interactive element needs all states:
 
 ### Micro-interactions & Transitions
 
-- **Smooth transitions**: All state changes animated appropriately (200-300ms)
-- **Consistent easing**: Same easing curves for similar transitions
-- **No jank**: 60fps animations, no layout thrashing
+- **Smooth transitions**: All state changes animated appropriately (150-300ms)
+- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
+- **No jank**: 60fps animations, only animate transform and opacity
 - **Appropriate motion**: Motion serves purpose, not decoration
 - **Reduced motion**: Respects `prefers-reduced-motion`
 

dist/codex/.codex/prompts/quieter.md

@@ -46,6 +46,8 @@ Systematically reduce intensity across these dimensions:
 - **Reduce color variety**: Use fewer colors more thoughtfully
 - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
 - **Gentler contrasts**: High contrast only where it matters most
+- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
+- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
 
 ### Visual Weight Reduction
 - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
@@ -60,9 +62,11 @@ Systematically reduce intensity across these dimensions:
 - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
 
 ### Motion Reduction
-- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
+- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
 - **Remove decorative animations**: Keep functional motion, remove flourishes
 - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
+- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
+- **Remove animations entirely** if they're not serving a clear purpose
 
 ### Composition Refinement
 - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling

dist/codex/.codex/prompts/simplify.md

@@ -51,7 +51,8 @@ Systematically remove complexity across these dimensions:
 - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
 - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
 - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
-- **Flatten structure**: Reduce nesting, remove unnecessary containers
+- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
 - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
 
 ### Layout Simplification
@@ -74,6 +75,7 @@ Systematically remove complexity across these dimensions:
 - **Remove jargon**: Plain language always wins
 - **Scannable structure**: Short paragraphs, bullet points, clear headings
 - **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
 
 ### Code Simplification
 - **Remove unused code**: Dead CSS, unused components, orphaned files

dist/codex/AGENTS.frontend-design.md

@@ -1583,7 +1583,7 @@ The common mistake: using the accent color everywhere because it's "the brand co
 These commonly fail contrast or cause readability issues:
 
 - Light gray text on white (the #1 accessibility fail)
-- **Gray text on any colored background**—gray looks washed out and dead on color. Use a tinted version of the background color instead, or transparency
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
 - Red text on green background (or vice versa)—8% of men can't distinguish these
 - Blue text on red background (vibrates visually)
 - Yellow text on white (almost always fails)

dist/cursor/.cursor/commands/animate.md

@@ -56,7 +56,7 @@ Add motion systematically across these categories:
 - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
 - **Expand/collapse**: Height transition with overflow handling, icon rotation
 - **Loading states**: Skeleton screen fades, spinner animations, progress bars
-- **Success/error**: Color transitions, icon animations, shake or bounce effects
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
 - **Enable/disable**: Opacity transitions, cursor changes
 
 ### Navigation & Flow
@@ -81,6 +81,28 @@ Add motion systematically across these categories:
 
 Use appropriate techniques for each animation:
 
+### Timing & Easing
+
+**Durations by purpose:**
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
 ### CSS Animations
 ```css
 /* Prefer for simple, declarative animations */
@@ -115,13 +137,13 @@ Use appropriate techniques for each animation:
 ```
 
 **NEVER**:
-- Animate without purpose (every animation should have a reason)
-- Use long durations (>500ms feels laggy)
-- Animate layout properties (width, height, top, left) - use transform instead
-- Block interaction during animation (unless intentional)
-- Ignore reduced motion preferences (accessibility violation)
-- Animate everything (animation fatigue is real)
-- Create animations that draw more attention than content
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
 
 ## Verify Quality
 

dist/cursor/.cursor/commands/audit.md

@@ -32,6 +32,15 @@ Run comprehensive checks across multiple dimensions:
    - **Text scaling**: Layouts that break when text size increases
    - **Missing breakpoints**: No mobile/tablet variants
 
+5. **Design Anti-Patterns** - Check for:
+   - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint)
+   - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead)
+   - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy)
+   - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead)
+   - **Redundant copy**: Headers restating intros, repeated explanations
+   - **Placeholder as label**: Using placeholder text as the only field label
+   - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice
+
 **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
 
 ## Generate Comprehensive Report

dist/cursor/.cursor/commands/bolder.md

@@ -42,11 +42,12 @@ Systematically increase impact across these dimensions:
 - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
 
 ### Color Intensification
-- **Increase saturation**: Shift to more vibrant, energetic colors
-- **Bold palette**: Introduce unexpected color combinations
+- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
+- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
 - **Dominant color strategy**: Let one bold color own 60% of the design
 - **Sharp accents**: High-contrast accent colors that pop
-- **Gradients**: Rich, multi-stop gradients or mesh gradients
+- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
+- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
 
 ### Spatial Drama
 - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
@@ -63,10 +64,10 @@ Systematically increase impact across these dimensions:
 - **Custom elements**: Illustrative elements, custom icons, decorative details
 
 ### Motion & Animation
-- **Entrance choreography**: Staggered, dramatic page load animations
+- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
 - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
 - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
-- **Transitions**: Smooth, noticeable transitions between states
+- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
 
 ### Composition Boldness
 - **Hero moments**: Create clear focal points with dramatic treatment

dist/cursor/.cursor/commands/clarify.md

@@ -153,6 +153,8 @@ Every piece of copy should follow these rules:
 - Use humor for errors (be empathetic instead)
 - Assume technical knowledge
 - Vary terminology (pick one term and stick with it)
+- Repeat information (headers restating intros, redundant explanations)
+- Use placeholders as the only labels (they disappear when users type)
 
 ## Verify Improvements
 

dist/cursor/.cursor/commands/colorize.md

@@ -54,11 +54,13 @@ Add color systematically across these dimensions:
 - **Hover states**: Introduce color on interaction
 
 ### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
+- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
 - **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle gradients
+- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
 - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
 
+**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
+
 ### Data Visualization
 - **Charts & graphs**: Use color to encode categories or values
 - **Heatmaps**: Color intensity shows density or importance
@@ -104,11 +106,13 @@ Ensure color addition improves rather than overwhelms:
 **NEVER**:
 - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
 - Apply color randomly without semantic meaning
+- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
+- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
+- Use pure black (`#000`) or pure white (`#fff`) for large areas
 - Violate WCAG contrast requirements
 - Use color as the only indicator (accessibility issue)
 - Make everything colorful (defeats the purpose)
-- Choose colors that conflict with brand identity
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
+- Default to purple-blue gradients (AI slop aesthetic)
 
 ## Verify Color Addition
 

dist/cursor/.cursor/commands/delight.md

@@ -73,9 +73,10 @@ Add personality and joy through these methods:
 }
 
 /* Ripple effect on click */
-/* Spring animation on hover */
+/* Smooth lift on hover */
 .button:hover {
-  animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
 }
 ```
 

dist/cursor/.cursor/commands/polish.md

@@ -55,6 +55,8 @@ Work through these dimensions methodically:
 - **Theme consistency**: Works in all theme variants
 - **Color meaning**: Same colors mean same things throughout
 - **Accessible focus**: Focus indicators visible with sufficient contrast
+- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
+- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
 
 ### Interaction States
 
@@ -73,9 +75,9 @@ Every interactive element needs all states:
 
 ### Micro-interactions & Transitions
 
-- **Smooth transitions**: All state changes animated appropriately (200-300ms)
-- **Consistent easing**: Same easing curves for similar transitions
-- **No jank**: 60fps animations, no layout thrashing
+- **Smooth transitions**: All state changes animated appropriately (150-300ms)
+- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
+- **No jank**: 60fps animations, only animate transform and opacity
 - **Appropriate motion**: Motion serves purpose, not decoration
 - **Reduced motion**: Respects `prefers-reduced-motion`
 

dist/cursor/.cursor/commands/quieter.md

@@ -41,6 +41,8 @@ Systematically reduce intensity across these dimensions:
 - **Reduce color variety**: Use fewer colors more thoughtfully
 - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
 - **Gentler contrasts**: High contrast only where it matters most
+- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
+- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
 
 ### Visual Weight Reduction
 - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
@@ -55,9 +57,11 @@ Systematically reduce intensity across these dimensions:
 - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
 
 ### Motion Reduction
-- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
+- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
 - **Remove decorative animations**: Keep functional motion, remove flourishes
 - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
+- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
+- **Remove animations entirely** if they're not serving a clear purpose
 
 ### Composition Refinement
 - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling

dist/cursor/.cursor/commands/simplify.md

@@ -46,7 +46,8 @@ Systematically remove complexity across these dimensions:
 - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
 - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
 - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
-- **Flatten structure**: Reduce nesting, remove unnecessary containers
+- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
 - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
 
 ### Layout Simplification
@@ -69,6 +70,7 @@ Systematically remove complexity across these dimensions:
 - **Remove jargon**: Plain language always wins
 - **Scannable structure**: Short paragraphs, bullet points, clear headings
 - **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
 
 ### Code Simplification
 - **Remove unused code**: Dead CSS, unused components, orphaned files

dist/cursor/.cursor/rules/frontend-design.md

@@ -1583,7 +1583,7 @@ The common mistake: using the accent color everywhere because it's "the brand co
 These commonly fail contrast or cause readability issues:
 
 - Light gray text on white (the #1 accessibility fail)
-- **Gray text on any colored background**—gray looks washed out and dead on color. Use a tinted version of the background color instead, or transparency
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
 - Red text on green background (or vice versa)—8% of men can't distinguish these
 - Blue text on red background (vibrates visually)
 - Yellow text on white (almost always fails)

dist/gemini/.gemini/commands/animate.toml

@@ -58,7 +58,7 @@ Add motion systematically across these categories:
 - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
 - **Expand/collapse**: Height transition with overflow handling, icon rotation
 - **Loading states**: Skeleton screen fades, spinner animations, progress bars
-- **Success/error**: Color transitions, icon animations, shake or bounce effects
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
 - **Enable/disable**: Opacity transitions, cursor changes
 
 ### Navigation & Flow
@@ -83,6 +83,28 @@ Add motion systematically across these categories:
 
 Use appropriate techniques for each animation:
 
+### Timing & Easing
+
+**Durations by purpose:**
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
 ### CSS Animations
 ```css
 /* Prefer for simple, declarative animations */
@@ -117,13 +139,13 @@ Use appropriate techniques for each animation:
 ```
 
 **NEVER**:
-- Animate without purpose (every animation should have a reason)
-- Use long durations (>500ms feels laggy)
-- Animate layout properties (width, height, top, left) - use transform instead
-- Block interaction during animation (unless intentional)
-- Ignore reduced motion preferences (accessibility violation)
-- Animate everything (animation fatigue is real)
-- Create animations that draw more attention than content
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
 
 ## Verify Quality
 

dist/gemini/.gemini/commands/audit.toml

@@ -34,6 +34,15 @@ Run comprehensive checks across multiple dimensions:
    - **Text scaling**: Layouts that break when text size increases
    - **Missing breakpoints**: No mobile/tablet variants
 
+5. **Design Anti-Patterns** - Check for:
+   - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint)
+   - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead)
+   - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy)
+   - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead)
+   - **Redundant copy**: Headers restating intros, repeated explanations
+   - **Placeholder as label**: Using placeholder text as the only field label
+   - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice
+
 **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
 
 ## Generate Comprehensive Report

dist/gemini/.gemini/commands/bolder.toml

@@ -44,11 +44,12 @@ Systematically increase impact across these dimensions:
 - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
 
 ### Color Intensification
-- **Increase saturation**: Shift to more vibrant, energetic colors
-- **Bold palette**: Introduce unexpected color combinations
+- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
+- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
 - **Dominant color strategy**: Let one bold color own 60% of the design
 - **Sharp accents**: High-contrast accent colors that pop
-- **Gradients**: Rich, multi-stop gradients or mesh gradients
+- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
+- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
 
 ### Spatial Drama
 - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
@@ -65,10 +66,10 @@ Systematically increase impact across these dimensions:
 - **Custom elements**: Illustrative elements, custom icons, decorative details
 
 ### Motion & Animation
-- **Entrance choreography**: Staggered, dramatic page load animations
+- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
 - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
 - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
-- **Transitions**: Smooth, noticeable transitions between states
+- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
 
 ### Composition Boldness
 - **Hero moments**: Create clear focal points with dramatic treatment

dist/gemini/.gemini/commands/clarify.toml

@@ -155,6 +155,8 @@ Every piece of copy should follow these rules:
 - Use humor for errors (be empathetic instead)
 - Assume technical knowledge
 - Vary terminology (pick one term and stick with it)
+- Repeat information (headers restating intros, redundant explanations)
+- Use placeholders as the only labels (they disappear when users type)
 
 ## Verify Improvements
 

dist/gemini/.gemini/commands/colorize.toml

@@ -56,11 +56,13 @@ Add color systematically across these dimensions:
 - **Hover states**: Introduce color on interaction
 
 ### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
+- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
 - **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle gradients
+- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
 - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
 
+**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
+
 ### Data Visualization
 - **Charts & graphs**: Use color to encode categories or values
 - **Heatmaps**: Color intensity shows density or importance
@@ -106,11 +108,13 @@ Ensure color addition improves rather than overwhelms:
 **NEVER**:
 - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
 - Apply color randomly without semantic meaning
+- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
+- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
+- Use pure black (`#000`) or pure white (`#fff`) for large areas
 - Violate WCAG contrast requirements
 - Use color as the only indicator (accessibility issue)
 - Make everything colorful (defeats the purpose)
-- Choose colors that conflict with brand identity
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
+- Default to purple-blue gradients (AI slop aesthetic)
 
 ## Verify Color Addition
 

dist/gemini/.gemini/commands/delight.toml

@@ -75,9 +75,10 @@ Add personality and joy through these methods:
 }
 
 /* Ripple effect on click */
-/* Spring animation on hover */
+/* Smooth lift on hover */
 .button:hover {
-  animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
 }
 ```
 

dist/gemini/.gemini/commands/polish.toml

@@ -57,6 +57,8 @@ Work through these dimensions methodically:
 - **Theme consistency**: Works in all theme variants
 - **Color meaning**: Same colors mean same things throughout
 - **Accessible focus**: Focus indicators visible with sufficient contrast
+- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
+- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
 
 ### Interaction States
 
@@ -75,9 +77,9 @@ Every interactive element needs all states:
 
 ### Micro-interactions & Transitions
 
-- **Smooth transitions**: All state changes animated appropriately (200-300ms)
-- **Consistent easing**: Same easing curves for similar transitions
-- **No jank**: 60fps animations, no layout thrashing
+- **Smooth transitions**: All state changes animated appropriately (150-300ms)
+- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
+- **No jank**: 60fps animations, only animate transform and opacity
 - **Appropriate motion**: Motion serves purpose, not decoration
 - **Reduced motion**: Respects `prefers-reduced-motion`
 

dist/gemini/.gemini/commands/quieter.toml

@@ -43,6 +43,8 @@ Systematically reduce intensity across these dimensions:
 - **Reduce color variety**: Use fewer colors more thoughtfully
 - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
 - **Gentler contrasts**: High contrast only where it matters most
+- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
+- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
 
 ### Visual Weight Reduction
 - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
@@ -57,9 +59,11 @@ Systematically reduce intensity across these dimensions:
 - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
 
 ### Motion Reduction
-- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
+- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
 - **Remove decorative animations**: Keep functional motion, remove flourishes
 - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
+- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
+- **Remove animations entirely** if they're not serving a clear purpose
 
 ### Composition Refinement
 - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling

dist/gemini/.gemini/commands/simplify.toml

@@ -48,7 +48,8 @@ Systematically remove complexity across these dimensions:
 - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
 - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
 - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
-- **Flatten structure**: Reduce nesting, remove unnecessary containers
+- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
 - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
 
 ### Layout Simplification
@@ -71,6 +72,7 @@ Systematically remove complexity across these dimensions:
 - **Remove jargon**: Plain language always wins
 - **Scannable structure**: Short paragraphs, bullet points, clear headings
 - **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
 
 ### Code Simplification
 - **Remove unused code**: Dead CSS, unused components, orphaned files

dist/gemini/GEMINI.frontend-design.md

@@ -1583,7 +1583,7 @@ The common mistake: using the accent color everywhere because it's "the brand co
 These commonly fail contrast or cause readability issues:
 
 - Light gray text on white (the #1 accessibility fail)
-- **Gray text on any colored background**—gray looks washed out and dead on color. Use a tinted version of the background color instead, or transparency
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
 - Red text on green background (or vice versa)—8% of men can't distinguish these
 - Blue text on red background (vibrates visually)
 - Yellow text on white (almost always fails)

source/commands/animate.md

@@ -65,7 +65,7 @@ Add motion systematically across these categories:
 - **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
 - **Expand/collapse**: Height transition with overflow handling, icon rotation
 - **Loading states**: Skeleton screen fades, spinner animations, progress bars
-- **Success/error**: Color transitions, icon animations, shake or bounce effects
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
 - **Enable/disable**: Opacity transitions, cursor changes
 
 ### Navigation & Flow
@@ -90,6 +90,28 @@ Add motion systematically across these categories:
 
 Use appropriate techniques for each animation:
 
+### Timing & Easing
+
+**Durations by purpose:**
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);    /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);     /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
 ### CSS Animations
 ```css
 /* Prefer for simple, declarative animations */
@@ -124,13 +146,13 @@ Use appropriate techniques for each animation:
 ```
 
 **NEVER**:
-- Animate without purpose (every animation should have a reason)
-- Use long durations (>500ms feels laggy)
-- Animate layout properties (width, height, top, left) - use transform instead
-- Block interaction during animation (unless intentional)
-- Ignore reduced motion preferences (accessibility violation)
-- Animate everything (animation fatigue is real)
-- Create animations that draw more attention than content
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
 
 ## Verify Quality
 

source/commands/audit.md

@@ -41,6 +41,15 @@ Run comprehensive checks across multiple dimensions:
    - **Text scaling**: Layouts that break when text size increases
    - **Missing breakpoints**: No mobile/tablet variants
 
+5. **Design Anti-Patterns** - Check for:
+   - **Pure gray/black**: Using `#000`, `#808080`, or untinted grays (should have subtle color tint)
+   - **Gray on color**: Gray text on colored backgrounds (looks washed out—use a shade of the background color instead)
+   - **Nested cards**: Cards inside cards (visual noise, flatten hierarchy)
+   - **Bounce/elastic easing**: Dated animation curves (use ease-out-quart/quint/expo instead)
+   - **Redundant copy**: Headers restating intros, repeated explanations
+   - **Placeholder as label**: Using placeholder text as the only field label
+   - **Generic fonts**: Defaulting to Inter/Roboto/Arial without intentional choice
+
 **CRITICAL**: This is an audit, not a fix. Document issues thoroughly with clear explanations of impact. Use other commands (normalize, optimize, harden, etc.) to fix issues after audit.
 
 ## Generate Comprehensive Report

source/commands/bolder.md

@@ -51,11 +51,12 @@ Systematically increase impact across these dimensions:
 - **Unexpected choices**: Variable fonts, display fonts for headlines, monospace as accent
 
 ### Color Intensification
-- **Increase saturation**: Shift to more vibrant, energetic colors
-- **Bold palette**: Introduce unexpected color combinations
+- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon)
+- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop
 - **Dominant color strategy**: Let one bold color own 60% of the design
 - **Sharp accents**: High-contrast accent colors that pop
-- **Gradients**: Rich, multi-stop gradients or mesh gradients
+- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette
+- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue)
 
 ### Spatial Drama
 - **Extreme scale jumps**: Make important elements 3-5x larger than surroundings
@@ -72,10 +73,10 @@ Systematically increase impact across these dimensions:
 - **Custom elements**: Illustrative elements, custom icons, decorative details
 
 ### Motion & Animation
-- **Entrance choreography**: Staggered, dramatic page load animations
+- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays
 - **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences
 - **Micro-interactions**: Satisfying hover effects, click feedback, state changes
-- **Transitions**: Smooth, noticeable transitions between states
+- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect)
 
 ### Composition Boldness
 - **Hero moments**: Create clear focal points with dramatic treatment

source/commands/clarify.md

@@ -162,6 +162,8 @@ Every piece of copy should follow these rules:
 - Use humor for errors (be empathetic instead)
 - Assume technical knowledge
 - Vary terminology (pick one term and stick with it)
+- Repeat information (headers restating intros, redundant explanations)
+- Use placeholders as the only labels (they disappear when users type)
 
 ## Verify Improvements
 

source/commands/colorize.md

@@ -63,11 +63,13 @@ Add color systematically across these dimensions:
 - **Hover states**: Introduce color on interaction
 
 ### Background & Surfaces
-- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`#faf9f7`) or cool tints (`#f8f9fb`)
+- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`)
 - **Colored sections**: Use subtle background colors to separate areas
-- **Gradient backgrounds**: Add depth with subtle gradients
+- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue)
 - **Cards & surfaces**: Tint cards or surfaces slightly for warmth
 
+**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales.
+
 ### Data Visualization
 - **Charts & graphs**: Use color to encode categories or values
 - **Heatmaps**: Color intensity shows density or importance
@@ -113,11 +115,13 @@ Ensure color addition improves rather than overwhelms:
 **NEVER**:
 - Use every color in the rainbow (choose 2-4 colors beyond neutrals)
 - Apply color randomly without semantic meaning
+- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead
+- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication
+- Use pure black (`#000`) or pure white (`#fff`) for large areas
 - Violate WCAG contrast requirements
 - Use color as the only indicator (accessibility issue)
 - Make everything colorful (defeats the purpose)
-- Choose colors that conflict with brand identity
-- Use pure black (`#000`) or pure white (`#fff`) for large areas
+- Default to purple-blue gradients (AI slop aesthetic)
 
 ## Verify Color Addition
 

source/commands/delight.md

@@ -82,9 +82,10 @@ Add personality and joy through these methods:
 }
 
 /* Ripple effect on click */
-/* Spring animation on hover */
+/* Smooth lift on hover */
 .button:hover {
-  animation: spring 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
 }
 ```
 

source/commands/polish.md

@@ -64,6 +64,8 @@ Work through these dimensions methodically:
 - **Theme consistency**: Works in all theme variants
 - **Color meaning**: Same colors mean same things throughout
 - **Accessible focus**: Focus indicators visible with sufficient contrast
+- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma)
+- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency
 
 ### Interaction States
 
@@ -82,9 +84,9 @@ Every interactive element needs all states:
 
 ### Micro-interactions & Transitions
 
-- **Smooth transitions**: All state changes animated appropriately (200-300ms)
-- **Consistent easing**: Same easing curves for similar transitions
-- **No jank**: 60fps animations, no layout thrashing
+- **Smooth transitions**: All state changes animated appropriately (150-300ms)
+- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated.
+- **No jank**: 60fps animations, only animate transform and opacity
 - **Appropriate motion**: Motion serves purpose, not decoration
 - **Reduced motion**: Respects `prefers-reduced-motion`
 

source/commands/quieter.md

@@ -50,6 +50,8 @@ Systematically reduce intensity across these dimensions:
 - **Reduce color variety**: Use fewer colors more thoughtfully
 - **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
 - **Gentler contrasts**: High contrast only where it matters most
+- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
+- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
 
 ### Visual Weight Reduction
 - **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
@@ -64,9 +66,11 @@ Systematically reduce intensity across these dimensions:
 - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
 
 ### Motion Reduction
-- **Reduce animation intensity**: Shorter distances, gentler easing, slower speeds
+- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
 - **Remove decorative animations**: Keep functional motion, remove flourishes
 - **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
+- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
+- **Remove animations entirely** if they're not serving a clear purpose
 
 ### Composition Refinement
 - **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling

source/commands/simplify.md

@@ -55,7 +55,8 @@ Systematically remove complexity across these dimensions:
 - **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
 - **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
 - **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
-- **Flatten structure**: Reduce nesting, remove unnecessary containers
+- **Flatten structure**: Reduce nesting, remove unnecessary containers—never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
 - **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
 
 ### Layout Simplification
@@ -78,6 +79,7 @@ Systematically remove complexity across these dimensions:
 - **Remove jargon**: Plain language always wins
 - **Scannable structure**: Short paragraphs, bullet points, clear headings
 - **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
 
 ### Code Simplification
 - **Remove unused code**: Dead CSS, unused components, orphaned files

source/skills/frontend-design/reference/color-and-contrast.md

@@ -97,7 +97,7 @@ The common mistake: using the accent color everywhere because it's "the brand co
 These commonly fail contrast or cause readability issues:
 
 - Light gray text on white (the #1 accessibility fail)
-- **Gray text on any colored background**—gray looks washed out and dead on color. Use a tinted version of the background color instead, or transparency
+- **Gray text on any colored background**—gray looks washed out and dead on color. Use a darker shade of the background color, or transparency
 - Red text on green background (or vice versa)—8% of men can't distinguish these
 - Blue text on red background (vibrates visually)
 - Yellow text on white (almost always fails)