ME-logo · Default
me-logo/default
primário
Brand
Logos, marcas e assinaturas oficiais do ME para garantir consistência visual em produtos, materiais internos e comunicações.
Não recrie logos, favicons ou sufixos manualmente. Use esta página ou importe do Foundations no Figma — proporções e cores são fixas.
Boas Práticas
Use sempre os arquivos oficiais da marca, respeitando proporção, cor, contraste, área de proteção e contexto. Não altere, redesenhe ou combine logos manualmente.
Quando usar
ME Logo Default — fundos claros, páginas institucionais, comunicações padrão.
ME Logo Primary — quando houver necessidade de reforço visual da marca.
ME Monograma — espaços reduzidos, ícones, favicons, aplicações compactas.
Versões com sufixo — quando o produto exigir identificação específica.
Logo em negativo — fundos escuros ou coloridos, com contraste adequado.
Quando não usar
Recriar a marca manualmente — use sempre os arquivos oficiais.
Alterar cores ou proporções — mantenha escala, paleta e composição.
Aplicar efeitos (sombra, contorno, gradiente, blur…).
Usar versões antigas ou não aprovadas.
Combinar a marca com elementos não previstos.
Configurador de marca
Use a pré-visualização para validar contraste, fundo, variação e tamanho antes de aplicar o logo na interface.
Fluxo: escolha a família → ajuste tamanho, cores e fundo → confira o preview → baixe PNG ou SVG. A ordem dos controles à direita é a mesma para todas as famílias.
ME-logo
Preview 80px · PNG @2x
Referência
Assets oficiais da marca ME, organizados por família, variação e contexto. Pesquise, filtre, visualize ou copie o asset.
Precisa de sufixo customizado, fundo arco-íris ou badge quadrada? Use sempre o Configurador — o catálogo traz bases e presets, não todas as combinações.
Catálogo
ME-logo · Primary
me-logo/primary
ME-logo · Black
me-logo/black
negativo
ME-logo · White
me-logo/white
positivo
ME-logo · Quadrado · Roxo · Branco
me-logo/badge-square-purple-white
badgecor secundáriapurple-500quadrado
ME-logo · Quadrado · Roxo · Escuro
me-logo/badge-square-purple-dark
badgecor secundáriapurple-500quadrado
ME-logo · Quadrado · Rosa · Branco
me-logo/badge-square-pink-white
badgecor secundáriapink-500quadrado
ME-logo · Quadrado · Rosa · Escuro
me-logo/badge-square-pink-dark
badgecor secundáriapink-500quadrado
ME-logo · Quadrado · Verde-limão · Branco
me-logo/badge-square-lime-white
badgecor secundárialime-400quadrado
ME-logo · Quadrado · Verde-limão · Escuro
me-logo/badge-square-lime-dark
badgecor secundárialime-400quadrado
ME-logo · Quadrado · Azul-ciano · Branco
me-logo/badge-square-cyan-white
badgecor secundáriacyan-400quadrado
ME-logo · Quadrado · Azul-ciano · Escuro
me-logo/badge-square-cyan-dark
badgecor secundáriacyan-400quadrado
ME-logo · Arredondado · Roxo · Branco
me-logo/badge-rounded-purple-white
badgecor secundáriapurple-500arredondado
ME-logo · Arredondado · Roxo · Escuro
me-logo/badge-rounded-purple-dark
badgecor secundáriapurple-500arredondado
ME-logo · Arredondado · Rosa · Branco
me-logo/badge-rounded-pink-white
badgecor secundáriapink-500arredondado
ME-logo · Arredondado · Rosa · Escuro
me-logo/badge-rounded-pink-dark
badgecor secundáriapink-500arredondado
ME-logo · Arredondado · Verde-limão · Branco
me-logo/badge-rounded-lime-white
badgecor secundárialime-400arredondado
ME-logo · Arredondado · Verde-limão · Escuro
me-logo/badge-rounded-lime-dark
badgecor secundárialime-400arredondado
ME-logo · Arredondado · Azul-ciano · Branco
me-logo/badge-rounded-cyan-white
badgecor secundáriacyan-400arredondado
ME-logo · Arredondado · Azul-ciano · Escuro
me-logo/badge-rounded-cyan-dark
badgecor secundáriacyan-400arredondado
me-product-sufix-maker · Blue (exemplo)
suffix-maker/blue
exemploconfigurador: sufixo livre
me-product-sufix-maker · Green (exemplo)
suffix-maker/green
exemploconfigurador
me-product-sufix-maker · White (exemplo)
suffix-maker/white
exemplofundo escuro
me-product-sufix-maker · Componente
suffix-maker/component
referência Figma
Regras de aplicação
| Família | Uso típico | Onde personalizar |
|---|---|---|
| ME-logo | Identidade principal em headers, login e apps | Configurador — cor, badge quadrada, fundo |
| Sufix-maker | Novos produtos: me.nome | Configurador — sufixo livre e cores |
| Favicon | Abas, PWA e app icon | Configurador — px fixo por tamanho sm/md/lg |
| topme. | Submarca em campanhas e materiais | Configurador — layout e cores |
| DiverseME | Diversidade e inclusão — Logo, Texto ou Coração | Configurador — variantes e fundo arco-íris |
| Corações em Ação | Iniciativa social — coração + texto | Configurador — layout e cor do conteúdo |
Tamanhos de exportação
| Token | Preview | PNG | Quando usar |
|---|---|---|---|
sm | 48 px | @1x | Nav compacta, chips, UI densa |
md | 80 px | @2x | Headers, cards, documentação |
lg | 128 px | @3x | Hero, apresentações, destaque |
Exemplos de uso
<!-- ME-logo padrão -->
<EdsBrandMark configurator-mode :config="{ family: 'me-logo', variant: 'white', size: 'md' }" />
<!-- Sufix-maker -->
<EdsBrandMark configurator-mode :config="{ family: 'suffix-maker', suffix: 'produto', size: 'md' }" />
<!-- Favicon -->
<EdsBrandMark configurator-mode :config="{ family: 'favicon', size: 'sm' }" />