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

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

Minimum deliverable: Token hierarchy + typography scale + color palette

Core Procedure

Phase 1: Discovery

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
`space-1`	4px	Tight inline
`space-2`	8px	Icon-text gap
`space-3`	12px	Small padding
`space-4`	16px	Default padding
`space-6`	24px	Section padding
`space-8`	32px	Large gaps
`space-12`	48px	Section margins

Phase 3: Color System

Use OKLCH for perceptually uniform palettes:

/* Primary palette - consistent perceived lightness */
--primary-50:  oklch(97% 0.02 250);
--primary-100: oklch(94% 0.04 250);
--primary-200: oklch(88% 0.08 250);
--primary-300: oklch(78% 0.12 250);
--primary-400: oklch(68% 0.15 250);
--primary-500: oklch(58% 0.18 250);  /* Base */
--primary-600: oklch(48% 0.16 250);
--primary-700: oklch(38% 0.14 250);
--primary-800: oklch(28% 0.10 250);
--primary-900: oklch(18% 0.06 250);

Checkpoint: Verify contrast ratios meet WCAG requirements.

Phase 4: Component Specification

Apply Atomic Design hierarchy:

Atoms - Button, Input, Icon, Badge, Avatar
Molecules - Form Field, Search Bar, Menu Item
Organisms - Header, Data Table, Card, Form
Templates - Dashboard Layout, List Page, Detail Page

For each component, document:

Visual states (default, hover, active, disabled, focus)
Token mappings (which semantic tokens apply)
Accessibility requirements (focus indicators, ARIA)

Phase 5: Documentation

Create usage guidelines with:

Do's and don'ts examples
Code snippets for implementation
Accessibility notes per component

Definition of Done

Typography scale defined with at least 6 sizes
Color palette with primitives and semantic tokens
Spacing scale following 4px or 8px grid
Component specifications for core atoms
WCAG AA contrast verified for all text/background combinations
Design tokens exportable to CSS/SCSS/JSON

Design System Architecture

Foundation Layer
├── Primitives (raw values)
│   ├── Colors (blue-500, gray-100)
│   ├── Typography (font families, weights)
│   ├── Spacing (4, 8, 16, 24, 32px)
│   └── Breakpoints (sm, md, lg, xl)
│
├── Semantic Layer
│   ├── Colors (primary, secondary, error)
│   ├── Text Styles (heading-lg, body-md)
│   ├── Spacing Tokens (gap-sm, padding-lg)
│   └── Elevation (shadow-sm, shadow-lg)
│
├── Component Layer
│   ├── Atoms (Button, Input, Icon)
│   ├── Molecules (Search Bar, Form Field)
│   ├── Organisms (Header, Data Table)
│   └── Templates (Dashboard, List Page)
│
└── Documentation Layer
    ├── Usage Guidelines
    ├── UI Patterns
    ├── Accessibility Docs
    └── Changelog

Token flow: Primitives -> Semantic -> Component -> Output (CSS/SCSS/JS/Figma)

Guardrails

Accessibility Requirements

Criterion	Level AA	Level AAA
Text Contrast	4.5:1	7:1
Large Text	3:1	4.5:1
UI Components	3:1	N/A
Focus Indicators	3:1	Enhanced
Target Size	24x24px	44x44px

Always verify: Use contrast checker tools before finalizing colors.

Trust Model

trusted:
  - Brand guidelines provided by user
  - Platform design system references (Material, HIG)
untrusted:
  - Generated color values (verify perceptually)
  - AI-suggested type pairings (verify readability)

Required Confirmations

Before overwriting existing design tokens
Before changing established brand colors
When accessibility compliance cannot be met

Key Principles

Gestalt Principles (Quick Reference)

Principle	Application
Proximity	Group related form fields
Similarity	Consistent button styles
Continuity	Navigation flows
Closure	Icon simplification
Figure-Ground	Modal overlays
Common Region	Cards, panels

Visual Hierarchy

Size - Larger = more important
Weight - Bold draws attention
Color - High contrast attracts eye
Position - Top-left scanned first (LTR)
Density - Isolated elements stand out
Depth - Shadows create importance

Consistency Types

Internal - Same patterns within product
External - Align with platform conventions
Temporal - Consistent over versions
Semantic - Same visual = same meaning

Failure Modes & Recovery

Failure	Recovery
Colors fail contrast	Adjust lightness in OKLCH (L value)
Type scale feels off	Try different ratio (1.25, 1.333, 1.414)
Components inconsistent	Audit against token mapping
Dark mode broken	Design dark mode tokens separately

Tools Reference

Color:

OKLCH Picker: https://oklch.org/
Contrast Checker: https://webaim.org/resources/contrastchecker/
Realtime Colors: https://www.realtimecolors.com/

Typography:

Type Scale: https://typescale.com/
Variable Fonts: https://v-fonts.com/

Design Systems:

Material Design 3: https://m3.material.io/
Apple HIG: https://developer.apple.com/design/

References

Design Systems - Tokens, components, documentation
Typography - Scales, variable fonts, fluid type
Color - OKLCH, accessibility, systems
Principles - Gestalt, hierarchy, consistency

visual-design