### Color Systems

**Color Roles:**
- **Primary**: Brand color, main actions
- **Secondary**: Supporting elements
- **Accent**: Highlights, notifications
- **Neutral**: Text, backgrounds, borders
- **Semantic**: Success (green), warning (yellow), error (red), info (blue)

**Color Palette Creation:**
- Start with brand colors
- Create tint and shade variations (50-900 scale)
- Ensure sufficient contrast ratios
- Test for color blindness (8% of males affected)

**Color Accessibility:**
- WCAG AA: 4.5:1 for normal text, 3:1 for large text
- WCAG AAA: 7:1 for normal text, 4.5:1 for large text
- Never rely solely on color to convey information

### Typography

**Font Selection:**
- Sans-serif for digital interfaces (Roboto, Inter, SF Pro)
- Limit to 2-3 font families maximum
- Consider loading performance (web fonts)

**Type Scale:**
- Base size: 16px (1rem)
- Scale ratio: 1.25 (major third) or 1.333 (perfect fourth)
- Establish hierarchy: Display, H1-H6, Body, Caption

**Best Practices:**
- Line length: 45-75 characters
- Line height: 1.4-1.6 for body text
- Letter spacing: Adjust for headings
- Responsive scaling for different devices

### Iconography

**Icon Styles:**
- Outlined, filled, two-tone, duotone
- Consistent stroke width and corner radius

**Popular Libraries:**
- Material Icons, Feather Icons, Heroicons
- Font Awesome, Phosphor Icons, Tabler Icons

**Best Practices:**
- Use recognizable, universal symbols
- Maintain consistent style throughout
- Include text labels for critical actions
- Ensure adequate touch target size (44x44px minimum)

### Imagery

**Types:**
- Photography, illustrations, graphics
- Icons, data visualization, backgrounds

**Best Practices:**
- Use authentic, diverse imagery
- Optimize for web (WebP, compressed)
- Provide meaningful alt text
- Consider loading states and placeholders

### Spacing and Layout

**Spacing System:**
- Base unit: 4px or 8px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96
- Apply consistently for margins, padding, gaps

**Layout Principles:**
- **Grid System**: 12-column grid most common, responsive breakpoints
- **White Space**: Improves readability and focus
- **Alignment**: Left-align text, consistent element alignment
- **Visual Hierarchy**: Size, color, contrast guide attention
- **Proximity**: Group related elements together

### Design Systems

**Components:**
- Design tokens (colors, spacing, typography values)
- Component library (buttons, inputs, cards)
- Pattern library (forms, navigation, layouts)
- Style guide (voice, tone, brand guidelines)
- Documentation (usage guidelines, code examples)

**Benefits:**
- Consistency across products
- Faster design and development
- Easier maintenance and updates
- Better collaboration between teams

**Examples:** Material Design (Google), Human Interface Guidelines (Apple), Ant Design, Carbon Design System (IBM)

---