01 — Primitivos
Primitivos
Átomos visuais reutilizáveis: botões, badges, cards, inputs, tiles e navbar.
Botões
Badges
Cards
Card padrão
Superfície sólida, radius e padding adaptados ao modo atual.
Card glass
Blur + glow laranja em marketing; surface sólida em product.
Resumo
Card com cabeçalho e ação inline — padrão de painel KPI.
Inputs
Stat Tiles
Navbar
02 — Organismos de Produto
Organismos de produto
Componentes compostos para dashboards, cockpits e telas de análise.
App Shell
Campanhas
Destaque
Black Friday 2026
1.2M
Engage
Cazamba Q2 2026
847K
Tech
Verão Engage
2.5M
KPI Row
Filter Bar
Campaign Table
| Campanha | Status | Impressões | CTR | Investimento |
|---|---|---|---|---|
| Black Friday — Rich Media | Ativa | 2.480.112 | 1,9% | R$ 84.200 |
| Lançamento App — Interscroller | Em revisão | 912.540 | 2,4% | R$ 31.900 |
| Awareness Verão — Skin | Pausada | 405.778 | 0,8% | R$ 12.450 |
Panel
Conta gerenciada desde 2024. Plano Cazamba Engage Pro.
- Campanhas ativas
- Usuários na conta
Atividade recente
Ver históricoÚltimas ações nas últimas 24 horas.
- Black Friday ativada
- Orçamento ajustado — Verão
Empty State
Nenhuma campanha por aqui ainda
Quando você criar sua primeira campanha, ela aparecerá aqui com métricas em tempo real.
03 — Data-viz
Data-viz
Gráficos CSS/SVG — estáticos no modo produto, animados no marketing. Cada card abre em nova aba com os dois modos lado a lado, tabela acessível e tooltips no hover e no foco. No app React estes mapeiam para Recharts temados pelos tokens --cz-chart-*.
Chart Frame — Barras
Barras verticais em moldura com legenda, eixo e tabela acessível. Série única, um acento.
Abrir ↗Chart Line — Linhas
Tendência multi-série com pontos focáveis e área preenchida — cliques e conversões.
Abrir ↗Chart Donut — Rosca
Proporção em anel com legenda focável e divisórias entre fatias; valor-chave no centro.
Abrir ↗Chart Multibar — Agrupadas
2–3 sub-séries por período no mesmo acento em opacidades distintas (one-accent).
Abrir ↗Chart Area — Área empilhada
Composição de métrica empilhada ao longo do tempo — multi-série via paleta --cz-chart-1..3.
Abrir ↗Chart HBar — Ranking
Ranqueia poucas categorias por uma métrica com rótulos longos. Série única, um acento.
Abrir ↗04 — Sistema de Ícones
Ícones
Sprite SVG inline — instancie via <svg class="cz-icon"><use href="#cz-i-NAME"></use></svg>. Herda currentColor automaticamente.
Tamanhos — sm / md / lg + uso em botões
Todos os ícones (25)
05 — Formulários & Componentes
Formulários & Componentes
Componentes interativos com JS próprio — abrem em nova aba para demonstração completa.
Formulários
Componentes
Modal
Diálogo sobreposto com backdrop e foco aprisionado.
Abrir ↗Drawer
Painel lateral deslizante para ações contextuais.
Abrir ↗Toast
Notificações temporárias com variantes de estado.
Abrir ↗Tabs
Navegação por abas com conteúdo trocável.
Abrir ↗Dropdown Menu
Menu suspenso com itens, ícones e separadores.
Abrir ↗Breadcrumbs
Trilha de navegação hierárquica com ícones.
Abrir ↗Tooltip
Dica flutuante com posicionamento e delay configuráveis.
Abrir ↗Pagination
Paginação com controles anterior / próximo e saltos.
Abrir ↗Avatar
Representação visual de usuário com fallback e badges.
Abrir ↗Tag
Etiqueta compacta para categorização e filtros.
Abrir ↗Skeleton (loading)
Espaços reservados animados para carregamento de conteúdo.
Abrir ↗Icon Demo
Demonstração do sistema de ícones SVG com sprite inline.
Abrir ↗06 — Organismos de Marketing
Organismos de marketing
Blocos expressivos para landing pages, propostas e momentos de conversão.
Hero Aurora
Plataforma de mídia interativa • Brasil
Do pixel
ao deal
Conecte marcas a audiências reais com formatos imersivos, dados de primeira mão e mensuração independente.
Stat Band Blueprint
Números que falam por si
CTA Aurora
• Comece agora •
Transforme dados
em resultados
Fale com nossa equipe e descubra como a Cazamba pode conectar sua marca às audiências certas.
Sem compromisso. Retorno em até 24 horas.
Feature Grid
• Nossa plataforma •
Uma plataforma.
Quatro pilares de resultado.
.creatives
Rich Media
Formatos imersivos — vídeo interativo, gamificado e expandível — que capturam atenção e elevam o recall da marca.
Explorar formatos →.engage
Audiências Precisas
Segmentação comportamental e contextual com dados de primeira mão. Alcance o consumidor certo, no momento certo.
Conhecer audiências →.tech
Mensuração Real
Relatórios em tempo real com viewability, brand lift e attribution — transparência total do funil de performance.
Ver métricas →.ops
Operação Contínua
Gestão, otimização e suporte dedicados — sua operação de mídia rodando com governança e performance ponta a ponta.
Conhecer operação →Screenshot Frame
Copilot Vignette
07 — Páginas completas
Páginas completas
Telas de produto completas com app-shell e conteúdo real. Abrem em nova aba.
Cockpit de Campanhas
Visão geral com KPIs, filtros e tabela de campanhas.
Abrir ↗Relatórios
Análise detalhada com gráficos de linha e multibar.
Abrir ↗Dashboard Vazio
Empty state completo — zero-dado com CTA de criação.
Abrir ↗Criativos
Galeria de formatos com cards e ações de criação.
Abrir ↗Deck Comercial
Apresentação em slides: capa, cenas de produto e fecho — navegável e exportável em PDF.
Abrir ↗Style Guide
Referência completa de tokens, tipografia e paleta.
Abrir ↗