1---
 2tagline: "Tone down designs that are shouting without losing their intent."
 3---
 4
 5## When to use it
 6
 7`/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.
 8
 9Also useful after `/bolder` goes a little too far.
10
11## How it works
12
13The skill works by reduction across four axes:
14
151. **Color**: desaturate, lower chroma in OKLCH, pull accents back to a single primary plus muted support. No more than two intentional colors.
162. **Contrast**: soften extreme darks and lights, pull the range in. Backgrounds move from pure white and pure black to paper and ink.
173. **Decoration**: remove shadows that are not doing work, drop borders that are not carrying structure, retire gradients that exist for energy rather than hierarchy.
184. **Motion and effect**: slow animations down, remove anything that auto-plays, drop parallax and blur unless they serve readability.
19
20The 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.
21
22## Try it
23
24```
25/quieter the pricing page
26```
27
28Typical diff:
29
30- Gradient text on the price removed, replaced with solid ink at one weight heavier
31- Three accent colors reduced to one (magenta), the other two become neutral variants
32- Card shadows reduced from `0 20px 40px rgba(0,0,0,0.2)` to `0 1px 0 var(--color-mist)` (a hairline)
33- Background switches from dark gradient to paper with a subtle cream wash at the top
34- Hero animation from 1.2s easeOut with 3 staggered elements to a single 260ms fade-in
35
36## Pitfalls
37
38- **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.
39- **Confusing quieter with distill.** Quieter reduces intensity. Distill removes elements. They are different moves.
40- **Running it in response to a critique that says "too busy".** Busy usually means too many things, not too loud. Try `/distill` first.