# Design Systems Reference

Comprehensive guide to design systems, pattern libraries, and design tokens.

---

## 🎨 Popular Design Systems

### Enterprise Design Systems

| System | Company | URL | Key Features |
|--------|---------|-----|--------------|
| **Material Design** | Google | https://m3.material.io | 3D effects, motion, color system |
| **Apple Human Interface** | Apple | https://developer.apple.com/design | iOS, macOS, watchOS guidelines |
| **Fluent Design** | Microsoft | https://fluent2.microsoft.design | Depth, light, motion, material |
| **Carbon** | IBM | https://carbondesignsystem.com | Open source, enterprise-grade |
| **Polaris** | Shopify | https://polaris.shopify.com | E-commerce focused |
| **Lightning** | Salesforce | https://www.lightningdesignsystem.com | CRM components |
| **Spectrum** | Adobe | https://spectrum.adobe.com | Creative tools design |
| **Evergreen** | Segment | https://evergreen.segment.com | React components |
| **Gestalt** | Pinterest | https://gestalt.pinterest.systems | Pinboard UI patterns |
| **Primer** | GitHub | https://primer.style | Developer-focused UI |

### Startup/SaaS Design Systems

| System | Company | URL | Key Features |
|--------|---------|-----|--------------|
| **Chakra UI** | Chakra | https://chakra-ui.com | Accessible, composable |
| **Mantine** | Mantine | https://mantine.dev | Full-featured hooks |
| **Radix Themes** | Radix | https://radix-ui.com/themes | Accessible primitives |
| **Circuit UI** | SumUp | https://circuit.sumup.com | Fintech focused |
| **Seed** | Intercom | https://seed.intercom.com | Conversation UI |
| **Canvas** | HubSpot | https://canvas.hubspot.com | Marketing tools |
| **Base Web** | Uber | https://baseweb.design | Transportation UI |
| **Atlas** | Atlassian | https://atlassian.design | Collaboration tools |

---

## 🧱 Design Tokens

Design tokens are the visual design atoms of the design system.

### Token Categories

| Category | Examples | Purpose |
|----------|----------|---------|
| **Colors** | primary, secondary, success, error | Brand & semantic colors |
| **Typography** | font-family, font-size, line-height | Text styling |
| **Spacing** | space-xs, space-md, space-lg | Layout gaps |
| **Sizing** | size-sm, size-md, size-lg | Component sizes |
| **Borders** | border-radius, border-width | Edge styling |
| **Shadows** | shadow-sm, shadow-md, shadow-lg | Elevation |
| **Animation** | duration, easing, delay | Motion timing |
| **Breakpoints** | sm, md, lg, xl | Responsive design |

### Token Tools

| Tool | URL | Description |
|------|-----|-------------|
| **Style Dictionary** | https://amzn.github.io/style-dictionary | Token management |
| **Theo** | https://github.com/salesforce-ux/theo | Salesforce token tool |
| **Diez** | https://diez.org | Design language framework |
| **Figma Tokens** | https://www.figmatokens.com | Figma plugin |
| **Token Transformer** | https://tokens.studio | Design token studio |

---

## 🎯 Design Patterns

### Layout Patterns

| Pattern | Use Case | Description |
|---------|----------|-------------|
| **Holy Grail** | General | Header, footer, sidebar, main content |
| **F-Pattern** | Content-heavy | Eye-tracking optimized layout |
| **Z-Pattern** | Landing pages | Visual hierarchy flow |
| **Bento Grid** | Dashboards | Card-based modular layout |
| **Sidebar Navigation** | Apps | Persistent side menu |
| **Top Navigation** | Marketing sites | Horizontal nav bar |

### Component Patterns

| Pattern | Use Case | Description |
|---------|----------|-------------|
| **Card** | Content preview | Container with image, title, actions |
| **Modal** | Focused action | Overlay dialog for interactions |
| **Drawer** | Side content | Slide-out panel |
| **Toast** | Notifications | Brief, auto-dismiss messages |
| **Skeleton** | Loading states | Content placeholder |
| **Infinite Scroll** | Long lists | Continuous content loading |
| **Accordion** | FAQs | Expandable content sections |

---

## 🎨 Style Systems

### Visual Styles

| Style | Key Characteristics | Best For |
|-------|---------------------|----------|
| **Flat Design** | No shadows, minimal, clean | Modern apps |
| **Material Design** | Paper-like, elevation, shadows | Android, enterprise |
| **Glassmorphism** | Frosted glass, blur, transparency | Modern UI, iOS |
| **Neumorphism** | Soft shadows, extruded | Experimental, tactile |
| **Claymorphism** | 3D clay-like, colorful | Playful, approachable |
| **Skeuomorphism** | Realistic textures | Traditional, familiar |
| **Minimalism** | Clean, lots of whitespace | SaaS, professional |
| **Brutalism** | Raw, bold, unconventional | Creative, artistic |

---

## 📱 Responsive Design

### Breakpoints Standard

| Name | Size | Use Case |
|------|------|----------|
| xs | 0-639px | Mobile phones |
| sm | 640px+ | Large phones |
| md | 768px+ | Tablets |
| lg | 1024px+ | Laptops |
| xl | 1280px+ | Desktops |
| 2xl | 1536px+ | Large screens |

### Mobile-First Approach

```css
/* Base styles for mobile */
.element {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .element {
    padding: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .element {
    padding: 3rem;
  }
}
```

---

## ♿ Accessibility Guidelines

### WCAG 2.1 Levels

| Level | Description | Requirements |
|-------|-------------|--------------|
| A | Minimum | Basic accessibility |
| AA | Standard | Most organizations |
| AAA | Enhanced | Highest accessibility |

### Key Accessibility Rules

1. **Color Contrast** - 4.5:1 for normal text, 3:1 for large text
2. **Focus States** - Visible focus indicators
3. **Keyboard Navigation** - All features accessible via keyboard
4. **Screen Readers** - Proper ARIA labels and roles
5. **Alt Text** - Descriptive image alternatives
6. **Form Labels** - Associated labels for all inputs
7. **Motion** - Respect prefers-reduced-motion

---

## 🔧 Design System Tools

### Documentation Tools

| Tool | URL | Description |
|------|-----|-------------|
| **Storybook** | https://storybook.js.org | Component documentation |
| **Docz** | https://www.docz.site | MDX-based docs |
| **Docusaurus** | https://docusaurus.io | Documentation sites |
| **Zeroheight** | https://zeroheight.com | Design system docs |
| **Specify** | https://specifyapp.com | Design token platform |

### Design Tools

| Tool | URL | Description |
|------|-----|-------------|
| **Figma** | https://figma.com | Collaborative design |
| **Sketch** | https://sketch.com | macOS design tool |
| **Adobe XD** | https://adobe.com/products/xd | Prototyping |
| **Framer** | https://framer.com | Interactive design |

---

## 🔗 Related Skills

- **ui-ux-pro-max** - Complete design intelligence
- **component-libraries** - UI component collections
- **css-frameworks** - CSS utilities
- **frontend-stacks** - Technology stacks

---

*Last updated: 2026-02-13*