visual-hierarchy-refactoring

What problem does it solve?

This skill helps designers and teams establish clear emphasis and information order in interfaces without over-relying on color, reducing cognitive load and improving scannability.

Core Features & Use Cases

• Establish size-based hierarchy using scalable typography and spacing tokens to create primary, secondary, and tertiary elements.
• Apply weight and contrast rules, using a limited set of font weights and tinted greys to maintain cohesion across layouts.
• Refactor cluttered interfaces by organizing content with Gestalt principles to improve readability and visual flow.

Quick Start

• Audit a UI mockup to assess whitespace, size, weight, and color balance.
• Provide before/after recommendations and a CSS snippet to implement the changes.