Check out the following links to follow the progress:
Cyan |
Teal |
Blue |
Orange |
Red |
|---|---|---|---|---|
#06b6d4 |
#14b8a6 |
#3b82f6 |
#f97316 |
#ef4444 |
Success Green |
Error Red |
Warning Orange |
Info Blue |
Purple |
|---|---|---|---|---|
#10b981 |
#ef4444 |
#f59e0b |
#3b82f6 |
#8b5cf6 |
White |
Gray 100 |
Gray 500 |
Gray 700 |
Gray 900 |
|---|---|---|---|---|
#ffffff |
#f3f4f6 |
#6b7280 |
#374151 |
#111827 |
Emerald |
Yellow |
Slate |
Black |
Transparent |
|---|---|---|---|---|
#10b981 |
#eab308 |
#64748b |
#000000 |
transparent |
Cyan to Teal |
Cyan to Blue |
Orange to Red |
|---|---|---|
| General UI Actions | Chat Actions | Urgent/Immediate Actions |
- Cyan to Teal: Trust, stability, and growth - perfect for general financial actions
- Cyan to Blue: Communication and clarity - ideal for chat and interactive elements
- Orange to Red: Urgency and action - reserved for immediate attention items
- Primary Actions: Use appropriate gradient based on context
- Secondary Actions: Use bordered variants with hover states
- Status Indicators: Use semantic colors (green/red/orange/blue)
- Text Content: Use neutral grays with proper contrast
- All color combinations meet WCAG 2.1 AA standards
- High contrast ratios for text readability
- Color-blind friendly palette
- Alternative indicators beyond color for important information
| Usage | Font | Weight Options |
|---|---|---|
| Primary | Lora | 400, 500, 600, 700 |
| Secondary | Space Grotesk | 300, 400, 500, 600, 700 |
| Monospace | Fira Code | 300, 400, 500, 600, 700 |
- Use the official Embervest logo with proper spacing
- Maintain minimum clear space around the logo
- Use the dark version on light backgrounds, light version on dark backgrounds
- Primary Brand: Cyan to Teal gradient for main actions
- Communication: Cyan to Blue gradient for chat and messaging
- Urgency: Orange to Red gradient for immediate actions
- Success: Green for positive feedback and completed actions
- Error: Red for errors and destructive actions
- Warning: Orange for caution and attention items
- All colors include comprehensive dark mode variants
- Maintains brand consistency across light and dark themes
- Ensures accessibility in all viewing conditions
- Primary: Cyan to Teal gradient with white text
- Secondary: Bordered variant with hover states
- Destructive: Red gradient for delete/cancel actions
- Urgent: Orange to Red gradient for immediate actions
- Success: Green background with white text
- Error: Red background with white text
- Warning: Orange background with white text
- Info: Blue background with white text
- Primary: Dark gray on light backgrounds, light gray on dark
- Secondary: Medium gray for supporting text
- Muted: Light gray for less important information
Our color palette reflects our commitment to helping users make confident financial decisions. The calming blues and teals convey stability and growth.
The clear visual hierarchy and consistent color usage ensure users always understand what actions they can take and their relative importance.
The orange to red gradient is used sparingly to draw attention to actions that require immediate user attention, maintaining its impact.
This design system is the foundation of the Embervest brand experience.
