quieter

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

Users start this workflow with . Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.

Consult the hierarchy checklist when quieting the design depends on de-emphasis, grayscale hierarchy, or clearer action priority. Consult the spacing system when calmness should come from better grouping and rhythm rather than just less saturation. Consult the personality levers when the design needs to stay distinctive while becoming more restrained. Consult the ai slop detection when "quieter" risks drifting into generic, trend-safe blandness. Consult the surface separation when removing intensity means using fewer borders, fewer unnecessary cards, quieter shadows, or calmer background shifts.

Analyze what makes the design feel too intense:

If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.

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

Quiet design usually comes from fewer competing decisions, not from draining all the life out of the interface.

Create a strategy to reduce intensity while maintaining impact:

IMPORTANT: Great quiet design is harder than great bold design. Subtlety requires precision.

Systematically reduce intensity across these dimensions:

NEVER:

Ensure refinement maintains quality:

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.