Padrões de Layout

5 padrões documentados: plataforma de trading, site institucional e app desktop.

Plataforma de Trading — Desktop

1920 cripto derivativos (ID: 470:30661)1918×1079px

Layout principal da plataforma de trading. 3 colunas com gap de 2px entre janelas. Tudo sobre fundo bg.primary.

┌─────────────────────────────────────────────────────────────────┐
│  hellobar                                              40px     │
├─────────────┬──────────────────────────────┬───────────────────┤
│  Coluna 1   │        Coluna 2              │    Coluna 3       │
│  337px      │  flex (min 800px)            │    357px          │
│             │                              │                   │
│  Cotações   │  [Menu lateral 48px]         │  Boleta           │
│  358px h    │  [Gráfico principal]         │  (controle ordens)│
│             │  [Volume]                    │                   │
│  Livro de   │                              │  Ordens /         │
│  ordens     │                              │  Notícias 565px   │
│             │                              │                   │
└─────────────┴──────────────────────────────┴───────────────────┘
         gap: 2px          gap: 2px

Zonas

Zona	Tamanho	Descrição
hellobar	`1920×40px`	Barra superior global
Coluna 1	`337px largura`	Painel de cotações (358px) + Livro de ordens
Coluna 2	`flex min-800px`	Menu lateral (48px) + Gráfico + Volume
Coluna 3	`357px largura`	Boleta de ordens + Ordens/Notícias (565px)

Tokens

Propriedade	Token	Valor
Background geral	`bg.primary`	`#0E0E0E`
Gap entre colunas	`—`	`2px`
Conteúdo altura	`—`	`1022px`

Nota: Cada coluna contém uma ou mais janelas (componente janela). O gap de 2px é o único espaçamento entre painéis.

Padrão de Janela

Componente janela (ID: 1909:41600)1709×1168px (máximo)

Container reutilizável que encapsula todo o conteúdo da plataforma. Todo painel é uma janela.

┌─ janela ─────────────────────────────────────────┐
│ [header-window 41px] — tabs + ações              │
├──────────────────────────────────────────────────┤
│                                                  │
│  Conteúdo (flex-grow)                           │
│                                                  │
└──────────────────────────────────────────────────┘

Zonas

Zona	Tamanho	Descrição
header-window	`41px altura`	Tabs + ações de janela
Conteúdo	`flex-grow`	Área de conteúdo variável

Tokens

Propriedade	Token	Valor
Background	`bg.secondary`	`#141519`
Border	`border.default`	`#4A4A4A`
Radius	`scale.radius.sm`	`4px`

Nota: O border radius de 4px é específico do container janela — menor que o radius.md padrão.

Header de Janela (header-window)

Componente header-window (ID: 243:3344)476×41px

Padrão de abas com indicador de 2px na borda inferior. Estilo 1 do sistema de abas TRDR.

[Tab ativa ▼]  [Tab 2]  [Tab 3]  → → → → [Ações]
    │
    └── border-bottom: 2px solid action.brand.default (#3D99FF)

Zonas

Zona	Tamanho	Descrição
Tab ativa	`auto`	2px border-bottom azul, texto content.primary
Tabs inativas	`auto`	Texto content.tertiary, sem fundo
Ações	`auto`	Botões de controle da janela (fechar, expandir)

Tokens

Propriedade	Token	Valor
Tab ativa — indicador	`action.brand.default`	`#3D99FF`
Tab ativa — texto	`content.primary`	`#FFFFFF`
Tab inativa — texto	`content.tertiary`	`#A4A4A4`
Background	`bg.secondary`	`#141519`
Border bottom	`border.subtle`	`#222222`

Nota: Este é o Estilo 1 de abas. Diferente do componente "abas" (Estilo 2) e das pill tabs (Estilo 3).

Site Institucional TRDR

Homepage (ID: 2273:53009)1920×3378px

Layout do site de marketing/branding. Tipografia maior, gradientes, foco em impacto visual.

┌─────────────────────────────────────────────────────┐
│  Header 72px  (max-width: 1600px)                   │
├─────────────────────────────────────────────────────┤
│  Hero 1206px  (gradiente bg: azul → preto)          │
│  H-1: Space Grotesk 80px                           │
│  Gradiente texto: #3D99FF → #FFFFFF                │
├─────────────────────────────────────────────────────┤
│  Seção 4   791px  (padding-v: 96px)                │
├─────────────────────────────────────────────────────┤
│  Seção 2   657px  (padding-v: 96px)                │
├─────────────────────────────────────────────────────┤
│  Seção 3   652px  (padding-v: 96px)                │
└─────────────────────────────────────────────────────┘
Content max-width: 1312px  |  Header max-width: 1600px

Zonas

Zona	Tamanho	Descrição
Header	`72px altura`	Nav + logo + CTA. Max-width: 1600px
Hero	`1206px altura`	Heading H-1 + gradiente de texto + CTA principal
Seções	`652–791px`	Features, prova social, etc. Padding 96px vertical

Tokens

Propriedade	Token	Valor
Background	`bg.primary`	`#0E0E0E`
Heading H-1	`site.heading.h1`	`Space Grotesk 500 80px lh1.1`
Heading H-2	`site.heading.h2`	`Space Grotesk 500 56px lh1.1`
Body	`site.body.lg`	`Inter 400 18px lh1.4`
Gradiente texto	`gradient.text.brand`	`linear-gradient(90deg, #3D99FF 0%, #FFFFFF 100%)`
Gradiente hero	`gradient.bg.hero`	`linear-gradient(180deg, #0052CC 0%, #0E0E0E 40%)`
Content max-width	`site.content.max-width`	`1312px`
Section padding-v	`site.section.padding-v`	`96px`

Nota: A tipografia do site é DIFERENTE da plataforma — escala maior para impacto de branding. Não misture as escalas.

App Desktop — Launcher TRDR

Tela Operar (ID: 1124:25168)1549×944px

App desktop launcher que gerencia múltiplas plataformas de trading. Shell própria com Electron-like structure.

┌─────────────────────────────────────────────────────────────┐
│  Header Desktop 56px — bg.primary #0E0E0E                  │
│  [Logo] | [Nav gap-16px] → → → [Conexões] | [Win controls] │
├──────────────────┬──────────────────────────────────────────┤
│  Sidebar 320px   │  Main Area flex-1 (1229px)              │
│  border-r subtle │                                          │
│                  │  [Hero 364px — imagem + gradiente]      │
│  Plataformas     │  ──────────────────────────────────────  │
│  (platform cards)│  [Pill Tabs 468px + Activity Card]      │
│                  │                                          │
├──────────────────┴──────────────────────────────────────────┤
│  Footer 48px — bg.primary #0E0E0E | border-top subtle      │
│                              [Central de Ajuda] | [v1.0.0] │
└─────────────────────────────────────────────────────────────┘

Zonas

Zona	Tamanho	Descrição
Header	`1549×56px`	Logo + nav (5 itens) + conexões + controles Windows
Sidebar	`320px largura`	Lista de platform cards com status badges
Hero	`1229×364px`	Preview da plataforma + gradiente overlay + ações
Info Panel	`1229×468px`	Pill tabs + activity card com estatísticas
Footer	`1549×48px`	Links de ajuda e versão do app

Tokens

Propriedade	Token	Valor
App background	`bg.tertiary`	`#1A1A1A`
Header/Footer	`bg.primary`	`#0E0E0E`
Sidebar border	`border.subtle`	`#222222`
Platform card ativo	`surface.secondary`	`#222222`
Icon container brand	`—`	`rgba(61,153,255,0.1)`
Pill tab ativa	`action.brand.default`	`#3D99FF`
Pill tab container	`surface.secondary`	`#222222`

Nota: O token bg.tertiary (#1A1A1A) é exclusivo do app launcher. A sidebar tem border-right border.subtle. Pill tabs usam radius-lg (16px) no container.