Visual Designer

Visual Designer

Great design is invisible - users notice when it's bad, not when it's good.

Core Principle

Consistency over creativity.

Visual design serves the user experience. Every color, font, and spacing decision should have a purpose.

---

Phase 1: Color Systems

Color Theory Basics

Color Wheel:

• Complementary: Opposite colors (blue + orange) - high contrast
• Analogous: Adjacent colors (blue + green + teal) - harmonious
• Triadic: Three evenly spaced colors - balanced
• Monochromatic: Shades of one color - safe, minimal

Creating a Color Palette

60-30-10 Rule:

• 60% Primary color (dominant)
• 30% Secondary color (supporting)
• 10% Accent color (call-to-action)

Example Palette:

/* Primary (60%) - Backgrounds, large areas */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
--color-primary-500: #3b82f6; /* Main brand color */
--color-primary-600: #2563eb;
--color-primary-900: #1e3a8a;

/* Secondary (30%) - Complementary elements */
--color-secondary-500: #8b5cf6;
--color-secondary-600: #7c3aed;

/* Accent (10%) - CTAs, highlights */
--color-accent-500: #f59e0b;
--color-accent-600: #d97706;

/* Neutrals - Text, borders */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;

/* Semantic colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;

Accessible Color Contrast

WCAG Requirements:

• Normal text (< 18pt): 4.5:1 contrast ratio
• Large text (≥ 18pt or 14pt bold): 3:1 contrast ratio
• UI components: 3:1 contrast ratio

/* ✅ Good: Sufficient contrast (8:1) */
.text {
  color: #111827; /* gray-900 */
  background: #ffffff;
}

/* ❌ Bad: Insufficient contrast (2.1:1) */
.text-bad {
  color: #d1d5db; /* gray-300 */
  background: #ffffff;
}

Tools:

• Coolors.co - Generate palettes
• Color Contrast Checker
• Adobe Color

Dark Mode Strategy

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
  }
}

Dark Mode Checklist:

• [ ] Reduce pure white (#fff) → use off-white (#f9fafb)
• [ ] Reduce pure black (#000) → use dark gray (#111827)
• [ ] Increase contrast on dark backgrounds
• [ ] Test with actual dark mode users
• [ ] Support system preference

---

Phase 2: Typography

Font Pairing Principles

Golden Rule: Maximum 2 fonts

• Heading font: Distinctive, attention-grabbing
• Body font: Readable, neutral

Popular Pairings:

/* Modern & Clean */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;

/* Classic & Professional */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* Tech & Minimal */
--font-heading: 'Space Grotesk', sans-serif;
--font-body: 'IBM Plex Sans', sans-serif;

/* Creative & Friendly */
--font-heading: 'Poppins', sans-serif;
--font-body: 'Open Sans', sans-serif;

Type Scale (Modular Scale)

Base size: 16px (1rem) Scale ratio: 1.25 (Major Third)

--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.83px */
--text-5xl: 3.815rem; /* 61px */

/* Font weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

Line Height & Spacing

/* Headings: Tighter line-height */
h1,
h2,
h3 {
  line-height: 1.2;
}

/* Body text: Comfortable reading */
p {
  line-height: 1.6;
  max-width: 65ch; /* 65 characters max for readability */
}

/* Small text: More line-height */
.text-sm {
  line-height: 1.8;
}

/* Letter spacing */
.heading {
  letter-spacing: -0.02em; /* Tighter */
}

.uppercase {
  letter-spacing: 0.05em; /* Wider for all-caps */
}

Responsive Typography

/* Fluid typography */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Or breakpoint-based */
h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }
}

---

Phase 3: Spacing System

8pt Grid System

Why 8pt?

• Most screens are divisible by 8
• Creates visual rhythm
• Easier to maintain consistency

--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */

Usage:

/* Component padding */
.button {
  padding: var(--space-3) var(--space-6); /* 12px 24px */
}

/* Section spacing */
.section {
  padding: var(--space-16) 0; /* 64px top/bottom */
}

/* Element margins */
.heading {
  margin-bottom: var(--space-4); /* 16px */
}

.paragraph {
  margin-bottom: var(--space-6); /* 24px */
}

Vertical Rhythm

/* Consistent vertical spacing */
* + * {
  margin-top: var(--space-4);
}

/* Specific overrides */
h1 + p {
  margin-top: var(--space-6);
}

p + p {
  margin-top: var(--space-4);
}

---

Phase 4: Layout & Composition

Visual Hierarchy

Establish importance through:

1. Size: Larger = more important 2. Weight: Bolder = more important 3. Color: Brighter = more important 4. Spacing: More space = more important

/* Primary heading */
h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

/* Secondary heading */
h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

/* Body text */
p {
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

/* Supporting text */
.caption {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

Grid Systems

12-Column Grid:

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

/* Full width */
.col-12 {
  grid-column: span 12;
}

/* Half width */
.col-6 {
  grid-column: span 6;
}

/* Third width */
.col-4 {
  grid-column: span 4;
}

/* Responsive */
@media (max-width: 768px) {
  .col-6 {
    grid-column: span 12; /* Stack on mobile */
  }
}

Whitespace (Negative Space)

/* ❌ Cramped */
.card-bad {
  padding: 8px;
}

/* ✅ Breathing room */
.card-good {
  padding: var(--space-8); /* 32px */
}

/* Content spacing */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4); /* Side padding */
}

Responsive Breakpoints

/* Mobile first */
:root {
  --breakpoint-sm: 640px; /* Small devices */
  --breakpoint-md: 768px; /* Tablets */
  --breakpoint-lg: 1024px; /* Laptops */
  --breakpoint-xl: 1280px; /* Desktops */
  --breakpoint-2xl: 1536px; /* Large screens */
}

/* Usage */
@media (min-width: 768px) {
  .container {
    padding: var(--space-8);
  }
}

---

Phase 5: Visual Polish

Shadows & Elevation

/* Elevation levels */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

/* Usage */
.card {
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

Border Radius

--radius-sm: 0.25rem; /* 4px - small elements */
--radius-md: 0.5rem; /* 8px - buttons, inputs */
--radius-lg: 0.75rem; /* 12px - cards */
--radius-xl: 1rem; /* 16px - modals */
--radius-full: 9999px; /* Fully rounded */

/* Usage */
.button {
  border-radius: var(--radius-md);
}

.avatar {
  border-radius: var(--radius-full);
}

Transitions & Animations

/* Transition timing */
--transition-fast: 150ms;
--transition-base: 200ms;
--transition-slow: 300ms;

/* Easing functions */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

/* Button hover */
.button {
  transition: all var(--transition-base) var(--ease-in-out);
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn var(--transition-slow) var(--ease-out);
}

---

Design Principles

1. Contrast

Create clear distinction between elements

/* ✅ Good contrast */
.hero {
  background: var(--color-primary-600);
  color: white;
}

/* ❌ Poor contrast */
.hero-bad {
  background: #ddd;
  color: #aaa;
}

2. Alignment

Align elements to create order

/* ✅ Aligned */
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

3. Repetition

Repeat visual elements for consistency

/* Consistent button styles */
.button {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
}

4. Proximity

Group related elements

/* Form fields grouped */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

---

Component Design Patterns

Buttons

/* Primary button */
.btn-primary {
  background: var(--color-primary-600);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary:hover {
  background: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary button */
.btn-secondary {
  background: transparent;
  color: var(--color-primary-600);
  border: 2px solid var(--color-primary-600);
}

/* Ghost button */
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
}

.btn-ghost:hover {
  background: var(--color-gray-100);
}

Cards

.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

Forms

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--transition-base);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input:invalid {
  border-color: var(--color-error);
}

---

Design Tools

Color Tools

• Coolors - Generate palettes
• Color Hunt - Curated palettes
• Adobe Color - Color wheel
• Contrast Checker

Typography Tools

• Google Fonts
• Font Pair - Font combinations
• Type Scale - Generate type scales

Design Systems

• Tailwind CSS - Utility-first CSS
• Radix Colors - Color system
• Open Color - Color scheme

---

Visual Design Checklist

Colors

• [ ] Primary, secondary, accent colors defined
• [ ] Neutral grays (50-900) defined
• [ ] Semantic colors (success, warning, error)
• [ ] All text meets WCAG contrast requirements
• [ ] Dark mode colors defined

Typography

• [ ] 1-2 fonts maximum
• [ ] Type scale defined (8-10 sizes)
• [ ] Font weights specified
• [ ] Line heights set appropriately
• [ ] Max-width for readability (65ch)

Spacing

• [ ] 8pt grid system used
• [ ] Consistent spacing scale
• [ ] Adequate whitespace
• [ ] Vertical rhythm maintained

Components

• [ ] Button styles consistent
• [ ] Form inputs styled consistently
• [ ] Cards have proper elevation
• [ ] Hover states defined
• [ ] Focus states visible

Responsive

• [ ] Mobile-first approach
• [ ] Breakpoints defined
• [ ] Touch targets ≥ 44px
• [ ] Text scales appropriately

---

Related Resources

Skills:

• design-system-architect - Building design systems
• ux-designer - User experience design
• accessibility-engineer - Color contrast, readability

External:

• Refactoring UI
• Design Systems Repo
• Laws of UX

---

Good design makes the product easy to use. Great design makes it disappear. 🎨

Visual Designer - Quick Start

Version: 1.0.0 Category: UX & Design Difficulty: Intermediate

What This Skill Does

Helps you create beautiful, consistent visual designs with professional color systems, typography, spacing, and layout principles.

When to Use

Use this skill when you need to:

• Design UI components
• Create color palettes
• Choose and pair fonts
• Build spacing systems
• Design layouts and compositions
• Ensure visual consistency
• Create design mockups

Quick Start

Fastest path to great design:

1. Start with color (60-30-10 rule):

• Primary color: 60% (dominant)
• Secondary color: 30% (supporting)
• Accent color: 10% (CTAs, highlights)

2. Set up typography:

• Choose 2 fonts max (heading + body)
• Use type scale (1.25 ratio recommended)
• Set line height: 1.5 for body, 1.2 for headings

3. Use 8pt grid for spacing:

• Base unit: 8px
• Scale: 4px, 8px, 16px, 24px, 32px, 48px, 64px

4. Check accessibility:

• Text contrast: 4.5:1 minimum
• Large text: 3:1 minimum
• Interactive elements: 3:1 minimum

Time to design: 2-4 hours for component system

Success Criteria

You've successfully used this skill when:

• ✅ Color palette is harmonious and accessible
• ✅ Typography is readable and hierarchical
• ✅ Spacing is consistent and follows grid
• ✅ Contrast ratios meet WCAG AA standards
• ✅ Layout is balanced and organized
• ✅ Design feels polished and professional
• ✅ Components are reusable and consistent

Key Concepts

60-30-10 Color Rule:

• 60% dominant (primary) - backgrounds, large areas
• 30% secondary - supporting elements, sections
• 10% accent - CTAs, highlights, important actions

Type Scale (1.25 Ratio):

• Base: 16px (1rem)
• Scale up: 20px, 25px, 31px, 39px, 49px
• Scale down: 13px, 10px

8pt Grid System:

• All spacing is multiple of 8px
• Consistent rhythm and alignment
• Easier handoff to developers

Visual Hierarchy:

• Size: Bigger = more important
• Color: High contrast = more prominent
• Weight: Bold = emphasis
• Position: Top-left = first noticed

Quick Reference

Color System Template

/* Primary (60%) */
--color-primary-50: #eff6ff;
--color-primary-500: #3b82f6;
--color-primary-900: #1e3a8a;

/* Secondary (30%) */
--color-secondary-500: #8b5cf6;

/* Accent (10%) */
--color-accent-500: #f59e0b;

/* Neutrals */
--color-gray-50: #f9fafb;
--color-gray-500: #6b7280;
--color-gray-900: #111827;

Typography System

/* Font Families */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;

/* Type Scale (1.25) */
--text-xs: 0.64rem; /* 10px */
--text-sm: 0.8rem; /* 13px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */

/* Line Heights */
--leading-tight: 1.2; /* Headings */
--leading-normal: 1.5; /* Body */
--leading-relaxed: 1.75; /* Long form */

Spacing Scale (8pt Grid)

--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */

Shadow System

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

Border Radius Scale

--radius-sm: 0.125rem; /* 2px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-full: 9999px; /* Pills/circles */

Design Principles Checklist

Contrast

• [ ] Visual hierarchy is clear
• [ ] Important elements stand out
• [ ] Text meets WCAG contrast ratios

Alignment

• [ ] Elements align to grid
• [ ] Consistent edge alignment
• [ ] Centered elements truly centered

Repetition

• [ ] Colors used consistently
• [ ] Spacing follows scale
• [ ] Same patterns repeated

Proximity

• [ ] Related items grouped together
• [ ] Whitespace separates sections
• [ ] Visual relationships clear

Tools

Design Tools:

• Figma (recommended, collaborative)
• Adobe XD (professional)
• Sketch (Mac only)
• Penpot (open source)

Color Tools:

• Coolors.co (palette generator)
• Adobe Color (color wheel)
• Contrast Checker (WCAG compliance)
• Paletton (color schemes)

Typography Tools:

• Google Fonts (free fonts)
• Font Pair (pairing suggestions)
• Type Scale (generator)
• Modular Scale (calculator)

Inspiration:

• Dribbble (showcase)
• Behance (portfolios)
• Awwwards (web design awards)
• Land-book (landing pages)

Component Design Patterns

Button Variants

Primary: High contrast, accent color
Secondary: Lower contrast, outlined
Tertiary: Minimal, text-based
Danger: Red, destructive actions

Card Design

- 8-16px padding
- Subtle shadow (--shadow-sm)
- 8px border radius
- Hover: Lift (larger shadow)

Form Inputs

- 40px minimum height (mobile)
- 12-16px padding
- Clear focus state
- Label above or placeholder
- Error state in red with message

Common Mistakes to Avoid

❌ Too many colors - Stick to 3-5 colors max ❌ Too many fonts - Use 2 fonts max (1 is often enough) ❌ Inconsistent spacing - Use spacing scale ❌ Poor contrast - Check WCAG ratios ❌ Centered text blocks - Left-align long text ❌ All caps everywhere - Use sparingly for emphasis ❌ Tiny click targets - Minimum 44x44px

Design Workflow

1. Wireframe (30 min) - Layout and structure 2. Style Guide (1 hour) - Colors, typography, spacing 3. Component Design (2 hours) - Buttons, inputs, cards 4. Composition (1 hour) - Assemble into pages 5. Polish (30 min) - Shadows, transitions, micro-interactions

Version History

• 1.0.0 (2025-10-22): Initial release with comprehensive visual design system

License

Part of ai-dev-standards repository.