Cores, tipografia, spacing.
A base técnica do sistema. Todo componente, todo deck e toda peça da Evvo deriva destes valores. São poucos tokens — de propósito — porque a marca é quase sem enfeites: preto profundo, branco crisp, um lime elétrico que sinaliza energia e sustentabilidade, e tipografia geométrica que ecoa o próprio logo.
Paleta
Duas famílias neutras — Noir (o preto-azulado que segura a marca no escuro) e Bone (os cinzas quentes das superfícies claras) — e um accent: Energy Lime. Os estados dos carregadores herdam cores do domínio: livre, em uso, reservado, offline, erro.
Tipografia
Poppins para tudo que é display, título e número (ecoa o corte geométrico do logotipo — o O circular, a barra pill do E). Montserrat para body text e interface. Ambas foram definidas no PDF de marca — use-as do 300 ao 800. Numerais tabular para tudo que é kWh, potência, preço e tempo.
Spacing
Escala 4px. Tudo na Evvo — padding, gap, margem — é múltiplo desses valores. Dá ritmo e previsibilidade pro sistema todo, do botão à sinalização de eletroposto.
Radius
Uso reto ou pill. Pouco meio-termo. O logotipo da Evvo é literalmente esse contraste — traços pill + O circular. Cards e superfícies usam 16–24px; botões e tags usam pill. Reto só quando precisa.
Sombra e brilho
Sombras suaves e frias (quase azuis — combinam com o Noir). Reservamos o glow lime e o glow branco apenas para elementos que precisam sugerir luz — botões CTA no escuro, status "disponível", watermark do logo em peças noturnas.
Motion
Poucas curvas, todas rápidas. Transições devem parecer mecânicas — eletropostos são infraestrutura, não entretenimento. 160–240ms pro grosso das interações; 420ms só quando algo precisa ganhar leitura (modal, abrir hub).
Regras gerais
- Usar Poppins para tudo que é display, Montserrat para body.
- Tratar o Lime como cor de energia: CTAs, dado vivo, status livre.
- Em fundos escuros, usar o logo branco.
- Numerais tabulares para kWh, R$, tempo, potência.
- Respeitar a grid de 4px.
- Lime como fundo de bloco grande — cansa. Accent só.
- Gradiente preto-pro-lime. A paleta é sólida.
- Serifa. Nenhuma. Em peça nenhuma.
- Sombras amarelas/quentes — refrigeram pra azul.
- Recriar o logotipo em fonte comum.