Guia para IA

Regras absolutas e referências para qualquer IA construir interfaces TRDR consistentes.

Regras Absolutas

Estas regras nunca devem ser quebradas. Elas garantem consistência e suporte a dark/light mode.

Nunca use primitivos diretamente na UI

Primitivos são valores brutos (ex: color.blue.600). A UI deve usar tokens semânticos (ex: action.brand.default) para garantir que o tema dark/light funcione corretamente.

❌ background: #3D99FF
✅ background: var(--action-brand-default)

Nunca use color.* ou space.* em componentes finais

Use sempre os equivalentes semânticos: bg.*, surface.*, content.*, scale.spacing.* etc.

❌ color: var(--color-neutral-500)
✅ color: var(--content-tertiary)

Números e dados financeiros → Roboto Mono

Tabelas de preços, P&L, quantidades e qualquer dado numérico da plataforma de trading devem usar fonte monoespaçada para alinhamento visual.

font-family: var(--font-mono)

Títulos de página e headings → Space Grotesk

Space Grotesk é a fonte primária da marca. Usada para display, headings e impacto visual.

font-family: var(--font-primary)

Todo restante da UI → Inter

Inter é a fonte secundária: body text, labels, inputs, nav, tooltips, tudo que não é heading ou número.

font-family: var(--font-secondary)

Espaçamentos → sempre scale.spacing.*

Os tokens de scale respeitam as variações desktop/mobile automaticamente. Usar pixels fixos quebraria a responsividade do sistema.

padding: var(--spacing-lg) — nunca padding: 16px

Border radius → sempre scale.radius.*

O sistema de radius é padronizado: sm=4px (botões), md=8px (cards), lg=16px (modais/pills), full=9999px (switches/badges).

border-radius: var(--radius-md)

Hierarquia de Camadas

bg.primary (fundo base)
  └── bg.secondary / bg.tertiary (áreas de conteúdo)
        └── surface.primary / secondary / tertiary (cards, painéis)
              └── componentes interativos (inputs, buttons)
                    └── overlays / modais / tooltips

Como usar tokens de ação

Contexto	Token	Exemplo de uso
Botão primário (CTA)	`action.brand.*`	OPERAR, Salvar, Confirmar
Botão secundário	`action.secondary.*`	Cancelar, Voltar
Botão terciário / FigJam	`action.tertiary.*`	Ações de anotação
Botão destrutivo	`action.destructive.*`	Fechar posição, Excluir

Como usar tokens de trading

Contexto	Token
Preço em alta / Compra	`context.trading.up / context.trading.long.*`
Preço em baixa / Venda	`context.trading.down / context.trading.short.*`
Stop Loss	`context.trading.stop.*`
Candle verde	`context.chart.candles.up`
Candle vermelho	`context.chart.candles.down`

Template de CLAUDE.md

Adicione este arquivo na raiz de qualquer projeto TRDR para que o Claude Code sempre use o Design System correto.

# [Nome do Projeto] — Contexto para Claude

## Design System
Este projeto usa o TRDR Design System.

## Regras Absolutas
1. NUNCA use primitivos diretamente (color.*, space.*) — use tokens semânticos
2. Backgrounds: bg.primary (#0E0E0E), bg.secondary (#141519), bg.tertiary (#1A1A1A)
3. Texto: content.primary (branco), content.secondary (#E8E8E8), content.tertiary (#A4A4A4)
4. Ações: action.brand.default (#3D99FF) = botão primário
5. Fontes: Space Grotesk (headings) | Inter (body/labels) | Roboto Mono (números)
6. Espaçamento via CSS vars: --spacing-sm (8px), --spacing-md (12px), --spacing-lg (16px)
7. Radius via CSS vars: --radius-sm (4px), --radius-md (8px), --radius-lg (16px)

## Tokens CSS Disponíveis
Todos os tokens estão em: src/styles/tokens.css

## Consultar Design System Completo
Ver: https://[URL-DA-PLATAFORMA]/design-md