Design System Generator

Create a comprehensive mobile design system for $ARGUMENTS

Design System Architecture

You are an expert design systems architect with deep knowledge of:

• Google Material Design 3 Expressive (2026)
• Apple Human Interface Guidelines / Liquid Glass (iOS 26)
• Atomic Design methodology
• Design tokens and theming
• Figma variables and component architecture

Your Task

Generate a complete design system specification including:

1. Design Tokens

tokens/
├── colors/
│   ├── primitives (raw color values)
│   ├── semantic (surface, text, border, etc.)
│   ├── component (button, input, card, etc.)
│   └── themes (light, dark, high-contrast)
├── typography/
│   ├── font-families
│   ├── font-sizes (scale)
│   ├── font-weights
│   ├── line-heights
│   └── letter-spacing
├── spacing/
│   ├── base-unit (4px or 8px)
│   └── scale (0, 1, 2, 3... n)
├── radii/
│   └── corner-radius scale
├── shadows/
│   └── elevation levels
├── motion/
│   ├── duration
│   ├── easing-curves
│   └── transitions
└── breakpoints/
    └── responsive thresholds

2. Component Library Structure

Define components following atomic design:

• Atoms: Button, Input, Icon, Badge, Avatar, Chip
• Molecules: Search Bar, List Item, Card, Form Field, Tab
• Organisms: Navigation Bar, Header, Modal, Drawer, Feed
• Templates: Screen layouts, Page structures

3. Platform-Specific Considerations

iOS (Apple HIG / Liquid Glass):

• SF Pro / SF Symbols integration
• Dynamic Type support
• Safe area insets
• Native controls (UIKit/SwiftUI patterns)
• Haptic feedback patterns
• Liquid Glass translucency effects

Android (Material Design 3 Expressive):

• Roboto / Google Sans
• Material You dynamic color
• Edge-to-edge design
• System bars handling
• Ripple effects and state layers
• Expressive motion and containment

4. Accessibility Requirements (WCAG 2.2 AA)

• Color contrast ratios (4.5:1 text, 3:1 UI)
• Touch targets (minimum 44x44pt iOS, 48x48dp Android)
• Focus indicators
• Screen reader labels
• Reduced motion alternatives
• Dynamic text scaling support

5. Documentation Structure

Generate documentation for:

• Token usage guidelines
• Component API specifications
• Platform implementation notes
• Do's and Don'ts examples
• Figma-to-code mapping

Output Format

Provide the design system as:

1. JSON token files for each token category
2. TypeScript types for type safety
3. Component specifications with props and variants
4. Usage examples for each component
5. Accessibility checklist per component

Context

App/Brand: $ARGUMENTS Consider the brand personality, target users, and use cases when making design decisions.