ui-quieter

name	ui-quieter
description	Tone down visually aggressive designs. Refine through restraint

UI Quieter

/ui-quieter [target] - Tone down visually aggressive designs. Refine, not bore. Sophistication through restraint.

Flow

1. Assess intensity sources: oversaturated color, extreme contrasts, too many bold elements, animation excess, complexity, everything loud
2. Understand context: preserve what works, maintain core message
3. Plan refinement: color approach, hierarchy (what stays bold, what recedes), simplification
4. Refine systematically

Refinement Dimensions

Color

• Reduce saturation to 70-85%
• Shift bright to muted, sophisticated tones
• Fewer colors, more thought per color
• Neutrals do more work (10% rule for color)
• Gentler contrasts
• Tinted grays (warm or cool, not pure gray)
• No gray on colored backgrounds (use shade of that color)

Visual Weight

• Reduce font weights (900 → 600, 700 → 500)
• Hierarchy through subtlety (weight, size, space instead of color+bolder)
• More white space, less density
• Thinner borders, lower opacity, remove where possible

Simplification

• Remove decorative gradients, shadows, patterns without purpose
• Reduce border radius extremes
• Flatten visual hierarchy
• Reduce blur effects, glows, multiple shadows

Motion

• Shorter distances (10-20px instead of 40px)
• Remove decorative animations (keep functional)
• Gentle micro-interactions instead of dramatic
• ease-out-quart for smooth understated motion (never bounce/elastic)
• Remove purposeless animations entirely

Composition

• Smaller scale jumps for calmer feel
• Align to grid (bring rogue elements in line)
• Even out spacing rhythm (less extreme variation)

NEVER

• Make everything same size/weight (hierarchy still matters)
• Remove all color (quiet ≠ grayscale)
• Eliminate all personality
• Sacrifice usability for aesthetics
• Make everything small and light (some anchors needed)