Card de problema
Vidro, sombra pesada, sobe 4px e ganha borda verde no hover. Contém um mini-mockup de 16rem.
Design system vivo · Tailwind 3.4 · Geist + Plus Jakarta Sans
O sistema de design da Eletrotyme.
Tipografia, cores, superfícies, componentes, layout e motion do site, documentados com o mesmo HTML, as mesmas classes e os mesmos assets. Cada seção abaixo é um exemplo canônico que pode ser copiado direto para uma nova página.
Design system · Eletrotyme
Painel de tokens e componentes
Ao vivo
Estilos de texto
10
2 famílias tipográficas
Superfícies
6
vidro + blur em todas
Animações
5
2 keyframes + 3 via JS
Seções documentadas
Cada seção é um exemplo canônico
Tipografia
Escala, ritmo e hierarquia
Componentes
Botões, badges, cards, toggle
Motion
Entrada, reveal, hover, shimmer
Uso por seção
100%
FidelidadeExata
01 · Tipografia
Plus Jakarta Sans para títulos, Geist para o resto.
Títulos usam .font-jakarta em peso 500 com tracking negativo. Corpo, rótulos e botões usam .font-geist. Os tamanhos abaixo são os do breakpoint desktop; cada linha mostra o elemento e as classes originais.
Heading 1
Eletropostos que viram ativos.
72px / 72px
Heading 2
Cada recarga em um único painel.
60px / 57px
Heading 2 · alt
Mais que recarga.
56px / 62px
Heading 3
Vagas paradas não rendem
24px / 32px
Heading 3 · card
R$ 0,00 para o parceiro
22px / 28px
Heading 4
Diagnóstico do ponto
18px / 28px
Display · número
R$ 150k48px / 48px
Bold M
Solicitar proposta
14px / 20px
Bold S · eyebrow
Recarga rápida11px / 16px
Paragraph
Motorista de elétrico não passa e vê: ele abre o app e decide onde parar.
18px / 32px
Regular L
Enquanto o carro recarrega, o motorista e quem está com ele usam a sua loja.
17px / 28px
Regular M
Equipamento, obra, energia, operação e risco de utilização são da Eletrotyme.
15px / 24px
Regular S
Analisamos fluxo, frota elétrica da região, concorrência e potência disponível.
14px / 24px
Label · caps
Saúde da operação
10px / 15px
02 · Cores e superfícies
Fundo quase preto, laranja da marca, verde da folha.
O laranja Eletrotyme (#f26522) é o orange-500 do Tailwind, sobrescrito na config. O verde usa a escala emerald. Superfícies são branco com opacidade baixíssima sobre o fundo, sempre com borda e blur.
Marca e acentos
Laranja Eletrotyme
bg-orange-500 · #f26522
Laranja hover
bg-orange-400 · #fb923c
Laranja claro
bg-orange-300 · barras, pontos
Laranja texto
text-orange-200 · eyebrows
Verde folha
bg-emerald-400 · status, ao vivo
Verde claro
text-emerald-300 · deltas +
Neutros e texto
Fundo da página
bg-[#080c14]
Fundo do mockup
bg-[#0b1220] · bg-[#08111f]
Título
text-white
Texto forte
text-slate-300
Corpo
text-slate-400
Rótulo apagado
text-slate-500
Superfícies
Card vidro (padrão)
rounded-3xl border-white/[0.08] bg-white/[0.035] backdrop-blur-xl shadow-2xl shadow-black/50
Card gradiente com fio de luz
rounded-[2rem] from-white/[0.05] to-transparent + h-px via-emerald-300/40
Card destaque (laranja)
from-orange-500/[0.16] via-white/[0.06] + border-orange-300/30
Moldura do mockup
bg-slate-950/70 backdrop-blur-3xl + sombra profunda com inset
Card estatístico ativo
border-orange-200/20 bg-orange-400/[0.05]
Painel CTA
bg-[#0d1422]/70 backdrop-blur-2xl shadow-orange-950/20
Bordas, divisores e sobreposições
border-white/[0.06] · seções e moldura
border-white/10 · cards
h-px bg-white/[0.08] · divisor de card
linha pontilhada SVG · cards de projeto
Gradientes e glows
Fundo da página
radial laranja + radial verde + linear
Glow laranja
rounded-full bg-orange-300/10 blur-3xl
Glow verde
rounded-full bg-emerald-500/20 blur-3xl
Grade de fundo
linhas 1px brancas · bg-[size:30rem_30rem]
03 · Componentes
Botões, badges, cards e o painel.
O site não tem inputs nem estados de foco ou desabilitado. Os estados abaixo são default e hover: o hover está reproduzido de forma estática aplicando as mesmas utilidades que o hover: ativa.
Botão primário
Solicitar proposta
default
Solicitar proposta
hover (estático)
Ver a solução
variante h-11 (cabeçalhos de seção)
Solicitar proposta
variante header
Falar com a Eletrotyme
variante branca (FAQ)
Botão secundário (vidro)
Ver projetos
default
Ver projetos
hover (estático)
Saiba mais
variante h-11
Quero ser parceiro
variante card de modelo
botão de mockup (xs)
Toggle segmentado
ativo à esquerda (default)
ativo à direita
Badges, pills e status
Badge do herói
Passo 01
Go-live em até 90 dias
Ao vivo
2 vagas
Links de navegação
Cards
Passo 01
Card de passo
Borda verde, fio duplo no topo e glow verde no hover.
Benefício
Card de benefício / FAQ / modelo
Gradiente vertical, raio de 2rem e fio de luz. A borda vive num pseudo-elemento absoluto.
Peças do painel
Recargas hoje
8
2 em andamento
Recargas no mês
248
+12% vs mês passado
Implantação
78%
barra com shimmer
Recargas por dia
04 · Layout e espaçamento
Moldura de 1360px, conteúdo de 1280px.
A página inteira vive numa moldura max-w-[1360px] com bordas laterais e 4 colunas-guia fixas. Cada seção usa max-w-[1280px], padding vertical de 6rem e horizontal de 1.25rem / 2rem / 2.5rem por breakpoint.
Padrão A · cabeçalho de seção (split 1fr / 0.72fr)
0N · Eyebrow
Título grande à esquerda (max-w-3xl)
Parágrafo à direita (lg:max-w-md) alinhado à base, seguido de dois botões com gap-3.
grid gap-8 lg:grid-cols-[1fr_0.72fr] lg:items-end · usado em todas as seções internas
Padrão B · herói (split 0.95fr / 1.05fr, centrado)
Texto: badge, h1, parágrafo, 2 botões
Mockup 3D (h-[34rem] / lg:h-[43rem], max-w-[42rem]) + 2 cards flutuantes
grid gap-14 lg:grid-cols-[0.95fr_1.05fr] lg:gap-12 items-center · canvas WebGL absoluto atrás
Padrão C · grades de cards
grid gap-6 lg:grid-cols-3 · problema, modelos
grid gap-4 md:grid-cols-2 xl:grid-cols-4 · passos, benefícios (gap-6), campanhas
grid gap-6 lg:grid-cols-2 · FAQ
grid gap-12 lg:grid-cols-[0.8fr_1.2fr] lg:gap-20 · projetos (texto fixo + cards empilhados)
Escala de espaçamento em uso
gap-3 · 12px
gap-4 / p-4 · 16px
px-5 / p-5 · 20px
gap-6 · 24px
gap-8 / p-8 · 32px
mt-12 · 48px
mt-16 · 64px
pt-24 / pb-24 · 96px
Raios: rounded-xl (12px) nos itens internos · rounded-2xl (16px) nos cards do painel · rounded-3xl (24px) nos cards de seção · rounded-[2rem] (32px) nos cards gradiente, CTA e moldura do mockup · rounded-full em botões e badges.
05 · Motion e interação
Entrada com blur, reveal no scroll, hover que sobe.
Dois keyframes em CSS (animationIn e progress-shimmer) e três comportamentos em JS: scroll-reveal por IntersectionObserver, flutuação 3D do mockup do herói e o fundo WebGL de trilhas de luz. Tudo com ease-out e 300 ms nos hovers.
Entrada
animationIn
Opacidade 0 → 1, translateY 30px → 0, blur 8px → 0. 0.8s ease-out, delay 0.1s, both. Aplicada no header e nas duas colunas do herói.
[animation:animationIn_0.8s_ease-out_0.1s_both]
Scroll
.reveal (IntersectionObserver)
Todo .reveal e todo h1–h4, p e li dentro de main e footer começa com opacidade 0 e translateY 18px. Ao entrar 12% na viewport, anima em 900 ms ease-out com delay escalonado de 75 ms (até 4 passos).
Este parágrafo entrou com o reveal. Recarregue a página e role até aqui para ver de novo.
Loop
progress-shimmer
Um gradiente branco translúcido atravessa a barra da esquerda para a direita a cada 2 s, linear e infinito. Segunda barra com 1 s de atraso.
Hover
Lift de card
Passe o mouse: hover:-translate-y-1 com transition duration-300 ease-out e a borda clareia de white/10 para white/20. Cards de passo somam um glow verde na sombra.
Hover
Botões
Primário: scale 1.03, fundo orange-500 → orange-400, sombra clareia; a seta desliza 2px (group-hover:translate-x-0.5). Secundário: scale 1.02 e vidro mais denso. Link de nav: sublinhado cresce de w-0 a w-full.
JS
Flutuação 3D e WebGL
#heroObject recebe translateY senoidal (±10px) mais rotateX/rotateY pela posição do mouse e recua até 34px com o scroll. Cada .floating-panel ganha sombra laranja pulsante. O canvas #webgl-canvas desenha 100 trilhas de luz (laranja #f26522, #ff8a3d, branco e verde #16a34a) com bloom e SMAA em Three.js r160.
animate-pulse · pontos de status "ao vivo"
Galeria de motion · transições de estado
group-hover/stat
240
número sobe 2px
group-hover/task
texto clareia + fundo
group-hover/progress68%
hover:-space-x-1 · avatares abrem
06 · Ícones
Iconify Solar nos botões, SVG inline no resto.
Botões e o menu usam <iconify-icon icon="solar:…"> (linear, 18–20px). Cards e mockups usam SVG inline de traço 1.5–2 com stroke="currentColor", herdando a cor do texto do contêiner.
Iconify · conjunto Solar
arrow-right-linear · 18
bolt-linear · 18
hamburger-menu-linear · 20
herda text-orange-300 · 24
herda text-emerald-300 · 32
SVG inline · stroke currentColor
Tamanhos: h-3.5 (check em lista) · h-4 / h-4.5 (nav e FAQ) · 17px (card flutuante) · 24px (cards de projeto). Contêineres: rounded-full em 20px, rounded-xl em 36px, rounded-2xl em 36–56px.
Marca
ELETROTYME
Header · símbolo h-8 + wordmark (ELETRO semibold, TYME regular)
ELETROTYME
Rodapé · símbolo em caixa 40px + wordmark Jakarta
Símbolo isolado · assets/brand/logo-symbol.png (PNG com transparência)