Fundação

Versões do logotipo

A Masi Experience 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.

ApresentaçõesHeadersMateriais comerciais

Logo vertical

Símbolo e nome em composição vertical. Indicado para capas, aberturas e layouts onde a altura favorece a composição centralizada.

CapasPeças editoriaisComposições centralizadas

Wordmark

Apenas o nome tipográfico. Para aplicações minimalistas, assinaturas, rodapés e contextos onde a marca já está estabelecida.

RodapésDocumentosAssinaturas

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.

AvatarFaviconApp iconSelos

Todas as variantes

Cada assinatura existe em três cores: branca (padrão no dark), Experience e preta (só para fundos claros, fora do design system).

experience-primary-light

experience-primary-brand

experience-primary-dark

experience-vertical-light

experience-vertical-brand

experience-vertical-dark

experience-wordmark-light

experience-wordmark-brand

experience-wordmark-dark

experience-symbol-light

experience-symbol-brand

experience-symbol-dark

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 preto

Versão branca. Padrão da Experience: contraste máximo no fundo escuro.

Fundo preto

Versão Experience. Aplicação colorida da marca sobre o preto.

Fundo Experience

Versão branca sobre a cor principal da marca.

Fundo Experience Dark

Versão branca sobre o escuro da marca. Legibilidade total em fundos muito escuros.

Paleta oficial de aplicação

Preto

#0D0D0D

Branco

#FFFFFF

Experience

#E4000E

Experience Dark

#660006

Nunca aplique o logotipo em cores fora dessa paleta sem aprovação. A consistência cromática é parte essencial da identidade visual da Masi Experience.

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 Experience

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

120px

Ideal

160px+

Logo vertical

Mínimo

96px

Ideal

140px+

Wordmark

Mínimo

80px

Ideal

120px+

Símbolo

Mínimo

24px

Ideal

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

experience-[tipo]-[cor].[formato]

Tipos

primaryverticalwordmarksymbol

Cores

darklightbrand

Formatos

svgpng

Exemplos

experience-primary-dark.svg

experience-primary-light.svg

experience-primary-brand.svg

experience-vertical-dark.svg

experience-vertical-light.png

experience-wordmark-dark.svg

experience-symbol-dark.svg

experience-symbol-brand.png

experience-symbol-light.svg

Estrutura do repositório

assets/logos/experience/
├── primary/
│   ├── experience-primary-[cor].svg
│   └── experience-primary-[cor].png
├── vertical/
│   ├── experience-vertical-[cor].svg
│   └── experience-vertical-[cor].png
├── wordmark/
│   ├── experience-wordmark-[cor].svg
│   └── experience-wordmark-[cor].png
└── symbol/
    ├── experience-symbol-[cor].svg
    └── experience-symbol-[cor].png

Accessibility

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. No design system (só dark) a versão padrão é a branca.

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 Experience Design System - Criado por Chuv Studio