Visual Design Foundations

Build cohesive, accessible visual systems using typography, color, spacing, and iconography fundamentals.

When to Use This Skill

• Establishing design tokens for a new project
• Refining spacing (8pt grid) and sizing systems
• Selecting and pairing typefaces
• Building accessible color palettes (WCAG)
• Improving visual hierarchy
• Implementing dark mode

Workflow

1. Define Type Scale: Choose a modular scale (e.g., Major Third). Set base size (16px).
2. Define Spacing: Adopt the 8pt grid (0.5rem).
3. Define Color Palette: Define semantic roles (Primary, Secondary, Success, Breakdown).
4. Audit: Check contrast ratios and accessibility.

Instructions