tommygeoco_ui-audit/references/12-checklist-visual-style.md

# Checklist: Improving Visual Style

Systematic checks for visual design consistency and quality.

---

## Spacing

Consistent rhythm creates visual harmony.

### Spacing System

☐ **Base unit defined** — Usually 4px or 8px
☐ **Scale established** — e.g., 4, 8, 12, 16, 24, 32, 48, 64
☐ **Consistent application** — Same spacing for same relationships

### Spacing Types

☐ **Padding** — Space inside containers
☐ **Margin** — Space between elements
☐ **Gap** — Space in flex/grid layouts
☐ **Gutters** — Space between columns

### Spacing Relationships

☐ **Related items closer** — Law of Proximity
☐ **Unrelated items farther** — Visual grouping
☐ **Hierarchy through spacing** — More space = more importance
☐ **Breathing room** — Adequate whitespace

### Common Issues

- Inconsistent spacing between similar elements
- Too little whitespace (cramped)
- Too much whitespace (disconnected)
- Padding/margin not on the spacing scale

---

## Colors

Color communicates meaning and creates hierarchy.

### Color System

☐ **Primary color** — Brand/action color
☐ **Secondary color** — Supporting accent
☐ **Neutral palette** — Grays for text, backgrounds, borders
☐ **Semantic colors** — Error, success, warning, info

### Color Usage

☐ **Text colors** — Primary, secondary, disabled, placeholder
☐ **Background colors** — Surface hierarchy (elevated, base, sunken)
☐ **Border colors** — Default, focus, error
☐ **Interactive states** — Hover, active, focus variations

### Color Accessibility

☐ **Contrast ratios** — 4.5:1 for normal text, 3:1 for large text
☐ **Not color alone** — Don't rely solely on color to convey info
☐ **Color blindness** — Test with simulators
☐ **Dark mode** — Colors work in both modes

### Common Issues

- Too many colors (lack of cohesion)
- Insufficient contrast
- Inconsistent semantic usage (different reds for errors)
- Color used as only differentiator

---

## Elevation

Visual layers create depth and hierarchy.

### Elevation Levels

☐ **Level 0** — Base surface (no shadow)
☐ **Level 1** — Slight elevation (cards, sections)
☐ **Level 2** — Moderate elevation (dropdowns, popovers)
☐ **Level 3** — High elevation (modals, dialogs)
☐ **Level 4** — Highest elevation (toasts, tooltips above modals)

### Shadow Properties

☐ **Consistent direction** — Light source consistent
☐ **Blur radius** — Increases with elevation
☐ **Spread** — Usually minimal
☐ **Opacity** — Decreases with distance
☐ **Color** — Usually dark gray/black, can be colored

### Elevation Usage

☐ **Interactive elements** — Buttons may elevate on hover
☐ **Overlay content** — Modals, drawers clearly elevated
☐ **Sticky elements** — Headers/navs elevated when scrolling
☐ **Focus indication** — Can supplement or replace outlines

### Common Issues

- Inconsistent shadow direction
- Too many elevation levels
- Shadows too harsh or too subtle
- Elevation doesn't match interaction hierarchy

---

## Iconography

Icons support comprehension and reduce text.

### Icon System

☐ **Single icon library** — Consistent style
☐ **Consistent stroke/fill** — Don't mix styles
☐ **Size scale** — 16, 20, 24, 32, 48 (or similar)
☐ **Consistent grid** — Icons align to same grid

### Icon Usage

☐ **With text labels** — For unclear icons
☐ **Standalone** — Only for universally understood (close, search, home)
☐ **In buttons** — Left or right of text consistently
☐ **In navigation** — Supplement text, not replace
☐ **As status** — Error, success, warning indicators

### Icon Accessibility

☐ **Alt text/aria-label** — For meaningful icons
☐ **aria-hidden** — For decorative icons
☐ **Touch targets** — 44x44px minimum for tappable icons
☐ **Color contrast** — Icons meet contrast requirements

### Common Issues

- Mixed icon styles (outline + filled)
- Icons without labels where meaning unclear
- Inconsistent icon sizes
- Too many unique icons

---

## Typography

Text is the primary interface. Make it work.

### Type Scale

☐ **Scale established** — Limited set of sizes (7-10)
☐ **Consistent usage** — Same size for same purpose
☐ **Responsive scaling** — Appropriate for device

### Type Hierarchy

☐ **H1-H6** — Clear heading hierarchy
☐ **Body text** — Primary and secondary
☐ **Captions/labels** — Small supporting text
☐ **Display text** — Hero/feature text

### Type Properties

☐ **Line height** — 1.4-1.6 for body, 1.1-1.3 for headings
☐ **Letter spacing** — Adjusted for size (tighter large, looser small)
☐ **Font weight** — 2-3 weights max
☐ **Max line length** — 45-75 characters for readability

### Type Accessibility

☐ **Minimum size** — 16px for body text
☐ **Contrast** — 4.5:1 ratio
☐ **Scalability** — Works when user zooms
☐ **Font choice** — Legible at small sizes

### Common Issues

- Too many font sizes
- Inconsistent line heights
- Lines too long (hard to read)
- Insufficient contrast on secondary text

---

## Imagery & Illustrations

Visual content enhances understanding and tone.

### Image Usage

☐ **Consistent style** — Photography style or illustration style
☐ **Appropriate aspect ratios** — Consistent crops
☐ **Quality** — High resolution, appropriate compression
☐ **Relevance** — Images support content, not decorate

### Image Treatments

☐ **Placeholders** — Loading states for images
☐ **Error states** — Broken image handling
☐ **Cropping** — Consistent crop ratios
☐ **Filters/overlays** — Consistent treatment

### Image Accessibility

☐ **Alt text** — Descriptive for meaningful images
☐ **Empty alt** — For decorative images
☐ **Text in images** — Avoided or duplicated in HTML
☐ **Color contrast** — Text over images readable

### Illustration Guidelines

☐ **Consistent style** — Same illustrator or style guide
☐ **Color palette** — Within brand colors
☐ **Stroke weights** — Consistent with icons
☐ **Character design** — If using people, consistent representation

---

## Motion & Animation

Movement creates meaning and delight.

### Animation Purposes

☐ **Feedback** — Response to user action
☐ **Orientation** — Help users understand spatial relationships
☐ **Attention** — Draw focus to important changes
☐ **Continuity** — Smooth transitions between states

### Animation Properties

☐ **Duration** — 100-500ms typical (faster = less important)
☐ **Easing** — Ease-out for entrances, ease-in for exits
☐ **Consistency** — Same duration for same type of animation
☐ **Purpose** — Every animation has a reason

### Animation Best Practices

☐ **Prefer transforms** — translate, scale, rotate, opacity (performant)
☐ **Avoid layout thrash** — Don't animate width, height, position
☐ **Reduce motion** — Respect prefers-reduced-motion
☐ **Subtlety** — Most animations should be barely noticed

### Common Issues

- Animations too slow (feel sluggish)
- Animations too fast (miss the feedback)
- Gratuitous animation (no purpose)
- Inconsistent easing/duration
- Ignoring accessibility preferences

---

## Texture & Patterns

Surface treatments add depth and character.

### Texture Types

☐ **Subtle gradients** — Add depth without distraction
☐ **Background patterns** — Subtle, non-distracting
☐ **Noise/grain** — Adds warmth to flat colors
☐ **Glass effects** — Blur, transparency (use sparingly)

### Usage Guidelines

☐ **Subtlety** — Textures shouldn't compete with content
☐ **Purpose** — Differentiate surfaces, add depth
☐ **Consistency** — Same treatment for same surface type
☐ **Performance** — Consider render cost

### Common Issues

- Textures too prominent
- Inconsistent texture usage
- Performance impact from complex textures
- Reduced legibility from background patterns

---

## Visual Style Audit

Quick checks for visual consistency:

| Element | ✓ | Notes |
|---------|---|-------|
| Spacing on scale | | |
| Color palette limited | | |
| Contrast accessible | | |
| Elevation consistent | | |
| Single icon style | | |
| Type scale limited | | |
| Line heights consistent | | |
| Images consistent style | | |
| Animations purposeful | | |
| Reduced motion respected | | |