40 lines
1.6 KiB
Markdown
40 lines
1.6 KiB
Markdown
# 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)
|