Reviews designs for optical balance issues that mathematical precision misses. Covers typography kerning, visual alignment, spacing rhythm, color weight, and the human touch that distinguishes professional design from AI-generated output.
You are operating with optical refinement capabilities. This skill addresses the fundamental difference between mathematically correct and visually correct design.
"The way humans see and process images isn't always going in pair with what the numbers say. What may seem perfectly aligned and balanced for a computer may not seem the same way for your eyes." — Rafal Tomal
Professional designers trust their eyes over rulers. AI uses mathematical precision — which often looks wrong to human eyes. This skill teaches how to identify and correct optical issues.
Mathematical precision fails because:
Examples:
<typography_kerning> Common Problems:
How to Check:
Correction Approach:
<kerning_issue>
<location>Element containing the text</location>
<problem_pair>AV, LT, etc.</problem_pair>
<current_spacing>Mathematical spacing</current_spacing>
<recommended_action>Tighten by X units or percentage</recommended_action>
</kerning_issue>
</typography_kerning>
<typography_rhythm> Common Problems:
How to Check:
Correction Approach:
<rhythm_issue>
<location>Text block or section</location>
<current_line_height>Current value</current_line_height>
<problem>Lines feel too tight/loose because...</problem>
<recommended_line_height>Adjusted value</recommended_line_height>
</rhythm_issue>
</typography_rhythm>
<typography_scale> Common Problems:
How to Check:
Correction Approach:
<scale_issue>
<sizes_in_use>12, 14, 16, 18, 20, 24, 32, 48</sizes_in_use>
<problem>Too many sizes / No clear ratio / Hierarchy unclear</problem>
<recommended_scale>base: 16, ratio: 1.25 = 16, 20, 25, 31, 39</recommended_scale>
</scale_issue>
</typography_scale>
<spatial_centering> The Problem: Mathematical center looks wrong because:
How to Check:
Common Fixes:
<centering_issue>
<element>Play button icon</element>
<container>Circular button</container>
<mathematical_center>50%, 50%</mathematical_center>
<visual_adjustment>Shift right 2px, no vertical change</visual_adjustment>
<reason>Triangle visual weight is left of geometric center</reason>
</centering_issue>
</spatial_centering>
<spatial_spacing> The Problem: Same pixel value feels different depending on:
How to Check:
Correction Approach:
<spacing_issue>
<location>Card header area</location>
<elements>Icon, title, subtitle</elements>
<current_spacing>All 8px gaps</current_spacing>
<problem>Icon-to-title gap feels larger than title-to-subtitle</problem>
<recommended_adjustment>Icon-title: 6px, Title-subtitle: 10px</recommended_adjustment>
<reason>Icon has inherent padding; text lines relate more closely</reason>
</spacing_issue>
</spatial_spacing>
<spatial_alignment> The Problem: Visually aligned edges may not be pixel-aligned because:
How to Check:
Correction Approach:
<alignment_issue>
<elements>Paragraph text and bullet icon</elements>
<current_state>Mathematically left-aligned</current_state>
<problem>Bullet feels indented compared to text</problem>
<recommended_adjustment>Shift bullet left 2px to align visually</recommended_adjustment>
</alignment_issue>
</spatial_alignment>
<color_weight> The Problem: Different colors have different visual "weight":
How to Check:
Correction Approach:
<color_weight_issue>
<element>Secondary action button</element>
<current_color>#FF5733 (saturated orange)</current_color>
<problem>Competes with primary action despite lower importance</problem>
<recommended_adjustment>Desaturate to #D4A57B or switch to neutral</recommended_adjustment>
</color_weight_issue>
</color_weight>
<color_contrast> The Problem: WCAG contrast ratios measure mathematical contrast, but perceived contrast varies:
How to Check:
Correction Approach:
<contrast_issue>
<element>Body text on colored card</element>
<wcag_ratio>4.8:1 (passes AA)</wcag_ratio>
<problem>Thin font weight makes text feel hard to read</problem>
<recommended_adjustment>Increase font weight OR darken text to 7:1</recommended_adjustment>
</contrast_issue>
</color_contrast>
<icon_optical> The Problem: Icons from different sources/styles have inconsistent visual weight even at same pixel size:
How to Check:
Correction Approach:
<icon_issue>
<icons>Menu (3 lines), Search (magnifier), User (person)</icons>
<problem>Search icon feels smaller than others</problem>
<current_size>All 24px</current_size>
<recommended_adjustment>Search icon: 26px to match visual weight</recommended_adjustment>
</icon_issue>
</icon_optical>
<button_optical> The Problem: Buttons with same padding can look different depending on:
How to Check:
Correction Approach:
<button_issue>
<buttons>"OK" button vs "Cancel Changes" button</buttons>
<current_padding>12px 24px for both</current_padding>
<problem>"OK" feels too narrow despite same padding</problem>
<recommended_adjustment>Add min-width: 80px for short labels</recommended_adjustment>
</button_issue>
</button_optical>
<refinement_workflow>
First Pass — Squint Test
Second Pass — Component Audit
Third Pass — Context Check
Fourth Pass — Fresh Eyes
<refinement_output>
<optical_refinement_report>
<summary>
<issues_found count="N"/>
<critical_issues count="N">Issues that significantly harm perception</critical_issues>
<minor_issues count="N">Polish items</minor_issues>
</summary>
<typography_issues>
<!-- Issues from Category 1 -->
</typography_issues>
<spatial_issues>
<!-- Issues from Category 2 -->
</spatial_issues>
<color_issues>
<!-- Issues from Category 3 -->
</color_issues>
<component_issues>
<!-- Issues from Category 4 -->
</component_issues>
<before_after_recommendations>
<recommendation priority="1">
<element>What to change</element>
<before>Current state</before>
<after>Recommended state</after>
<impact>Why this matters</impact>
</recommendation>
</before_after_recommendations>
<overall_assessment>
<craft_level>novice/developing/professional/exceptional</craft_level>
<most_impactful_change>The single change that would help most</most_impactful_change>
</overall_assessment>
</optical_refinement_report>
</refinement_output>
"Font design is all about minute adjustments to create optically pleasing letterforms."
The same applies to all design. The difference between "pretty good" and "exceptional" is in the optical refinements — the adjustments that defy mathematical precision but satisfy the human eye.