visual-design

# Visual Design Skill

Create systematic, accessible visual designs using modern color spaces, typography, and design token standards.

## When to Use

- Designing typography scales with mathematical ratios
- Creating OKLCH-based color palettes for accessibility
- Building design token hierarchies (W3C DTCG format)
- Specifying component libraries with Atomic Design
- Auditing designs for WCAG AA/AAA compliance
- Implementing variable fonts and fluid typography

## When NOT to Use

- User research and persona development
- Information architecture and content strategy
- Usability testing and heuristic evaluation
- Backend API or database design
- Pure frontend implementation (use code-focused skills)

---

## Quick Start

**Task: Create a basic design system foundation**

1. Define primitive tokens (colors, spacing, typography)
2. Create semantic layer (primary, secondary, surface colors)
3. Build component tokens (button, input, card specifications)
4. Document with usage guidelines

**Minimum deliverable:** Token hierarchy + typography scale + color palette

---

## Core Procedure

### Phase 1: Discovery

```yaml
inputs:
  - Brand guidelines (if available)
  - Target platforms (web, mobile, desktop)
  - Accessibility requirements (AA or AAA)
  - Existing design assets
```

Capture requirements in uncertainty ledger:
- What color mode support is needed? (light/dark/both)
- What is the primary typeface or brand font?
- Are there platform-specific guidelines (iOS HIG, Material)?

### Phase 2: Foundation Tokens

**Typography Scale** (Perfect Fourth 1.333 recommended):

| Token | Size | Use |
|-------|------|-----|
| `text-xs` | 12px | Captions, labels |
| `text-sm` | 14px | Secondary text |
| `text-base` | 16px | Body text |
| `text-lg` | 21px | Lead paragraphs |
| `text-xl` | 28px | H4 headings |
| `text-2xl` | 38px | H3 headings |
| `text-3xl` | 50px | H2 headings |
| `text-4xl` | 67px | H1 headings |

**Spacing Scale** (8pt grid):

| Token | Value | Use |
|-------|