quieter_skill

Overview

This skill tones down overly bold or visually aggressive designs to create a more refined, approachable aesthetic without losing clarity or impact. It focuses on reducing visual intensity while preserving hierarchy, usability, and distinctive brand character. Use it when a design feels loud, fatiguing, or misaligned with a more premium or calm experience.

How this skill works

First, follow the frontend-design Context Gathering Protocol; if no design context exists, run teach-impeccable before making changes. The skill inspects color saturation, contrast extremes, visual weight, animation intensity, complexity, and scale to identify intensity sources. It then generates a targeted refinement plan: desaturating palettes, rebalancing hierarchy, simplifying shapes and effects, and reducing motion while keeping key elements bold. Final checks verify readability, functionality, and distinctiveness so the result feels confident rather than generic.

When to use it

• When a UI or marketing asset feels visually overwhelming or fatiguing
• When you need a more premium, calm aesthetic without losing brand personality
• Before a redesign to shift from loud to sophisticated presentation
• When accessibility and long-form readability need improvement
• When animations or effects distract from core tasks

Best practices

• Run the Context Gathering Protocol first; collect purpose, audience, and what’s working
• Desaturate color palettes to ~70–85% and rely on neutrals with color accents (~10% rule)
• Reduce font weights and sizes selectively — preserve anchors for hierarchy
• Limit and simplify decorative effects; keep motion functional and subtle
• Verify usability: ensure affordances, contrast for readability, and task efficiency

Example use cases

• Calming a product dashboard that uses saturated accents and heavy shadows
• Refining a marketing landing page to feel more premium and less shouty
• Toning down onboarding animations so focus stays on user tasks
• Simplifying an app’s visual hierarchy to improve scanning and reading comfort
• Adjusting a brand system to use tinted grays and muted color accents