01
Downloads
6 pacotes
Pegue só o que precisa — ou baixe o press kit completo com logos, manual da marca e paleta em um único arquivo.
Fontes: Inter e Roboto Mono · Google Fonts · SIL Open Font License
02
Marca
6 peças
Logotipos, ícone-marca, variações animadas e o hero de abertura. Ponto de partida pra qualquer peça.
HERO
Hero treatment
Abertura de página com glow roxo e tagline. Dark & light.
abrir →
LOGOS
Logomarcas
Xami · XamiHub · versões claro/roxo.
abrir →
ÍCONE
Icon-mark
O "tile X" — uso isolado, avatar, favicon.
abrir →
MOTION · ÍCONE
Icon animations
8 efeitos no ícone "tile X" — draw, pulse, rotate, split.
abrir →
MOTION · LOGOMARCA
Logomark animations
23 animações da logomarca completa — draw, stagger, wipe, glitch, signature, flip-pair, conversation.
abrir →
MOTION
Draw variations
9 variações do efeito "Draw X".
abrir →
MOTION · EXPORT ★
Exportar animações
31 animações (23 logomarca + 8 ícone) — baixe em MP4, WebM transparente, GIF ou copie HTML/CSS pro CapCut, Premiere, After Effects.
abrir →
03
Guidelines
Uso da marca
Regras curtas para manter a identidade consistente. Para o guia completo, consulte o Manual da Marca .
✓ Faça
Preserve clear space mínimo — metade da altura do logo em toda a borda.
Use a versão clara em fundos escuros e a versão roxa em fundos claros.
Respeite o tamanho mínimo legível : 24px de altura (digital) / 12 mm (impresso).
Use o ícone isolado apenas para favicon, avatar ou espaços quadrados pequenos.
Mantenha a cor primária #7543FF como cor-chave da identidade.
✗ Não faça
Não altere cores, proporções ou espaçamento interno do logo.
Não aplique sombras, gradientes ou efeitos sobre a marca.
Não recolor em cores fora da paleta oficial.
Não rotacione, distorça ou estique o logo sob nenhuma hipótese.
Não use o logo sobre fundos com baixo contraste ou imagens ruidosas.
04
Tokens
copiável
Clique em qualquer valor para copiar. HEX, nome do token CSS, ou baixe o arquivo inteiro em tokens.css .
Purple — primária
50 F1EDFF 100 E0D6FF 200 C3B0FF 300 A084FF 400 8A62FF 500 ★ 7543FF 600 5E2FE0 700 4A22B8 800 361785 900 1F0C56
Lavender — secundária (texto em dark)
50 F7F8FF 100 ★ E6EAFF 200 CDD3F7 300 A5ADE0 400 7F87BC
Ink — superfícies
950 07071A 900 ★ 0D0C24 800 15142E 700 201E3F 600 2E2C54
Semânticas
success 2DD4A4 warning F5B547 danger FF5C7A info 5B9BFF
Vars CSS — copie o nome
--xami-purple-500 #7543FF · primária COPY
--xami-lavender-100 #E6EAFF · texto em dark COPY
--xami-ink-900 #0D0C24 · bg principal COPY
--font-sans Inter · UI e body COPY
--font-mono Roboto Mono · labels e código COPY
--radius-md 12px · cards e botões COPY
--shadow-glow glow roxo · destaques COPY
05
Tipografia
3 peças
Inter (sans, UI e texto) e Roboto Mono (labels, código, dados). Escala display para heros e títulos grandes.
06
Cores
5 peças
Previews completos das escalas: roxo , lavanda , ink , semânticas e comparação dark/light .
07
Ícones
60 · 4 estilos
Biblioteca construída à mão, organizada por domínio (CRM, Bot, AI, WhatsApp, Ads). Quatro estilos complementares — clique para copiar SVG.
08
Componentes
8 peças
Blocos UI prontos: botões, inputs, cards, badges, estados de feedback, espaçamento, raio e elevação.
09
Motion
5 peças
Curvas de easing, escala de duração e micro-interações padronizadas. Toda animação respeita prefers-reduced-motion.
10
Patterns
5 peças
Padrões compostos usados em landing, decks e páginas de produto — com várias opções por peça.
11
Voz & Tom
2 peças
Como o XamiHub fala. Arquétipos, vocabulário, frases-padrão, anti-padrões.
12
Acessibilidade
WCAG 2.1 AA/AAA
Contrastes testados em cada par, focus rings visíveis, checklist prático de dos/don'ts. A11y é base — não é feature.
