# VLT Markets — DESIGN.md (GradientDeck UI Specification)
> Obsidian trading terminal meets modern editorial research. Dark-mode canvas (#08090a), micro-hairline borders, electric neon accents, tabular mono figures, and glassmorphic depth. Built for high cognitive clarity, risk-first research, and AI-first answerability.

**Theme:** Dark (Default) / High-Contrast Editorial  
**Design System Version:** 2.0.0  
**Target:** AI Coding Agents (Claude Code, Codex, Cursor, Gemini), Modern Front-End Frameworks, and Vanilla Responsive Stacks.

---

## 1. Quick Color Reference (Design Tokens)

- **Deep Ground (Canvas):** `#08090a` — Signature GradientDeck foundation; ultra-deep neutral black preventing ocular fatigue during prolonged research reading.
- **Surface Level 1 (Card Ground):** `#0f1217` — Primary card container face, reading containers, search overlays.
- **Surface Level 2 (Raised Panels):** `#161b22` — Hover states, dropdown menus, modal bodies, active tool drawers.
- **Surface Level 3 (Action/Focus):** `#1f2633` — Interactive button fills, calculator input backgrounds.
- **Hairline Border:** `rgba(255, 255, 255, 0.08)` — Subtle crisp micro-rules separating sections without visual clutter.
- **Hairline Focus/Active:** `rgba(16, 185, 129, 0.35)` or `rgba(6, 182, 212, 0.35)`.
- **Text Headings (Pure Ink):** `#f9fafb` — Maximum contrast 18:1 ratio on deep ground.
- **Text Body:** `#d1d5db` — Comfortable, legible editorial gray.
- **Text Muted / Metadata:** `#9ca3af` — Subtitles, dates, bylines, reading time indicators.
- **Text Subtle:** `#6b7280` — Disclaimers, footer legals, secondary labels.

### Electric Accents (Semantics)
- **Signal Emerald (Safety / Long / Profit):** `#10b981` (Glow: `rgba(16, 185, 129, 0.2)`) — Risk-first highlights, positive market delta, verified badges.
- **Electric Cyan (Tech / Intelligence / Flow):** `#06b6d4` (Glow: `rgba(6, 182, 212, 0.25)`) — Primary action pills, interactive ticker tags, research hub focus.
- **Hyper Violet (Crypto / Web3 Protocols):** `#8b5cf6` (Glow: `rgba(139, 92, 246, 0.25)`) — Crypto category markers, blockchain research tokens.
- **Precious Amber (Forex & Gold):** `#f59e0b` (Glow: `rgba(245, 158, 11, 0.25)`) — Commodities, XAU/USD, central bank policy.
- **Crimson Rose (Risk / Loss / Stop-Loss):** `#f43f5e` (Glow: `rgba(244, 63, 94, 0.25)`) — Downside warnings, negative delta, stop-loss markers.

---

## 2. Typography Hierarchy

| Role | Font Family | Size / Line-Height | Weight | Tracking |
|---|---|---|---|---|
| **Display Hero** | Plus Jakarta Sans / Inter | 48px – 64px / 1.1 | 800 (Extra Bold) | -0.035em |
| **Section H2** | Plus Jakarta Sans / Inter | 28px – 36px / 1.2 | 700 (Bold) | -0.025em |
| **Article Card H3**| Plus Jakarta Sans / Inter | 18px – 22px / 1.35| 600 (SemiBold) | -0.015em |
| **Body Editorial** | Inter / System Sans | 16px / 1.65 | 400 (Regular) | 0 |
| **Bylines & Lead** | Inter / System Sans | 14px / 1.5 | 500 (Medium) | 0 |
| **Tabular Figures**| JetBrains Mono / SF Mono | 12px – 14px / 1.4| 500 / 600 | 0.02em |
| **Pill Badges** | JetBrains Mono / SF Mono | 11px – 12px / 1.2| 600 | 0.05em (Caps) |

---

## 3. Spacing, Geometry & Radii

- **Base Radius (Cards & Panels):** `12px` (`rounded-xl`)
- **Control Radius (Buttons, Inputs):** `8px` (`rounded-lg`)
- **Pill Badges:** `9999px` (`rounded-full`)
- **Container Max Width:** `1280px` (`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8`)
- **Micro-Grid Spacing:** `4px` grid (8px, 12px, 16px, 24px, 32px, 48px, 64px)

---

## 4. Key UI Components (GradientDeck Flavor)

1. **Ambient Spotlight Glows:**
   - Radial gradients positioned softly behind hero and header (`background: radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.15) 0%, rgba(8, 9, 10, 0) 70%);`).
2. **Glassmorphic App Windows & Cards:**
   - `background: rgba(15, 18, 23, 0.75);`
   - `backdrop-filter: blur(12px);`
   - `border: 1px solid rgba(255, 255, 255, 0.08);`
   - Hover: subtle border shift to `rgba(255, 255, 255, 0.16)` and `-translate-y-0.5`.
3. **Live Ticker Tape:**
   - Infinite horizontal marquee with live price streams, green/red delta badges, and real-time spread indicators.
4. **Interactive Risk-First Position Calculator:**
   - Visual slider & numeric inputs for Account Size, Risk %, Entry, and Stop Loss.
   - Live visual outcome cards calculating exact lot size, maximum risk in USD, and gearing ratio.
5. **Direct Answer Accordions (GEO & AEO Powerhouse):**
   - Clean, tactile question tabs with instantaneous answer revelation and microdata linking.
6. **Reader Modal Drawer:**
   - Instant article modal allowing deep-dive reading without disruptive page navigation, equipped with reading time, key takeaways, and share/citation tools.

---

## 5. CSS Variables Specification

```css
:root {
  --color-canvas: #08090a;
  --color-surface-1: #0f1217;
  --color-surface-2: #161b22;
  --color-surface-3: #1f2633;
  --color-border-hairline: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.16);
  --color-text-title: #f9fafb;
  --color-text-body: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-accent-emerald: #10b981;
  --color-accent-cyan: #06b6d4;
  --color-accent-violet: #8b5cf6;
  --color-accent-amber: #f59e0b;
  --color-accent-rose: #f43f5e;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
```