# Design System Master File

> Page overrides: `design-system/vantagepromarket/pages/[page].md`

**Project:** VantageProMarket  
**Updated:** 2026-06-01

---

## Design read

Institutional crypto platform for serious traders: **TradingView slate terminal**, trust blue accent, chart-first layouts, no casino gold.

**Dials:** VARIANCE 5 · MOTION 3 · DENSITY 7

---

## Color palette

| Role | Hex | Token |
|------|-----|--------|
| Brand / CTA | `#2962FF` | `--vpm-cta` |
| Link | `#5B9CF6` | `--vpm-secondary` |
| Accent (live tags) | `#00BCD4` | `--vpm-accent` |
| Background | `#131722` | `--vpm-bg` |
| Surface | `#1E222D` | `--vpm-surface` |
| Elevated | `#2A2E39` | `--vpm-surface-elevated` |
| Border | `#363A45` | `--vpm-border` |
| Text | `#D1D4DC` | `--vpm-text` |
| Muted | `#787B86` | `--vpm-text-muted` |
| Buy / up | `#26A69A` | `--vpm-success` |
| Sell / down | `#EF5350` | `--vpm-danger` |

**Banned:** Binance gold `#F0B90B`, neon purple gradients, Orbitron/display sci-fi fonts.

---

## Typography

- **Sans:** Plus Jakarta Sans
- **Mono:** JetBrains Mono (all prices, tables, timestamps)

---

## Layout architecture

### App shell
- **Top navigation** (not left sidebar): logo, Portfolio / Trade / Copy / Mining, balance pill, deposit, user
- Content: edge-to-edge on trade desk; padded grid on portfolio

### Trade (`/app/trading`)
1. Instrument bar (pair, 24h stats, timeframe segmented control)
2. Horizontal market strip (watchlist chips)
3. Workspace: chart (flex) + rail (order form + order book)
4. Ledger: open orders / positions / history tabs

### Portfolio (`/app/portfolio`)
1. Hero panel: equity + inline stats + actions
2. Full-width equity chart (TradingView mini)
3. Grid: positions table | activity feed

---

## TradingView

| Route | Widget |
|-------|--------|
| `/app/trading` | Advanced Chart |
| `/app/portfolio`, landing hero | Mini Symbol Overview |
| Landing | Ticker tape |

Chart overrides: background `#131722`, grid `#363A45`.

---

## Components

- Primary button: blue `#2962FF`, white label
- Long/Short: teal green / coral red (not brand yellow)
- Segmented controls for timeframes and order types
- Panels: `#1E222D` surface, 1px `#363A45` border, 6–10px radius

---

## Anti-patterns

- Left sidebar + breadcrumb header (legacy)
- Gold exchange branding
- Fake candlestick SVGs
- Three-column Binance clone with yellow CTAs