Colors
StockFind brand and semantic color palette
Brand Colors
Our brand colors change based on the theme to maintain optimal contrast and readability.
Accent
Primary CTAs, headers
Light: Deep Blue #1E3A8A
Dark: Warm Ivory #FFFBEB
Highlight
Reserved for future use
Coral accent
Semantic Colors
Used for status indicators and feedback throughout the application.
Success
Gains, positive values
Danger
Losses, errors
Warning
Caution, alerts
Surface Colors
Background colors for different elevation levels.
Background
Page background
Surface
Cards, containers
Default
Subtle backgrounds
Usage
// Use semantic class names
<div className="bg-accent text-accent-foreground">Primary action</div>
<div className="bg-success text-success-foreground">+5.2%</div>
<div className="bg-danger text-danger-foreground">-2.1%</div>
// CSS variables are also available
<div style={{ background: 'var(--accent)' }}>Custom usage</div>Color Tokens Reference
| Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
--accent | Deep Blue #1E3A8A | Warm Ivory #FFFBEB | Primary CTAs |
--success | Green #22C55E | Green #22C55E | Positive values |
--danger | Red #DC2626 | Red #EF4444 | Negative values |
--warning | Amber #F59E0B | Amber #FBBF24 | Caution states |
--background | Near white | Gray 900 | Page background |
--surface | White | Gray 800 | Card backgrounds |