Sistema completo de identidade visual para a Mever — agência de conteúdo e performance para marcas premium. Logo, cores, tipografia, voz, componentes e diretrizes de uso.
O logotipo é construído com tipografia serifada em itálico, acompanhado de um ponto laranja que sinaliza energia sem agressividade. Simples, elegante, reconhecível.
Wordmark em tipografia sans-serif condensada de peso extra-bold, todo em maiúsculas. A letra “R” é acompanhada de um ® sobrescrito que reforça o caráter institucional e de marca registrada.
Manter ao redor do logotipo um espaço mínimo equivalente à altura da letra “M”. Nenhum elemento pode invadir essa área de respiro.
O logotipo deve ser reproduzido com no mínimo 80px de largura em digital (16px de altura mínima) para garantir legibilidade do ®.
Versões disponíveis: ink (#f2f2f2) para fundos escuros, black (#0a0a0a) para fundos claros e orange (#E85002) para acentos pontuais em fundo preto ou branco.
A paleta é construída sobre o contraste entre o preto profundo, o laranja incisivo e os neutros de texto. Cada cor tem uma função clara no sistema.
O sistema tipográfico usa três famílias com funções claras: serifada para expressão e destaque, sans-serif para leitura e interface, monospace para metadados e linguagem técnica.
Serifada óptica com personalidade forte. Usada em peso 200–400, quase sempre em itálico para dar caráter e distinção aos títulos.
Sans-serif moderna e legível. Usada em peso 300–500 para corpo de texto, navegação, botões e UI. Sempre secundária às serifadas nos elementos de destaque.
Monospace com caráter técnico. Usada para eyebrows, labels de seção, metadados e microtext. Sempre em maiúsculas com letter-spacing generoso.
A voz da Mever é construída em três pilares. Cada decisão de copy deve passar por esse filtro antes de ir ao ar.
Afirmações, não promessas. A Mever não "tenta ajudar" — ela entrega. A linguagem é direta, sem hedges ou vacilações. Cada frase fecha.
"É nisso que a Mever trabalha."
"Podemos te ajudar a melhorar sua presença digital."
Sem gírias, sem CAPS LOCK, sem urgência artificial. O cliente premium não precisa ser gritado — precisa se sentir compreendido. A elegância está no ritmo, no espaço, na precisão das palavras.
"Feita para quem quer ser lembrado, não apenas visto."
"RESULTADOS INCRÍVEIS para o seu negócio! 🔥🔥"
Cada marca que entra na Mever é diferente. A voz reconhece isso: nada de linguagem genérica de agência, nada de "soluções inovadoras". Nomeia o problema, nomeia quem tem esse problema.
"Médicos, dentistas, clínicas de estética — se o seu trabalho depende de um público que olha antes de comprar."
"Atendemos todo tipo de empresa que quer crescer no digital."
Todos os componentes seguem a mesma lógica: fundo escuro, borda sutil, laranja como acento funcional. Border-radius mínimo (2px) reforça o caráter preciso e não ornamental da marca.
Primary: bg #E85002 — Ghost: border #262626
Border-radius: 2px — Font: Geist 500 13px
Fonte: JetBrains Mono 9px uppercase
Letter-spacing: 0.1em — Padding: 5px 10px
Mever — conteúdo e performance para marcas premium.
Feita para quem quer ser lembrada, não apenas vista.
Os textos mais importantes do site — headline principal, argumento central e fechamento. A base de toda comunicação da Mever.
Regras práticas para manter a consistência em qualquer ponto de contato — site, redes, apresentações e materiais impressos.
Exemplos de como o sistema visual se comporta em diferentes pontos de contato — post, card de destaque e assinatura de e-mail.
Tokens CSS para implementação direta no Framer, Webflow ou código. Copiar e colar.
/* ── MEVER Design Tokens ── */ :root { /* Cores principais */ --mever-orange: #E85002; --mever-orange-soft: #F16001; --mever-orange-deep: #C10801; /* Fundos */ --bg: #0a0a0a; --bg-elev: #111111; --bg-card: #161616; --bg-high: #1e1e1e; /* Texto */ --ink: #f2f2f2; --ink-soft: #a0a0a0; --ink-mute: #585858; /* Bordas */ --line: #1c1c1c; --line-mid: #262626; /* Tipografia */ --serif: 'Fraunces', Georgia, serif; --sans: 'Geist', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace; /* Radius */ --radius: 2px; }