# MAXXBET Canonical Design System — Specification & Guide

> **Sovereign Standard:** Zero deviations. Seamless dual-theme parity across Dark Mode (*High-Velocity Cockpit*) and Light Mode (*Platinum Velocity*). Engineered for institutional liquidity, split-second odds execution, and an electrifying betting experience tailored to the Brazilian market.

---

## 1. Brand Identity & Design Principles

### 1.1 Brand DNA
MAXXBET unites the ruthless efficiency and dense utility of institutional financial trading desks with the adrenaline of high-stakes sports entertainment. It projects sovereign cryptographic security, instant banking reliability (PIX SPI/BCB), and crystal-clear odds readability under high-frequency market fluctuations.

### 1.2 Core Pillars
1. **High-Velocity Decision Making:** Dense layouts, minimal vertical scroll for primary markets, tabular alignment, and zero cognitive friction.
2. **Sovereign Financial Trust:** Instant liquidity, prominent Brazilian Central Bank (BCB) protocol badges, transparent slip calculations, and clear cashout opportunities.
3. **Dual-Theme Equivalence:** Neither theme is an afterthought. Dark mode optimizes visual stamina in low-light trading cockpits; Light mode mirrors clinical, high-trust institutional fintech workstations.
4. **Subtle Kinetic Feedback:** Luminescent border flashes on odds swings, soft glows on winning betslips, micro-indicators for live ball possession and latency.

---

## 2. Dual-Theme Color System

The design system maps semantic tokens into CSS variables that adapt dynamically via the `.dark` and `.light` class on the root element.

| Semantic Token | Dark Mode ("Cockpit") | Light Mode ("Platinum") | Strategic Purpose |
| :--- | :--- | :--- | :--- |
| `--surface-canvas` | `#0c1324` / `#020617` | `#f8fafc` | The bedrock foundation canvas |
| `--surface-card` | `#0f172a` / `#151b2d` | `#ffffff` | Elevated primary cards and fixture containers |
| `--surface-container` | `#191f31` | `#f1f5f9` | Structural groupings and secondary panels |
| `--surface-interactive` | `#1e293b` / `#23293c` | `#e2e8f0` | Odds cells, hover targets, input backgrounds |
| `--surface-popover` | `rgba(15, 23, 42, 0.90)` | `rgba(255, 255, 255, 0.95)` | Glassmorphic floating betslip, modal sheets |
| `--border-subtle` | `#1e293b` / `rgba(255,255,255,0.06)` | `#e2e8f0` | 1px micro-dividers and structural grids |
| `--border-interactive` | `#334155` | `#cbd5e1` | Odds buttons outlines, search inputs |
| `--text-primary` | `#f8fafc` / `#dce1fb` | `#0f172a` | Headers, team names, high-contrast odds |
| `--text-secondary` | `#94a3b8` / `#bbcabf` | `#334155` | Secondary descriptions, market descriptors |
| `--text-muted` | `#64748b` / `#86948a` | `#64748b` | Timestamps, league meta, minor labels |
| `--color-primary` | `#10b981` / `#4edea3` | `#10b981` / `#059669` | Action emerald: winning bets, PIX CTA, positive odds |
| `--color-primary-tint` | `rgba(16, 185, 129, 0.15)` | `rgba(16, 185, 129, 0.10)` | Active button background tint |
| `--color-secondary` | `#f59e0b` / `#ffb95f` | `#d97706` / `#f59e0b` | Amber gold: VIP tiers, hot odds boost, cashout |
| `--color-tertiary` | `#06b6d4` / `#4cd7f6` | `#0284c7` | Electric cyan: live stats, radar possession, heatmaps |
| `--color-error` | `#f43f5e` / `#ffb4ab` | `#ef4444` / `#dc2626` | Live match alert ("AO VIVO"), odds drift down |

---

## 3. Typography & Numerical Precision

### 3.1 Font Families
- **Display & Marketing Titles:** `Plus Jakarta Sans`, sans-serif (Weights: `600`, `700`, `800`)
- **Alternative Display:** `Space Grotesk`, sans-serif
- **Interface Body & Navigation:** `Inter`, -apple-system, BlinkMacSystemFont, sans-serif (Weights: `400`, `500`, `600`, `700`)
- **Odds, Scoreboards & Timers:** `Inter` with OpenType features (`tnum`, `cv05`) or `JetBrains Mono`

```css
/* Tabular Figures for Real-Time Financial & Sports Telemetry */
.tabular-nums, .mxb-odds, .mxb-timer, .mxb-currency {
  font-feature-settings: 'tnum' on, 'cv05' on;
  font-variant-numeric: tabular-nums;
}
```

### 3.2 Scale & Hierarchy
- **Display Hero (`display-lg`):** `48px` / `56px` line-height, `-0.03em` letter-spacing, Extra Bold (`800`)
- **Headline XL (`headline-xl`):** `32px` / `40px` line-height, `-0.02em` letter-spacing, Bold (`700`)
- **Headline LG (`headline-lg`):** `24px` / `32px` line-height, `-0.015em` letter-spacing, Bold (`700`)
- **Headline MD (`headline-md`):** `20px` / `28px` line-height, Semi-Bold (`600`)
- **Body Standard (`body-md`):** `14px` / `22px` line-height, Regular (`400`)
- **Body Compact (`body-sm`):** `12px` / `18px` line-height, Regular (`400`)
- **Micro-Labels (`label-caps`):** `10px` / `14px` line-height, Bold (`700`), `0.08em` tracking, uppercase
- **Odds Numbers (`label-odds`):** `13px`–`15px` / `16px` line-height, Bold (`700`), tabular

---

## 4. Layout Architecture & Density

The platform follows a battle-tested **3-Column Trading Terminal Architecture**:

```
+-----------------------------------------------------------------------------------+
|                                  GLOBAL HEADER                                    |
| [MAXXBET LOGO]  [NAV: Ao Vivo, Esportes, Cassino...] [SEARCH] [SALDO] [PIX] [VIP] |
+-----------------------+-----------------------------------+-----------------------+
|      LEFT RAIL        |          CENTRAL ENGINE           |      RIGHT RAIL       |
|    (240px - 280px)    |       (Dynamic Fluid Grid)        |    (320px - 360px)    |
|                       |                                   |                       |
| • Quick Search        | • Hero Odds Boost Carousel        | • Persistent Betslip  |
| • Ao Vivo Counter     | • Filter Category Pills           |   - Tabs: Simples,    |
| • Quick Sport Filter  | • Live Event Fixture Cards        |     Múltipla, Sistema |
| • Top Leagues List    | • Full Market Odds Matrices       |   - Active Selections |
| • VIP Bonus Banner    | • Radar 2D & Possession Tracker   |   - Stake Presets     |
|                       | • Recent Results Feed             |   - Retorno Potencial |
|                       |                                   |   - [APOSTAR PIX CTA] |
+-----------------------+-----------------------------------+-----------------------+
```

---

## 5. Canonical Components

### 5.1 Odds Selection Box (`.mxb-odds-box`)
The atomic transactional building block of the platform:
- **Dimensions:** Compact height (`44px`–`48px`), min-width `68px`.
- **Top Row:** Outcome descriptor (`1`, `X`, `2`, `Mais de 2.5`, `Ambos Marcam`).
- **Bottom Row:** Decimal price formatted to 2 decimal places (`2.15`).
- **States:**
  - *Default:* Translucent container background with subtle 1px border.
  - *Hover:* Elevated brightness, sharpened border.
  - *Selected:* 1.5px solid border in Emerald (`#10b981`), background tint, emerald odds text.
  - *Drift Up:* Temporary flash border (`#10b981`) with upward arrow indicator.
  - *Drift Down:* Temporary flash border (`#f43f5e`) with downward arrow indicator.
  - *Locked:* Low opacity, padlock icon, non-interactive.

### 5.2 Betslip ("Boleta de Apostas")
- Sticky positioning (`sticky top-24`).
- Real-time selection count pill.
- Seamless single-click deletion per ticket item.
- Immediate "Odd Alterada" notification if a line moves while in slip.
- Instant stake quick-chips (`+R$10`, `+R$50`, `+R$100`, `MAX`).
- Dynamic potential payout: `Valor Apostado * Odds Combinadas`.
- High-emphasis primary CTA button with kinetic emerald pulse.

### 5.3 PIX Instant Cashier & Wallet
- Direct connection status: `Protocolo SPI / BCB Direto`, latency `< 1.5s`.
- Dynamic QR Code framed in high-contrast crisp white bounding box.
- Instant copy PIX string with animated feedback toast.
- Preset deposit values: `R$ 20`, `R$ 50`, `R$ 100`, `R$ 250`, `R$ 500`.
- Fast cashout execution to verified Brazilian CPF / Phone / Email keys.

### 5.4 Live Match Radar & Cockpit
- Match status pill with pulsing indicator (`AO VIVO 72:14`).
- Scoreboard with high-contrast digits and synthetic club crests.
- Interactive radar view (2D pitch visualizer) and statistics breakdown (possession, dangerous attacks, shots on target).

### 5.5 Executive Risk & Backoffice Terminal
- Bento-grid financial KPI cards: GGR Diário, NGR, Apostas em Aberto, Exposição Total de Risco, Margem da Casa.
- Real-time anomalous betting volume alerts and one-click line adjustment controls.

---

## 6. Official Vector Assets

### 6.1 MAXXBET Logo
The canonical vector logo combines high-velocity italic geometry with an emerald primary symbol, stark lettering, and a dedicated `.BET` pill with an energetic amber alert accent.
Included in `maxxbet_logo/code.html` and registered within the global design tokens.

---

## 7. Implementation Checklist for New Screens
- [ ] Uses canonical tokens from `tokens.css`.
- [ ] Toggles seamlessly between `.dark` and `.light` without layout shifts.
- [ ] All odds and timestamps include `tabular-nums`.
- [ ] Financial values follow Brazilian convention (`R$ 1.500,00`).
- [ ] No heavy blur drop-shadows; depth achieved via 1px micro-borders and tonal stacking.
- [ ] Verified for WCAG AA/AAA readability on both modes.