--- name: i-quieter description: Tone down overly bold or visually aggressive designs. Reduces intensity while maintaining design quality and impact. user-invokable: true args: - name: target description: The feature or component to make quieter (optional) required: false author: "@firdausmntp" --- ## Intent Primacy Read the user's request before applying this command's defaults. 1. **Exact target**: Identify the specific feature, file, or area named. If none is named, ask before acting broadly. 2. **Stated scope wins**: "/i-quieter just the header" means only the header. Do not expand scope. 3. **User's choices bind you**: If the user specifies a framework, style, or approach, follow it even if this skill would suggest otherwise. Warn once, then comply. 4. **Proportional output**: A narrow request gets a targeted answer with only the relevant sections from this skill. A broad request gets the full protocol. 5. **No unrequested work**: Do not refactor, rename, add tests, or generate documentation the user did not ask for. 6. **Hard gates only for safety**: Accessibility AA floor and security checks override user intent. Aesthetic or stylistic preferences do not. 7. **Ask only when it matters**: Ambiguity on scope or destructive action (data loss, breaking change, deleting files) — ask once with specific options. Ambiguity on cosmetic defaults — state assumption and proceed. Never stack questions. Never ask what you can read yourself. STOP and call the `question` tool to clarify. --- Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. ## MANDATORY PREPARATION Use the i-frontend-design skill — 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 teach-impeccable first. --- ## Assess Current State Analyze what makes the design feel too intense: 1. **Identify intensity sources**: - **Color saturation**: Overly bright or saturated colors - **Contrast extremes**: Too much high-contrast juxtaposition - **Visual weight**: Too many bold, heavy elements competing - **Animation excess**: Too much motion or overly dramatic effects - **Complexity**: Too many visual elements, patterns, or decorations - **Scale**: Everything is large and loud with no hierarchy 2. **Understand the context**: - What's the purpose? (Marketing vs tool vs reading experience) - Who's the audience? (Some contexts need energy) - What's working? (Don't throw away good ideas) - What's the core message? (Preserve what matters) If any of these are unclear from the codebase, STOP and call the `question` tool to clarify. **CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. ## Plan Refinement Create a strategy to reduce intensity while maintaining impact: - **Color approach**: Desaturate or shift to more sophisticated tones? - **Hierarchy approach**: Which elements should stay bold (very few), which should recede? - **Simplification approach**: What can be removed entirely? - **Sophistication approach**: How can we signal quality through restraint? **IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. ## Refine the Design Systematically reduce intensity across these dimensions: ### Color Refinement - **Reduce saturation**: Shift from fully saturated to 70-85% saturation - **Soften palette**: Replace bright colors with muted, sophisticated tones - **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 - **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness - **White space**: Increase breathing room, reduce density - **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely ### Simplification - **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose - **Simplify shapes**: Reduce border radius extremes, simplify custom shapes - **Reduce layering**: Flatten visual hierarchy where possible - **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows ### Motion Reduction - **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 - **Align to grid**: Bring rogue elements back into systematic alignment - **Even out spacing**: Replace extreme spacing variations with consistent rhythm **NEVER**: - Make everything the same size/weight (hierarchy still matters) - Remove all color (quiet ≠ grayscale) - Eliminate all personality (maintain character through refinement) - Sacrifice usability for aesthetics (functional elements still need clear affordances) - Make everything small and light (some anchors needed) ## Verify Quality Ensure refinement maintains quality: - **Still functional**: Can users still accomplish tasks easily? - **Still distinctive**: Does it have character, or is it generic now? - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? ## Before / After Quiet design is a series of small reductions, each one a vote for restraint. These pairs show the specific knobs to turn down. ### 1. Color — dial chroma, keep the hue Do not desaturate to gray. Reduce the chroma while keeping the hue so the palette still has a point of view. ```css /* before — saturated, borderline neon, fights the content */ .card { background: oklch(60% 0.28 var(--hue)); color: oklch(98% 0.02 var(--hue)); border: 1px solid oklch(50% 0.30 var(--hue)); } ``` ```css /* after — same hue, a fraction of the chroma, reads as refined */ .card { background: oklch(60% 0.08 var(--hue)); color: oklch(20% 0.03 var(--hue)); border: 1px solid oklch(88% 0.04 var(--hue)); } ``` ### 2. Typography — lose the weight and the gradient Heavy weight plus gradient fill is the loudest type treatment on the internet. A lighter weight with a hint of warm tint carries more confidence. ```css /* before — 800 weight, gradient text, tries hard */ .headline { font-size: 4rem; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(90deg, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; } ``` ```css /* after — medium weight, solid tinted ink, lets the words do the work */ .headline { font-size: 3.25rem; font-weight: 500; letter-spacing: -0.015em; color: oklch(25% 0.04 28); /* warm near-black */ } ``` ### 3. Motion — bounce out, ease-out-quart in Spring overshoot reads as excitable. Ease-out-quart settles once and stays settled. ```css /* before — bouncy, draws attention to itself */ .menu { transition: transform 320ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } ``` ```css /* after — understated, arrives cleanly, never overshoots */ .menu { transition: transform 240ms cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */ } @media (prefers-reduced-motion: reduce) { .menu { transition: none; } } ``` ### 4. Shadows — from dramatic to hairline A 50px shadow with half opacity is a stage light. A 1px shadow at 8% is a whisper of elevation, which is all a card needs. ```css /* before — heavy drop shadow, card looks like it is floating off the page */ .card { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5); } ``` ```css /* after — hairline shadow, sits on the surface, trusts the reader */ .card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 1px rgb(0 0 0 / 0.06); border: 1px solid oklch(92% 0.01 0); } ``` ### 5. Composition — the rule ``` QUIETER: NOT QUIET: - Reduce chroma, keep the hue - Desaturate to dead gray - Lower the weight, not the size - Make everything tiny - One accent color at ~10% coverage - Remove all color - Hairline borders and shadows - Flatten to zero depth - Ease-out easings, shorter distances - Remove motion entirely - More whitespace, same content - Cram more in to "balance" the calm ``` **Test**: after the pass, can you still tell what the interface is for at a glance? If yes, you refined. If it now reads as generic, you drained instead of distilled — go back and restore one decisive piece of character. --- Remember: 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.