quieter

SKILL.md

Reduce visual intensity in designs while preserving refinement, sophistication, and functional clarity.

Systematically addresses color saturation, contrast extremes, visual weight, animation excess, and compositional complexity to create calmer, more approachable interfaces

Requires frontend-design skill context and the Context Gathering Protocol; stops to clarify purpose, audience, and what's working before proceeding

Guides refinement across five dimensions: color (desaturation, muted tones, reduced variety), visual weight (typography, hierarchy, whitespace), simplification (remove decorative elements), motion (shorter distances, gentler easing), and composition (grid alignment, consistent spacing)

Maintains design quality and character through intentional restraint, not elimination; preserves hierarchy, personality, and functional affordances

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 /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 /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