design.md
Fonte de verdade do Design System TRDR — 1,884 linhas, v1.4.
Copiar tudo
📄 design.md71.7 KB1,884 linhas10 seções
# TRDR — Design System
> Guia definitivo do Design System TRDR. Qualquer pessoa ou IA deve conseguir construir qualquer interface consistente usando apenas este documento.
**Fontes:** `design-system-variables.xlsx` · Figma MCP (82 componentes extraídos em 2026-04-07)
**Collections:** `.primitives` · `semantic` · `scale` · `typography`
---
## Sumário
1. [Fundamentos — Primitivos](#1-fundamentos--primitivos)
- 1.1 [Cores](#11-cores) · 1.2 [Espaçamentos](#12-espaçamentos) · 1.3 [Border Radius](#13-border-radius) · 1.4 [Tipografia Primitiva](#14-tipografia-primitiva) · 1.5 [Opacidades](#15-opacidades)
2. [Tokens Semânticos](#2-tokens-semânticos)
- 2.1 [Backgrounds](#21-backgrounds) · 2.2 [Surfaces](#22-surfaces) · 2.3 [Conteúdo](#23-conteúdo-texto) · 2.4 [Bordas](#24-bordas) · 2.5 [Ações](#25-ações) · 2.6 [Trading](#26-contexto-de-trading)
3. [Scale — Responsivo](#3-scale--responsivo)
4. [Tipografia](#4-tipografia)
5. [Padrões de Layout — Plataforma](#5-padrões-de-layout)
- 5.1 [Tela Desktop](#51-tela-desktop--plataforma-de-trading) · 5.2 [Padrão de Janela](#52-padrão-de-janela-janela) · 5.3 [Header de Janela](#53-header-de-janela-header-window) · 5.4 [Abas](#54-padrão-de-abas-dentro-de-janela) · 5.5 [Variantes de Tela](#55-telas-da-plataforma--variantes)
6. [Site Institucional](#6-site-institucional)
- 6.1 [Estrutura](#61-estrutura-do-site) · 6.2 [Tipografia](#62-tipografia-do-site) · 6.3 [Gradientes](#63-gradientes-de-branding) · 6.4 [Componentes do Site](#64-componentes-exclusivos-do-site) · 6.5 [Tokens Não Formalizados](#65-tokens-não-formalizados)
7. [Software Desktop — App Launcher](#7-software-desktop--app-launcher-trdr)
- 7.1 [Shell do App](#71-shell-do-app-desktop) · 7.2 [Header](#72-header-desktop-do-app) · 7.3 [Sidebar](#73-sidebar-de-plataformas) · 7.4 [Hero](#74-hero-da-plataforma) · 7.5 [Pill Tabs](#75-pill-tabs-terceiro-estilo-de-abas) · 7.6 [Activity Card](#76-activity-card) · 7.7 [Footer](#77-footer-do-app-desktop) · 7.8 [Nav de Seções](#78-nav-de-seções-do-app)
8. [Componentes](#8-componentes)
- 8.1 [Inventário](#81-inventário-de-componentes) · 8.2 [Button](#82-button) · 8.3 [Text Input](#83-text-input) · 8.4 [Dropdown](#84-dropdown) · 8.5 [Combo Input](#85-combo-input) · 8.6 [Checkbox](#86-checkbox) · 8.7 [Radio Button](#87-radio-button) · 8.8 [Switch](#88-switch) · 8.9 [Segmented Control](#89-segmented-control) · 8.10 [Tooltip](#810-tooltip) · 8.11 [Modal](#811-modal) · 8.12 [Abas](#812-abas-tabs) · 8.13 [Navegação](#813-navegação) · 8.14 [Floating Menus](#814-floating-menus) · 8.15 [Trading](#815-painéis-de-trading) · 8.16 [IA](#816-componentes-de-ia)
9. [Guia para IA](#9-guia-para-ia)
10. [Changelog](#10-changelog)
---
## 1. Fundamentos — Primitivos
Os primitivos são os valores brutos do design system. **Nunca use primitivos diretamente na UI** — sempre prefira os tokens semânticos da seção 2. Use primitivos apenas para construir novos tokens.
### 1.1 Cores
#### Azul (Blue)
| Token | Hex |
|---|---|
| `color.blue.50` | `#F0F7FF` |
| `color.blue.100` | `#E0EEFF` |
| `color.blue.200` | `#C1DDFF` |
| `color.blue.300` | `#A2CDFF` |
| `color.blue.400` | `#84BFFF` |
| `color.blue.500` | `#65B0FF` |
| `color.blue.600` | `#3D99FF` |
| `color.blue.700` | `#1E82FF` |
| `color.blue.800` | `#0066FF` |
| `color.blue.900` | `#0052CC` |
**Blue com alpha:**
| Token | Hex |
|---|---|
| `color.blue.500.alpha.08` | `#0052CC14` |
| `color.blue.500.alpha.16` | `#0052CC29` |
| `color.blue.500.alpha.32` | `#0052CC52` |
#### Neutro (Neutral)
| Token | Hex | Referência |
|---|---|---|
| `color.neutral.50` | `#FFFFFF` | Branco puro |
| `color.neutral.100` | `#FAFAFA` | |
| `color.neutral.200` | `#F5F5F5` | |
| `color.neutral.300` | `#EEEEEE` | |
| `color.neutral.400` | `#E8E8E8` | |
| `color.neutral.500` | `#D2D2D2` | |
| `color.neutral.600` | `#A4A4A4` | |
| `color.neutral.700` | `#777777` | |
| `color.neutral.800` | `#4A4A4A` | |
| `color.neutral.900` | `#222222` | |
| `color.neutral.1000` | `#1A1A1A` | step 900 |
| `color.neutral.1100` | `#141519` | step 1000 |
| `color.neutral.1200` | `#0E0E0E` | step 1000 |
**Neutral com alpha:**
| Token | Hex |
|---|---|
| `color.neutral.600.alpha.0` | `#FFFFFF00` |
| `color.neutral.600.alpha.08` | `#FFFFFF14` |
| `color.neutral.600.alpha.16` | `#FFFFFF29` |
| `color.neutral.600.alpha.32` | `#FFFFFF52` |
| `color.neutral.1200.alpha.0` | `#0E0E0E00` |
| `color.neutral.1200.alpha.08` | `#0E0E0E14` |
| `color.neutral.1200.alpha.16` | `#0E0E0E29` |
| `color.neutral.1200.alpha.32` | `#0E0E0E52` |
#### Vermelho (Red)
| Token | Hex |
|---|---|
| `color.red.50` | `#FEF2F0` |
| `color.red.100` | `#FDE5E0` |
| `color.red.200` | `#FBC7C1` |
| `color.red.300` | `#F9A9A2` |
| `color.red.400` | `#F78B83` |
| `color.red.500` | `#F56D64` |
| `color.red.600` | `#F34F45` |
| `color.red.700` | `#F13126` |
| `color.red.800` | `#D91B0F` |
| `color.red.900` | `#A01407` |
**Red com alpha:**
| Token | Hex |
|---|---|
| `color.red.600.alpha.08` | `#F1312614` |
| `color.red.600.alpha.12` | `#F131261F` |
| `color.red.600.alpha.16` | `#F1312629` |
| `color.red.600.alpha.32` | `#F1312652` |
| `color.red.600.alpha.40` | `#F1312666` |
| `color.red.600.alpha.48` | `#F131267A` |
| `color.red.600.alpha.56` | `#F131268F` |
#### Verde (Green)
| Token | Hex |
|---|---|
| `color.green.50` | `#F0FDF4` |
| `color.green.100` | `#E2FBEA` |
| `color.green.200` | `#C5F6D8` |
| `color.green.300` | `#A8F1C6` |
| `color.green.400` | `#8BECB4` |
| `color.green.500` | `#6DE7A2` |
| `color.green.600` | `#4FE290` |
| `color.green.700` | `#31DD7E` |
| `color.green.800` | `#13C870` |
| `color.green.900` | `#0B9E5C` |
**Green com alpha:**
| Token | Hex |
|---|---|
| `color.green.600.alpha.08` | `#4FE29014` |
| `color.green.600.alpha.12` | `#4FE2901F` |
| `color.green.600.alpha.16` | `#4FE29029` |
| `color.green.600.alpha.32` | `#4FE29052` |
| `color.green.600.alpha.40` | `#4FE29066` |
| `color.green.600.alpha.48` | `#4FE2907A` |
| `color.green.600.alpha.56` | `#4FE2908F` |
#### Amarelo (Yellow)
| Token | Hex |
|---|---|
| `color.yellow.50` | `#FFFBEB` |
| `color.yellow.100` | `#FFF7D6` |
| `color.yellow.200` | `#FFEFC2` |
| `color.yellow.300` | `#FFE8A8` |
| `color.yellow.400` | `#FFE18E` |
| `color.yellow.500` | `#FFDA74` |
| `color.yellow.600` | `#FFD35A` |
| `color.yellow.700` | `#FFCC40` |
| `color.yellow.800` | `#FFC500` |
| `color.yellow.900` | `#E6B000` |
**Yellow com alpha:**
| Token | Hex |
|---|---|
| `color.yellow.600.alpha.08` | `#FFCC4014` |
| `color.yellow.600.alpha.16` | `#FFCC4029` |
| `color.yellow.600.alpha.32` | `#FFCC4052` |
#### Laranja (Orange)
| Token | Hex |
|---|---|
| `color.orange.50` | `#FFF7ED` |
| `color.orange.100` | `#FFEDD5` |
| `color.orange.200` | `#FED7AA` |
| `color.orange.300` | `#FDBA74` |
| `color.orange.400` | `#FB923C` |
| `color.orange.500` | `#F97316` |
| `color.orange.600` | `#EA580C` |
| `color.orange.700` | `#C2410C` |
| `color.orange.800` | `#9A3412` |
| `color.orange.900` | `#7C2D12` |
**Orange com alpha:**
| Token | Hex |
|---|---|
| `color.orange.600.alpha.08` | `#F9731614` |
| `color.orange.600.alpha.16` | `#F9731629` |
| `color.orange.600.alpha.32` | `#F9731652` |
#### Roxo (Purple)
| Token | Hex |
|---|---|
| `color.purple.50` | `#F1EFF5` |
| `color.purple.100` | `#D6D3E5` |
| `color.purple.200` | `#BBB4D6` |
| `color.purple.300` | `#9E94C9` |
| `color.purple.400` | `#8072BE` |
| `color.purple.500` | `#6350B3` |
| `color.purple.600` | `#50418E` |
| `color.purple.700` | `#3E3467` |
| `color.purple.800` | `#2A2542` |
| `color.purple.900` | `#161320` |
**Purple com alpha:**
| Token | Hex |
|---|---|
| `color.purple.500.alpha.08` | `#6350B314` |
| `color.purple.500.alpha.16` | `#6350B329` |
| `color.purple.500.alpha.32` | `#6350B352` |
---
### 1.2 Espaçamentos
| Token | Valor |
|---|---|
| `space.0` | `0px` |
| `space.50` | `4px` |
| `space.100` | `8px` |
| `space.200` | `12px` |
| `space.300` | `16px` |
| `space.400` | `20px` |
| `space.500` | `24px` |
| `space.600` | `32px` |
| `space.700` | `40px` |
| `space.800` | `48px` |
| `space.900` | `56px` |
| `space.1000` | `64px` |
| `space.1200` | `80px` |
| `space.1400` | `96px` |
---
### 1.3 Border Radius
| Token | Valor |
|---|---|
| `radius.0` | `0px` |
| `radius.50` | `2px` |
| `radius.100` | `4px` |
| `radius.200` | `8px` |
| `radius.300` | `12px` |
| `radius.400` | `16px` |
| `radius.500` | `20px` |
| `radius.600` | `24px` |
| `radius.700` | `32px` |
| `radius.full` | `9999px` |
---
### 1.4 Tipografia Primitiva
#### Famílias de Fonte
| Token | Valor | Uso |
|---|---|---|
| `font.family.primary` | `Space Grotesk` | Títulos e displays |
| `font.family.secondary` | `Inter` | Corpo, labels, UI |
| `font.family.mono` | `Roboto Mono` | Código, dados numéricos |
#### Tamanhos de Fonte
| Token | Valor |
|---|---|
| `font.size.50` | `12px` |
| `font.size.100` | `14px` |
| `font.size.200` | `16px` |
| `font.size.300` | `18px` |
| `font.size.400` | `20px` |
| `font.size.500` | `24px` |
| `font.size.600` | `28px` |
| `font.size.700` | `32px` |
| `font.size.800` | `40px` |
| `font.size.900` | `48px` |
#### Pesos de Fonte
| Token | Valor |
|---|---|
| `font.weight.light` | `300` |
| `font.weight.regular` | `400` |
| `font.weight.medium` | `500` |
| `font.weight.semibold` | `600` |
| `font.weight.bold` | `700` |
#### Letter Spacing
| Token | Valor |
|---|---|
| `letter.spacing.tight` | `-0.8px` |
| `letter.spacing.normal` | `0px` |
| `letter.spacing.relaxed` | `0.2px` |
| `letter.spacing.loose` | `1px` |
---
### 1.5 Opacidades
| Token | Valor | Uso |
|---|---|---|
| `opacity.disabled` | `50%` | Estados desabilitados |
| `opacity.overlay` | `70%` | Overlays/modais |
| `opacity.hover` | `80%` | Estados de hover |
---
## 2. Tokens Semânticos
Os tokens semânticos são os que devem ser usados na UI. Eles referenciam os primitivos e mudam de valor conforme o tema (dark/light).
**Convenção de referência:** `{color.blue.600}` = valor do primitivo `color.blue.600`
### 2.1 Backgrounds
Backgrounds da página/tela (camada mais funda da hierarquia visual).
| Token | Descrição | Dark | Light |
|---|---|---|---|
| `bg.primary` | Fundo base principal | `{color.neutral.1200}` `#0E0E0E` | `{color.neutral.300}` `#EEEEEE` |
| `bg.secondary` | Fundo elevado | `{color.neutral.1100}` `#141519` | `{color.neutral.200}` `#F5F5F5` |
| `bg.tertiary` | Fundo padrão | `{color.neutral.1000}` `#1A1A1A` | `{color.neutral.100}` `#FAFAFA` |
| `bg.inverse` | Fundo invertido | `{color.neutral.50}` `#FFFFFF` | `{color.neutral.1000}` `#1A1A1A` |
| `bg.overlay` | Fundo de overlay | `{color.neutral.600.alpha.16}` | `{color.neutral.600.alpha.32}` |
| `bg.Base alpha 0` | Transparente (base) | `{color.neutral.1200.alpha.0}` | `{color.neutral.600.alpha.0}` |
| `bg.bg-brand` | Fundo com cor de marca (azul) | `{color.blue.600}` `#3D99FF` | `{color.blue.600}` `#3D99FF` |
| `bg.bg-brand2` | Fundo de marca secundária (roxo) | `{color.purple.500}` `#6350B3` | `{color.purple.500}` `#6350B3` |
| `bg.bg-warning` | Fundo de alerta (amarelo) | `{color.yellow.700}` `#FFCC40` | `{color.yellow.700}` `#FFCC40` |
| `bg.bg-danger` | Fundo destrutivo/erro (vermelho) | `{color.red.600}` `#F34F45` | `{color.red.600}` `#F34F45` |
| `bg.bg-success` | Fundo de sucesso (verde) | `{color.green.700}` `#31DD7E` | `{color.green.700}` `#31DD7E` |
---
### 2.2 Surfaces
Superfícies de componentes (cards, inputs, modais — acima dos backgrounds).
| Token | Descrição | Dark | Light |
|---|---|---|---|
| `surface.primary` | Superfície primária | `{color.neutral.800}` `#4A4A4A` | `{color.neutral.500}` `#D2D2D2` |
| `surface.secondary` | Superfície secundária | `{color.neutral.900}` `#222222` | `{color.neutral.400}` `#E8E8E8` |
| `surface.tertiary` | Superfície terciária | `{color.neutral.1000}` `#1A1A1A` | `{color.neutral.300}` `#EEEEEE` |
| `surface.interactive` | Superfície interativa | `{color.blue.900}` `#0052CC` | `{color.blue.400}` `#84BFFF` |
| `surface.disabled` | Superfície desabilitada | `{color.neutral.1000}` `#1A1A1A` | `{color.neutral.100}` `#FAFAFA` |
| `surface.info` | Superfície informativa | `{color.blue.500.alpha.08}` | `{color.blue.500.alpha.08}` |
| `surface.error` | Superfície de erro | `{color.red.600.alpha.08}` | `{color.red.600.alpha.08}` |
| `surface.warning` | Superfície de alerta | `{color.yellow.600.alpha.08}` | `{color.yellow.600.alpha.08}` |
| `surface.success` | Superfície de sucesso | `{color.green.600.alpha.08}` | `{color.green.600.alpha.08}` |
| `surface.brand` | Superfície de marca | `{color.blue.500.alpha.16}` | `{color.blue.500.alpha.16}` |
---
### 2.3 Conteúdo (Texto)
| Token | Descrição | Dark | Light |
|---|---|---|---|
| `content.primary` | Texto principal | `{color.neutral.50}` `#FFFFFF` | `{color.neutral.1000}` `#1A1A1A` |
| `content.secondary` | Texto secundário | `{color.neutral.400}` `#E8E8E8` | `{color.neutral.900}` `#222222` |
| `content.tertiary` | Texto terciário | `{color.neutral.600}` `#A4A4A4` | `{color.neutral.800}` `#4A4A4A` |
| `content.disabled` | Texto desabilitado | `{color.neutral.800}` `#4A4A4A` | `{color.neutral.700}` `#777777` |
| `content.inverse` | Texto invertido | `{color.neutral.1000}` `#1A1A1A` | `{color.neutral.50}` `#FFFFFF` |
| `content.placeholder` | Placeholder | `{color.neutral.600}` `#A4A4A4` | `{color.neutral.700}` `#777777` |
| `content.info` | Texto informativo | `{color.blue.100}` `#E0EEFF` | `{color.blue.600}` `#3D99FF` |
| `content.warning` | Texto de alerta | `{color.yellow.600}` `#FFD35A` | `{color.yellow.800}` `#FFC500` |
| `content.error` | Texto de erro | `{color.red.600}` `#F34F45` | `{color.red.800}` `#D91B0F` |
| `content.success` | Texto de sucesso | `{color.green.600}` `#4FE290` | `{color.green.800}` `#13C870` |
| `content.brand` | Texto de marca (usar com moderação) | `{color.blue.600}` `#3D99FF` | `{color.blue.800}` `#0066FF` |
---
### 2.4 Bordas
| Token | Descrição | Dark | Light |
|---|---|---|---|
| `border.default` | Borda padrão | `{color.neutral.800}` `#4A4A4A` | `{color.neutral.600}` `#A4A4A4` |
| `border.subtle` | Borda sutil | `{color.neutral.900}` `#222222` | `{color.neutral.400}` `#E8E8E8` |
| `border.strong` | Borda forte | `{color.neutral.600}` `#A4A4A4` | `{color.neutral.500}` `#D2D2D2` |
| `border.focus` | Borda de foco | `{color.blue.500}` `#65B0FF` | `{color.blue.500}` `#65B0FF` |
| `border.disabled` | Borda desabilitada | `{color.neutral.700}` `#777777` | `{color.neutral.400}` `#E8E8E8` |
---
### 2.5 Ações
Tokens para botões e elementos interativos. Cada tipo de ação tem 4 estados: `default`, `hover`, `active`, `disabled` + variante `alpha` (fundo translúcido).
#### Brand (Azul — ação principal)
| Estado | Dark | Light |
|---|---|---|
| `action.brand.default` | `{color.blue.600}` `#3D99FF` | `{color.blue.700}` `#1E82FF` |
| `action.brand.hover` | `{color.blue.700}` `#1E82FF` | `{color.blue.800}` `#0066FF` |
| `action.brand.active` | `{color.blue.800}` `#0066FF` | `{color.blue.900}` `#0052CC` |
| `action.brand.disabled` | `{color.neutral.700}` `#777777` | `{color.neutral.300}` `#EEEEEE` |
| `action.brand.alpha` | `{color.blue.500.alpha.08}` | `{color.blue.500.alpha.08}` |
#### Brand Inverse (Azul — em fundo azul)
| Estado | Dark | Light |
|---|---|---|
| `action.brand inverse.default` | `{color.blue.800}` `#0066FF` | `{color.blue.600}` `#3D99FF` |
| `action.brand inverse.hover` | `{color.blue.700}` `#1E82FF` | `{color.blue.700}` `#1E82FF` |
| `action.brand inverse.active` | `{color.blue.900}` `#0052CC` | `{color.blue.800}` `#0066FF` |
| `action.brand inverse.disabled` | `{color.neutral.700}` `#777777` | `{color.neutral.300}` `#EEEEEE` |
| `action.brand inverse.alpha` | `{color.blue.500.alpha.08}` | `{color.blue.500.alpha.08}` |
#### Secondary (Neutro — ação secundária)
| Estado | Dark | Light |
|---|---|---|
| `action.secondary.default` | `{color.neutral.800}` `#4A4A4A` | `{color.neutral.400}` `#E8E8E8` |
| `action.secondary.hover` | `{color.neutral.700}` `#777777` | `{color.neutral.500}` `#D2D2D2` |
| `action.secondary.active` | `{color.neutral.600}` `#A4A4A4` | `{color.neutral.600}` `#A4A4A4` |
| `action.secondary.disabled` | `{color.neutral.1000}` `#1A1A1A` | `{color.neutral.100}` `#FAFAFA` |
| `action.secondary.alpha` | `{color.neutral.600.alpha.0}` | `{color.neutral.600.alpha.0}` |
#### Tertiary (Roxo — ação terciária/especial)
| Estado | Dark | Light |
|---|---|---|
| `action.tertiary.default` | `{color.purple.600}` `#50418E` | `{color.purple.700}` `#3E3467` |
| `action.tertiary.hover` | `{color.purple.700}` `#3E3467` | `{color.purple.800}` `#2A2542` |
| `action.tertiary.active` | `{color.purple.800}` `#2A2542` | `{color.purple.900}` `#161320` |
| `action.tertiary.disabled` | `{color.neutral.700}` `#777777` | `{color.neutral.300}` `#EEEEEE` |
| `action.tertiary.alpha` | `{color.purple.500.alpha.08}` | `{color.purple.500.alpha.08}` |
#### Destructive (Laranja — ação destrutiva/aviso)
| Estado | Dark | Light |
|---|---|---|
| `action.destructive.default` | `{color.orange.600}` `#EA580C` | `{color.orange.700}` `#C2410C` |
| `action.destructive.hover` | `{color.orange.700}` `#C2410C` | `{color.orange.800}` `#9A3412` |
| `action.destructive.active` | `{color.orange.800}` `#9A3412` | `{color.orange.900}` `#7C2D12` |
| `action.destructive.disabled` | `{color.neutral.700}` `#777777` | `{color.neutral.300}` `#EEEEEE` |
| `action.destructive.alpha` | `{color.orange.600.alpha.08}` | `{color.orange.600.alpha.08}` |
---
### 2.6 Contexto de Trading
Tokens específicos para elementos de trading (charts, posições, preços).
#### Gráfico (Candlesticks)
| Token | Dark | Light |
|---|---|---|
| `context.chart.candles.up` | `{color.green.600}` `#4FE290` | `{color.green.900}` `#0B9E5C` |
| `context.chart.candles.down` | `{color.red.600}` `#F34F45` | `{color.red.800}` `#D91B0F` |
#### Preços (Ask/Bid)
| Token | Descrição | Dark | Light |
|---|---|---|---|
| `context.trading.up` | Bid (compra) | `{color.green.600}` `#4FE290` | `{color.green.800}` `#13C870` |
| `context.trading.up-alpha` | Bid fundo translúcido | `{color.green.600.alpha.16}` | `{color.green.600.alpha.32}` |
| `context.trading.down` | Ask (venda) | `{color.red.600}` `#F34F45` | `{color.red.800}` `#D91B0F` |
| `context.trading.down-alpha` | Ask fundo translúcido | `{color.red.600.alpha.16}` | `{color.red.600.alpha.32}` |
#### Posição Long (Compra)
| Token | Dark | Light |
|---|---|---|
| `context.trading.long.text` | `{color.green.500}` `#6DE7A2` | `{color.green.900}` `#0B9E5C` |
| `context.trading.long.default` | `{color.green.600.alpha.08}` | `{color.green.600.alpha.12}` |
| `context.trading.long.hover` | `{color.green.600.alpha.16}` | `{color.green.600.alpha.32}` |
| `context.trading.long.active` | `{color.green.600.alpha.32}` | `{color.green.600.alpha.40}` |
#### Posição Short (Venda)
| Token | Dark | Light |
|---|---|---|
| `context.trading.short.text` | `{color.red.500}` `#F56D64` | `{color.red.800}` `#D91B0F` |
| `context.trading.short.default` | `{color.red.600.alpha.08}` | `{color.red.600.alpha.12}` |
| `context.trading.short.hover` | `{color.red.600.alpha.16}` | `{color.red.600.alpha.32}` |
| `context.trading.short.active` | `{color.red.600.alpha.32}` | `{color.red.600.alpha.40}` |
#### Stop Loss
| Token | Dark | Light |
|---|---|---|
| `context.trading.stop.default` | `{color.orange.500}` `#F97316` | `{color.orange.500}` `#F97316` |
| `context.trading.stop.hover` | `{color.orange.600}` `#EA580C` | `{color.orange.600}` `#EA580C` |
| `context.trading.stop.active` | `{color.orange.700}` `#C2410C` | `{color.orange.700}` `#C2410C` |
| `context.trading.stop.stop-alpha` | `{color.orange.600.alpha.08}` | `{color.orange.600.alpha.08}` |
---
## 3. Scale — Responsivo
Tokens que mudam de valor conforme a plataforma (Desktop vs Mobile). Use sempre o token de scale, nunca o primitivo `space.*` diretamente na UI.
### 3.1 Espaçamentos por Plataforma
| Token | Desktop | Mobile |
|---|---|---|
| `scale.spacing.xs` | `4px` | `8px` |
| `scale.spacing.sm` | `8px` | `12px` |
| `scale.spacing.md` | `12px` | `16px` |
| `scale.spacing.lg` | `16px` | `20px` |
| `scale.spacing.xl` | `20px` | `24px` |
| `scale.spacing.2xl` | `24px` | `32px` |
| `scale.spacing.3xl` | `32px` | `40px` |
| `scale.spacing.3xl 2` | `40px` | `40px` |
| `scale.spacing.3xl 3` | `48px` | `40px` |
| `scale.spacing.3xl 4` | `56px` | `40px` |
| `scale.spacing.3xl 5` | `64px` | `40px` |
| `scale.spacing.3xl 6` | `80px` | `40px` |
| `scale.spacing.3xl 7` | `96px` | `40px` |
> **Nota:** Os tokens `3xl 2` a `3xl 7` são variações de espaçamentos grandes que no mobile todos colapsam para `40px`.
### 3.2 Border Radius por Plataforma
| Token | Desktop | Mobile |
|---|---|---|
| `scale.radius.none` | `0px` | `0px` |
| `scale.radius.xs` | `2px` | `4px` |
| `scale.radius.sm` | `4px` | `8px` |
| `scale.radius.md` | `8px` | `12px` |
| `scale.radius.lg` | `16px` | `20px` |
| `scale.radius.xl` | `20px` | `24px` |
| `scale.radius.full` | `9999px` | `9999px` |
---
## 4. Tipografia
### Escala Tipográfica
Todos os estilos de texto resolvidos com valores concretos.
| Token | Fonte | Tamanho | Peso | Letter Spacing |
|---|---|---|---|---|
| `text.display.lg` | Space Grotesk | `48px` | `700 bold` | `-0.8px` |
| `text.display.md` | Space Grotesk | `40px` | `700 bold` | `-0.8px` |
| `text.heading.xl` | Space Grotesk | `32px` | `700 bold` | `0px` |
| `text.heading.lg` | Space Grotesk | `28px` | `600 semibold` | `0px` |
| `text.heading.md` | Space Grotesk | `24px` | `600 semibold` | `0px` |
| `text.body.lg` | Inter | `16px` | `500 medium` | `-0.8px` |
| `text.body.md` | Inter | `14px` | `400 regular` | `0px` |
| `text.body.sm` | Inter | `12px` | `500 medium` | `0.2px` |
| `text.label.md` | Inter | `16px` | `600 semibold` | `0px` |
| `text.label.sm` | Inter | `14px` | `600 semibold` | `0px` |
### Regras de uso
- **Display:** Títulos de páginas, heroes, números grandes (ex: preços em destaque)
- **Heading:** Títulos de seções e cards (Space Grotesk)
- **Body:** Texto de leitura, descrições, conteúdo geral (Inter)
- **Label:** Rótulos de campos, badges, botões, tags (Inter)
- **Mono (Roboto Mono):** Preços, pares de moedas, timestamps, código
---
## 5. Padrões de Layout
Padrões extraídos da tela `1920 cripto derivativos` — a tela principal da plataforma de trading desktop (1918×1079px).
---
### 5.1 Tela Desktop — Plataforma de Trading
**Tela:** `1920 cripto derivativos` (ID: `470:30661`)
**Resolução de referência:** `1918×1079px`
#### Estrutura geral
```
┌──────────────────────────────────────────────────── 1918px ────────────────────────────────────────────────────┐
│ HeaderDesktop (40px altura, full-width) │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│ 337px │ 2px │ flex (min-width: 800px) │ 2px │ 357px │
│ Coluna 1 │ gap │ Coluna 2 │ gap │ Coluna 3 │
│ (fixa) │ │ (cresce para preencher) │ │ (fixa) │
│ │ │ │ │ │
│ Painel │ │ ┌───────────┐ Gráfico │ │ Controle de ordens │
│ de cotações │ │ │ Menu │ (principal) │ │ (Boletas) │
│ (358px h) │ │ │ lateral │ │ │ │
│ │ │ │ (sidebar) │ │ │ │
│ Volume │ │ └───────────┘ │ │ Ordens / │
│ (livro de │ │ │ │ Notícias │
│ ordens) │ │ Volume (histogram) │ │ (565px h) │
│ (restante) │ │ │ │ │
└──────────────────┴───────┴─────────────────────────────┴───────┴─────────────────────────────────────────────────┘
```
#### Dimensões das colunas
| Coluna | Largura | Altura | Comportamento | Conteúdo |
|---|---|---|---|---|
| Coluna 1 | `337px` | `1022px` | Fixa | Painel de cotações + Volume/Livro de ordens |
| Coluna 2 | `flex` (`min-w: 800px`) | `1022px` | Crescimento flexível | Gráfico principal + Menu lateral |
| Coluna 3 | `357px` | `1022px` | Fixa | Controle de ordens + Ordens/Notícias |
#### Tokens de layout
| Propriedade | Token | Valor |
|---|---|---|
| Background geral | `bg.primary` | `#0E0E0E` |
| Gap entre janelas | `--item-spacing/window-space` | `2px` |
| Altura header | — | `40px` |
| Altura conteúdo | — | `1022px` (total 1079 - header 40 - gaps) |
---
### 5.2 Padrão de Janela (janela)
Toda área de conteúdo da plataforma é encapsulada em um **janela** — o container padrão reutilizável.
#### Anatomia
```
┌─ janela ──────────────────────────────────────────────────────┐
│ header-window (tabs + ações) │
├───────────────────────────────────────────────────────────────┤
│ │
│ Conteúdo (componente específico) │
│ │
└───────────────────────────────────────────────────────────────┘
```
#### Tokens da janela
| Propriedade | Token | Valor |
|---|---|---|
| Background | `bg.secondary` | `#141519` |
| Borda | `border.default` | `#4A4A4A` |
| Border radius | — | `4px` |
| Border style | `1px solid` | — |
#### Janelas observadas na tela principal
| Janela | Coluna | Altura | Conteúdo |
|---|---|---|---|
| Painel de cotações | 1 | `358px` | Cotações + Volume |
| Livro de ordens | 1 | restante (`~660px`) | AskRow, LastPriceRow, Combo input |
| Gráfico principal | 2 | flex | Sidebar + Gráfico + Volume histogram |
| Controle de ordens | 3 | flex | Boletas / Painel de negociações |
| Ordens / Notícias | 3 | `565px` | Ordens abertas + Feed de notícias |
---
### 5.3 Header de Janela (header-window)
Toda janela tem um `header-window` no topo com o seguinte padrão:
#### Estrutura do header-window
```
┌─ header-window ──────────────────────────────────────────────────┐
│ [Tab ativa ▼][Tab 2][Tab 3] [···] [🔗] [Multi ▼] [···] │
│ ↑ │
│ underline azul 2px │
└──────────────────────────────────────────────────────────────────┘
```
#### Tokens do header-window
| Elemento | Token | Valor |
|---|---|---|
| Background | `bg.secondary` | `#141519` |
| Borda inferior | `border.subtle` | `#222` |
| Tab ativa — texto | `content.primary` | `#FFFFFF` |
| Tab ativa — indicador | `action.brand.default` | `#3D99FF` (2px bottom) |
| Tab inativa — texto | `content.tertiary` | `#A4A4A4` |
| Padding tab | `scale.spacing.sm` H + `scale.spacing.md` V | `8px` + `12px` |
| Ícone more_horiz | `content.tertiary` | `#A4A4A4` |
#### Elementos opcionais no header-window
- **Dropdown mercados** — seletor de ativo linkado à janela
- **Link icon** — `🔗` indicando janela sincronizada com outra
- **Multi dropdown** — modo de exibição (Multi / Solo)
- **more_horiz** — menu de opções da janela
---
### 5.4 Padrão de Abas dentro de Janela
As abas horizontais dentro das janelas seguem o padrão do componente `abas` (ID `253:2861`):
#### Regras
1. **Aba ativa:** background `action.secondary.default` (`#4A4A4A`), texto `content.primary`, radius `16px`
2. **Aba inativa:** background `surface.secondary` (`#222`), texto `content.tertiary`, radius `16px`
3. **Barra de abas:** background `bg.tertiary` (`#1A1A1A`), borda inferior `border.subtle` (`#222`), padding `8px`
4. **Indicador alternativo** (no header-window): linha de `2px` na cor `action.brand.default` na parte inferior da tab ativa — sem background no botão
> **Atenção:** Há dois padrões de tab no sistema:
> - **Dentro de janelas** (`header-window`): usa linha de 2px no fundo, sem fundo no botão
> - **Dentro de modais/painéis** (`abas`/`Segmented Control`): usa background arredondado no botão ativo
---
### 5.5 Telas da Plataforma — Variantes
A tela analisada (`1920 cripto derivativos`) é uma das variantes da plataforma. O menu de navegação principal (`hellobar`) indica as seções disponíveis:
| Seção | Descrição |
|---|---|
| **Gráfico** | Visualização de charts (tela analisada) |
| **Book e Cotações** | Livro de ofertas e painel de cotações expandido |
| **Operação** | Gestão de posições e ordens abertas |
| **Ferramentas** | Ferramentas de análise e configurações |
| **Analistas** | Conteúdo de analistas e sinais |
Cada seção reorganiza as janelas nas 3 colunas, mas mantém a mesma estrutura de grid e o padrão `janela`.
---
## 6. Site Institucional
Análise da Homepage do site TRDR (`2273:53009` — 1920×3378px), que usa o mesmo design system da plataforma mas introduz tokens de **branding e marketing** não formalizados no xlsx.
---
### 6.1 Estrutura do Site
#### Página: Homepage
```
┌─ Header (72px) ──────────────────────────────────────────── 1920px ──┐
│ Logo │ Gráfico · Book · Operação · Ferramentas · Analistas [CTA] │
├──────────────────────────────────────────────────────────────────────┤
│ Hero (1920 × 1206px) │
│ Gradient bg azul→preto + mockup mobile + screenshot desktop │
│ Headline H-1 · Subtitle · CTA button · Social proof │
├──────────────────────────────────────────────────────────────────────┤
│ Seção 4 (1920 × 791px) — imagem à esquerda, texto à direita │
│ Badge pill · Headline H-2 com gradient · Features · CTA │
├──────────────────────────────────────────────────────────────────────┤
│ Seção 2 (1920 × 657px) — texto à esquerda, imagem à direita │
│ Badge pill · Headline H-2 com gradient · CTA │
├──────────────────────────────────────────────────────────────────────┤
│ Seção 3 (1920 × 652px) — full-width bg image, texto à direita │
│ Badge pill · Headline H-2 com gradient · Body · CTA │
└──────────────────────────────────────────────────────────────────────┘
```
#### Layout grid do conteúdo
| Propriedade | Valor |
|---|---|
| Largura total | `1920px` |
| Max-width conteúdo | `1312px` (centralizado) |
| Max-width header | `1600px` (centralizado) |
| Padding horizontal padrão | `16px` (`scale.spacing.lg`) |
| Padding vertical seções | `96px` (`scale.spacing.3xl-7`) |
| Gap entre colunas internas | `32px` (`scale.spacing.3xl`) |
| Altura do header | `72px` total (`56px` nav + `8px` padding top/bottom) |
---
### 6.2 Tipografia do Site
O site usa uma escala tipográfica **maior e mais impactante** do que a plataforma, voltada para leitura em tela larga e impacto de branding.
> Estes estilos **não estão no xlsx** — são tokens implícitos do site.
#### Escala tipográfica do site
| Estilo | Fonte | Tamanho | Peso | Line-height | Uso |
|---|---|---|---|---|---|
| `site.heading.h1` | Space Grotesk | `80px` | `500 medium` | `1.1` | Hero principal |
| `site.heading.h2` | Space Grotesk | `56px` | `500 medium` | `1.1` | Headings de seção |
| `site.body.lg` | Inter | `18px` | `400 regular` | `1.4` | Parágrafos, subtítulos |
| `site.label.cta` | Inter | `16px` | `600 semibold` | `1.1` | Botões CTA do site |
| `site.nav.item` | Inter | `14px` | `400 regular` | `16px` | Itens de navegação |
| `site.badge` | Inter | `18px` | `400 regular` | `1.4` | Texto das badge pills |
#### Comparativo site vs plataforma
| Elemento | Plataforma | Site |
|---|---|---|
| Heading principal | `text.display.lg` 48px bold | `site.heading.h1` 80px medium |
| Heading seção | `text.heading.xl` 32px bold | `site.heading.h2` 56px medium |
| Corpo | `text.body.md` 14px regular | `site.body.lg` 18px regular |
| Botão CTA | `text.label.sm` 14px semibold | `site.label.cta` 16px semibold |
> **Regra:** Use a tipografia da plataforma para UI funcional. Use a tipografia do site para conteúdo editorial, marketing e landing pages.
---
### 6.3 Gradientes de Branding
Os gradientes são o principal recurso visual diferenciador do site. Não existem como tokens formalizados — são padrões de uso recorrentes.
#### Gradiente 1 — Texto em destaque (Brand → Branco)
Usado para palavras-chave nos headings H-1 e H-2. Aplicado como `background-clip: text`.
```css
/* Variante padrão — começa no azul */
background: linear-gradient(90deg, #3D99FF 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Variante Hero — azul começa em 30% */
background: linear-gradient(90deg, #3D99FF 30%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
```
| Variante | Cor inicial | Posição | Cor final | Uso |
|---|---|---|---|---|
| Padrão | `color.blue.600` `#3D99FF` | `0%` | `#FFFFFF` | Seção 4, 2, 3 — heading H-2 |
| Hero | `color.blue.600` `#3D99FF` | `30%` | `#FFFFFF` | Hero — "nova era" |
#### Gradiente 2 — Background do Hero (Azul → Preto, vertical)
Fundo da seção Hero. Vai do azul escuro da marca ao preto do `bg.primary`.
```css
background: linear-gradient(
to bottom,
var(--surface/interactive) /* #0052CC */,
var(--bg/primary) /* #0E0E0E */ 39.9%
);
```
| Posição | Cor | Token |
|---|---|---|
| `0%` | `#0052CC` | `surface.interactive` (dark) |
| `~40%` | `#0E0E0E` | `bg.primary` |
#### Gradiente 3 — Fade de imagem (Transparente → Preto, vertical)
Aplicado sobre imagens/screenshots para fazer fade out suave na borda inferior.
```css
background: linear-gradient(
to bottom,
rgba(14, 14, 14, 0) /* bg.base-alpha-0 */,
#0E0E0E /* bg.primary */ 46.9%
);
height: 758px;
```
---
### 6.4 Componentes Exclusivos do Site
#### Badge Pill (Etiqueta de seção)
Pequeno rótulo acima de cada heading de seção para contextualizar o assunto.
```
╭─────────────────────────────────────╮
│ Ferramentas de negociação intuitivas │
╰─────────────────────────────────────╯
```
| Propriedade | Token | Valor |
|---|---|---|
| Background | transparente | — |
| Borda | `border.focus` | `#65B0FF` `1px solid` |
| Radius | `scale.spacing.3xl` | `32px` |
| Padding H | `scale.spacing.2xl` | `24px` |
| Padding V | `scale.spacing.lg` | `16px` |
| Fonte | Inter Regular | `18px` |
| Cor texto | `content.primary` | `#FFFFFF` |
> Nota: usa `border.focus` (#65B0FF) — o mesmo token de foco dos inputs — como cor de destaque para o badge. Cria coerência visual com o azul da marca.
#### CTA Button (Site)
Versão maior do botão para uso em landing pages. Mesmo visual do `action.brand inverse.default` mas com mais padding e font-size maior.
| Propriedade | Token | Valor |
|---|---|---|
| Background | `action.brand inverse.default` | `#0066FF` |
| Borda | `0.5px solid action.brand inverse.default` | `#0066FF` |
| Radius | `scale.spacing.sm` | `8px` |
| Padding H | `scale.spacing.xl` | `20px` |
| Padding V | `scale.spacing.lg` | `16px` |
| Min-width | — | `250px` |
| Fonte | Inter SemiBold | `16px` (`site.label.cta`) |
| Cor texto | `content.primary` | `#FFFFFF` |
#### Feature Item (ícone + label)
Pequeno item de feature com ícone e texto, usado em listas de benefícios.
```
[🖥️ 32px] Múltiplas telas
```
| Propriedade | Valor |
|---|---|
| Ícone | `32×32px` (material icon colorido) |
| Gap | `8px` |
| Padding | `8px` |
| Fonte texto | Inter Regular `18px` |
| Cor texto | `content.secondary` (`#E8E8E8`) |
#### Header de Navegação do Site
| Elemento | Token | Valor |
|---|---|---|
| Background | `bg.primary` | `#0E0E0E` |
| Altura total | — | `72px` |
| Altura nav | — | `56px` |
| Max-width | — | `1600px` |
| Divider logo/nav | `border.subtle` | `#222` `1px`, altura `18px` |
| Item nav: ícone | — | `24×24px` |
| Item nav: gap | — | `4px` |
| Item nav: padding H | — | `8px` |
| Item nav: fonte | Inter Regular `14px` | `content.tertiary` |
| Search input bg | `surface.primary` | `#4A4A4A`, altura `32px`, radius `5px` |
| CTA "Criar conta" | `action.brand inverse.default` | padding `16px` H · `12px` V, radius `8px` |
#### Layout de Seção (padrão de cada seção do site)
Todas as seções seguem o mesmo padrão de grid de 2 colunas com alternância de conteúdo/imagem:
```
┌──────────────────────────────────── max-w: 1312px ───────────────────────────────────┐
│ padding: 96px vertical · 16px horizontal │
│ │
│ ┌─────────────────────────────┐ ┌──────────────────────────────────────────┐ │
│ │ Coluna Imagem │ │ Coluna Texto │ │
│ │ (flex: 1) │ │ (flex: 1) │ │
│ │ mockup / screenshot / foto │ │ Badge pill │ │
│ │ │ │ Heading H-2 com gradient │ │
│ │ │ │ Features (opcional) │ │
│ │ │ │ Body (opcional) │ │
│ │ │ │ CTA Button │ │
│ └─────────────────────────────┘ └──────────────────────────────────────────┘ │
│ │
└───────────────────────────────────────────────────────────────────────────────────────┘
```
A posição das colunas alterna (imagem-texto / texto-imagem) entre seções para criar ritmo visual.
---
### 6.5 Tokens Não Formalizados
Lista de tokens implícitos identificados no site que **não existem no xlsx** mas são usados de forma consistente.
#### Tipografia
| Nome sugerido | Valor | Onde aparece |
|---|---|---|
| `site.heading.h1` | Space Grotesk 500, 80px, lh 1.1 | Hero heading |
| `site.heading.h2` | Space Grotesk 500, 56px, lh 1.1 | Section headings |
| `site.body.lg` | Inter 400, 18px, lh 1.4 | Parágrafos do site |
| `site.label.cta` | Inter 600, 16px, lh 1.1 | Botões CTA |
#### Gradientes
| Nome sugerido | Valor |
|---|---|
| `gradient.text.brand` | `linear-gradient(90deg, #3D99FF 0%, #FFFFFF 100%)` |
| `gradient.text.brand.hero` | `linear-gradient(90deg, #3D99FF 30%, #FFFFFF 100%)` |
| `gradient.bg.hero` | `linear-gradient(180deg, #0052CC 0%, #0E0E0E 40%)` |
| `gradient.bg.fade` | `linear-gradient(180deg, rgba(14,14,14,0) 0%, #0E0E0E 47%)` |
#### Layout
| Nome sugerido | Valor | Onde aparece |
|---|---|---|
| `site.content.max-width` | `1312px` | Max-width do conteúdo de seções |
| `site.header.max-width` | `1600px` | Max-width do header |
| `site.section.padding-v` | `96px` | Padding vertical padrão de seções |
| `site.section.gap` | `32px` | Gap entre colunas internas |
---
## 7. Software Desktop — App Launcher TRDR
Tela analisada: `Operar` (`1124:25168`) — app desktop TRDR que gerencia múltiplas plataformas de trading. Dimensões: **1549×944px**.
Este é um produto separado da plataforma de trading — um launcher/hub desktop com shell própria.
### 7.1 Shell do App Desktop
#### Estrutura geral
```
bg/tertiary #1A1A1A (fundo base do app)
├── Header-desktop 56px — bg/primary #0E0E0E
├── Content 840px — layout 2 colunas
│ ├── Sidebar 320px — border/subtle direita
│ └── Main flex-1 (1229px)
│ ├── Hero 364px — imagem + gradiente
│ └── Painel 468px — Pill tabs + card de info
└── Footer 48px — bg/primary #0E0E0E, border/subtle top
```
**Novo token identificado:**
| Token | Valor | Uso |
|---|---|---|
| `bg/tertiary` | `#1A1A1A` | Fundo principal do app desktop launcher |
| `bg/base-alpha-0` | `rgba(14,14,14,0)` | Versão transparente do bg.primary (usado em gradientes) |
---
### 7.2 Header Desktop do App
Header da janela do app (diferente do `header-window` da plataforma de trading).
| Propriedade | Valor |
|---|---|
| Altura | `56px` |
| Background | `bg/primary` (`#0E0E0E`) |
| Padding horizontal | `scale/spacing/lg` (`16px`) |
| Padding vertical | `scale/spacing/sm` (`8px`) |
#### Anatomia
```
[Logo TRDR 69px] [divider] [Nav items — gap 16px] → → → [Conexões btn] [divider] [Win controls]
```
**Logo:** SVG `trdr`, 69×24.84px
**Divider vertical:** `border/subtle` (#222), altura 18px, largura 1px
**Nav items:**
- Gap entre items: `16px`
- Cada item: ícone 24px + label Inter Regular 14px `content/tertiary`
- Padding horizontal por item: `8px`
- Item ativo: sem marcador visual nesta tela (page-level indication)
**Botão Conexões (direita):**
- Altura: `32px`, radius `6px`
- Gap: `8px` (ícone wifi 24px + texto)
- Texto: Inter Regular 14px, `content/primary`
**Controles de janela (Windows):**
- Gap entre botões: `scale/spacing/3xl` (`32px`)
- Tamanho de cada ícone: `18×18px`
- Separados do resto por: divider vertical `border/subtle` 18px
---
### 7.3 Sidebar de Plataformas
| Propriedade | Valor |
|---|---|
| Largura | `320px` |
| Altura | `840px` (full content height) |
| Border | `border/subtle` (`#222`) — lado direito |
| Padding | `16px` top + horizontal |
#### Título da seção
Inter Regular 18px, `content/primary`, lh 1.4
#### Platform Card
Lista de plataformas disponíveis. Cada card:
| Propriedade | Valor |
|---|---|
| Largura | `287px` |
| Altura | `74px` |
| Radius | `8px` |
| Padding | `12px` todos os lados |
| Gap interno | `12px` (icon container → text) |
| Gap entre cards | `8px` |
| Estado ativo (selecionado) | `surface/secondary` (`#222`) de fundo |
| Estado inativo | sem fundo |
**Icon container (48×48px, radius 4px):**
| Tipo de plataforma | Background |
|---|---|
| Plataforma TRDR (nativa) | `rgba(61,153,255,0.1)` — tint azul de `action.brand` |
| Plataforma de terceiros | `action/secondary/default` (`#4A4A4A`) — cinza neutro |
**Text area (203×50px):**
- Nome: Inter Medium 16px (`text/body/lg/size+weight`), `content/primary`
- Badge de status: 22×22px, radius 6px, px 8px, py 2px, Inter Medium 12px
**Variantes do status badge:**
| Estado | Background | Texto | Token de cor |
|---|---|---|---|
| Instalado (plataforma TRDR) | `surface/success` `rgba(79,226,144,0.08)` | `#4FE290` | `content/success` |
| Disponível | `surface/brand` `rgba(0,82,204,0.16)` | `#3D99FF` | `content/brand` |
| Instalado (3ª parte) | `rgba(255,255,255,0.08)` | branco | `content/primary` |
---
### 7.4 Hero da Plataforma
Área de destaque da plataforma selecionada (imagem de preview + informações).
| Propriedade | Valor |
|---|---|
| Altura | `364px` |
| Largura | `flex-1` (1229px nesta tela) |
| Overflow | `hidden` |
| Padding | `24px` (`scale/spacing/2xl`) |
#### Camadas (de baixo para cima)
1. **Imagem de background** — screenshot da plataforma, posição full-bleed
2. **Gradiente overlay** — fade vertical de cima para baixo:
```css
background: linear-gradient(to top,
var(--bg/primary) /* #0E0E0E — opaco na base */,
var(--bg/base-alpha-0) /* rgba(14,14,14,0) — transparente no topo */
);
```
3. **Conteúdo** — ancorado na borda inferior (flex-col end, gap 12px):
- **Nome da plataforma:** Inter Regular 18px, branco, lh 1.4
- **Descrição:** Inter Medium 12px (`font/family/secondary`), `rgba(255,255,255,0.7)`, lh 1.2, tracking 0.2px
- **Ações** (gap 16px):
- CTA principal `OPERAR`: `action/brand/default` bg, 40px altura, radius 6px, ~112px largura
- Ícone `play_arrow` 24px — posição absoluta, left 12px, top 8px
- Label Inter SemiBold 14px (`text/label/sm`), `content/inverse` (#1A1A1A), left 40px, top 12px
- Botão Settings: `surface/primary` (`#4A4A4A`) bg, 40×48px, radius 6px, ícone settings 24px centralizado
---
### 7.5 Pill Tabs (Terceiro estilo de abas)
Estilo de aba em pílula — **diferente** dos dois estilos da plataforma (bottom-border tabs e abas component). Usado para alternar entre painéis de conteúdo dentro do app launcher.
| Propriedade | Valor |
|---|---|
| Container background | `surface/secondary` (`#222`) |
| Container border | `border/subtle` (`#222`) 1px |
| Container radius | `16px` (`scale/spacing/lg`) |
| Container padding | `1px` |
| Gap entre tabs | `8px` |
| Aba ativa — bg | `action/brand/default` (`#3D99FF`) |
| Aba ativa — texto | `content/inverse` (`#1A1A1A`) |
| Aba ativa — radius | `16px` |
| Aba inativa — texto | `content/tertiary` (`#A4A4A4`) |
| Aba inativa — radius | `12px` |
| Texto | Inter Regular 14px, lh 1.2 |
| Padding por tab | `8px` todos os lados |
> **Resumo dos 3 estilos de abas TRDR:**
> 1. **bottom-border** (header-window) — 2px border bottom `action.brand.default` na aba ativa, sem fundo
> 2. **abas** (component) — aba ativa com fundo `action.secondary.default`
> 3. **pill** (app launcher) — container arredondado, aba ativa com fundo `action.brand.default` colorido
---
### 7.6 Activity Card
Card de informações de atividade do usuário na plataforma.
| Propriedade | Valor |
|---|---|
| Background | `surface/secondary` (`#222`) |
| Border | `border/subtle` (`#222`) 1px |
| Radius | `16px` |
| Padding | `25px` horizontal e top, `1px` bottom |
| Gap entre título e rows | `16px` |
**Heading:** Inter Medium 16px (`text/body/lg`), `content/primary`, lh 1.2
**Activity rows** (flex, items-center, gap 12px por row, gap 12px entre rows):
- Ícone: `20×20px` (menor que os 24px da plataforma de trading)
- Texto: Inter Regular 14px, `content/tertiary` (`#A4A4A4`), lh 1.2
---
### 7.7 Footer do App Desktop
| Propriedade | Valor |
|---|---|
| Altura | `48px` |
| Background | `bg/primary` (`#0E0E0E`) |
| Border top | `border/subtle` (`#222`) |
| Padding | `16px` horizontal, alinhamento à direita |
**Conteúdo (da esquerda para a direita, right-aligned):**
- **Central de Ajuda:** ícone 16px + Inter Medium 14px `content/primary`, lh 20px
- **Separador:** `border/subtle` 1px × 16px
- **Versão:** ícone 16px + Inter Medium 12px `content/tertiary`, tracking 0.2px
Gap entre grupos: `scale/spacing/md` (`12px`)
---
### 7.8 Nav de Seções do App
Itens de navegação de primeiro nível do app launcher:
| Seção | Ícone |
|---|---|
| Plataformas | `chart_data` |
| Minha conta | `desktop_windows` |
| Central de ajuda | `candlestick_chart` |
| Performance | `database` |
| Educacional | `speed` |
> Ícones são Material Icons adaptados para o design system.
---
## 8. Componentes
Documentação dos 82 componentes construídos no Figma, extraídos via MCP em 2026-04-07.
### 5.1 Inventário de Componentes
#### Formulário / Controles
| Componente | ID Figma | Descrição |
|---|---|---|
| `Button` | `1318:749` | Botão com 10 variantes |
| `Text input` | `1327:17000` | Campo de texto com 3 variantes |
| `Dropdown` | `1462:16743` | Seletor com chevron |
| `Combo input` | `1551:11643` | Input + dropdown chevron combinados |
| `Checkbox` | `1462:18059` | Caixa de seleção com estados mixed |
| `Radio button` | `1916:46361` | Botão de seleção única |
| `Switch` | `1359:1740` | Toggle on/off/mixed |
| `Segmented control` | `1655:25490` | Controle de abas compacto (2–6 tabs) |
| `Tooltip` | `1618:23706` | Balão de ajuda contextual |
| `Labels` | `1318:722` | Labels de campo |
| `_Segment label` | `1660:25838` | Label interno do segmented control |
| `LabeledComboInput` | `1973:94124` | Combo input com label |
| `ColorPickerRow` | `1973:94117` | Linha de seleção de cor |
#### Modais / Overlays
| Componente | ID Figma | Descrição |
|---|---|---|
| `Modal` | `1959:70722` | Modal com footer Standard ou Destructive, com/sem abas |
| `Notifications` | `1926:58501` | Painel de notificações |
| `Confirmações de execução` | `2161:35731` | Confirmação de ordens |
| `TP/SL Config` | `2161:35783` | Configuração Take Profit / Stop Loss |
#### Navegação
| Componente | ID Figma | Dimensões | Descrição |
|---|---|---|---|
| `header-window` | `243:3344` | 476×41px | Header interno de janela |
| `hellobar` | `3:773` | 1920×46px | Barra superior global |
| `Header-desktop` | `1921:55292` | 390×56px | Header principal desktop |
| `abas` | `253:2861` | 476×45px | Barra de abas horizontal |
| `SidebarIcon` | `1630:24282` | 64×24px | Ícone de sidebar (Default/Hover/Active) |
| `Sub-menu Item` | `1886:20967` | 236×32px | Item de sub-menu (Default/Hover/Pressed) |
| `menu-lateral` | `1875:20372` | 48×974px | Menu lateral completo (5 variantes) |
| `Link` | `2161:33773` | 24×24px | Link padrão e ativo |
| `janela` | `1909:41600` | 1709×1168px | Container de janela flutuante completa |
#### Floating Menus
| Componente | ID Figma | Dimensões |
|---|---|---|
| `floating-menu-open-itens` | `2147:24092` | 163×120px |
| `floating-menu-color-picker` | `2147:24091` | 160×175px |
| `floating-menu-mercados` | `2147:24090` | 147×207px |
| `floating-menu-more-horiz` | `2147:24089` | 172×192px |
| `floating-menu-conexoes` | `1921:55384` | 260×305px |
| `floating-menu-configuracoes` | `1921:55382` | 260×239px |
| `floating-menu-tipo-grafico` | `1923:56275` | 200×210px |
| `floating-menu-layouts` | `1921:55383` | 240×215px |
| `floating-menu-indicadores` | `1923:56276` | 240×323px |
| `floating-menu-seletor-ativo` | `1923:56277` | — |
| `floating-menu-meu-perfil` | `1921:55381` | — |
| `floating-menu-notificacoes` | `1921:55380` | — |
| `floating-menu-pesquisa` | `1921:55379` | — |
| `floating-menu-destino-ordem` | `1916:45706` | — |
| `floating-menu-alavancagem` | `1916:47383` | — |
| `floating-menu-estrategia` | `1915:45282` | — |
| `floating-menu-quantidade-settings` | `1916:45945` | — |
| `floating-menu-modo-ativo` | `1916:45947` | — |
| `floating-menu-tipo-margem` | `1916:45944` | — |
| `floating-menu-disponivel` | `1916:45410` | — |
| `floating-menu-tempo-validade` | `1916:45948` | — |
| `sub-menu Ferramentas` | `2150:30594` | — |
| `sub-menu Book e Cotações` | `2150:30592` | — |
| `sub-menu Operação` | `2150:30593` | — |
| `sub-menu Analistas` | `2150:30595` | — |
#### Trading
| Componente | ID Figma | Descrição |
|---|---|---|
| `Gráfico` | `1923:56349` | Área do gráfico principal |
| `Paindel de negociações (Boletas)` | `1916:47370` | Painel de ordens/boletas |
| `Comprar` | `856:20742` | Botão/painel de compra |
| `Vender` | `856:20743` | Botão/painel de venda |
| `Volume` | `266:7525` | Exibição de volume |
| `Ordens` | `336:3114` | Lista de ordens |
| `Resultado-Row` | `2168:50415` | Linha de resultado |
| `Dropdown-Resultado-do-Dia` | `2168:50482` | Dropdown resultado positivo/negativo |
| `List` | `2150:28676` | Lista genérica |
| `DataTable` | `1973:94151` | Tabela de dados |
| `DataTableRow` | `1973:94150` | Linha de tabela |
| `GridSaidaRow` | `1973:95100` | Linha de grid de saída |
| `SectionHeader` | `1973:94119` | Header de seção |
| `Container` | `856:20717` | Container genérico |
| `conjunto` | `856:20709` | Agrupamento de elementos |
#### Painéis de Configuração
| Componente | ID Figma | Descrição |
|---|---|---|
| `Content_GraficoGeral` | `1973:94390` | Config geral do gráfico |
| `Content_Estrategias` | `1973:95266` | Config de estratégias |
| `Content_GraficoTrade` | `1973:94706` | Config gráfico de trade |
| `Content_CoresPainel` | `1973:94177` | Config cores do painel |
| `Content_Propriedades` | `1973:94957` | Config de propriedades |
| `Content_CoresLivro` | `1973:94188` | Config cores do livro |
| `Content_GraficoLegenda` | `1973:94206` | Config legenda do gráfico |
#### IA
| Componente | ID Figma | Descrição |
|---|---|---|
| `Chat IA` | `473:33085` | Interface de chat com IA |
| `Copiloto` | `2025:195768` | Painel copiloto de IA |
#### Outros
| Componente | ID Figma | Descrição |
|---|---|---|
| `Painel de cotações` | `77:3681` | Painel de cotações de ativos |
| `Notícias` | `66:2464` | Feed de notícias |
| `Componente coringa` | `366:11277` | Placeholder wildcard para conteúdo |
---
### 5.2 Button
**Figma ID:** `1318:749`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `variant` | string | `Primary` | `Primary` · `Secondary` · `Ghost` · `Link` · `Link Danger` · `Destructive` · `Inverse` · `Long` · `Short` · `Secondary Destruct` |
| `size` | string | `Default` | `Default` · `Large` |
| `state` | string | `Default` | `Default` · `Hover` · `Active` · `Focused` |
| `disabled` | boolean | `false` | — |
| `iconLead` | string | `False` | `False` · `Left-aligned` · `Center-aligned` |
| `hotkey` | boolean | `false` | — |
| `label` | string | — | Texto do botão |
#### Dimensões
| Size | Altura | Padding X | Gap interno |
|---|---|---|---|
| Default | `24px` | `8px` | `4px` |
| Large | `32px` | `12px` | `4px` |
#### Tokens por variante
| Variante | Background | Borda | Texto |
|---|---|---|---|
| Primary | `action.brand.default` | — | `content.primary` (branco) |
| Secondary | `action.secondary.default` | `border.default` | `content.primary` |
| Ghost | transparente | — | `content.primary` |
| Destructive | `action.destructive.default` | — | `content.primary` |
| Inverse | `action.brand inverse.default` | — | `content.primary` |
| Link | transparente | — | `content.primary` |
| Link Danger | transparente | — | `content.error` |
#### Tipografia
- Fonte: **Inter SemiBold 600** (`text.label.sm`)
- Tamanho: `14px`
- Letter-spacing: `0px`
---
### 5.3 Text Input
**Figma ID:** `1327:17000`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `variant` | string | `Single Line` | `Single Line` · `Multi Line` · `Quick Action` |
| `size` | string | `Default` | `Default` · `Large` |
| `state` | string | `Default` | `Default` · `Focus` · `Disabled` · `Active` · `Variable` · `Empty` · `Active Empty` · `Active Filled` |
| `iconLead` | boolean | `false` | — |
| `dropdown` | boolean | `false` | — |
| `chip` | boolean | `false` | — |
| `clickBlinker` | boolean | `false` | — |
| `label` | string | — | — |
#### Dimensões
| Size | Altura |
|---|---|
| Default | `24px` |
| Large | `32px` |
#### Tokens
| Estado | Background | Borda |
|---|---|---|
| Default | `surface.primary` | `border.strong` |
| Focus | `surface.primary` | `border.focus` |
| Disabled | `surface.disabled` | `border.disabled` |
| Active | `surface.primary` | `border.focus` + `surface.brand` highlight |
- Radius: `scale.radius.xs` = `4px` (default) / `5px` (variações internas)
- Tipografia do valor: `text.body.sm` (Inter 12px 500, letter-spacing 0.2px)
---
### 5.4 Dropdown
**Figma ID:** `1462:16743`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `size` | string | `Default` | `Default` · `Large` |
| `state` | string | `Default` | `Default` · `Focused` · `Active` |
| `stroke` | boolean | `true` | — |
| `iconLead` | boolean | `false` | — |
| `disabled` | boolean | `false` | — |
#### Dimensões
| Size | Altura | Padding esq. |
|---|---|---|
| Default | `24px` | `8px` |
| Large | `32px` | `8px` (com icon) / `8px` |
#### Tokens
| Estado | Background | Borda |
|---|---|---|
| Default | `surface.primary` | `border.strong` |
| Focused | `surface.primary` | `border.focus` |
| Active | `surface.primary` | `border.focus` + label com `surface.brand` |
| Disabled | `surface.primary` | `border.strong` + texto `content.tertiary` |
- Radius: `5px`
- Ícone chevron: `24×24px`
- Tipografia: `text.body.sm` (Inter 12px 500)
---
### 5.5 Combo Input
**Figma ID:** `1551:11643`
Input numérico partido em duas zonas: campo de valor (esquerda) + botão de dropdown chevron (direita), separados por `1px` de gap.
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `state` | string | `Default` | `Default` · `Hover` · `Selected input` · `Selected chevron` |
| `iconLead` | boolean | `false` | — |
| `variable` | string | `False` | `False` |
#### Tokens por estado
| Estado | Input bg | Input borda | Chevron bg | Chevron borda |
|---|---|---|---|---|
| Default | `surface.primary` | — | `surface.primary` | `border.focus` |
| Hover | `surface.primary` | `border.strong` | `surface.secondary` | `border.focus` |
| Selected input | `surface.primary` | `border.focus` | `surface.primary` | — |
| Selected chevron | `surface.primary` | — | `surface.brand` | `border.focus` |
- Altura: `24px`
- Radius: `bl-5px tl-5px` (esq) · `br-5px tr-5px` (dir)
- Tipografia: `text.body.sm`
---
### 5.6 Checkbox
**Figma ID:** `1462:18059`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `type` | string | `Checked` | `Checked` · `Unchecked` · `Mixed` |
| `state` | string | `Default` | `Default` · `Focused` |
| `disabled` | boolean | `false` | — |
| `muted` | boolean | `false` | Aparência com fundo atenuado |
| `ghost` | boolean | `false` | Aparência sobre fundo escuro |
| `label` | boolean | `true` | — |
| `description` | boolean | `false` | Texto auxiliar abaixo |
#### Tokens
| Situação | Box background | Box borda |
|---|---|---|
| Checked normal | `action.brand.default` (`#3D99FF`) | `action.brand.active` |
| Unchecked normal | `surface.tertiary` | `border.default` |
| Focused | qualquer acima | `border.focus` (`#65B0FF`) |
| Disabled | `#D9D9D9` | `border.disabled` |
- Box size: `16×16px`, radius `5px`
- Gap label: `8px`
- Tipografia label: `text.body.sm` (Inter 12px 500 0.2px)
- Texto disabled: `content.disabled`
---
### 5.7 Radio Button
**Figma ID:** `1916:46361`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `variant` | string | `Input` | `Input` · `Button` |
| `on` | boolean | `true` | — |
| `state` | string | `Default` | `Default` · `Active` · `Focused` · `Disabled` |
| `label` | boolean | `false` | — |
#### Variant `Input` — Tokens
| Estado | Background | Borda |
|---|---|---|
| Default On | `surface.primary` | marca central branca |
| Default Off | `surface.primary` | `border.default` |
| Focused | `border.focus` | — |
| Disabled | `surface.disabled` | — |
#### Variant `Button` — Tokens
| Estado | Background | Borda |
|---|---|---|
| Default | transparente | `border.subtle` |
| Active | `surface.brand` | `border.default` |
| Focused | transparente | `border.focus` |
| Disabled | transparente | `border.disabled` |
- Size: `16×16px` (input) / `107px` largura, `24px` altura (button)
- Radius button: `5px`
- Tipografia: `text.body.sm`
---
### 5.8 Switch
**Figma ID:** `1359:1740`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `type` | string | `On` | `On` · `Off` · `Mixed` |
| `state` | string | `Default` | `Default` · `Focused` |
| `disabled` | boolean | `false` | — |
| `label` | boolean | `true` | — |
| `description` | boolean | `false` | — |
#### Anatomia
```
[Track 32×16px] [Knob 14×14px] Label
```
#### Tokens por estado
| Estado | Track | Knob |
|---|---|---|
| On normal | `action.brand.default` (`#3D99FF`) | branco `#FFF` |
| Off normal | `#E6E6E6` (light gray) | branco |
| On/Off Focused | borda `border.focus` | branco |
| Disabled On | `action.brand.default` + borda focus | branco |
| Disabled Off | `#D9D9D9` | branco |
| Mixed | `action.brand.default` com ícone "—" | — |
- Track radius: `radius.full` (`9999px`)
- Knob radius: `13px`
- Altura total: `24px`
- Pad esquerdo do label: `40px` (quando com description)
- Tipografia label: `text.body.sm` — texto ativo: `content.primary`, disabled: `content.tertiary`
---
### 5.9 Segmented Control
**Figma ID:** `1655:25490`
Conjunto de abas compactas horizontais. O segmento ativo tem background `action.secondary.default`, os demais ficam sobre o fundo do container.
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `variant` | string | `Label` | `Label` |
| `tabCount` | string | `02` | `02` · `03` · `04` · `05` · `06` |
| `state` | string | `Default` | `Default` · `Disabled` |
#### Dimensões
| Tabs | Largura total |
|---|---|
| 2 | `160px` |
| 3–5 | `240px` |
| 6 | `280px` |
#### Tokens
| Elemento | Default | Disabled |
|---|---|---|
| Container | `surface.secondary` (#222) — radius `64px` | `surface.primary` — radius `5px` |
| Segmento ativo | `action.secondary.default` (#4A4A4A) — radius `16px` | `surface.primary` radius `5px` |
| Texto ativo | `content.primary` (branco) | `content.tertiary` (#A4A4A4) |
| Texto inativo | `content.tertiary` (#A4A4A4) | idem |
- Padding por segmento: `12px` horizontal, `8px` vertical (usa `scale.spacing.md` e `scale.spacing.sm`)
- Tipografia: `text.body.sm`
---
### 5.10 Tooltip
**Figma ID:** `1618:23706`
> Tooltips notificam o usuário de informações extras relacionadas a um elemento de UI, como ferramentas na toolbar ou botões apenas com ícone.
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `direction` | string | `TopCenter` | `TopCenter` · `BottomCenter` · `BottomLeft` · `BottomRight` · `TopLeft` · `TopRight` · `Right` · `Left` |
| `hotkey` | boolean | `true` | Exibe atalho de teclado (ex: `⌘V`) |
| `variant` | string | `Default` | `Default` |
#### Tokens
| Elemento | Valor |
|---|---|
| Background | `bg.primary` (`#0E0E0E`) |
| Texto | `content.primary` (branco) |
| Tipografia | `text.body.sm` (Inter 12px 500 0.2px) |
| Padding | `8px` vertical · `12px` horizontal |
| Radius | `5px` |
| Max-width | `200px` |
| Seta | `12×6px`, posicionada conforme `direction` |
#### Sombra (elevation-300)
```
box-shadow:
0px 0px 0.5px 0px rgba(0,0,0,0.15),
0px 5px 12px 0px rgba(0,0,0,0.13),
0px 1px 3px 0px rgba(0,0,0,0.10)
```
---
### 5.11 Modal
**Figma ID:** `1959:70722`
#### Props
| Prop | Tipo | Default | Valores |
|---|---|---|---|
| `footer` | string | `Standard` | `Standard` · `Destructive` |
| `tabs` | boolean | `false` | Inclui barra de abas no topo |
#### Anatomia
```
┌─ Header (44px) ──────────────────────────────────┐
│ Título do Modal [✕] │
├───────────────────────────────────────────────────┤
│ [Abas] ← opcional (tabs=true) │
├───────────────────────────────────────────────────┤
│ Content (Componente coringa / conteúdo real) │
├───────────────────────────────────────────────────┤
│ Footer (48px) │
│ Standard: [Limpar] [Fechar] [Aplicar] │
│ Destructive: [Excluir] [Fechar][Salvar]│
└───────────────────────────────────────────────────┘
```
#### Tokens
| Elemento | Valor |
|---|---|
| Background | `#1E1E1E` (equivalente a `bg.secondary`) |
| Header bg | `bg.secondary` (`#141519`) |
| Borda | `#333` `1px solid` |
| Radius | `8px` |
| Largura | `480px` |
| Sombra | `0px 8px 24px rgba(0,0,0,0.40)` |
| Botão Aplicar/Salvar | `action.brand inverse.default` (`#0066FF`) |
| Botão Excluir | `content.error` (`#F34F45`) — ghost |
| Botão Fechar | ghost, `content.primary` |
| Tipografia botões | `text.label.sm` (Inter 14px 600) |
---
### 5.12 Abas (Tabs)
**Figma ID:** `253:2861`
Barra de abas horizontal usada dentro de modais e painéis.
#### Tokens
| Elemento | Valor |
|---|---|
| Background | `bg.tertiary` (`#1A1A1A`) |
| Borda inferior | `border.subtle` (`#222`) |
| Aba ativa | `action.secondary.default` (`#4A4A4A`) |
| Aba inativa | `surface.secondary` (`#222`) |
| Texto ativo | `content.primary` (branco) |
| Texto inativo | `content.tertiary` (`#A4A4A4`) |
| Padding container | `8px` (usa `scale.spacing.sm`) |
| Padding aba | `12px` H · `8px` V (usa `scale.spacing.md` e `scale.spacing.sm`) |
| Radius aba | `16px` (usa `scale.spacing.lg`) |
---
### 5.13 Navegação
#### Header Desktop (`1921:55292`) — 390×56px
Header principal da aplicação. Contém logo, navegação primária e ações de usuário.
#### Hellobar (`3:773`) — 1920×46px
Barra de topo global, full-width.
#### Header Window (`243:3344`) — 476×41px
Header de janela flutuante/painel individual.
#### Sidebar Icon (`1630:24282`) — 64×24px
Ícone no menu lateral. Três estados:
- `Default` — ícone padrão
- `Hover` — hover
- `Active` — selecionado/ativo
#### Sub-menu Item (`1886:20967`) — 236×32px
Item de sub-menu. Três estados:
- `Default`
- `Hover`
- `Pressed`
#### Menu Lateral (`1875:20372`) — 48×974px
Menu lateral completo. 5 variantes conforme o painel aberto:
- `Default`
- `Book e Cotações`
- `Operação`
- `Ferramentas`
- `Analistas`
---
### 5.14 Floating Menus
Menus flutuantes contextuais. Todos seguem o mesmo padrão visual:
- Background: `bg.primary` ou `bg.secondary`
- Radius: `scale.radius.md` (`8px`)
- Sombra: elevation-300 (igual ao Tooltip)
- Conteúdo: lista de opções com ícone + label
Cada menu corresponde a uma ação específica da interface (selecionar ativo, tipo de gráfico, indicadores, etc.).
---
### 5.15 Painéis de Trading
#### Painel de Negociações / Boletas (`1916:47370`)
Painel de entrada de ordens (compra/venda). Contém:
- `Comprar` (`856:20742`) — ação long
- `Vender` (`856:20743`) — ação short
- Campos: quantidade, alavancagem, tipo de margem, destino da ordem, tempo de validade
- `TP/SL Config` (`2161:35783`) — configuração de take profit e stop loss
**Tokens de cor:**
- Comprar: `context.trading.up` / `context.trading.long.*`
- Vender: `context.trading.down` / `context.trading.short.*`
- Stop: `context.trading.stop.*`
#### Gráfico (`1923:56349`)
Área principal do gráfico de preços. Integra floating menus de:
- Tipo de gráfico (`floating-menu-tipo-grafico`)
- Indicadores (`floating-menu-indicadores`)
- Seletor de ativo (`floating-menu-seletor-ativo`)
#### Volume (`266:7525`)
Exibição do volume negociado.
#### Ordens (`336:3114`)
Lista de ordens abertas/executadas. Usa `DataTable` + `DataTableRow`.
#### Dropdown Resultado do Dia (`2168:50482`)
Duas variantes:
- `Resultado=Positivo` — usa `context.trading.up` (verde)
- `Resultado=Negativo` — usa `context.trading.down` (vermelho)
---
### 5.16 Componentes de IA
#### Chat IA (`473:33085`)
Interface de chat com assistente IA integrado à plataforma.
#### Copiloto (`2025:195768`)
Painel copiloto que analisa e sugere ações de trading em tempo real.
---
## 9. Guia para IA
Use este guia ao gerar qualquer interface TRDR.
### Hierarquia de camadas (z-index semântico)
```
bg.primary (fundo base)
└── bg.secondary / bg.tertiary (áreas de conteúdo)
└── surface.primary / secondary / tertiary (cards, painéis)
└── componentes interativos (inputs, buttons)
```
### Padrão de tema
- **Dark mode é o padrão** — a TRDR é uma plataforma de trading, dark é o modo primário
- Sempre implemente ambos os temas usando os tokens semânticos
### Como usar tokens de ação
```
Botão primário → action.brand.*
Botão secundário → action.secondary.*
Botão roxo/FigJam → action.tertiary.*
Botão destrutivo → action.destructive.* (ex: fechar posição)
```
### Como usar tokens de trading
```
Preço sobe / Long → context.trading.up / context.trading.long.*
Preço cai / Short → context.trading.down / context.trading.short.*
Stop Loss → context.trading.stop.*
Candlestick verde → context.chart.candles.up
Candlestick vermelha → context.chart.candles.down
```
### Regras absolutas
1. **Nunca use primitivos diretamente** na UI — sempre token semântico
2. **Nunca use `color.*` ou `space.*`** em componentes finais — use `bg.*`, `surface.*`, `content.*`, `scale.spacing.*`
3. **Números em trading** → Roboto Mono
4. **Títulos de página** → Space Grotesk (display ou heading)
5. **Tudo mais** → Inter (body ou label)
6. **Espaçamentos** → sempre `scale.spacing.*` (respeita Desktop/Mobile)
7. **Border radius** → sempre `scale.radius.*`
---
## 10. Changelog
| Data | Versão | Descrição |
|---|---|---|
| 2026-04-07 | v1.0 | Extração inicial do `design-system-variables.xlsx` — 292 tokens documentados |
| 2026-04-07 | v1.1 | Seção de Componentes adicionada — 82 componentes Figma documentados via MCP (inventário + props + tokens + anatomia) |
| 2026-04-07 | v1.2 | Seção de Padrões de Layout adicionada — estrutura da tela desktop `1920 cripto derivativos`, padrão de janela, header-window e sistema de abas |
| 2026-04-07 | v1.3 | Seção Site Institucional adicionada — tokens de branding/MKT, gradientes, tipografia e componentes exclusivos do site |
| 2026-04-07 | v1.4 | Seção Software Desktop adicionada — app launcher TRDR (`Operar`): shell, header, sidebar, platform cards, pill tabs, activity card, hero, footer. Tokens `bg/tertiary` e `bg/base-alpha-0` documentados |
---
*Próximo passo: complementar com componentes e padrões de layout via Figma MCP (Fases 2a–2d)*