Colors
Our color system provides a consistent palette for all interface elements.
Primary Colors
Secondary Colors
Neutral Colors
Semantic Colors
Success
Warning
Error
Usage Guidelines
Button Colors
Primary Button
Default: Blue-600 (#1E66FF)
Hover: Blue-700 (#1554E1)
Disabled: Gray-300 (#CBD5E1)
Secondary Button
Default: Gray-100 + Gray-300 border
Hover: Gray-200 + Gray-400 border
Disabled: Gray-50 + Gray-200 border
Danger Button
Default: Red-600 (#EF4444)
Hover: Red-700 (#DC2626)
Disabled: Gray-300 (#CBD5E1)
Text Links
Primary Links
Default: Blue-600 (#1E66FF)
Hover: Blue-700 (#1554E1)
Visited: Blue-800 (#1442B0)
Secondary Links
Default: Gray-600 (#475569)
Hover: Gray-800 (#1F2937)
Disabled: Gray-400 (#94A3B8)
When to Use Secondary Colors
Use Secondary Colors For:
- ✓ Supporting UI elements (badges, tags)
- ✓ Success states and confirmations
- ✓ Progress indicators
- ✓ Accent colors for charts and graphs
- ✓ Environmental or nature-related content
❌ Avoid Secondary Colors For:
- ✗ Primary call-to-action buttons
- ✗ Main navigation elements
- ✗ Critical error messages
- ✗ Primary brand elements
- ✗ Text that requires high contrast
Notification Colors
Success
Background: Green-50
Border: Green-200
Text: Green-800
Icon: Green-500
Warning
Background: Yellow-50
Border: Yellow-200
Text: Yellow-800
Icon: Yellow-500
Error
Background: Red-50
Border: Red-200
Text: Red-800
Icon: Red-500
Info
Background: Blue-50
Border: Blue-200
Text: Blue-800
Icon: Blue-500
General Color Guidelines
Primary Colors
Use primary colors for main actions, links, and brand elements. Primary-600 is our main brand color.
- • Main call-to-action buttons
- • Primary navigation elements
- • Brand logos and headers
- • Active states and focus indicators
Neutral Colors
Use neutral colors for text, backgrounds, and borders. They provide the foundation for all content.
- • Body text and headings
- • Background colors and surfaces
- • Borders and dividers
- • Placeholder text and disabled states