Colors
StockFind brand and semantic color palette
Brand Colors
Our brand colors change based on the theme to maintain optimal contrast and readability. Dark mode is the default theme.
Accent
Primary CTAs, headers
Dark (default): Metallic Gold #D4AF37
Light: Deep Blue #1E3A8A
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>Borders & Shadows
Apple-style design uses subtle borders (6% opacity) and multi-layer soft shadows for depth.
| Token | Light Mode | Dark Mode |
|---|---|---|
--border | oklch(0.5 0.01 285 / 6%) | oklch(1 0 0 / 8%) |
--surface-shadow | 3-layer soft (2px + 4px + 8px offsets) | Transparent |
--overlay-shadow | 2-layer (4px + 8px offsets) | Transparent |
/* Multi-layer soft shadows */
--surface-shadow:
0 2px 8px 0 rgba(0, 0, 0, 0.04),
0 4px 16px 0 rgba(0, 0, 0, 0.06),
0 8px 32px 0 rgba(0, 0, 0, 0.04);Color Tokens Reference
| Token | Light Mode | Dark Mode | Usage |
|---|---|---|---|
--accent | Deep Blue #1E3A8A | Metallic Gold #D4AF37 | 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 |
--surface-secondary | Light gray | Dark gray | Nested surfaces |
--surface-tertiary | Lighter gray | Darker gray | Third-level surfaces |