| 1 | Quiet 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 | |
| 7 | Brand: "quieter" means more restrained palette, more whitespace, more typographic air. Drama is reduced, not eliminated; the POV stays intact. |
| 8 | |
| 9 | Product: "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 | |
| 15 | Analyze what makes the design feel too intense: |
| 16 | |
| 17 | 1. **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 | |
| 25 | 2. **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 | |
| 31 | If 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 | |
| 37 | Create 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 | |
| 48 | Systematically 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 | |
| 92 | Ensure 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 | |
| 99 | When the result feels right, hand off to `$impeccable polish` for the final pass. |
| 100 |