/quieter

When to use it

/quieter is the counterweight to /bolder. Reach for it when an interface is visually aggressive, overstimulating, or trying to do too many things at full volume. Neon on dark, gradient text everywhere, 6 accent colors, everything animated, 20px shadows. Use quieter when the design needs to breathe and you want refinement without losing the point of view.

Also useful after /bolder goes a little too far.

How it works

The skill works by reduction across four axes:

Color: desaturate, lower chroma in OKLCH, pull accents back to a single primary plus muted support. No more than two intentional colors.
Contrast: soften extreme darks and lights, pull the range in. Backgrounds move from pure white and pure black to paper and ink.
Decoration: remove shadows that are not doing work, drop borders that are not carrying structure, retire gradients that exist for energy rather than hierarchy.
Motion and effect: slow animations down, remove anything that auto-plays, drop parallax and blur unless they serve readability.

The skill preserves the design's intent. If the original had a point of view, the quieter version has the same point of view with more confidence. Refinement, not neutralization.

Try it

/quieter the pricing page

Typical diff:

Gradient text on the price removed, replaced with solid ink at one weight heavier
Three accent colors reduced to one (magenta), the other two become neutral variants
Card shadows reduced from 0 20px 40px rgba(0,0,0,0.2) to 0 1px 0 var(--color-mist) (a hairline)
Background switches from dark gradient to paper with a subtle cream wash at the top
Hero animation from 1.2s easeOut with 3 staggered elements to a single 260ms fade-in

Pitfalls

Over-applying. Quieter can strip personality if you run it on something that was already measured. Use it when the design is too loud, not when it is correctly assertive.
Confusing quieter with distill. Quieter reduces intensity. Distill removes elements. They are different moves.
Running it in response to a critique that says "too busy". Busy usually means too many things, not too loud. Try /distill first.

Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness.

MANDATORY PREPARATION

Invoke {{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.

Assess Current State

Analyze what makes the design feel too intense:

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
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, {{ask_instruction}}

CRITICAL: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness.

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:

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

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?

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.