Design system
Componentes, cores e padrões visuais usados em todas as telas do BlaXx.
Paleta
Preto, branco, verde-limão e cinzas neutros.
Tipografia
Inter, do Google Fonts. Pesos 400, 500, 600, 700, 800 e 900.
H1 — Título de impacto comercial
H2 — Título de seção
H3 — Título de card
H4 · LABEL DE GRUPO
Lead — Texto de introdução, ligeiramente maior, ainda legível.
Texto padrão — usado para parágrafos e descrições. Lorem ipsum não é usado em nenhuma página: todos os textos são de produto.
Texto de apoio em cinza — para complementos, ajuda e legendas.
Tiny — usado em legendas, marcações de tempo, dados secundários.
Botões
Quatro variações principais e três tamanhos.
Variações
Tamanhos
Cards
Branco com borda cinza, raio entre 18-28px e sombra sutil.
Card padrão
Conteúdo padrão da maioria das telas.
Card destaque
Para chamadas importantes em fundo preto.
Card lime
Para ações de conversão e CTAs.
Status & badges
Alertas
Sucesso
Operação concluída com sucesso.
Atenção
Verifique antes de continuar.
Erro
Algo deu errado, tente novamente.
Informação
Mensagem informativa neutra.
Carteira
Formulários
Tabelas
| Data | Descrição | Status | Pontos |
|---|---|---|---|
| 28/04 | Acúmulo | ● Confirmado | +1.240 |
| 26/04 | Resgate | ● Concluído | −5.000 |
Empty & estados
Sucesso
Mensagem de confirmação após uma ação.
Progresso
Princípios
Simplicidade
Sempre uma ação principal por tela. CTAs em verde-limão sobre preto.
Confiança
Nada de promessas financeiras indevidas. Pontos são créditos promocionais.
Velocidade
Páginas leves, sem JS, sem frameworks, prontas para abrir local.