Paleta de cores expandida
a paleta da evob é controlada por 2 cores principais que se propagam para botões, links, alertas e gráficos — escolher bem evita refazer ajustes 3 meses depois.
Como funciona
A evob aplica suas cores em camadas:
``` Cor primária → botões, CTAs, links, ícones ativos Cor secundária → fundo de seção, badges, alertas suaves Variações → sistema gera tons (escuro, claro) automaticamente ```
Você define 2 cores. A plataforma calcula:
- Primária (sua cor)
- Primária 50 (fundo claro)
- Primária 700 (hover, escuro)
- Primária 900 (texto sobre primária clara)
- Idem para Secundária
Mais cores fixas do sistema (não customizáveis):
- 🔴 Vermelho — erros, ações destrutivas
- 🟡 Amarelo — avisos, alertas
- 🟢 Verde — sucesso, valores positivos
- ⚪ Cinzas — texto, fundos, bordas
Onde configurar
Plataforma > Configurações > Marca > CoresVocê verá 2 inputs hex:
- Cor primária: `#FF6B35`
- Cor secundária: `#004E89`
📖 Saiba mais: Paleta de cores
Como escolher as 2 cores
Cor primária
Onde aparece: botões "Comprar", "Inscrever", links, navegação ativa. Critério: alta saturação, contrasta com branco.``` ✅ Bom: #FF6B35, #2563EB, #16A34A ❌ Ruim: #FFFFFF (branco), #FFFF99 (amarelo claro), #DDDDDD (cinza claro) ```
Cor secundária
Onde aparece: badges secundários, seções de fundo, gráficos. Critério: complementar à primária, pode ser mais escura.``` ✅ Bom: #004E89 (azul escuro com primária laranja) ✅ Bom: #1E293B (cinza escuro com primária colorida) ❌ Ruim: cor muito próxima da primária (paleta sem variedade) ```
Acessibilidade — contraste obrigatório
Para texto branco sobre primária:
- Mínimo: razão de contraste 4.5:1 (WCAG AA)
- Ideal: 7:1 (WCAG AAA)
Use WebAIM Contrast Checker para validar.
``` ✅ #FF6B35 + texto branco: razão 3.7:1 (insuficiente para texto pequeno) ✅ #2563EB + texto branco: razão 4.6:1 (OK) ❌ #FFFF00 + texto branco: razão 1.07:1 (ilegível) ```
💡 A evob avisa se sua cor não passa no AA. Mas não bloqueia — você pode prosseguir mesmo assim.
📖 Saiba mais: Acessibilidade visual (em produção)
Cores fixas do sistema
Você não controla estas, mas é útil saber:
| Cor | Hex | Onde aparece | |---|---|---| | 🔴 Vermelho erro | `#DC2626` | Erros, deletar, recusas | | 🟡 Amarelo aviso | `#EAB308` | Alertas, atenção | | 🟢 Verde sucesso | `#16A34A` | Confirmações, valores positivos | | 🔵 Azul info | `#2563EB` | Mensagens informativas |
Em alguns casos, essas cores se misturam com a sua paleta (ex: badge azul mas com primária laranja no botão).
Variações automáticas
Para cada cor primária `#FF6B35`, a evob gera:
``` Primária 50: #FFF1EC (fundo de card primário) Primária 100: #FFE2D5 (hover suave) Primária 500: #FF6B35 (sua cor — botão padrão) Primária 700: #C8430F (hover de botão) Primária 900: #5B1F03 (texto em fundo primário claro) ```
Isso evita você ter que escolher 9 tons na mão.
Multi-loja (cores por loja)
Em plataforma multi-loja, cada loja pode ter sua paleta:
``` Plataforma "Academia evob" (cor padrão azul) ├─ Loja Marca Pro → laranja ├─ Loja Marca Premium → roxo └─ Loja Corporate → cinza escuro ```
Aluno na Loja Marca Pro vê tudo laranja. Aluno na Plataforma vê azul.
Mudança retroativa
Quando você muda cores, propaga em <5 minutos para tudo:
- ✅ AVA do aluno
- ✅ Admin (sua tela)
- ✅ Emails transacionais
- ✅ Páginas customizadas
- ✅ Certificados
⚠️ Não mude cores toda semana. Aluno se confunde, marca fica inconsistente.
Boas práticas
✅ Faça
- Cor primária com alto contraste (contra branco)
- Cor secundária complementar (não muito próxima)
- Teste em todos os tamanhos (mobile, desktop)
- Valide acessibilidade (WCAG AA mínimo)
❌ Não faça
- ❌ Primária muito clara (botão some no fundo)
- ❌ Primária = secundária (perde contraste)
- ❌ Cores fluorescentes (dói os olhos)
- ❌ Mudar cores toda semana (marca fraca)
Erros comuns
"Botão sumiu / fundo branco"
Cor primária muito clara. Aumente saturação ou escureça.
"Aluno reclama que não consegue ler"
Contraste insuficiente. Mude para cor mais escura ou texto branco mais grosso (bold).
"Cor diferente em mobile vs desktop"
Renderização do browser pode variar levemente. Diferença <5% é aceitável.
"Quero exatas 5 cores no sistema"
Não disponível. evob simplifica para 2 + variações automáticas. Para 5 cores customizadas, é Enterprise.
"Email transacional aparece preto e branco"
Email cliente pode bloquear cores customizadas (Outlook clássico, por exemplo). Tenha versão fallback.
📖 Saiba mais: Cabeçalho do email
Próximos passos
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-02