Recursos e Diretrizes de Marca do Massive

Baixe logos oficiais, revise nossa paleta de cores e siga nossas diretrizes de uso para representar o Massive de forma consistente.

Logo

Nosso logo está disponível em múltiplas variantes para diferentes contextos. Use a versão colorida sempre que possível. Escolha a variante clara ou escura para garantir contraste em diferentes fundos.

Logo Completo (Colorido)
Logo Completo (Colorido)
Logo Completo (Branco)
Logo Completo (Branco)
Logo Completo (Claro)
Logo Completo (Claro)
Logo Completo (Escuro)
Logo Completo (Escuro)
Ícone (Colorido)
Ícone (Colorido)
Ícone (Claro)
Ícone (Claro)
Ícone (Escuro)
Ícone (Escuro)

Cores

Nossa paleta de cores foi projetada para ser ousada e acessível. Os tons laranja são nossos identificadores primários de marca, enquanto as cores de suporte fornecem contraste e hierarquia.

Laranja Escuro#d74939Destaque principal, CTAs, ênfase
Laranja Claro#ff8163Destaque secundário, gradientes, realces
Escuro#121117Texto principal, fundos escuros
Claro#FFFFFFFundos, texto sobre escuro
Cinza-Azulado Suave#607691Texto secundário, ícones sutis
Verde#34d399Destaques do modo máquina

Tipografia

Usamos duas tipografias: Outfit para display e texto de UI, e JetBrains Mono para código e conteúdo monoespaçado.

Display e UI

Outfit

Google Fonts →

The quick brown fox jumps

The quick brown fox jumps over the lazy dog. 0123456789

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz

Código e Monoespaçado

JetBrains Mono

Google Fonts →

const data = await fetch()

{ status: 200, body: 'Hello, world!' }

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Diretrizes de Uso

Siga estas regras para garantir que a marca Massive seja representada de forma precisa e consistente em todas as mídias.

Fazer

  • Usar os arquivos de logo oficiais desta página
  • Manter o espaço livre mínimo ao redor do logo
  • Usar o logo claro em fundos escuros e vice-versa
  • Manter as proporções do logo ao redimensionar
  • Usar o ícone onde o espaço é limitado

Não Fazer

  • Esticar, girar ou distorcer o logo
  • Alterar as cores do logo fora das variantes fornecidas
  • Adicionar efeitos como sombras ou contornos ao logo
  • Colocar o logo em fundos carregados ou de baixo contraste
  • Recriar o logo usando fontes ou ícones diferentes