03 — Componentes

UI kit base.

Componentes funcionais prontos pra web e app. Botões pill, cards quadrados-arredondados, inputs retangulares, e um conjunto específico do domínio: status de carregador, medidor de sessão, métrica noir.

Botões

Pill. Sempre. A curvatura bate com o E do logo. Primary é lime sobre escuro ou claro. Dark é o institucional. Ghost existe pra ações secundárias dentro de cards.

Primário · lime

.evvo-btn-primary

Escuro · institucional

.evvo-btn-dark

Outline

.evvo-btn-outline

Sobre fundo escuro

on noir

Inputs

Campos retangulares (radius-md, 10px), contorno sutil. Foco em preto + anel lime 25% — institucional, não barulhento.

Text field

.evvo-input

Text field on dark

.evvo-input.dark
Notificar quando terminar

Badges · Status

Dois tipos: badges genéricos (tags, categorias) e status de carregador. Os segundos herdam cor semântica e ficam sempre na parte alta do card.

Badges genéricos

.evvo-badge
DC · Fast charge Parceiro oficial Hub urbano Novo

Status de carregador

on noir
Disponível Em uso · 64% Reservado Offline Erro

Cards

Três tipos principais: station card (rede), metric card (dashboards e pitch), e content card (features).

Station card — hub com vagas

feature component
Hub urbano · Curitiba
Batel Premium
Av. do Batel, 1230
3/4 livres
Posto 01
150 kW · DC
Posto 02
150 kW · DC
Posto 03
75 kW · DC
Posto 04
22 kW · AC
Parceiro · Joinville
Mercado Imperial
Rua Blumenau, 450
Fila: 1
Posto 01
150 kW · 42min
Posto 02
75 kW · 18min

Metric card · kWh, sessões, receita

dashboard / pitch
Energia entregue · mês
184 MWh
+22% vs. mês anterior
Sessões · últimos 30 dias
12.4K
+14%
Receita · parceiros
R$ 148K
+31%

Charging session · progresso

driver app
Hub Batel · Posto 02
Carregando · 150 kW
Em uso
64%
bateria
12min
restante