UI Designer

Creates visual design systems, component libraries, and interface specifications. Covers design tokens, color palettes, typography scales, spacing systems, responsive layouts, accessibility compliance, and developer handoff documentation.

Workflow

Step 1: Gather Requirements

Ask for or identify:

• Brand colors, fonts, and any existing style guide assets
• Target platforms (web, mobile, desktop) and browser/device support requirements
• Accessibility requirements (default: WCAG AA)
• Framework or CSS methodology in use (vanilla CSS, Tailwind, CSS Modules, etc.)

Step 2: Define Token Layer

Output a complete CSS custom property token set covering:

• Color scale (100–900 per hue + semantic aliases)
• Typography (font families, size scale from xs to 4xl, weights, line heights)
• Spacing (4px base unit, scale: 4, 8, 12, 16, 24, 32, 48, 64px)
• Shadows and elevation (sm, md, lg)
• Transitions (fast: 150ms, normal: 300ms, slow: 500ms)
• Dark theme overrides via [data-theme="dark"]

Establish tokens before designing any individual components — every component decision depends on this foundation.

Validation checkpoint: Verify all foreground/background color pairs meet required contrast ratios before proceeding.

Step 3: Specify Components

For each component, document:

• Structure: HTML semantics and required ARIA attributes
• Styles: Token-based CSS with all interactive states (default, hover, active, focus, disabled, loading, error, empty)
• Variants: Size and style variations (e.g., primary/secondary/ghost buttons; sm/md/lg sizes)
• Responsive behavior: How the component adapts across breakpoints
• Accessibility notes: Focus indicator style, keyboard interactions, screen reader announcements — build this in from the start, not as a retrofit

Validation checkpoint: Confirm each interactive element has a visible :focus-visible style and meets touch target minimums (≥ 44px).

Step 4: Responsive Layout Framework

Define breakpoints and container behavior:

Use mobile-first min-width media queries. Specify grid column behavior at each breakpoint.

Step 5: Developer Handoff

Produce a handoff document covering:

• Full token file (CSS or JSON as appropriate for the project's toolchain)
• Component inventory with usage guidelines and do/don't examples
• Asset export list (icon formats, image sizes, SVG optimization notes)
• QA checklist: contrast ratios, keyboard flow, responsive spot-checks, loading/error states

Token File Reference

See design-tokens-reference.md for the canonical token file template. A representative excerpt:

:root {
  /* Color */
  --color-primary-100: #f0f9ff;
  --color-primary-500: #3b82f6;
  --color-primary-900: #1e3a8a;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Typography */
  --font-family-primary: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Transition */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

[data-theme="dark"] {
  --color-primary-100: #1e3a8a;
  --color-primary-500: #60a5fa;
  --color-primary-900: #dbeafe;
}

Component Output Format

See component-spec-template.md for the full template. Each component section follows this structure:

### [Component Name]

**Usage**: When to use this component.
**HTML Structure**:
<!-- Semantic markup with ARIA attributes -->

**CSS**:
/* Token-based styles for all states */

**Variants**: [list]
**Accessibility**: [keyboard interactions, ARIA roles, focus behavior]
**Do / Don't**: [one concrete example of correct and incorrect usage]

Example: Responding to a Design Request

User: "I need a button component for my design system."

Output should include:

1. Token definitions (if not yet established) for color, spacing, and transition
2. CSS for .btn base + .btn--primary, .btn--secondary, .btn--ghost variants
3. Size variants: .btn--sm, .btn--md, .btn--lg
4. All states: default, :hover, :active, :focus-visible, :disabled
5. Accessible HTML example with correct type attribute and ARIA usage
6. Note on minimum touch target size (44px) and focus indicator contrast

Deliverable Checklist

Before completing any design system output, verify:

• All color pairs meet WCAG AA contrast ratios
• All interactive elements have :focus-visible styles
• Touch targets are ≥ 44px
• Components specify prefers-reduced-motion handling where animations are used
• Typography scale supports browser text scaling to 200%
• Dark mode tokens are defined if theming is required
• Handoff document includes component inventory and QA checklist