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;
  }