1Quiet design is harder than bold design. Subtlety needs precision. Reduce visual intensity in designs that are too loud, aggressive, or overstimulating without losing personality or making the result generic.
2 
3---
4 
5## Register
6 
7Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact.
8 
9Product: "quieter" means reducing visual noise. Fewer background accents, flatter cards, less color, less motion. The tool should disappear more completely into the task.
10 
11---
12 
13## Assess Current State
14 
15Analyze what makes the design feel too intense:
16 
171. **Identify intensity sources**:
18   - **Color saturation**: Overly bright or saturated colors
19   - **Contrast extremes**: Too much high-contrast juxtaposition
20   - **Visual weight**: Too many bold, heavy elements competing
21   - **Animation excess**: Too much motion or overly dramatic effects
22   - **Complexity**: Too many visual elements, patterns, or decorations
23   - **Scale**: Everything is large and loud with no hierarchy
24 
252. **Understand the context**:
26   - What's the purpose? (Marketing vs tool vs reading experience)
27   - Who's the audience? (Some contexts need energy)
28   - What's working? (Don't throw away good ideas)
29   - What's the core message? (Preserve what matters)
30 
31If any of these are unclear from the codebase, STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer.
32 
33**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined and easier on the eyes. Think luxury, not laziness.
34 
35## Plan Refinement
36 
37Create a strategy to reduce intensity while maintaining impact:
38 
39- **Color approach**: Desaturate or shift to more restrained tones?
40- **Hierarchy approach**: Which elements should stay bold (very few), which should recede?
41- **Simplification approach**: What can be removed entirely?
42- **Sophistication approach**: How can we signal quality through restraint?
43 
44**IMPORTANT**: Subtlety requires precision. Quiet without intent collapses to generic.
45 
46## Refine the Design
47 
48Systematically reduce intensity across these dimensions:
49 
50### Color Refinement
51- **Reduce saturation**: Shift from fully saturated to 70-85% saturation
52- **Soften palette**: Replace bright colors with muted tones
53- **Reduce color variety**: Use fewer colors more thoughtfully
54- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule)
55- **Gentler contrasts**: High contrast only where it matters most
56- **Tinted grays**: Use warm or cool tinted grays instead of pure gray. Adds depth without loudness
57- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead
58 
59### Visual Weight Reduction
60- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate
61- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness
62- **White space**: Increase breathing room, reduce density
63- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely
64 
65### Simplification
66- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose
67- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes
68- **Reduce layering**: Flatten visual hierarchy where possible
69- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows
70 
71### Motion Reduction
72- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing
73- **Remove decorative animations**: Keep functional motion, remove flourishes
74- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback
75- **Refined easing**: Use ease-out-quart for smooth, understated motion. Never bounce or elastic
76- **Remove animations entirely** if they're not serving a clear purpose
77 
78### Composition Refinement
79- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling
80- **Align to grid**: Bring rogue elements back into systematic alignment
81- **Even out spacing**: Replace extreme spacing variations with consistent rhythm
82 
83**NEVER**:
84- Make everything the same size/weight (hierarchy still matters)
85- Remove all color (quiet ≠ grayscale)
86- Eliminate all personality (maintain character through refinement)
87- Sacrifice usability for aesthetics (functional elements still need clear affordances)
88- Make everything small and light (some anchors needed)
89 
90## Verify Quality
91 
92Ensure refinement maintains quality:
93 
94- **Still functional**: Can users still accomplish tasks easily?
95- **Still distinctive**: Does it have character, or is it generic now?
96- **Better reading**: Is text easier to read for extended periods?
97- **Restrained, not absent**: Does the POV survive the cuts?
98 
99When the result feels right, hand off to `$impeccable polish` for the final pass.
100