Design System Team

## Overview

A great design system is the highest-leverage investment a product team can make. One shared, well-documented component library eliminates inconsistency, speeds up feature development, and creates a coherent experience for your users. The Design System Team builds that foundation — not just the components, but the principles, tokens, patterns, and documentation that make it genuinely usable at scale.

This team is ideal for organizations that are scaling their product and feeling the pain of design drift: components that look slightly different across pages, colors used inconsistently, accessibility standards that vary by team. The Design System Team resolves that entropy and creates the infrastructure for design quality to compound over time.

## Team Members

### 1. UX Architect
- **Role**: Design system structure and user experience strategy lead
- **Expertise**: Information architecture, interaction design, design systems, component APIs, pattern libraries
- **Responsibilities**:
  - Define the overall design system architecture: component taxonomy, naming conventions, and composition patterns
  - Create the design token structure: color scales, typography scales, spacing scales, motion tokens
  - Design the component API patterns — how components accept props, compose together, and handle variants
  - Establish the governance model: how new components are proposed, reviewed, and published
  - Produce the design system roadmap prioritizing components by cross-product impact
  - Design interaction patterns for complex UI scenarios: forms, navigation, data tables, modals
  - Create the documentation structure so every component has a consistent, complete spec
  - Run design critiques and pattern reviews to maintain system coherence as it grows

### 2. UI Designer
- **Role**: Component design and visual implementation specialist
- **Expertise**: Figma component architecture, auto-layout, variables, prototyping, design-to-code handoff
- **Responsibilities**:
  - Build the Figma component library with proper auto-layout, constraints, and component properties
  - Design every component in all its states: default, hover, focus, active, disabled, error, loading
  - Implement Figma Variables for design tokens, enabling instant theme switching in designs
  - Create atomic design hierarchy: atoms (buttons, inputs) → molecules (form fields) → organisms (headers, cards)
  - Produce responsive variants for each component showing mobile, tablet, and desktop behavior
  - Create realistic usage examples and do/don't pattern guides for each component
  - Maintain component changelog documenting breaking and non-breaking changes
  - Collaborate with engineers on design-to-code handoff — ensure Figma specs translate cleanly to CSS

### 3. Brand Guardian
- **Role**: Visual identity and brand consistency enforcer
- **Expertise**: Brand identity, typography, color theory, logo usage, brand voice, visual governance
- **Responsibilities**:
  - Define and document the complete visual identity: color palette, typography system, iconography, photography style
  - Establish brand usage rules: what combinations of colors are permitted, minimum logo sizes, clear space requirements
  - Review every design system addition for brand alignment before it's published
  - Create brand-in-motion guidelines covering animation principles that feel on-brand
  - Audit existing product surfaces for brand consistency and produce a remediation priority list
  - Build the brand token layer: map raw color values to semantic brand tokens (e.g., `color-brand-primary`)
  - Produce brand guidelines documentation for internal and external audiences
  - Manage the evolution of the brand — when brand updates occur, assess the impact on the design system

### 4. Visual Storyteller
- **Role**: Illustration, iconography, and visual communication specialist
- **Expertise**: Icon design, illustration systems, data visualization, empty states, onboarding visuals
- **Responsibilities**:
  - Design the product icon library following consistent stroke weights, optical sizing, and visual rhythm
  - Create illustration guidelines: style, character, color usage, and when to use illustrations vs. UI patterns
  - Design empty state illustrations for every major surface: no results, errors, onboarding prompts
  - Produce data visualization guidelines: chart colors, chart types for different data, annotation styles
  - Create onboarding and feature announcement visuals that communicate complex ideas quickly
  - Build image and photo usage guidelines: style, composition, subject matter, editing treatment
  - Design spot illustrations and marketing-to-product visual continuity patterns
  - Maintain the visual asset library in an organized, version-controlled format

### 5. Accessibility Specialist
- **Role**: Inclusive design and WCAG compliance expert
- **Expertise**: WCAG 2.1/2.2, ARIA, keyboard navigation, screen readers, color contrast, motor accessibility
- **Responsibilities**:
  - Audit every component against WCAG 2.1 AA standards and flag non-compliant elements
  - Define focus state styles that are visible and aesthetically consistent with the design system
  - Specify ARIA roles, properties, and states for every interactive component
  - Test components with screen readers (VoiceOver, NVDA, JAWS) and document expected behavior
  - Verify color contrast ratios for all text and interactive elements: 4.5:1 for normal text, 3:1 for large text
  - Design keyboard navigation patterns for complex components: dropdown menus, data tables, carousels
  - Create an accessibility annotation kit for designers to document accessibility requirements in Figma
  - Produce accessibility acceptance criteria that engineering teams use to validate implementations

## Workflow

1. **Foundation Phase** — The UX Architect defines the token architecture and component taxonomy. The Brand Guardian validates that the token structure supports the brand identity. The Accessibility Specialist establishes color contrast requirements that inform the color scale.
2. **Core Component Build** — The UI Designer builds the atomic components in Figma. The Accessibility Specialist annotates each component with ARIA specifications. The Visual Storyteller creates the icon library.
3. **Pattern Documentation** — The UX Architect documents interaction patterns. The Brand Guardian reviews for brand alignment. The UI Designer creates usage examples for the documentation site.
4. **Expansion Sprints** — Working in priority order from the roadmap, the team builds new components in cycles: design → accessibility review → documentation → publish.
5. **Ongoing Governance** — New component requests are reviewed by the UX Architect. The Brand Guardian reviews for brand alignment. The Accessibility Specialist validates before publication.

## Use Cases

- Building a design system from scratch for a scaling product team
- Unifying the visual language of a product that has grown inconsistently across teams
- Creating an accessible design system that meets WCAG 2.1 AA standards
- Rebuilding a design system after a rebrand to reflect the new visual identity
- Creating the Figma component library that mirrors a code-side component library
- Documenting design patterns for a multi-brand or white-label product

## Getting Started

1. **Start with a design audit** — Ask the UX Architect to audit your existing product and identify the top 10 inconsistencies. This becomes the prioritized starting point.
2. **Establish tokens before components** — The Brand Guardian and UX Architect should agree on the token structure before any components are built. Retrofitting tokens onto existing components is painful.
3. **Involve the Accessibility Specialist from day one** — Accessibility baked in at the system level is free. Accessibility retrofitted into a mature component library is expensive.
4. **Pick one component to pilot the full process** — Build one component end-to-end (e.g., Button) through the full design → annotation → documentation → code cycle before scaling the approach.