Design System inspired by Cohere
Enterprise AI. Deep purple brand, gradient mesh backgrounds, modern sans-serif.
npx getdesign@latest add cohereRun this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.
Enterprise AI. Deep purple brand, gradient mesh backgrounds, modern sans-serif.
DESIGN SYSTEM INSPIRATION OF COHERE
Enterprise AI. Deep purple brand, gradient mesh backgrounds, modern sans-serif.
Color Palette
Enterprise AI. Deep purple brand, gradient mesh backgrounds, modern sans-serif.
Typography
A type system inspired by Cohere.
Cards
Card patterns inspired by Cohere.
Components
Other component primitives mapped from the Cohere spec.
Design System Inspired by Cohere
1. Visual Theme & Atmosphere
Enterprise AI. Deep purple brand, gradient mesh backgrounds, modern sans-serif.
Key Characteristics:
- Deep purple (#6B4FBB) as core brand color
- Gradient mesh backgrounds for visual depth
- Enterprise-focused professional aesthetic
- API-first documentation design
- Purple-to-coral gradient accents
2. Color Palette & Roles
Primary
- Cohere Purple (
#6B4FBB): Brand color - Deep Purple (
#39178E): Brand color - Coral (
#D18EE2): Brand color - Teal (
#33D6C5): Brand color - White (
#FFFFFF): Brand color - Dark (
#0F0524): Brand color - Light BG (
#F8F6FF): Brand color - Gray (
#7C7C7C): Brand color
3. Typography Rules
Font Family
- Display & UI:
Inter,Source Code Pro
Hierarchy
| Role | Size | Weight | Line Height |
|---|---|---|---|
| Display | 64px | 700 | 1.1 |
| H1 | 48px | 700 | 1.2 |
| H2 | 32px | 600 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Small | 14px | 400 | 1.5 |
| Code | 14px | 400 | 1.6 |
4. Component Stylings
Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.
5. Layout Principles
- Base unit: 4-8px
- Max container: 1100-1200px
- Consistent section spacing: 80-120px vertical
6. Depth & Elevation
Depth is communicated through background color shifts and subtle shadows or borders.
7. Do's and Don'ts
Do
- Follow the established color palette strictly
- Maintain typographic hierarchy
- Use brand-consistent border-radius
Don't
- Introduce off-brand colors
- Use inconsistent spacing
- Override the established visual language
8. Responsive Behavior
| Breakpoint | Width |
|---|---|
| Mobile | <640px |
| Tablet | 640-1024px |
| Desktop | >1024px |
9. Agent Prompt Guide
Quick Color Reference
- Cohere Purple:
#6B4FBB - Deep Purple:
#39178E - Coral:
#D18EE2 - Teal:
#33D6C5 - White:
#FFFFFF - Dark:
#0F0524
Typography
- Font:
Inter,Source Code Pro