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