1.6 KiB
1.6 KiB
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)