1---
  2name: quieter
  3description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic."
  4argument-hint: "[target]"
  5user-invocable: true
  6---
  7
  8Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.
  9
 10## MANDATORY PREPARATION
 11
 12Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first.
 13
 14---
 15
 16## Assess Current State
 17
 18Analyze what makes the design feel too intense:
 19
 201. **Identify intensity sources**:
 21   - **Color saturation**: Overly bright or saturated colors
 22   - **Contrast extremes**: Too much high-contrast juxtaposition
 23   - **Visual weight**: Too many bold, heavy elements competing
 24   - **Animation excess**: Too much motion or overly dramatic effects
 25   - **Complexity**: Too many visual elements, patterns, or decorations
 26   - **Scale**: Everything is large and loud with no hierarchy
 27
 282. **Understand the context**:
 29   - What's the purpose? (Marketing vs tool vs reading experience)
 30   - Who's the audience? (Some contexts need energy)
 31   - What's working? (Don't throw away good ideas)
 32   - What's the core message? (Preserve what matters)
 33
 34If any of these are unclear from the codebase, {{ask_instruction}}
 35
 36**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.
 37
 38## Plan Refinement
 39
 40Create a strategy to reduce intensity while maintaining impact:
 41
 42- **Color approach**: Desaturate or shift to more sophisticated tones?
 43- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
 44- **Simplification approach**: What can be removed entirely?
 45- **Sophistication approach**: How can we signal quality through restraint?
 46
 47**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision.
 48
 49## Refine the Design
 50
 51Systematically reduce intensity across these dimensions:
 52
 53### Color Refinement
 54- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
 55- **Soften palette**: Replace bright colors with muted, sophisticated tones
 56- **Reduce color variety**: Use fewer colors more thoughtfully
 57- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
 58- **Gentler contrasts**: High contrast only where it matters most
 59- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness
 60- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
 61
 62### Visual Weight Reduction
 63- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
 64- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
 65- **White space**: Increase breathing room, reduce density
 66- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
 67
 68### Simplification
 69- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
 70- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
 71- **Reduce layering**: Flatten visual hierarchy where possible
 72- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
 73
 74### Motion Reduction
 75- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
 76- **Remove decorative animations**: Keep functional motion, remove flourishes
 77- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
 78- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic
 79- **Remove animations entirely** if they're not serving a clear purpose
 80
 81### Composition Refinement
 82- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
 83- **Align to grid**: Bring rogue elements back into systematic alignment
 84- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
 85
 86**NEVER**:
 87- Make everything the same size/weight (hierarchy still matters)
 88- Remove all color (quiet ≠ grayscale)
 89- Eliminate all personality (maintain character through refinement)
 90- Sacrifice usability for aesthetics (functional elements still need clear affordances)
 91- Make everything small and light (some anchors needed)
 92
 93## Verify Quality
 94
 95Ensure refinement maintains quality:
 96
 97- **Still functional**: Can users still accomplish tasks easily?
 98- **Still distinctive**: Does it have character, or is it generic now?
 99- **Better reading**: Is text easier to read for extended periods?
100- **Sophistication**: Does it feel more refined and premium?
101
102Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality.