DESIGN SYSTEM · WEB
Paleta de cores
Quatro cores de marca + escala neutra de apoio. Regra de ouro do manual: branco predomina nos fundos, azul para destaques, preto para textos, e verde exclusivo de botões/CTA e valores de ganho.
Cores da marca
Escala neutra proposta
Cores semânticas (trocam entre tema claro / escuro)
Aplicação web — desktop & mobile
As mesmas cores e tokens em contexto real. À esquerda, desktop (área útil 1140px); à direita, mobile (360px). Note o azul como destaque, o verde só no botão e a seção escura usando o tema dark.
Viva o Day Trade de verdade
Tecnologia e educação por traders que operam o mercado todos os dias.
Seção escura usa o tema dark — texto branco, azul mantém o destaque.
Viva o Day Trade de verdade
Educação por traders que vivem o mercado.
Tema dark · tipografia mobile (H1 40px).
Tipografia
Roboto em toda a web (títulos em Bold). Tusker Grotesk fica reservada a peças gráficas. Textos longos sempre alinhados à esquerda; títulos podem centralizar no desktop.
Espaçamento
Escala base 4/8 — use para paddings, gaps e margens. Mantém ritmo e respiro (lei dos espaços em branco do manual).
Botões
Regra do manual: cor verde exclusiva de CTA, texto em CAIXA ALTA + negrito, altura fixa 44px, Roboto 18 bold, chamadas curtas (1 linha no mobile).
Primário (CTA) · Secundário · Ghost · Desabilitado
No hover, o botão verde (CTA) fica com fundo branco, texto verde e borda verde. O azul secundário escurece (#007AE0). Passe o mouse para ver.
Cards
Cantos arredondados (manual manda imagens com cantos arredondados), imagem no topo, título + texto + CTA. Variante clara e escura para seções.
Sala ao vivo
Transmissão de baixa latência, operando junto com o André em tempo real.
Curso completo
Do zero ao operacional, com a metodologia dos Scalpers.
Mentoria
Acompanhamento próximo para acelerar sua evolução no Day Trade.
Inputs
Campos limpos, borda neutra, raio 8px. Foco em azul; erro em vermelho funcional; sucesso em verde. Ideal para páginas de captura.
Chips
Tags e marcadores flat, formato pílula. Seguem a paleta (azul/preto/neutro) e o estilo limpo da marca. Verde reservado a indicadores de ganho.
Elevation & Depth
Sombras sutis para criar profundidade sem poluir — coerente com a linguagem limpa do manual. Use com moderação (cards, dropdowns, modais).
Do's & Don'ts
Regras essenciais do manual aplicadas à web.
✓ Faça
- Use verde apenas em botões/CTA e valores de ganho.
- Mantenha o fundo branco predominante; use escuro só em seções com contexto.
- Alinhe textos longos e subtítulos à esquerda (desktop e mobile).
- Use ícones flat com traçado vazado, espessura consistente.
- Botões em CAIXA ALTA, negrito, 44px de altura.
- Imagens sempre com cantos arredondados.
- Azul para destaques pontuais.
✕ Não faça
- Não use verde em textos, fundos ou elementos decorativos.
- Não encha a peça de azul — evite excesso da cor de destaque.
- Não centralize blocos longos de texto.
- Não use ícones preenchidos, com sombra, gradiente ou 3D.
- Não distorça, gire, recolora ou aplique efeitos no logo.
- Não reduza o logo abaixo de 120px (web) — use o "S" em espaços pequenos.
- Não coloque o logo sem área de proteção / sem contraste.
