Do pixel ao deal.

The Cazamba Adtech design system — dark-first, data-driven, built on deep navy + vivid orange, aurora gradients, and a bold geometric voice.

v alpha DESIGN.md Bai Jamjuree · Poppins
01 — Palette

Colors

Two colors anchor the system — deep navy and vivid orange — supported by a vibrant accent family for sub-brands, data-viz and energy. Click any swatch to copy its hex.

Core brand
Vibrant accents
Semantic status
02 — Type

Typography

Bai Jamjuree for display & headings (geometric, technical, set UPPERCASE). Poppins for body & UI. Open Sans for long-form reading.

display-2xl · Bai Jamjuree 700
Somos plataforma
display-xl · Bai Jamjuree 700
Consumidor no centro
display-lg · Bai Jamjuree 700
Mídia criativa & inovação
heading-lg · Bai Jamjuree 600
A jornada de gestão de mídia
label · Bai Jamjuree 600 · uppercase · 0.14em
Plataforma · 2026 · Hoje
body-lg · Poppins 400
Um time de especialistas em design e criação, pronto para transformar conceitos em experiências visuais cativantes.
body-md · Poppins 400
Para conectar marcas aos seus clientes de forma significativa e duradoura.
longform · Open Sans 400
Organização e controle em todas as etapas do projeto. Um squad que garante que todos os processos internos e externos funcionem com eficiência e fluidez, da estratégia à entrega.
03 — Surfaces

Gradients & depth

Signature aurora and spectrum gradients carry the brand energy; glass + glow provide elevation on dark.

Aurora
Spectrum
Orange

Glass panel

surface-glass + 16px blur + hairline border — the default elevated panel over a gradient.

Glass + glow

Add a radial glow behind a focal panel to lift it off the dark field.

04 — Components

Components

Buttons, cards, stat tiles, badges, inputs and the four sub-brand lockups.

Buttons
Stat tiles
+200
Marcas atendidas
+13mil
Criativos veiculados
14
Anos impactando
90%
Viewability
Cards
Solid card
surface navy, 16px radius, hairline border — the default content surface in dense product UI.
Conteúdo
Use cards to group related information; reserve orange for the single key action inside.
Badges & chips
Expansíveis Interativos Gamificados Ativo Alerta
Input
Sub-brand pillars
.creatives
Design & criação
Cazamba Adtech
.engage
Estratégia & campanhas
Cazamba Adtech
.tech
Lab de inovação
Cazamba Adtech
.OPS
Operação & processos
Cazamba Adtech
05 — Motifs

Signature motifs

The brand's "engineered" feel: dotted blueprint frames, the barcode rail, rotated labels, the equalizer mark, and the ••• divider.

Plataforma
Blueprint frame
Dotted rules partition a section into modular panels with a left rail — barcode + rotated label.
Equalizer mark
•••
Dot divider
isotype
Isotype
06 — Motion

Motion

Snappy & restrained for functional UI; a touch of spring for brand moments. All loops respect prefers-reduced-motion.

Durations — hover a track to feel it
fast · 120ms
base · 200ms
slow · 320ms
slower · 600ms
Easings — looping
standard
in (exit)
in-out
emphasized
Signature motions
Aurora drift
Equalizer
+0
Count-up
Hover & glow
07 — Guardrails

Do's & Don'ts

Do

  • Design dark-first on ink; use the aurora gradient for hero moments.
  • Pair navy + white for structure; reserve orange for the one key action.
  • Headlines in Bai Jamjuree UPPERCASE; body in Poppins.
  • Keep logo clear-space = the tallest isotype bar; use approved variants only.
  • One vibrant accent per region — for a sub-brand or a data series.

Don't

  • Don't set orange body text on navy or white.
  • Don't stack multiple vibrant accents in one component.
  • Don't use pure black fields — use ink; don't add drop shadows to flat dark UI.
  • Don't recolor, skew or stretch the logo.
  • Don't set display headlines in Poppins or paragraphs in Bai Jamjuree.
08 — Blocks

Blocks & examples

Every component lives in the block gallery; the full-page compositions below show the blocks assembled into real product screens. All blocks ship via the shadcn registry (@cazamba HTML · @cazamba-app Astro/React).

Galeria

Todos os blocos →

Índice navegável de todos os primitivos e organismos, cada bloco isolado em sua própria página.
Exemplo · Produto

Cockpit de campanhas →

Tela completa: navbar, KPI row, filter-bar e campaign-table montados em um cockpit.
Exemplo · Produto

Relatórios →

Página de relatórios com painéis, gráficos e métricas em data-mode product.
Exemplo · Produto

Criativos →

Gestão de criativos compondo cards, tags e estados em uma tela real.
Exemplo · Produto

Dashboard vazio →

Estado zero-dado com empty-state guiando o usuário ao primeiro passo.