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

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):

Spacing Scale (8pt grid):

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:

1. •Atoms - Button, Input, Icon, Badge, Avatar
2. •Molecules - Form Field, Search Bar, Menu Item
3. •Organisms - Header, Data Table, Card, Form
4. •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

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)

Visual Hierarchy

1. •Size - Larger = more important
2. •Weight - Bold draws attention
3. •Color - High contrast attracts eye
4. •Position - Top-left scanned first (LTR)
5. •Density - Isolated elements stand out
6. •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

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