Logotipo — Advisor
Marca para orientação especializada, advisory e relacionamento consultivo.
Fundação
Versões do logotipo
Mase Advisor possui quatro assinaturas visuais. Cada uma foi criada para um contexto específico — escolher a versão correta é parte essencial do uso correto da marca.
Logo principal
Símbolo e nome em composição horizontal. Versão primária para toda comunicação institucional onde a marca precisa ser apresentada com clareza completa.
Logo vertical
Símbolo e nome em composição vertical. Indicado para capas, aberturas e layouts onde a altura favorece a composição centralizada.
Wordmark
Apenas o nome tipográfico. Para aplicações minimalistas, assinaturas, rodapés e contextos onde a marca já está estabelecida.
Símbolo
Apenas o símbolo da marca. Para espaços reduzidos, avatares, favicons, app icons e selos onde o reconhecimento precisa ser rápido e compacto.
O logo completo deve ser priorizado quando a marca precisa ser apresentada com clareza pela primeira vez ou em contextos de comunicação institucional. O símbolo deve ser usado quando o espaço é limitado ou quando a marca já está contextualizada no ambiente.
Sobre os formatos
SVG — vetorial
Escalável sem perda de qualidade. Preferência absoluta para web, interfaces digitais e e-mail. Nitidez garantida em qualquer resolução e densidade de tela.
PNG — raster transparente
Com fundo transparente. Use apenas quando SVG não for compatível — em plataformas de apresentação, editores de imagem ou sistemas legados.
Color Usage
Uso de cor
O logotipo possui versões cromáticas para garantir contraste e legibilidade em qualquer fundo. A escolha deve sempre priorizar legibilidade.
Fundo branco
Versão preta. Contraste máximo em fundos brancos e claros.
Fundo branco
Versão Advisor. Aplicação colorida da marca em fundo branco.
Fundo Advisor
Versão branca sobre a cor principal da marca.
Fundo preto
Versão branca em fundos neutros escuros.
Paleta oficial de aplicação
Preto
#0D0D0D
Branco
#FFFFFF
Advisor
#5C00FF
Nunca aplique o logotipo em cores fora dessa paleta sem aprovação. A consistência cromática é parte essencial da identidade visual da Mase Advisor.
Correct Usage
Usos corretos
Referências de aplicação que preservam a integridade, legibilidade e consistência visual da marca.
Proporção original
Logo aplicado com as proporções exatas do arquivo original.
Versão branca em fundo Advisor
Contraste adequado com versão clara sobre a cor principal da marca.
Área de respiro preservada
Espaçamento mínimo mantido em todos os lados do logotipo.
Símbolo em avatar
Símbolo compacto com respiro interno, ideal para perfis e apps.
Clear Space
Área de proteção
O logotipo deve manter uma zona livre ao redor. Nenhum elemento externo — texto, borda, imagem ou ícone — deve invadir essa área mínima.
Logo principal
Logo vertical
Wordmark
Símbolo
Regra de proteção
A área mínima de proteção ao redor do logotipo corresponde à altura do símbolo da marca. Em interfaces digitais, mantenha pelo menos 24px de afastamento em todos os lados. Em materiais impressos, escale proporcionalmente. Essa regra vale para todas as versões — principal, vertical, wordmark e símbolo.
Minimum Size
Tamanho mínimo
Abaixo dos tamanhos recomendados, a legibilidade fica comprometida — o símbolo perde detalhes e o nome se torna ilegível.
Logo principal
Mínimo
120pxIdeal
160px+Logo vertical
Mínimo
96pxIdeal
140px+Wordmark
Mínimo
80pxIdeal
120px+Símbolo
Mínimo
24pxIdeal
32px+Os tamanhos mínimos existem para proteger a leitura, evitar perda de detalhe e garantir que a marca permaneça reconhecível em todos os dispositivos e densidades de tela. Prefira sempre o símbolo isolado quando o espaço disponível for inferior ao mínimo do logo completo.
Logo Selection
Guia de escolha
Critério simples para selecionar a versão correta conforme o contexto de aplicação.
| Contexto | Versão | Motivo |
|---|---|---|
Header institucional | Logo principal | Maior clareza e reconhecimento de marca |
Avatar / Perfil | Símbolo | Melhor leitura em espaço reduzido |
Capa de apresentação | Logo vertical | Composição centralizada mais equilibrada |
Rodapé de documento | Wordmark | Assinatura discreta sem competir com o conteúdo |
App icon / Favicon | Símbolo | Reconhecimento compacto em alta redução |
Documento comercial | Logo principal | Presença institucional completa |
Thumbnail de conteúdo | Símbolo | Melhor leitura em baixa resolução |
E-mail marketing | Logo principal | Identificação clara no topo da comunicação |
Peça editorial / Capa | Logo vertical | Layout vertical favorece a composição |
Assinatura mínima | Wordmark | Texto limpo quando símbolo é dispensável |
File Naming
Nomenclatura de arquivos
Padrão de nomeação para todos os assets do logotipo, garantindo consistência e rastreabilidade no repositório.
Padrão
advisor-[tipo]-[cor].[formato]Tipos
primaryverticalwordmarksymbolCores
darklightbrandFormatos
svgpngExemplos
advisor-primary-dark.svgadvisor-primary-light.svgadvisor-primary-brand.svgadvisor-vertical-dark.svgadvisor-vertical-light.pngadvisor-wordmark-dark.svgadvisor-symbol-dark.svgadvisor-symbol-brand.pngadvisor-symbol-brand.svgEstrutura do repositório
public/logos/
├── primary/
│ ├── advisor-primary-[cor].svg
│ └── advisor-primary-[cor].png
├── vertical/
│ ├── advisor-vertical-[cor].svg
│ └── advisor-vertical-[cor].png
├── wordmark/
│ ├── advisor-wordmark-[cor].svg
│ └── advisor-wordmark-[cor].png
└── symbol/
├── advisor-symbol-[cor].svg
└── advisor-symbol-[cor].pngAccessibility
Legibilidade e contraste
Diretrizes para garantir que o logotipo permaneça legível e reconhecível em qualquer contexto de aplicação.
Contraste mínimo
O logotipo deve sempre ter contraste suficiente com o fundo. Nunca aplique versão escura sobre fundo escuro, nem versão clara sobre fundo claro sem ajuste de cor.
Tamanho preservado
Não use abaixo dos tamanhos mínimos estabelecidos. Em espaços muito pequenos, prefira o símbolo em vez do logo completo ou wordmark.
Hierarquia visual
O logotipo não deve competir com títulos, chamadas principais ou elementos de interface críticos. Preserve a hierarquia visual da página.
Área de respiro constante
Mantenha sempre o espaço mínimo de proteção ao redor. Nenhum elemento deve invadir essa zona, seja texto, borda, imagem ou ícone.
SVG em interfaces digitais
Use sempre SVG para web e interfaces digitais. Garante nitidez em qualquer resolução, incluindo telas Retina e 4K.
Fundos complexos e imagens
Ao aplicar sobre imagens ou fundos muito carregados, use overlay, container de cor ou área de proteção para preservar a legibilidade do logo.
Masi Negócios Design System - Criado por Chuv Studio