Make It Quieter: UI principle for coding agents

A directional operator. Use this when an interface feels busy, loud, or fatiguing and the goal is calm and focus, not deletion. Quieter keeps the same content and capability but lowers the visual volume of everything that is not the user's current task, so attention has somewhere to rest. Distinct from distill, which removes elements entirely; quieter mutes what stays.

Lower Contrast on Secondary Material

Most interfaces shout everything at once. Calm comes from a clear loud/soft split.

Demote supporting text, metadata, and labels to text-muted-foreground so the primary content is the only thing at full contrast.
Reserve full-strength foreground for the one thing the user is reading or acting on right now. Everything else sits a step back.
Avoid pure black on pure white for large areas; a slightly softened foreground reads calmer over a long session.

Replace Borders and Fills with Space

Borders, boxes, and filled chips are the loudest, cheapest separators and the first source of noise.

Separate groups with whitespace before reaching for a border. Space defines structure without adding lines.
Where you keep dividers, make them faint hairlines, not full-contrast rules.
Drop background fills on cards and chips that do not need to be tappable surfaces; a tinted block competes with content for attention.

/* Busy: bordered, filled, full-contrast */
.item { border: 1px solid oklch(0.7 0 0); background: oklch(0.92 0 0); }

/* Quieter: spacing does the grouping, hairline only if needed */
.item { border: 0; background: transparent; padding-block: 0.75rem; }
.list > .item + .item { border-top: 1px solid oklch(0.92 0 0); }

Calm Color and Decoration

Reduce the number of accent colors in view to one. Multiple saturated hues read as competing alerts.
Lower chroma on supporting accents (status dots, tags) so only the true call-to-action carries full saturation.
Remove decorative gradients, patterns, and shadows that do not communicate state or depth.

Soften Motion and Feedback

Slow and shorten animations; large or fast motion is loud. Prefer subtle fades and small translations over bouncy, attention-grabbing transitions.
Collapse redundant feedback. One quiet confirmation beats a toast, a banner, and a badge all firing for the same event.
Mute non-urgent notifications and badges. A red count on every tab trains the user to ignore all of them.

Establish One Calm Rhythm

Standardize spacing to a single scale so the eye stops re-adjusting. Irregular gaps read as noise even when each element is quiet.
Align everything to a shared grid and a single edge. Ragged alignment is a major, often invisible, source of busyness.

Checklist

Only the current task is at full contrast; supporting text muted
Whitespace and hairlines replace boxes, borders, and fills
One accent color in view; supporting accents lowered in chroma
Decorative shadows, gradients, and patterns removed unless they signal state
Motion shortened and softened; redundant feedback collapsed to one
Consistent spacing scale and shared alignment across the view