# Branding & Style Guide

## Visual Identity
**Brand Guidelines:** Align with existing Directus brand identity + AI-development theme

## Color Palette
| Color Type | Hex Code | Usage |
|------------|----------|--------|
| Primary | #6366F1 | AI-powered features, primary CTAs, active states |
| Secondary | #8B5CF6 | BMad workflow indicators, secondary actions |
| Accent | #10B981 | Success states, Task Master sync connected |
| Success | #059669 | Task completion, successful operations |
| Warning | #D97706 | Sync issues, attention needed |
| Error | #DC2626 | Failed operations, blocking issues |
| Neutral | #6B7280, #F9FAFB, #E5E7EB | Text, borders, backgrounds |

## Typography
### Font Families
- **Primary:** Inter (clean, readable, modern feel)
- **Secondary:** System fonts fallback (SF Pro, Segoe UI)  
- **Monospace:** JetBrains Mono (for code, task IDs, technical data)

### Type Scale
| Element | Size | Weight | Line Height |
|---------|------|--------|-------------|
| H1 | 2.25rem (36px) | 700 (Bold) | 1.2 |
| H2 | 1.875rem (30px) | 600 (SemiBold) | 1.3 |
| H3 | 1.5rem (24px) | 600 (SemiBold) | 1.4 |
| Body | 1rem (16px) | 400 (Regular) | 1.5 |
| Small | 0.875rem (14px) | 400 (Regular) | 1.4 |

## Iconography
**Icon Library:** Heroicons (matches Directus ecosystem) + custom AI-specific icons
**Custom AI Icons:** 🤖 AI-generated, 🔄 Task Master sync, 🧠 Smart suggestions, ⚡ Quick AI actions
**Usage Guidelines:** Consistent 20px/24px sizing, AI-specific icons use primary color (#6366F1)

## Spacing & Layout
**Grid System:** 8px base unit grid system
**Spacing Scale:** xs(4px), sm(8px), md(16px), lg(24px), xl(32px), 2xl(48px)