Design Visual Design

Visual Design

Purpose

Apply visual design principles — color theory, typography, layout grids, spacing systems, visual hierarchy, and aesthetic consistency — to create interfaces that are both beautiful and functional. Visual design serves usability: every decision about color, type, spacing, or layout should support clarity, readability, and user goals.

Agent Protocol

Trigger

Exact user phrases: "visual design", "color theory", "typography", "layout", "visual hierarchy", "spacing", "proportion", "UI aesthetics", "make it look better", "design polish", "visual polish".

Input Context

• Product type (dashboard, marketing site, mobile app, data-heavy tool)
• Existing brand assets or design system tokens
• Target user demographics (age, accessibility needs, cultural context)
• Platform constraints (responsive breakpoints, screen sizes, rendering engine)
• Brand personality (professional, playful, luxurious, minimalist)

Output Artifact

Visual design specification with color system, typography scale, spacing grid, layout principles, and accessibility requirements.

Completion Criteria

• Color palette defined with primary, secondary, neutral, semantic colors
• All color combinations meet WCAG AA contrast ratios (4.5:1 text)
• Typography scale established (typeface, size, weight, line-height, letter-spacing)
• Spacing system defined (4px or 8px base unit with consistent scale)
• Layout grid specified (columns, gutters, margins, breakpoints)
• Visual hierarchy defined (size, color, position, whitespace strategy)
• Accessibility requirements documented (focus indicators, reduced motion, text spacing)

Max Response Length

200 lines of spec, patterns, and configuration.

Framework/Methodology

Visual Design Decision Tree

What is the primary design goal?
├── Clarity and readability → Typography-first approach
│   Select readable typeface, generous line-height, strong hierarchy
├── Brand expression and emotion → Color-first approach
│   Start with brand palette, extend to UI semantic colors
├── Data density and precision → Layout-first approach
│   Establish grid system, information density rules, spacing constraints
└── Engagement and delight → Motion + visual hierarchy
    Leading lines, focal points, depth through shadow/layering

The Four Pillars of Visual Design

Visual Design Process

Problem → Information → Structure → Visual Design → Prototype → Validate
                    ↑                          ↓
              Layout wireframes           Visual spec + tokens
              Content hierarchy           Dark mode adaptation
              User flows                  Responsive behavior

Workflow

Step 1: Establish Color System

Color Theory Foundations:

• Hue: the pigment (red, blue, green) — 360° color wheel
• Saturation: intensity/purity of the color — 0% (gray) to 100% (pure)
• Lightness: how light or dark — 0% (black) to 100% (white)
• Temperature: warm (reds, oranges, yellows) vs cool (blues, greens, purples)

Color Harmonies:

Color Accessibility: Every text/background combination must meet WCAG AA (4.5:1 for text <18px, 3:1 for text >=18px bold). Use tools: WebAIM Contrast Checker, Stark for Figma, axe DevTools.

Dark Mode Strategy:

• Reduce contrast slightly (text: 87% white, secondary: 60%, disabled: 38%)
• Increase saturation on accent colors to maintain vibrancy on dark backgrounds
• Reduce saturation on large surface areas to prevent eye strain
• Preserve semantic color meanings (red = error, green = success)
• Test at low brightness settings on OLED displays

:root {
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-light: #DBEAFE;
  --color-secondary: #7C3AED;
  --color-neutral-50: #F9FAFB;
  --color-neutral-100: #F3F4F6;
  --color-neutral-200: #E5E7EB;
  --color-neutral-500: #6B7280;
  --color-neutral-700: #374151;
  --color-neutral-900: #111827;
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: #0284C7;
}
[data-theme="dark"] {
  --color-primary: #3B82F6;
  --color-primary-hover: #60A5FA;
  --color-primary-light: #1E3A5F;
  --color-neutral-50: #18181B;
  --color-neutral-100: #27272A;
  --color-neutral-200: #3F3F46;
  --color-neutral-500: #A1A1AA;
  --color-neutral-700: #D4D4D8;
  --color-neutral-900: #FAFAFA;
}

Step 2: Build Typography System

Type Classification:

• Serif: Traditional, readable in long form — best for body text in print, headlines in digital
• Sans-serif: Clean, modern, screen-optimized — default for digital UI
• Monospace: Equal-width characters — code, data, tabular figures
• Display: Decorative, limited use — headlines only, never body text

Type Pairing Principles:

• One typeface family with multiple weights is safer than two typefaces
• If pairing: contrast in structure (serif + sans-serif), not in mood
• Use the 1.25 (Major Third) or 1.333 (Perfect Fourth) modular scale
• Limit to 2 typefaces max — one for headings, one for body

:root {
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
}

Readability Guidelines:

• Body text: 16-18px, line-height 1.5-1.7, max line length 60-75 characters
• Headings: bold weight, shorter line-height (1.2-1.3), letter-spacing tightened
• Labels: 13-14px, medium weight, letter-spacing slightly opened
• Avoid: text blocks wider than 75ch, body text under 14px, justified alignment

Step 3: Design Spacing System

The 8px Grid System:

• Base unit: 8px (4px for micro-spacing)
• All margins, padding, gaps are multiples of 8px (or 4px for fine-tuning)
• Consistently applied across all components and layouts

:root {
  --space-0: 0;
  --space-0\.5: 0.125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

Spacing Density:

• Comfortable: Generous whitespace (32-48px between sections) — content-focused, reading
• Default: Balanced (24-32px) — general purpose UI
• Compact: Tighter (8-16px) — data-heavy dashboards, tables, dense tools

Proximity Rule: Elements that are functionally related should be visually grouped through spacing. Items within a group use tighter spacing (8-16px); groups of items use more spacing (24-40px). This replaces visible borders in many cases.

Step 4: Create Layout System

Grid Systems:

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 16px; }
}

Visual Hierarchy Tools:

• Size: Larger elements draw attention first — primary actions are bigger than secondary
• Color: Bright/high-contrast elements advance; muted/low-contrast recede
• Weight: Bold text stands out; regular weight recedes
• Position: Top-left (LTR) is primary attention zone; bottom-right is lowest
• Whitespace: More space around an element = more importance
• Depth: Shadows, elevation, and layering create focal planes
• Texture: Patterns, gradients, and imagery attract attention

F-Pattern Layout: Users scan content in an F-shaped pattern — horizontal across top, then down left side, then horizontal again. Place key information along these scan lines. For content-heavy pages, lead with the most important information in the top-left quadrant.

Z-Pattern Layout: For minimal or center-focused layouts (landing pages, marketing sites), users scan in a Z — top-left to top-right, diagonally down, bottom-left to bottom-right. Place your logo top-left, CTA top-right or bottom-right, and value prop along the diagonal path.

Step 5: Apply Accessibility to Visual Design

• Focus indicators: 2px minimum, 3:1 contrast against adjacent colors, visible on all interactive elements
• Color-not-reliance: Never convey information through color alone — add icons, patterns, text labels
• Target sizes: 44x44px minimum for touch targets on mobile
• Text spacing: Ensure layouts don't break when users override text spacing (WCAG 1.4.12)
• Reduced motion: Test all animations reduce gracefully via prefers-reduced-motion
• Focus order: Visual order matches DOM/tab order for logical navigation

Common Pitfalls

Best Practices

Templates & Tools

Color Palette Generator Process

primary: "#2563EB"
harmonies:
  complementary: "#EB9D25"
  analogous: ["#2596EB", "#2563EB", "#2546EB"]
  triadic: ["#25EB9D", "#2563EB", "#EB2596"]
neutrals:
  50: "#F9FAFB" (background)
  100: "#F3F4F6" (surface)
  200: "#E5E7EB" (border)
  500: "#6B7280" (secondary text)
  700: "#374151" (body text)
  900: "#111827" (headings)
semantic:
  success: "#059669"
  warning: "#D97706"
  error: "#DC2626"
  info: "#0284C7"

Typography System Template

typefaces:
  heading: "Inter, system-ui, sans-serif"
  body: "Inter, system-ui, sans-serif"
  mono: "JetBrains Mono, monospace"
scale:
  display: "3rem/1.2" (48px)
  h1: "2.25rem/1.3" (36px)
  h2: "1.875rem/1.3" (30px)
  h3: "1.5rem/1.4" (24px)
  h4: "1.25rem/1.4" (20px)
  body: "1rem/1.6" (16px)
  small: "0.875rem/1.5" (14px)
  caption: "0.75rem/1.5" (12px)

Design Tools

Case Studies

Case Study 1: Dark Mode Redesign Reduces Eye Strain

A productivity app used a pure white (#FFFFFF) background. After implementing a proper dark mode with reduced contrast (87% text, 60% secondary, 38% disabled on #1E1E1E background), user surveys showed 40% reduction in reported eye strain during evening use. The key was using true dark grays (#1E1E1E) instead of pure black (#000000) to reduce halation on OLED screens, and reducing saturation on accent colors from 100% to 75% for large surface areas.

Method: Color system extension with dark theme overrides, tested on OLED and LCD displays Key insight: Dark surfaces should be dark gray, not black, and accent colors need desaturation for comfort Impact: Eye strain reports -40%, evening DAU +25%

Case Study 2: Typography Overhaul Increases Readability Scores

A news website used 14px body text with 1.4 line-height and 90ch max-width. Readability testing showed 65% comprehension. After increasing to 18px body text, 1.6 line-height, 70ch max-width, and using a more open typeface (system fonts → Inter), comprehension improved to 85%. Time-on-page increased 35% and scroll depth improved by 50%.

Method: Typography audit → scale adjustment → readability testing with 30 participants Key insight: Readability improvements benefit all users, not just those with visual impairments Impact: Comprehension 65% to 85%, time-on-page +35%, scroll depth +50%

Case Study 3: Spacing System Reduces Development Time

An e-commerce team had 47 distinct spacing values across their CSS. Implementing an 8px-grid spacing system with 12 values eliminated all arbitrary spacing decisions. Developer productivity for layout tasks improved by 30%, and the visual consistency score (measured by design audit) increased from 62% to 94% in 3 months.

Method: Audit all spacing → define 12-value 8px grid → codify in design tokens Key insight: Constraining choices improves both consistency and velocity Impact: Dev velocity +30%, visual consistency 62% to 94%

Rules

• Minimum text size: 14px body, 12px caption (accessibility)
• Minimum contrast: 4.5:1 text, 3:1 large text, 3:1 UI elements (WCAG AA)
• Limit typeface families to 2 per interface
• Line length: 60-75 characters max for body text
• Spacing follows an 8px grid (4px for micro adjustments)
• Color conveys meaning, not decoration — semantic naming
• Never use color as the only differentiator — add text or icon
• Dark mode is not just inverted colors — redesign for dark environments
• Every component has hover, active, disabled, focus, error states
• Borders are last resort — use spacing and background to separate elements
• Consistent border radius: pick one value (4px) and use it everywhere
• Visual hierarchy should be apparent at a glance — 3 levels max depth
• Shadows map to z-depth layers (card, modal, toast) — 3 levels max
• Test all designs in grayscale to verify hierarchy works without color
• Responsive design: mobile, tablet, desktop — design from smallest first
• Loading states must match final layout structure (no layout shift)

Color in Depth

Color Psychology in UI

Color choices communicate meaning and influence user behavior:

Color System Architecture

Global palette (100+ colors)
    ↓
Semantic tokens (30-50 colors)
    ↓
Component tokens (mapped to semantic)

Global palette structure:

• 10 neutral grays (50-900 scale) for text, backgrounds, borders
• 5-10 accent colors (each with 50-900 scale) for primary, secondary, tertiary
• 4 semantic colors: success (green), warning (amber/yellow), error (red), info (blue/cyan)
• Extended palette for data visualization (8-12 categorical colors, sequential + diverging scales)

Color Contrast Calculation

WCAG contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is relative luminance of lighter color and L2 of darker color. Relative luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B (linearized sRGB values).

// Quick contrast checker
function getContrastRatio(hex1: string, hex2: string): number {
  const l1 = relativeLuminance(hexToRgb(hex1));
  const l2 = relativeLuminance(hexToRgb(hex2));
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}

Tools: WebAIM Contrast Checker, Stark plugin, axe DevTools. Never guess contrast — always verify algorithmically.

Typography in Depth

Typeface Anatomy for UI Decision-Making

When evaluating typefaces for UI, assess:

• x-height: Larger x-height improves readability at small sizes (body text). Small x-height = more elegant, less readable.
• Aperture: Open apertures (a, c, e) improve legibility. Closed apertures can cause confusion at small sizes.
• Stroke contrast: Low contrast (sans-serif, humanist) for body text. High contrast (didone) for display only.
• Counter size: Open counters improve letter recognition, especially on low-resolution screens.
• Numeric figures: Tabular figures (fixed-width numbers) for tables and data. Proportional figures for running text.

Web Font Loading Strategy

<!-- Preload critical font -->
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

<!-- Inline small font subset in CSS -->
<style>
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;  /* Show fallback text immediately, swap when font loads */
  unicode-range: U+0000-00FF;  /* Latin subset only */
}
</style>

• font-display: swap prevents invisible text (FOIT) — text renders in fallback font immediately, swaps when custom font loads
• Subset fonts to Latin/ASCII for initial load, load full character set after first paint
• Use variable fonts (single .woff2 file for all weights) instead of individual weight files — reduces total font download 40-60%
• Preconnect to font CDN (Google Fonts, Typekit) to reduce DNS lookup time

Readability Science

Layout Systems in Depth

Grid Calculation Formula

Column width = (Content width - (Columns - 1) * Gutter) / Columns

Example: 12-column grid, 1200px content width, 24px gutter:

Column = (1200 - 11 * 24) / 12 = (1200 - 264) / 12 = 78px

Responsive Breakpoint Decision Tree

Content layout change at viewport width?
├── <640px (mobile) → Single column, stacked layout, hamburger menu
│   Touch targets: 44x44px minimum
│   Typography: body 16px, maintain readability at narrow widths
├── 640-1024px (tablet) → 2-column grid, visible navigation
│   Consider: portrait vs landscape orientation differences
├── 1024-1440px (desktop) → 12-column grid, sidebar + main content
│   Most common target — optimize here first
└── >1440px (wide) → Constrain max-width (1200-1440px) or use fluid layout
    Extra whitespace on sides; consider multi-column layouts

Mobile-first approach: start with mobile layout, add complexity at each breakpoint.

Visual Weight and Balance

Visual weight is determined by:

• Size: Larger = heavier. Balance a large element with multiple small elements.
• Color: Saturated colors weigh more than muted. Dark weighs more than light.
• Texture: Pattern, gradient, shadow add visual weight.
• Whitespace: More whitespace around an element = more emphasis (isolation).
• Position: Elements at the top and left (LTR) have more perceived weight.
• Shape: Irregular shapes draw more attention than regular ones.

Symmetrical balance: formal, stable. Asymmetrical balance: dynamic, interesting (requires more skill). Radial balance: powerful focal point.

Component State Architecture

Every interactive component in visual design must define these visual states:

Button State Examples

Default:   Solid blue bg #2563EB, white text, border-radius 8px
Hover:     Lighter blue bg #3B82F6, cursor pointer
Active:    Darker blue bg #1D4ED8, scale 0.97 (pressed)
Focus:     Same as default + 2px blue outline #2563EB with 4px offset
Disabled:  40% opacity, no hover/active effects, cursor not-allowed
Loading:   Spinner replaces text, button width preserved (prevents layout shift)
Success:   Green bg #059669, checkmark icon
Error:     Red bg #DC2626 (for destructive confirmation)

Input State Examples

Default:       1px solid border #D1D5DB, white bg
Focus:         2px solid blue #2563EB, subtle shadow
Hover:         1px solid border #9CA3AF
Error:         2px solid red #DC2626, error icon + message below
Disabled:      Gray bg #F3F4F6, 40% opacity text, no interactions
Filled:        1px solid border, text content present
Active:        Cursor blinking, component focused
Read-only:     Gray bg, no editing possible, cursor default

Production Considerations

Design Token Governance

All visual design properties should be codified as design tokens:

• Color tokens: Namespaced by function, not appearance: color-primary not color-blue
• Typography tokens: font-size-heading-1, font-weight-regular, line-height-body
• Spacing tokens: spacing-4 (4px), spacing-8 (8px), spacing-16 (16px)
• Shadow tokens: shadow-sm, shadow-md, shadow-lg (each with x/y/blur/spread/color)
• Radius tokens: radius-sm (4px), radius-md (8px), radius-lg (16px), radius-full (9999px)
• Opacity tokens: opacity-disabled (0.4), opacity-overlay (0.6)
• Duration tokens: duration-fast (150ms), duration-normal (200ms), duration-slow (300ms)

Dark Mode Architecture

Dark mode requires independent color tokens, not simple inversion:

• Surfaces: Dark gray #1E1E1E instead of pure black #000000 (reduces halation on OLED)
• Text: White #E0E0E0 (not pure white #FFFFFF) to reduce eye strain at night
• Elevation: Lighter surfaces for higher elevation (cards are lighter than background)
• Shadows: Shadows become internal (inset) or use light-on-dark instead of dark-on-light
• Images: Reduce brightness by 20-30% for photos; avoid white backgrounds in illustrations
• Accessibility: Maintain 4.5:1 contrast ratio on ALL text — dark mode doesn't mean lower contrast

Anti-Patterns

Tools & Deliverables

References

• references/color-theory.md — Color Theory Reference
• references/layout-principles.md — Layout Principles Guide
• references/spacing-grid.md — Spacing and Grid Systems Reference
• references/typography.md — Typography Reference
• references/visual-design-advanced.md — Visual Design Advanced Topics
• references/visual-design-fundamentals.md — Visual Design Fundamentals
• references/visual-hierarchy.md — Visual Hierarchy Reference
• references/visual-design-color-system.md — Color System Reference
• references/visual-design-dark-mode.md — Dark Mode Design Reference

Handoff

Hand off to design-design-systems for token implementation. Hand off to design-brand-identity for brand consistency. Hand off to design-accessibility for WCAG compliance audit.