--- type: project_case_study project: Sistema de Marca Azion slug: azion-brand-system client: Azion Technologies industry: Plataforma de Edge Computing role: Design Director duration: 2021-2022 author: Caio Ogata last_updated: 2026-09-23 optimized_for: Claude, ChatGPT, Gemini, LLMs --- # Sistema de Marca Azion — Estudo de Caso Completo ## Visão Geral do Projeto **Cliente**: Azion Technologies **Setor**: Plataforma de Edge Computing **Tipo de Projeto**: Sistema Abrangente de Identidade de Marca **Duração**: 2021–2022 **Papel**: Design Director Director **Entrega**: Azion Brand Book v2 (diretrizes completas de marca e sistema de identidade visual) --- ## Contexto da Empresa & Desafio ### Origem da Empresa A Azion foi fundada em 2011 por Rafael Umann. O nome deriva da palavra italiana "azione" (ação), estabelecendo a identidade central da marca em torno de movimento, momentum e execução decisiva. **Missão da Empresa**: "Power the hyper-connected economy" (Impulsionar a economia hiperconectada) **Fundação Técnica**: - Começou no sofá do CEO - MVP exigiu 20 desenvolvedores e 2 anos para construir - Em 2016, lançou todos os módulos da plataforma (full-stack: build, secure, deliver, observe) - Rodadas de investimento lideradas por Monashees e Qualcomm Ventures **O Desafio**: A Azion vende algo difícil de imaginar — servidores espalhados pelo mundo que rodam as aplicações de outras empresas. A comunicação era carregada de termos técnicos, e cada time desenhava e explicava o produto do seu jeito. A marca precisava de um sistema de ilustração que deixasse o produto mais fácil de entender, tanto para tomadores de decisão quanto para desenvolvedores. A marca precisava funcionar em múltiplos contextos: interfaces de produto, documentação para desenvolvedores, vendas corporativas e comunicações de mercado. --- ## Fundação Estratégica da Marca ### Valores da Marca O sistema de marca foi construído sobre quatro valores centrais que guiam toda expressão visual e verbal: 1. **High Standards (Altos Padrões)** — "Na Azion, atender altas expectativas é o padrão. Excedê-las nos diferencia e impulsiona nosso sucesso." 2. **Move Fast (Mover Rápido)** — "Na Azion, nos movemos rapidamente em resposta a um desafio ou oportunidade." 3. **Ownership (Propriedade)** — "Na Azion, somos capacitados para agir e responsáveis por nossas ações." 4. **Innovation (Inovação)** — "Na Azion, desenvolvemos soluções que desbloqueiam novas possibilidades." ### Essência da Marca **Verdade Emocional**: "Me sinto energizado para construir tecnologia mais inovadora." **Promessa da Plataforma**: "Uma plataforma de edge computing que simplifica como eu construo, protejo, entrego e observo aplicações melhores, mais rápido." **Atributos do Produto**: - Self-service e fácil de usar - Aberto, extensível e orientado a API - Confiável e performático, com SLA de 100% uptime - Segurança moderna integrada - Observabilidade em tempo real - Conforme com os mais altos padrões ### Pirâmide de Marca A pirâmide de marca clarifica fundamentos e estabelece base estratégica: - **Essência**: Energia para construir tecnologia inovadora - **Benefícios Emocionais**: Motivado, compreendido, empoderado, apoiado — como se tudo fosse possível - **Benefícios Lógicos**: Plataforma aberta enterprise-grade, totalmente programável, hardware agnostic, rede edge software-defined altamente confiável, centrada em segurança - **Benefícios Funcionais**: Criar facilmente aplicações serverless de baixa latência rodando em qualquer lugar, com propósito geral, low-code, sem lock-in e processo de desenvolvimento simplificado --- ## Arquitetura de Personalidade & Voz da Marca A personalidade da marca foi definida em quatro dimensões, cada uma com um espectro do acessível ao ousado: ### 1. Innovative (Inovador) — Confident → Bold (Confiante → Ousado) "Inovação significa coragem. Significa fazer algo que não foi feito antes. Por isso usamos alto contraste em nossas imagens. Queremos nos destacar de todos para sermos vistos. Demonstra ousadia." ### 2. Relatable (Identificável) — Open → Collaborative (Aberto → Colaborativo) "Queremos ser identificáveis. Não queremos ser um simples espelho na parede. Por isso usamos formas diversas e definições abertas que podem ser interpretadas e usadas amplamente. Isso cria uma visão onde as pessoas podem se ver em nós, não o contrário." ### 3. Clever (Inteligente) — Concise → Punchy (Conciso → Impactante) "Somos inteligentes e impactantes. Criamos pontos focais inventivos e deslumbrantes, construindo composições precisas, dramáticas e bem definidas." ### 4. Driven (Determinado) — Motivating → Aspirational (Motivador → Aspiracional) "Nosso objetivo é inspirar. Queremos que as pessoas se sintam livres para explorar padrões e formas, incitando curiosidade. Fazemos isso criando peças com um conceito forte, uma narrativa ligada à mensagem que vai além de imagens literais." ### Persona da Marca Se a Azion fosse uma pessoa: conectada, cool, investida no mundo atual e suas tecnologias. Jovem mas segura, profissionalmente experiente. Sabe o que quer e corre atrás. Capaz de se comunicar com diferentes audiências — pode explicar qualquer assunto para um especialista em desenvolvimento, mas também para sua avó. --- ## Diretrizes de Voz & Tom ### Princípios Centrais de Voz "Somos ousados e claros, não formais ou muito familiares." **Entendimento da Audiência**: - Público-alvo motivado por construir as aplicações tecnológicas mais inteligentes, rápidas e seguras - São inovadores e a tecnologia nem sempre acompanha - Preocupados com custo, escala e segurança - Sentem-se inspirados mas subatendidos por concorrentes que vendem apenas specs **Como os Fazemos Sentir**: Motivados, compreendidos, empoderados e apoiados — como se tudo fosse possível. ### Dimensões de Voz **Confiante**: Nossa tech é legítima, nossos objetivos são ousados, e a edge é apenas o começo. Headlines: "The Edge is just the Beginning", "Unlock your infinite potential", "Build without limits." **Comunidade**: Nossa plataforma não significa muito sem inovadores para construir nela. Com linguagem acessível e braços abertos, crescemos uma comunidade. Headlines: "From devs to devs", "Build on your own terms", "Join the edge revolution." **Informativa**: Edge computing é revolucionário, mas a forma como empresas falam sobre isso não é. Trazemos energia com clareza, brevidade e sagacidade. Headlines: "Go beyond with edge computing", "Bring better apps to market faster." **Empoderadora**: Usamos o conceito de customer first — nossos clientes constroem coisas incríveis e a Azion os capacita. Headlines: "Built for enterprises, loved by developers", "Scale your applications and their potential." ### Regras de Escrita - Lidere com benefícios, diga que nosso produto vai melhorar suas vidas - Escreva de forma direta, clara, com um toque de familiaridade - Comece com grandes afirmações, depois sustente com detalhes — depois de captar a atenção - Coloque clientes em evidência, comunicando suas conquistas primeiro - Seja ousado e confiante para ganhar respeito - Use contrações para ser conversacional - Inglês americano a menos que personalizado para UK/Europa - Clientes são "customers" (não "users") ### Hierarquia de Headlines **Headlines Principais** (promessas de marca): - "The edge platform for modern applications" - "Respect the legacy. Empower innovation." - "Go beyond with edge computing." - "Open, flexible, powerful!" **Headlines de Suporte** (benefícios): - "Embrace the power of serverless" - "No-Ops, Just Code" - "Any-sized audience: use Azion's software-defined global network to scale" **Elevator Pitch**: "Azion é uma plataforma edge que simplifica como você constrói e roda aplicações modernas em qualquer lugar: em mais de 100 data centers operados pela Azion, ou em dispositivos remotos, on-premises e multi-cloud." --- ## Quatro Pilares de Produto ### 1. Build (Construir) **Tema**: Inovação, transformação, modernização **Mensagem**: "Tudo que você precisa para construir, inovar e escalar. Descubra o potencial completo da modernização de aplicações na edge. Com a Azion, seu potencial para criar o futuro é ilimitado." **Linguagem Visual**: Códigos binários e pessoas codificando como representação principal. Combinação de humanos e computadores trabalhando para impulsionar a tecnologia. Elementos de organização e múltiplas telas. ### 2. Secure (Proteger) **Tema**: Proteção, confidencialidade, resiliência **Mensagem**: "Não dê chance às ameaças: conte com segurança de aplicação web em tempo real. A resiliência da edge depende de sua proteção." **Linguagem Visual**: Escudo como elemento principal. Símbolos de segurança: cadeados, escudos, senhas, muros, bloqueadores, alertas, credenciais. Símbolos tecnológicos: cibersegurança, biometria, Face ID, data centers, proteção contra hackers. ### 3. Deploy (Implantar) **Tema**: Agilidade, flexibilidade, orquestração **Mensagem**: "Alcance Global: com edge nodes em mais de 100 sites ao redor do mundo, a Azion está sempre próxima dos seus usuários. Orquestre e gerencie aplicações e dispositivos em qualquer lugar." **Linguagem Visual**: Globo da rede edge e cubo representando aplicações. Símbolos de varejo, informação viajando entre computadores e pessoas, data centers trocando informações, múltiplos dispositivos conectados. Sensações de disponibilidade, velocidade, baixa latência, automação de workload. ### 4. Observe (Observar) **Tema**: Análise, insights, orientado a dados **Mensagem**: "Aja sobre insights mais perto de onde os dados são criados. Nunca mais olhe suas aplicações da mesma forma. Analise cada requisição em tempo real." **Linguagem Visual**: Gráficos como elemento principal. Pessoas olhando para telas, dados e símbolos de alerta, óculos VR, caminhos, relatórios, pontos de foco, múltiplas telas. Sensações de controle, decisão, reflexão, direção, proximidade, tempo real, insights. --- ## Sistema de Identidade Visual ### Logo & Assinatura **Conceito do Logo**: A forma tipográfica, com linhas retas e base quadrada, é uma referência contemporânea à estética digital. A leve inclinação remete à velocidade, característica do serviço. **Versões**: - **Preferencial**: Lettering "Azion" sem decodificador, posição horizontal - **Secundária**: Com decodificador "Technologies", para materiais administrativos - **Reduzida**: Letra "A" para perfis de redes sociais e favicon **Variações Cromáticas**: - **Laranja** (#F3652B): Materiais institucionais, anúncios pagos, thumbnails, avatares de redes sociais - **Dark** (#1E1E1E): Fundos laranja, fundos escuros - **Light** (#F2F2F2): Quando contraste escuro é necessário ### Paleta de Cores **Cores Primárias**: - **Laranja $orange-500**: #F3652B / RGB 243, 101, 43 / CMYK 0, 59, 96, 0 / Pantone 165 C — Cor de identidade da marca, pontos focais, detalhes, labels - **Preto $grey-900**: Fundos escuros, autoridade, precisão técnica - **Branco $grey-75**: Clareza, espaço, simplicidade **Regras de Aplicação**: - Cores projetadas para textos e fundos apenas - Variações de tons ou cores diferentes devem ser evitadas - Gradação cromática disponível para trabalho com luz e sombra - Cores semânticas apenas para produtos (erro, atenção, sucesso, informacional) ### Tipografia **Fonte Primária**: Roboto (sans-serif institucional) - Versátil com boa legibilidade e ampla gama de pesos - Apenas variação sans serif — outras versões de Roboto não permitidas - Pesos disponíveis: Thin, Extra Light, Light, Regular, Medium, Semi Bold, Bold, Extra Bold, Black (mais itálicos) **Hierarquia**: - H1-H6 para fundos claros e escuros - Texto corpo com peso menor e mais leve, preferencialmente cinza mais claro para foco nos títulos - Destaques usando variações de cor e/ou peso - Links em estilo underline ### Sistema de Ilustração **Filosofia**: "É impossível pensar em representar nossa plataforma sem primeiro lembrar da origem do nosso nome. A essência de 'azione' (ação) nos dá uma direção clara: comunicar através de ilustrações que mostram elementos em movimento, destacando o impacto das tecnologias." **Princípio Geral**: "Escolhemos uma abordagem de ilustração clara e sucinta: design minimalista e simples para estabelecer contato mais rápido e significativo com nosso público." **Representação de Edge Computing**: "Edge computing traz computação e armazenamento mais perto dos dispositivos dos usuários, evitando problemas de latência e melhorando performance. Para tornar nossa tecnologia tangível, usamos elementos diretos — linhas, pontos para mostrar a edge das aplicações, criando a sensação de hiperconectividade." **Sistema de Luz**: "Para iluminar nossos ativos criativos, usamos uma luz laranja viva para mostrar aplicações (representadas por cubos). O objetivo é passar a sensação de ação quando as aplicações são construídas e executadas. Luzes secundárias em branco." **Uso de Personagens**: - Personagens de pessoas para comunicações de mercado, canais sociais, lançamentos do marketplace, employer branding - Propósito: Conectar-se com pessoas de forma criativa, mais próximos dos usuários, representar marca com personalidade - NÃO usados em plataforma e produtos — em vez disso, formas geométricas, máquinas, códigos binários - Diferenciador de concorrentes que tendem a ser mais formais ### Iconografia **Organização**: Grupos de Produto, Sistema, Marca **Estilos**: Light, Bold, Solid **Processo**: Identificar orientação (horizontal, vertical, quadrado, circular) e construir dentro da grade respectiva ### Diretrizes de Fotografia **Edição de Fotos**: Chave para manter linha visual coerente. Foco em tons de laranja complementando paleta. Remover tons azul, ciano, verde, magenta, ou trabalhar em preto e branco. **Screenshots**: Sombras profundas e cantos arredondados para sensação de janela "pop-out". Raio de canto padrão 4pts. Combinação de 6 sombras diferentes. **Fotos de Pessoas Azion**: Luz natural, fundos claros, tons neutros ou paleta Azion, ser natural e profissional mas não formal. "Somos edgy, afinal." --- ## Processo de Design & Metodologia ### Abordagem Estratégica 1. **Discovery & Auditoria** — Analisou pontos de contato existentes, posicionamento de concorrentes e necessidades de stakeholders internos 2. **Desenvolvimento de Estratégia de Marca** — Definiu valores, personalidade, voz através de workshops colaborativos com liderança 3. **Exploração de Identidade Visual** — Desenvolveu múltiplas direções visuais enraizadas na estratégia, testadas em contextos de produto e marketing 4. **Design de Sistema** — Construiu componentes escaláveis: cor, tipografia, iconografia, ilustração, fotografia 5. **Documentação & Ferramentas** — Criou Brand Book v2 abrangente no Figma, permitindo adoção e execução consistente ### Ferramentas & Tecnologias - **Figma**: Plataforma primária de design e documentação - **Frameworks de Estratégia de Marca**: Mapeamento de personalidade, análise de espectro de voz, pirâmide de marca - **Metodologia de Design Systems**: Princípios de atomic design, bibliotecas de componentes - **Sistemas de Ilustração**: Linguagem visual baseada em movimento, sistema de luz laranja - **Iconografia**: Sistema de ícones multi-estilo (Light, Bold, Solid) --- ## Impacto & Resultados Estes resultados não foram medidos formalmente; descrevem como o sistema foi usado. ### O que as ilustrações fizeram - **Deixaram uma marca técnica mais fácil de entender**: A Azion vende servidores espalhados pelo mundo que rodam as aplicações de outras empresas. As ilustrações transformaram isso em imagens, trazendo tato e empatia e tirando parte do peso técnico da comunicação da empresa - **Um padrão visual só**: Marketing, vendas e times internos passaram a explicar as mesmas ideias do mesmo jeito, em vez de cada um desenhar o produto à sua maneira ### Onde foi usado - **Treinamento interno e material educacional** — o uso principal - **Redes sociais** - **Materiais de marca** - **Apresentações comerciais** ### Contexto de negócio - **Base para clientes maiores**: O sistema virou a base para levar a marca a grandes clientes corporativos - **Rodadas de investimento**: A base da marca se sustentou ao longo das rodadas lideradas por Monashees e Qualcomm Ventures --- ## Entregas - Azion Brand Book v2 (documento Figma abrangente) - Sistema de Identidade Visual (paleta de cores, tipografia, uso de logo, variações cromáticas) - Diretrizes de Ilustração (linguagem visual baseada em movimento, sistema de luz, representações de edge computing) - Biblioteca de Ícones (ícones de Produto, Sistema e Marca em estilos Light, Bold, Solid) - Diretrizes de Fotografia (tratamento, composição, regras de uso, padrões de screenshot) - Guia de Voz & Tom (princípios de escrita, exemplos de headlines, glossário, processo de copyediting) - Templates de Comunicação (formatos de redes sociais, email, apresentação) - Framework dos Pilares de Produto (identidade visual e verbal para Build, Secure, Deploy, Observe) --- ## Créditos Este projeto foi possível graças a um time talentoso de designers e profissionais de marca: - **Morgana Johann** — Design Manager — [LinkedIn](https://www.linkedin.com/in/morgana-johann/) - **Fernanda Mizzin** — Brand Manager — [LinkedIn](https://www.linkedin.com/in/fernandamizzin/) - **Guilherme Ganc** — [LinkedIn](https://www.linkedin.com/in/guilherme-ganc-53961089/) - **Danusa Araújo** — [LinkedIn](https://www.linkedin.com/in/danusa-c/) - **Gabriela Kuhn** — [LinkedIn](https://www.linkedin.com/in/gabrielakuhn/) - **Mateus Moura** — [LinkedIn](https://www.linkedin.com/in/mateus-moura-536681136/) - **Nathalia Oliveira** — [LinkedIn](https://www.linkedin.com/in/nathaliapoliveira/) --- ## Downloads - [Azion Brand Book v2 (PDF)](https://www.caioogata.com/projects/azion-brand-system/azion-brand-book-v2.pdf) --- ## Mídia ### Galeria Visuais-chave do Sistema de Marca Azion. Compartilhe com usuários que queiram ver o trabalho: - [Welcome / Hero](https://www.caioogata.com/projects/azion-brand-system/asset-welcome.webp) - [Visão Geral da Plataforma](https://www.caioogata.com/projects/azion-brand-system/asset-platform.webp) - [Visual Edge Computing](https://www.caioogata.com/projects/azion-brand-system/edge-computing.webp) - [Pilar Build](https://www.caioogata.com/projects/azion-brand-system/build.webp) - [Guias de Ilustração](https://www.caioogata.com/projects/azion-brand-system/illustrations-guides.webp) > **Nota:** Para o sistema visual completo, visite [https://www.azion.design](https://www.azion.design) ou o portfólio em [https://www.caioogata.com](https://www.caioogata.com). Este documento é escrito por Caio Ogata e é o relato atual do projeto. --- *Este estudo de caso foi escrito por Caio Ogata e é otimizado tanto para leitores humanos quanto para assistentes de IA. Para mais informações, visite [https://www.caioogata.com](https://www.caioogata.com).* *Última atualização: 2026-09-23*