A Lojas Mari, do jeito certo

A Mari resolve

É daqui que sai todo o resto — inclusive o que se desenha e o que se escreve. Antes de criar qualquer peça, leia esta parte.

"A Mari resolve seu problema, não fique perdendo tempo por aí, tem tudo na Mari. O propósito da Mari é te atender. Cliente aqui tem prioridade — vamos resolver o problema dele e do que ele procura."

Para quem a marca fala

Famílias da região, classe C e D, que compram por necessidade do dia a dia da casa e são sensíveis a preço e a parcelamento. Quem lê a peça está resolvendo uma coisa prática — uma panela que furou, uma toalha que acabou, um presente para amanhã. A marca fala com essa pessoa, no balcão, não com o mercado.

Atenção: a loja não tem cartão próprio. O parcelamento é feito nos cartões de crédito convencionais do cliente — nunca escrever "cartão Mari".

Os arquivos da marca

São três famílias — o lockup completo, só o nome e só o símbolo — cada uma em algumas cores. Clique nas bolinhas para trocar a versão e ver como ela fica no fundo certo. Todas existem em SVG e em PNG — prefira o SVG, que não perde qualidade em tamanho nenhum.

Lockup completo

Símbolo, nome e descritivo juntos. É o que você usa por padrão — só troque quando o espaço não deixar.

Vertical colorido

A versão principal da marca. Símbolo em cima, nome embaixo. Use sempre que houver espaço.

SVG PNG

Não use sobre laranja: a palavra “Mari” some no fundo.

Horizontal colorido

Símbolo à esquerda, nome à direita. Para espaço largo e baixo — cabeçalho de documento, faixa, topo de site.

SVG PNG

Só o nome

Sem o símbolo. Para quando ele já aparece em outro lugar da peça, ou quando o espaço é muito estreito.

Nome com descritivo

O nome mais o “Variedades para seu lar”. Quatro versões: escolha pela cor do fundo onde ela vai.

SVG PNG

A preta serve para impressão em uma cor só — carimbo, xerox, jornal.

Nome sem descritivo

Só “LojasMari”, sem a linha de baixo. Use quando o logo for pequeno ou quando o descritivo já estiver escrito na peça.

SVG PNG

Sem descritivo, o tamanho mínimo cai para 90px de largura.

Só o símbolo

A casinha com o “m”, sozinha ou dentro do círculo. Para foto de perfil, favicon, adesivo, sacola, carimbo — onde o nome não cabe.

Símbolo

A casinha solta, de uma cor só — mais limpa que a versão com contorno, e é a que funciona bem em tamanho pequeno.

SVG PNG

Para foto de perfil, prefira a versão no círculo, ao lado.

Símbolo no círculo

A casinha dentro de um círculo cheio. É a melhor escolha para foto de perfil de rede social, porque já vem no formato redondo.

SVG PNG

Substituíram a versão texturizada antiga, que saiu do kit.

Deixe o logo respirar

Logo espremido parece amador. A regra é uma só e serve para as cinco versões: a faixa livre em volta do logo tem metade da altura dele. Logo de 8cm de altura pede 4cm de folga em cada lado.

A linha tracejada é o limite. Nada entra ali dentro — nem texto, nem foto, nem borda de caixa, nem outro logo.

Tamanho mínimo

Abaixo destes tamanhos, a linha "Variedades para seu lar" vira um borrão cinza. Os números vêm da medida real do arquivo: o descritivo ocupa 30% da altura do logo e precisa de uns 8px para continuar legível.

O que não fazer com o logo

Cada erro abaixo já aconteceu com alguma marca. Os dois primeiros são os que mais aparecem na Mari, porque dependem do fundo.

Colorido sobre laranja. A palavra "Mari" é laranja — ela some no fundo. Sobre laranja, use o horizontal branco.

Branco sobre claro. Ele é chapado de branco: sumiu. Existe justamente para o fundo escuro.

Branco sobre marsala. Assim é que é. Mesma lógica para foto escura.

Esticado ou achatado. Ao redimensionar, segure Shift para travar a proporção.

Girado ou inclinado. O logo é sempre reto, na horizontal.

Com sombra, brilho ou contorno. Nenhum efeito. O logo já tem o contorno que precisa.

Recolorido. Marsala, branco ou preto — só. Nada de azul, verde ou dourado "pra combinar com a campanha".

Espremido contra a borda. Respeite a faixa livre da seção anterior.

Sobre fundo poluído. Foto agitada ou degradê forte embaixo do logo tira a leitura. Ache uma área calma.

A paleta

Clique em qualquer cor para copiar o código. O laranja é o destaque e aparece pouco — é ele que diz "olha aqui". Marsala é a cor institucional, e o creme é o fundo de quase tudo.

As seis que você usa todo dia

A escala inteira

Quando precisar de um tom intermediário — hover, borda, fundo de card — pegue daqui em vez de inventar. Clique para copiar.

Laranja

Marsala

Neutros quentes

Combinações que passam no teste

Contraste calculado pela norma WCAG 2.1. Texto normal precisa de 4,5:1; texto grande, de 3:1.

Três fontes, três territórios

A marca usa três famílias, e cada uma tem um lugar fechado. Isso não é liberdade para misturar — é o contrário: se cada fonte fica no seu território, a peça se organiza sozinha. Fora dele, vira colcha de retalhos.

O que cada uma nunca faz

A escala, e quem ocupa cada faixa

Razão 1,25 a partir de 16px. Se um tamanho não está aqui, ele não existe na marca — escolha o mais próximo.

Tudo arredondado

Canto vivo é frio e técnico — o oposto do que a marca quer dizer. Botão é sempre totalmente redondo. Card é arredondado. Nada quadrado.

Cantos

A regra: menor por dentro, maior por fora. Um elemento de 12px dentro de um card de 16px — nunca o contrário. Botão usa border-radius: 9999px, totalmente redondo.

Espaçamento: grade de 4

Todo espaço é múltiplo de 4px. Nada de 13px, 27px ou "o que ficou bom no olho" — é isso que faz as peças baterem entre si.

Sombra

Leve, e tingida de marrom — nunca cinza ou preto puro, que deixa a peça suja. Se estiver na dúvida, use menos.

As peças prontas

Estas são as peças que já existem no site. Copie o código em vez de redesenhar — é o que mantém tudo parecido com a mesma marca.

.btn-mari {
  background: #CF3E00;        /* laranja acessível, não o #FF4D00 */
  color: #FFFFFF;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 9999px;      /* sempre totalmente redondo */
  transition: .15s;
}
.btn-mari:hover { background: #A63200; transform: translateY(-2px); }

.olho-mari {
  font-size: 14px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: #CF3E00;             /* 14px é texto pequeno: usa o laranja escuro */
}

Font Awesome, versão sólida

Os ícones vêm todos da mesma família — Font Awesome, estilo solid. Misturar biblioteca é o jeito mais rápido de a peça parecer remendada.

Os 16 setores

Cada setor tem o seu ícone fixo. Use sempre o mesmo — é assim que o cliente aprende a reconhecer.

Os de sempre

Fale como se fala no balcão

Caloroso, próximo e simples — do jeito que se fala para a família e para o vizinho, não para uma corporação. Frase curta. Sem enrolação. Sem vender status: vende praticidade, economia e acolhimento.

O eixo mudou

Por muito tempo, quase tudo o que a marca escreveu partia de variedade, qualidade e preço justo. Hoje, resolver e prioridade do cliente vêm na frente disso — a variedade é o meio que permite resolver, não o argumento. Material novo, principalmente o de atendimento e vendas, parte daqui.

Três regras que não se quebram

Leve tudo com você

O kit tem os cinco logos em SVG e PNG, o símbolo no círculo, o arquivo de tokens e um LEIA-ME com as regras que mais importam. As três fontes são gratuitas no Google Fonts — baixe e instale uma vez só.