Fundação

Versões do logotipo

Mase 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

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 verde escuro

Versão branca. Legibilidade total em fundos muito escuros.

Fundo MASI

Versão preta sobre a cor principal da marca. Contraste e identidade preservados.

Fundo preto

Versão branca em fundos neutros escuros.

Paleta oficial de aplicação

Preto

#0D0D0D

Branco

#FFFFFF

MASI

#AFF000

Verde escuro

#0C1C16

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

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 escuro

Contraste adequado com versão clara sobre fundo verde escuro.

Á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

masi-[tipo]-[cor].[formato]

Tipos

primaryverticalwordmarksymbol

Cores

darklightgreenbrand-dark-green

Formatos

svgpng

Exemplos

masi-primary-dark.svg

masi-primary-light.svg

masi-primary-green.svg

masi-vertical-dark.svg

masi-vertical-light.png

masi-wordmark-dark.svg

masi-symbol-dark.svg

masi-symbol-green.png

masi-symbol-brand-dark-green.svg

Estrutura do repositório

public/logos/
├── primary/
│   ├── masi-primary-[cor].svg
│   └── masi-primary-[cor].png
├── vertical/
│   ├── masi-vertical-[cor].svg
│   └── masi-vertical-[cor].png
├── wordmark/
│   ├── masi-wordmark-[cor].svg
│   └── masi-wordmark-[cor].png
└── symbol/
    ├── masi-symbol-[cor].svg
    └── masi-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.

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.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter