Frontend Style Guidelines
This project enforces a Strict Financial Dark Mode aesthetic to maintain professional consistency.
🎨 Color Palette
| Variable | Hex | Description |
|---|---|---|
--bg-primary | #000000 | Pure Black background |
--bg-secondary | #050505 | Card/Panel background |
--accent-green | #22c55e | Profit / Success (Desaturated) |
--accent-red | #ef4444 | Loss / Risk (Desaturated) |
--text-primary | #e5e5e5 | Primary Text |
--text-muted | #606060 | Secondary/Meta Text |
Typography
Fonts
- Headings:
Times New Roman(Serif) - Evokes traditional banking. - Data/Code:
Courier New(Monospace) - Professional technical standard.
WARNING
NO EMOJIS: Emojis are strictly prohibited in the UI to maintain a serious tone.
Components
Cards
Cards use a 1px border (#333) and minimal padding. Hover effects should be subtle (border color change only).
.card {
background: var(--bg-primary);
border: 1px solid var(--border-color);
}Charts (Recharts)
- Grid Lines:
#333333(Subtle) - Tooltips: Square corners, black background, monospace font.
- Colors: Use css variables for data strokes/fills.