visual-hierarchy-refactoring_skill

Overview

This skill teaches how to master visual hierarchy using size, weight, contrast, and whitespace rather than relying on color. It shows practical rules—like the rule of excessive whitespace, tinted greys, and the visual weight system—to make interfaces immediately scannable and confident. Use it to refactor cluttered UIs or establish clear information structure for new layouts.

How this skill works

The skill inspects layouts for density, size differences, font weight usage, contrast levels, and color tinting. It applies Gestalt principles (proximity, similarity, figure/ground, closure, symmetry, common region) and prescribes spacing, modular type scales, and an 8–10 shade color weight system. It returns concrete changes: spacing increases, size/weight adjustments, and CSS variables for tinted greys and brand shades.

When to use it

• Refactoring a cluttered dashboard or page that feels dense
• Designing a new layout and establishing information priority
• Creating or standardizing a color weight system for a brand
• Improving accessibility and scanability through contrast and spacing
• Preparing components for reuse with clear visual roles

Best practices

• Start by adding more whitespace—double common margins and reduce only if necessary
• Establish size hierarchy first: primary should be ~1.5–2× secondary
• Limit font weights to 2–3 values and reserve bold for real emphasis
• Use tinted greys that reflect your brand hue instead of true grey or black
• Reserve saturated color for interactive elements; handle hierarchy with size/weight/contrast
• Build 8–10 consistent shades per hue to avoid hex drift

Example use cases

• Audit an existing UI and get a prioritized list of spacing and typographic fixes
• Refactor a compact form into a spacious, scannable layout with before/after CSS
• Generate a color weight system and matching tinted greys for a brand
• Design a component set (cards, buttons, headers) with clear size and weight rules
• Apply Gestalt rules to group content blocks and reduce perceived clutter