Botões

3 variantes · 4 tamanhos · 5 estados · máximo 1 primary por tela
Variantes principais
Tamanhos (primary)
Estados
Com ícone
ClasseUsoRestrição
.btn-primaryCTA principalMáximo 1 por viewport
.btn-accentCTA secundário de destaqueHovers, variações de campanha
.btn-ghostAção secundáriaNunca sozinho como única ação
.btn-dangerAções destrutivasConfirmação obrigatória antes
.btn-xlCTA hero com VT323 28pxApenas em save points e heroes

Badges

status · tags · labels de marca · ao vivo
Variantes
Default Brand · Neon Accent · Fúchsia Deep · Tolopea Success Warning Danger
Com ícone e estado live
POWER-UP CHECKPOINT AO VIVO URGENTE ATIVO
ClasseCorUso típico
.badge-brand#00FFD1 neon"NEW", "LIVE", "HIGH SCORE", destaques primários
.badge-accent#FF00FF fúchsiaNovidades, campanhas especiais, power-ups
.badge-deep#2409A9 tolopeaCategoria, status estrutural, versão
.badge-livecurrentColor piscanteAo vivo, online, transmitindo

Inputs

text · email · select · textarea · checkbox · radio
Campos de texto e select
Nome como aparece no CNPJ.
E-mail inválido — revise e tente de novo.
Checkbox & radio

Cards

base · sombra neon · sombra fúchsia · hover interativo
Variantes de sombra
Base

Sem sombra

Para conteúdo secundário e listas.

Brand

Shadow neon

Para cards de destaque primário.

Accent

Shadow fúchsia

Campanhas e destaques de acento.

Hover interativo — passe o mouse
+320%

ROAS médio · 12 co-ops

-42%

CPA médio · 90 dias

38

Clientes co-op ativo

Alerts

feedback inline · estados · notificações
Checkpoint! Campanha publicada com sucesso. Level up iniciado.
Atenção. CAC subiu 12% esta semana. Recomendamos revisão da segmentação.
Erro crítico. Budget esgotado antes do previsto. Campanha pausada automaticamente.
Novidade. Nova feature de relatório disponível no seu HUD.

Accordion

FAQ · seções colapsáveis · perguntas frequentes
Em quanto tempo vejo resultado?
Os primeiros ajustes saem nas 2 primeiras semanas. O level up real acontece entre 60 e 90 dias — quando cruzamos dados de mídia, site, CRM e atendimento com dado real.
Qual o contrato mínimo?
3 meses. Menos do que isso não dá tempo para testar, aprender e otimizar. A 2P não assina contratos de 12 meses logo de cara — queremos ganhar a renovação com resultado.
Vocês gerenciam o budget de mídia?
Sim. O budget fica em contas do cliente — você é o dono. A 2P gerencia e você vê cada centavo gasto em tempo real no dashboard.

Navbar

.navbar-top (topo de aviso) + .navbar (barra principal)

Layout Helpers

container · grid · stack · row
Grids
.bs-grid-2 · col 1
.bs-grid-2 · col 2
.bs-grid-3 · col 1
.bs-grid-3 · col 2
.bs-grid-3 · col 3
.bs-grid-4
.bs-grid-4
.bs-grid-4
.bs-grid-4
Row e Stack
.bs-stack · item 1
.bs-stack · item 2 (gap 16px automático)

Efeitos de marca

scanlines · cursor piscante · pixelate
.fx-scanlines
READY_
ClasseEfeitoUso
.fx-scanlinesOverlay de linhas CRT via ::afterFundos escuros, heroes, banners
.fx-cursorBloco piscante ▊ via ::afterConsoles, CTAs, finais de linha
.fx-pixelateimage-rendering: pixelatedLogos SVG, ícones pixel art