O guia oficial de identidade visual da AZIOS. Cores, tipografia, logo, favicon, animacoes, leis da marca e tom de voz — tudo que voce precisa para representar a marca com precisao em qualquer meio.
A paleta AZIOS e construida em torno do contraste entre o preto institucional e o azul eletrico tecnologico. Sempre mantenha essa relacao para preservar a identidade.
Fundo principal, Hero, Footer, Sidebar
azios-deepVariação de fundo escuro, cards elevados
azios-deep2Navegação ativa, estados pressionados
azios-deep3CTA primário, links, acentos, badges
azios-electricHover states, gradientes, glows
azios-electric2Backgrounds de badge, estados leves
azios-electric3Texto em fundo escuro, fundos claros
azios-whiteTexto principal em fundo claro
azios-graphiteSubtítulos, texto secundário claro
azios-graphite2Bordas sutis, divisores em temas claros
azios-graphite3Texto terciário, placeholders, ícones
azios-techBackgrounds de seção, hover de linha
azios-tech2Cards de fundo, inputs inativos
azios-tech3Sucesso, status positivo, crescimento
azios-greenHover de sucesso, gradientes verdes
azios-green2Tres familias tipograficas definem a hierarquia visual AZIOS: Space Grotesk para display, IBM Plex Sans para corpo e Inter para interface.
.azios-h1Hero headlines, página principal
AZIOS Intelligence
.azios-h2Títulos de seção, landing pages
Enterprise Platform
.azios-h3Subseções, cards de feature
Workflow Automation
.azios-h4Títulos de card, modais
Dashboard Overview
.azios-h5Labels de grupo, listas
Analytics Report
.azios-h6Overlines, categorias, tags
API ENDPOINTS
.azios-bodyParágrafos, descrições, artigos
O AZIOS é o sistema operacional empresarial que unifica IA, automação e analytics em uma única plataforma SaaS.
.azios-body-smDescrições secundárias, metadados
Configure seus workflows em minutos com nosso builder visual de arrastar e soltar.
.azios-captionStatus, metadados, legendas
STATUS: ACTIVE
.azios-labelLabels de formulário, badges
Email Address
.azios-eyebrowEyebrows, breadcrumbs, pre-titles
AZIOS PLATFORM
.azios-numberMétricas, KPIs, preços, contadores
2,847
O logo AZIOS e o ativo mais valioso da marca. Sempre respeite as versoes aprovadas, o espacamento de respiro e os contextos de fundo.
Espaçamento de respiro
Mantenha uma área de respiro mínima equivalente à altura do símbolo AZIOS ao redor do logo em todas as aplicações.
Tamanho mínimo
Nunca use o logo em largura inferior a 120px em digital ou 30mm em impressão para garantir legibilidade.
Fundo escuro = logo branco
Sempre use a versão branca do logo em fundos com luminosidade inferior a 40% (AZIOS Deep, Graphite, etc).
Fundo claro = logo colorido
Use a versão original do logo em fundos claros (branco, cinza claro, Tech 3) para máximo contraste.
Nunca distorça, comprima ou estique o logo
Não altere as cores do logo além das versões aprovadas
Não aplique sombras, outlines ou efeitos de relevo no logo
Não rotacione ou incline o logo em nenhum ângulo
Não posicione o logo sobre imagens poluídas visualmente
O favicon e a versao icone da marca. Ele deve ser usado em navegadores, bookmarks, notificacoes e como avatar de sistema. Sempre respeite o contexto de fundo.
Contexto de fundo claro
Use o favicon preto (fundo transparente) em navegadores com tema claro, abas claras e bookmarks em interfaces claras.
Safari light mode, Chrome light theme, iOS home screen light
Contexto de fundo escuro
Use o favicon branco (fundo transparente) em navegadores com tema escuro, abas escuras, dashboards e interfaces dark.
Safari dark mode, Chrome dark theme, Dashboard sidebar, modal overlays
Tamanho mínimo digital
Nunca exiba o favicon em dimensões inferiores a 16×16px (favicon padrão) ou 32×32px (retina). Para ícones de app, use 180×180px.
Todos os contextos digitais
Uso como avatar/marca
O favicon pode substituir avatares genéricos em notificações, loading states e estados de erro/sucesso — sempre mantendo a proporção 1:1.
Toast notifications, loading spinners, error states, empty states
Proibição de alteração
Nunca inverta cores manualmente, aplique filtros CSS (brightness, invert), sombras ou gradientes sobre o favicon. Use sempre a versão nativa aprovada.
Todos os contextos
A escala de espacamento AZIOS cria consistencia ritmica entre todos os elementos de interface. Baseada em multiplos de 4px, 8px e 16px.
xssmmdlgxl2xl3xl4xlA voz da AZIOS e precisa, confiante e acessivel. Somos parceiros tecnicos, nao vendedores. Falamos com dados, nao com hype.
Nosso tom é baseado em dados e fatos. Evitamos exageros emocionais. Dizemos 'reduz em 40%' em vez de 'diminui drasticamente'.
"A AZIOS reduz o tempo de onboarding em 40% com automação de IA."
"A AZIOS faz mágica com seus dados e transforma tudo!"
Falamos como parceiros de negócio, não como vendedores. Nosso tom transmite maturidade e solidez institucional.
"A plataforma é projetada para escalar com sua operação, sem comprometer segurança ou compliance."
"Você VAI amar nossa plataforma, é a melhor do mundo!!!"
Conceitos complexos são explicados com clareza. Não assumimos que o leitor conhece jargões técnicos.
"Workflows são sequências automatizadas de tarefas — como um roteiro que o software segue sozinho."
"Nosso orquestrador de workflows polimórficos utiliza arquitetura event-driven..."
Mensagens devem inspirar ação clara. Cada texto guia o usuário para o próximo passo.
"Configure seu primeiro workflow em 3 minutos. Comece agora."
"Workflows são uma funcionalidade interessante que você pode explorar quando quiser."
Movimento com proposito. Cada animacao do logo e da interface deve seguir os tokens oficiais para manter a identidade coesa e a experiencia premium.
.animate-logo-fadeLogo Fade-In
Entrada do logo no hero, page transitions, modais de welcome
opacity 0 → 1, translateY(12px) → 0, blur(4px) → 0
.animate-logo-pulseLogo Pulse
Loading states, processos em background, sincronização
scale 1 → 1.02 → 1, opacity 1 → 0.85 → 1
.animate-logo-spinLogo Spin
Loading spinner com favicon central, upload de arquivos, processamento de dados
rotate 0° → 360° em loop
.animate-logo-bounceLogo Bounce
Call-to-action sutil, novas notificações, highlight de feature
translateY 0 → -6px → 0
.animate-page-enterPage Enter
Toda transição de página no SPA, troca de abas internas
opacity 0 → 1, translateY(16px) → 0
.animate-shakeError Shake
Validação de formulário falha, erro de permissão, retry de ação
translateX alternado -4px ↔ +4px
.animate-success-checkSuccess Check
Confirmação de ação, pagamento aprovado, workflow concluído
scale 0 → 1.15 → 1 com rotação
.animate-slide-in-rightSlide In Right
Toast notifications, painel lateral, drawer de filtros
translateX(100%) → 0, opacity 0 → 1
.azios-skeletonSkeleton Shimmer
Loading de cards, tabelas, listas enquanto dados carregam
gradiente se movendo -200% → +200%
.azios-progress-barProgress Fill
Barra de progresso em uploads, onboarding steps, timers
width 0% → 100%
Essas leis governam todo o uso da marca AZIOS. Violar qualquer uma delas pode resultar em suspensao de parceria ou acao legal.
A AZIOS só reconhece duas versões oficiais do logo: a versão padrão (preto/azul sobre fundo claro) e a versão branca (sobre fundo escuro). Nenhuma outra variação é permitida sem autorização expressa do time de Brand.
Uso não autorizado pode resultar em suspensão de parceria white-label.
O favicon é o símbolo distintivo da AZIOS em formato ícone. Ele deve ser usado EXATAMENTE nas versões fornecidas (preto para fundo claro, branco para fundo escuro). É obrigatório em: (a) abas de navegador, (b) bookmarks, (c) PWA icons, (d) notificações push, (e) avatares de sistema.
Substituir o favicon por ícones genéricos ou versões não aprovadas quebra a consistência de marca.
A área de respiro ao redor do logo é sagrada. Nenhum elemento gráfico, texto, botão ou imagem pode invadir essa zona. A regra aplica-se igualmente ao logo horizontal, vertical e ao favicon.
Material com violação de respiro será rejeitado em review de brand.
Todas as animações do logo devem seguir os tokens oficiais. É PROIBIDO: girar o logo em loop infinito por mais de 5s, aplicar efeitos de glitch, distorcer o logo em 3D, ou usar cores não aprovadas durante a animação.
Animações fora do guideline serão removidas em auditoria de UI.
As cores da paleta AZIOS são fixas. Não é permitido: criar versões em tons de cinza (exceto aprovadas), aplicar gradientes sobre o logo, usar saturação diferente, ou mesclar com outras identidades visuais.
Violação de cor pode invalidar uso em materiais oficiais.
AZIOS®, AZIOS Intelligence® e o símbolo distintivo são marcas registradas. É vedado o uso em contextos que possam causar confusão com outras marcas, ou em materiais que associem a AZIOS a conteúdo ilegal, ofensivo ou discriminatório.
Violação pode resultar em ação judicial por infração de propriedade intelectual.
Parceiros white-label podem usar os assets da marca desde que mantenham a integridade do logo, favicon e paleta. A remoção completa da marca AZIOS só é permitida nos planos Enterprise com cláusula white-label ativa.
Uso white-label não licenciado constitui violação de contrato.
O logo deve ser legível em TODOS os breakpoints. Em mobile (<640px), a largura mínima é 100px. Em tablet (640-1024px), 140px. Em desktop (>1024px), 180px. O favicon deve ser renderizado em 16×16, 32×32 e 180×180 conforme device.
Logo ilegível em qualquer breakpoint é considerado bug crítico de UI.
A voz AZIOS é precisa, confiante e acessível. Materiais que usam tom agressivo, excessivamente casual, ou linguagem que diminui a credibilidade técnica da marca violam este princípio.
Conteúdo fora do tom de voz será reescrito pelo time de comunicação.
Quando a AZIOS atualizar seu logo, favicon ou paleta, todos os parceiros têm prazo de 30 dias para migrar para os novos assets. O uso de versões desatualizadas após esse prazo é considerado violação.
Não atualizar dentro do prazo pode resultar em suspensão de uso da marca.
Efeitos visuais que reforcam a identidade tecnologica e futurista da AZIOS. Use com moderacao para manter o tom enterprise.
.brand-gradientFundo padrao para secoes de destaque, hero e cards premium.
.brand-electric-glowEfeito de brilho para CTAs, badges e elementos de foco.
.brand-gradient-textTexto com gradiente eletrico para headlines especiais e destaques.
Arquivos de logo, favicon, icone e wordmark em alta resolucao para uso em apresentacoes, documentos, websites e midia.
Para uso comercial, licenciamento, parcerias de marca ou materiais de imprensa, entre em contato com nosso time de brand.
Utilizamos cookies para garantir a segurança, melhorar a performance e personalizar sua experiência na plataforma AZIOS. Alguns são necessários para o funcionamento básico; outros são opcionais e utilizados para análise e marketing. Leia nossa Política de Cookies e Política de Privacidade.