visual-polish

UI Visual Polish

Overview

Great interfaces rarely come from a single thing—it's usually a collection of small, thoughtful details that compound into a cohesive, polished experience. This skill documents techniques for visual refinement: text wrapping strategies, balanced border radius hierarchies, contextual animations, optical alignment, and shadow composition. Each detail is intentional and measurable.

When to Use / When NOT to Use

Use When:

• Refining typography presentation (headings, body text, dynamic numbers)
• Designing nested UI components with multiple layers
• Adding entrance/exit animations to modals, tooltips, or lists
• Replacing solid borders with depth-aware shadows
• Aligning buttons with icons or misaligned visual elements
• Optimizing animations for user interruption (mid-toggle, mid-drag)
• Adding micro-interactions (copy-to-clipboard, status toggles)
• Ensuring consistent visual hierarchy across the interface

Do NOT Use When:

• Building motion-heavy animations (use dedicated motion library docs)
• Solving structural layout issues (use CSS Grid/Flexbox guides)
• Implementing accessibility requirements (separate A11y guide)
• Addressing performance bottlenecks (use optimization guide)
• Creating brand identity from scratch (use design system docs)

---

Core Techniques

Surfaces & Layout

1. Text Wrapping Strategy

Balance text distribution and reading flow with CSS text-wrap:

• text-wrap: balance — For headings

  • Distributes text evenly across lines
  • Prevents orphaned words at line ends
  • Use once per heading (computed once at render)
  • Best for titles, hero text, short high-impact copy

• text-wrap: pretty — For body text

  • Similar to balance but slower algorithm
  • Better for longer paragraphs
  • Reduces hyphenation and ugly breaks
  • May slightly reflow on resizes

Implementation:

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

2. Concentric Border Radius