IZZAT GLOBAL^®

Accent · primária

Cream · institucional

Coral · Navy · Black

Surface (Izzat-clean)

Color in context · live preview

Veja cada cor da paleta aplicada em hero, botão, card, texto e ícone. Clique numa cor pra trocar.

Contraste WCAG 2.1 AA

Combinações críticas testadas. Laranja sobre branco em body text falha — use só em headlines ≥18pt ou sobre fundo escuro.

Contrast tester · live

Teste qualquer combinação. Ratio calculado em tempo real seguindo WCAG 2.1.

/* Drop em qualquer projeto Izzat */
.cta {
  background: var(--accent);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius);
  transition: background var(--duration-fast) var(--ease);
}
.cta:hover { background: var(--accent-hover-warm); }

Type tester

Edite o texto · ajuste size, tracking, leading e weight ao vivo.

Escala canônica

01 · App iconiOS · Android · avatar

SVG

02 · Symbol orangeFundo claro · watermark

SVG

03 · Symbol blackImprensa B&W

SVG

04 · Symbol whiteFundo escuro

SVG

05 · Logo lightWordmark · claro

SVG

06 · Logo on darkHero seção dark

SVG

07 · Logo verticalCartões · footer

SVG

Logo testbed · before/after canvas

Veja o logo em 4 backgrounds reais. Clique pra trocar.

Background

Variante

Symbol orange Symbol black Symbol white Wordmark light Wordmark dark

Gradient generator

Monte e copie um gradiente próprio. Clique no output pra copiar.

Botões

Radius

Shadows

Brand essentials

Logo reveal2.3s · stroke animation

Wordmark buildZ + IZZAT GLOBAL stagger · 6s

Lockup revealZ + wordmark lateral · 5s

Symbol pulseRespiração infinita

Symbol glow3 anéis expandindo

Symbol rotateZ girando 3D simulado · 4s

Symbol magnetic7 particles atraídas · 5s

Brand stinger2s · vídeo intro original

🔥 Hero symbol · cinematic

Symbol explosion12 partículas radiando · 4s

Symbol portalPortal interdimensional · 6s

Symbol constructZ se desenha em traços · 5s

Symbol shockwave4 ondas de choque · 3s

📜 Wordmark cinematic

Wordmark zoomZoom 200%→100% + motion blur · 5s

Split merge11 letras convergem · 6s

Wordmark glitchRGB offset + scanline · 4s

Wordmark reflectReflexo espelhado · 7s

🌐 Ecosystem · 8 marcas

Converge8 dots espirala para órbita · 8s

Pulse waveOnda radia em cascata · 5s

ConnectionsEdges respirando · 10s

Grid → orbitCaos vira ordem · 6s

⚡ Impact · energia

StrikeFlash + 14 shards · 4s

Zoom burstScale + explosão · 3s

Glitch stormDatamosh · converge limpo · 5s

Typography slamTexto bate + shake + dust · 4s

📖 Brand story · narrativas

OriginPonto vira Z · OPERAÇÃO REAL · 8s

Scale fractal1 Z → 144 Zs → 1 mega-Z · 10s

NetworkRede orgânica crescendo · 12s

Premium tierStandard → Premium → Enterprise · 9s

Loaders

Loading dots3 pontos · stagger 0.4s

Loading orbitSpinner premium

Progress radialRing 0 → 87% · 3s

Buttons

CTA pulseOnda de impacto · 2.5s loop

Button loading3 dots saltando

Button successLoading → check verde

Button arrowSeta avança no hover

Button magneticBotão segue cursor + glow · 4s

Data viz

Number ticker0 → 175 contagem · 3.5s

Bar chart growing5 barras stagger · 4s

Text effects

TypewriterTexto se desenha + caret · 5s

Gradient shiftCores trocando · 6s loop

Backgrounds + dividers

Aurora mesh4 blobs drifting · 20s

Particles ambient5 orbs flutuantes

Wave divider3 ondas em fase · 8s

Dots flow10 dots fluindo · 5s

Interactions

Wipe transition800ms · L→R reveal

Notification popToast + check + fade · 4s

Hamburger → XMenu toggle · 3s

Heart likePulso + burst · 3s

Badge NEWPill bounce + pulse ring · 3s

Easing curves

Snippets prontos · clique pra copiar

Arquivos · download direto

<link rel="stylesheet" href="06-design-tokens/tokens.css">

import tokens from './06-design-tokens/tokens.json'

Compare · tokens.css vs tokens.json

Mesmas variáveis, dois formatos. Exporta pra Tailwind ou Style Dictionary.

--accent: #FF6A00;
--accent-light: #FF8C33;
--accent-pressed: #E25F02;
--accent-coral: #F7534B;
--accent-cream: #E1D4A3;
--accent-navy: #1D2C44;
--brand-black: #010101;
--radius: 14px;
--radius-lg: 20px;
--space-3: 12px;
--space-6: 24px;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--duration-fast: 200ms;
--shadow-card: 0 4px 16px rgba(0,0,0,0.06);

{
  "color": {
    "accent": { "$value": "#FF6A00" },
    "accent-light": { "$value": "#FF8C33" },
    "accent-pressed": { "$value": "#E25F02" },
    "accent-coral": { "$value": "#F7534B" },
    "accent-cream": { "$value": "#E1D4A3" },
    "accent-navy": { "$value": "#1D2C44" },
    "brand-black": { "$value": "#010101" }
  },
  "radius": {
    "DEFAULT": { "$value": "14px" },
    "lg": { "$value": "20px" }
  },
  "motion": {
    "ease": { "$value": "cubic-bezier(0.25, 0.46, 0.45, 0.94)" }
  }
}