Comunicação Visual · Regras de Negócio · Sistema de Design Web
Documento normativo que estabelece os padrões de identidade visual,
o sistema de design e as diretrizes de aplicação para todas as
produções digitais sob a marca Mãe Vitaminas. Regulamenta o uso
do logotipo, paleta cromática, tipografia, grid, componentes,
conteúdo e acessibilidade. Sua observância é obrigatória em
sites, landing pages, aplicações e demais peças digitais
produzidas interna ou externamente.
Home, produto, conteúdo. Como o sistema se aplica na página inteira.
p. 082
08
Imagem & Foto
Direção de fotografia, tratamento, uso permitido, placeholders.
p. 094
09
Voz & Tom
Como cada linha fala. Vocabulário permitido e proibido, exemplos.
p. 102
10
Acessibilidade
Contraste mínimo, foco visível, motion, alt-text. WCAG 2.2 AA como base.
p. 114
11
Checklist
A lista que toda página atravessa antes de subir para produção.
p. 122
Capítulo 01
a marca .
A marca mãe é representada pelo lettering manuscrito "mãe", em
traço contínuo, com a cedilha do "ã" desenhada como onda. É a única
assinatura institucional. Todo material, digital ou impresso, carrega
este lettering — sem exceções.
v. principal · institucional
Cinco aplicações cromáticas autorizadas.
A marca mãe vive em cinco aplicações cromáticas: a versão
institucional em preto, e as quatro versões coloridas — uma por
produto. A versão usada num site, página ou componente responde
sempre ao contexto cromático do conteúdo ao redor.
Em página de Mavena, mãe é roxo. Em página de Aurallys, mãe é
mel. Em home institucional, mãe é preto. Nunca duas cores no
mesmo plano: ou é preto, ou é a linha em vigor.
cinco versões permitidas.
institucional
linha · genelle
linha · aurallys
linha · mavena
linha · aella
fundo escuro
sobre cor
sobre cor clara
Cap. 01 · 02
arejamento & redução.
o arejamento "x".
Toda aplicação do lettering preserva uma área livre de qualquer
outro elemento em volta. Chamamos esta área de arejamento.
A unidade de arejamento "x" equivale à altura da letra
m do lettering. O espaçamento mínimo livre em todas as quatro
direções é de 1 unidade x. Em peças com muita informação,
recomenda-se 1,5x ou 2x.
Não há exceção. Logo encostado em borda, em texto, em outra
marca ou em fotografia compromete a leitura e
desautoriza a peça.
1x = altura do "m"
tamanho mínimo de redução.
A redução excessiva compromete a leitura. Use os tamanhos abaixo
como piso absoluto; abaixo deles, sempre prefira só o ícone
"m" isolado ou uma versão alternativa por extenso em Puck-Light.
Recomendado 120px+
Confortável 72px
Mínimo digital 40px
Não usar < 32px
Cap. 01 · 03
uso incorreto. nove formas de não usar a marca.
O lettering "mãe" foi desenhado num único traço contínuo, num único
peso, num único conjunto de cores. Toda alteração — por mais sutil
que pareça — descaracteriza a marca. Os exemplos abaixo são
sempre proibidos, em qualquer contexto.
Não contornarnenhuma versão com outline
Não rotacionarsempre na horizontal
Não aplicar sombranem brilho nem efeito
Não usar cores de forasó preto + 4 linhas
Não distorcernunca scaleX ou scaleY
Não aplicar desfoquenem filtros
Não aplicar gradientescor sólida sempre
Não sobre foto poluídause bloco branco
Cap. 01 · 04
fundos & contraste.
A marca foi feita para viver primeiro sobre branco. Sobre as
quatro cores das linhas, usa-se a versão em branco. Sobre preto, branco também. Sobre fotografia poluída, sempre dentro de bloco branco. O resto está proibido.
ok
Brancopreferencial · institucional
ok
Pretoversão branca · alto contraste
ok
Cor cheiasobre Genelle, Mavena ou Aella
ok
Sobre Aurallysversão preta · contraste ok
ok
Tom soft da linhacor da linha em cima
não
Cor sobre cornunca uma linha sobre o outro
não
Foto poluída diretause bloco branco antes
não
Cinza clarobaixo contraste, ilegível
Capítulo 02
os quatroprodutos.
Cada produto é um linha da marca: tem nome,
cor, voz, função e frequência próprios. Não são variantes de um mesmo
produto — são quatro conversas distintas sob a mesma assinatura.
01
Genelle
a linha da semente
Para a mulher que está plantando.
Fertilidade, pré-concepção, tentantes, ciclo, ovulação, ácido fólico, perdas gestacionais, ansiedade da espera. Dor presente, ciência sem clínica fria.
Voz · paciência ativa
#C81F7C
02
Aurallys
a linha do dia a dia
Para a mulher que precisa atravessar a semana inteira.
Imunidade, energia, vitamina D, sono, estresse, rotina alimentar, magnésio, hidratação. O cuidado diário que segura o corpo de pé.
Voz · prática e solar
#D9A21C
03
Mavena
a linha da transição
Para a mulher na sua virada — perimenopausa e menopausa.
Climatério, menopausa, ondas de calor, sono partido, libido, memória, reinvenção pessoal. Passagem, não término. Conversa entre iguais — nunca palestra.
Voz · profunda, com humor
#5E27A8
04
Aella
a linha do entendimento
Para a mulher cuja dor foi minimizada por anos.
Endometriose, adenomiose, dor pélvica, cólica refratária, diagnóstico tardio, sangramento intenso, validação do sintoma. "A sua dor é real" como fundação.
Voz · direta, sem dramatizar
#E5611A
como a marca & o produto se assinam juntos.
Em qualquer página de produto, a assinatura combinada
mãe + produto aparece sempre uma vez, no header ou
no footer. Ordem fixa: "mãe" em preto, separador, nome do produto
na cor da linha. Nunca o inverso.
Header de página produto
·Mavena
Header de página produto
·Aella
Capítulo 03
paletadecores.
Quatro cores principais. Para cada uma, uma variante soft
(fundos suaves, tags, callouts) e uma variante deep
(texto sobre soft, hover, ícones). Mais nenhuma cor de marca.
Cinzas e branco existem para estrutura — não decoram.
Cada cor tem papel definido. Não use Mavena na página de Aella.
Não pinte um botão de Genelle numa landing de Aurallys. Cor
identifica a linha — quebrar isso quebra o sistema.
Preto · ink
Texto principal. Wordmark institucional. Headers de página neutra (sobre, sumário).
Rosa · Genelle
Páginas, links, CTAs e destaques da linha fertilidade. Nunca fora dele.
Mel · Aurallys
Páginas, links, CTAs e destaques da linha imunidade/dia. Texto sobre Mel deve ser preto.
Roxo · Mavena
Páginas, links, CTAs e destaques da linha menopausa. Também é a cor de foco/hover institucional.
Brasa · Aella
Páginas, links, CTAs e destaques da linha endometriose. Também é a cor de alerta/erro do sistema.
Cinzas
Texto secundário, rótulos, divisores. Nunca como cor de marca — apenas estrutural.
Capítulo 04
tipografia. duas fontes. uma regra.
Puck-Light é a fonte de display da marca — todo título,
chamada e wordmark de produto. Montserrat é a fonte de massa
de texto — corpo, legenda, navegação, rótulo. Não há terceira fonte.
Use os tokens abaixo como tamanhos fixos. Não invente intermediários.
Toda variação fora desta tabela requer aprovação.
--display
Puck · 300 · clamp(56,9vw,144)
capa
hero · capa
--h1
Puck · 300 · clamp(48,6.5vw,96)
título
section h1
--h2
Puck · 300 · clamp(36,5vw,64)
subtítulo
section h2
--h3
Puck · 300 · clamp(28,3vw,42)
cabeçalho
card · block
--h4
Puck · 300 · 22px
nome
item · row
--lead
Montserrat · 400 · 20px
Parágrafo de abertura, fala com gente, no tom da revista.
intro
--body
Montserrat · 400 · 15px
Texto corrido padrão. Bem legível, line-height 1.7.
parágrafo
--small
Montserrat · 500 · 13px
Detalhes, legendas, UI compacta.
caption · ui
--mono
JetBrains Mono · 500 · 12px
rótulo · capítulo · número
label · meta
pareamentos aprovados.
Recomendado
Manchete CHAMADA DE APOIO
Display Puck em peso 300 + rótulo Montserrat 500 em maiúsculas com tracking 0.2em. A dupla mais usada da marca.
Em corpo
Título da seção Parágrafo de abertura em Montserrat 400, com line-height 1.6 para conforto de leitura prolongada.
Display + parágrafo. Sempre cor da linha no título, sempre preto no parágrafo.
UI compacta
Card aella · endometriose
Display em h4 + mono em rótulo. A dupla padrão de cards, callouts e tags. Cor da linha sempre no rótulo.
Capítulo 05
grid, espaço & breakpoints.
O sistema usa 12 colunas, container máximo 1320px,
gutter de 8vw e tokens de espaçamento em escala 4pt.
Quatro breakpoints. Tudo fluido entre eles.
Colunas
12
Container
1320 px
Gutter
8 vw · 24 px
Base unidade
4 px
breakpoints — quatro faixas.
S
0 — 640 px
Mobile retrato. Coluna única. Tipografia adapta com clamp().
Container100%
M
641 — 1024 px
Tablet, mobile paisagem. Grid de 6 colunas. Componentes ainda generosos.
Container720 px
L
1025 — 1440 px
Notebook, desktop padrão. Grid de 12 colunas. Layout canônico.
Container1320 px
XL
1441 px+
Monitor grande. Container mantém máximo, gutter cresce com vw.
Container1320 px
escala de espaçamento.
Todos os paddings, margens e gaps usam apenas estes tokens. Não há "20px" ou "30px" arbitrários — só múltiplos de 4 que estão na escala.
--s-1
4 px
linha entre rótulo e valor; tracking visual.
--s-2
8 px
gap entre chips, ícone + texto.
--s-3
12 px
padding interno de input, gap entre tags.
--s-4
16 px
gap padrão UI · padding de card pequeno.
--s-5
24 px
gutter base · padding de card médio.
--s-6
32 px
gap entre blocos · padding de card grande.
--s-7
48 px
separação entre seções inline.
--s-8
64 px
padding vertical de hero pequeno.
--s-9
96 px
padding vertical de seção padrão.
--s-10
128 px
padding vertical de seção principal · hero.
Capítulo 06
componentes do sistema.
Inventário canônico dos blocos que constroem todo site mãe.
Não construa nada fora desta lista sem aprovação. Toda
variante é definida aqui — não pode ser inventada na peça.
Três layouts canônicos cobrem 90% dos sites mãe: Home
(institucional, 4 quadrantes), Produto (uma cor cheia,
pote em destaque) e Conteúdo (artigo, com tipografia em
primeiro plano).
uma marca em quatro vozes que falam com a mulher inteira.
Composição inteligente para diferentes fases do corpo feminino. Cada combinação foi desenvolvida com nutrientes amplamente estudados no suporte do bem-estar feminino.
edição I · março 2026+ 50 mil leitoras semanaiscertificação Anvisa
A marca prefere tipografia a fotografia. Quando foto entra,
entra com regra: mulheres reais, idades reais, ambientes
cotidianos, luz natural. Nada de pose corporativa, gradiente
rosa-laranja ou modelo sorrindo de olhos fechados.
mulher realidade real · luz natural
+ permitido · documentário, situação real, expressão neutra ou natural
still de produtofundo cor de linha
+ permitido · pote sobre fundo soft da linha, luz lateral macia, sem reflexo brilhante
cena cotidianacasa · cozinha · cama · banheiro
+ permitido · objeto do dia (xícara, comprimido na palma da mão, agenda aberta) com a marca discreta
imagens proibidas.
gradiente rosa"wellness genérico"
− proibido · gradiente pastel "wellness" — qualquer marca de bem-estar tem isso
modelo olhos fechadossorrindo, pose, estoque
− proibido · pose de banco de imagens, modelo de catálogo, expressão idealizada
foto + marca diretosem bloco branco
− proibido · lettering "mãe" diretamente sobre foto cheia — sempre dentro de bloco branco
Capítulo 09
rótulos & impressão.
Os quatro rótulos da linha Mãe Vitaminas seguem padrão único de
180 × 75 mm. Cada um traz a marca, o nome da linha
(produto), a composição ativa, a tabela nutricional e os textos
regulatórios exigidos pela ANVISA. Esta seção é a referência
técnica única para reprodução, impressão e versionamento dos
rótulos.
especificações obrigatórias de impressão.
Dimensão
180 × 75 mm
Largura × altura final do rótulo aplicado. Não escalar.
Sangria · bleed
3 mm em todas as bordas
Cor de fundo deve estender-se por 3 mm além da linha de corte.
Margem de segurança
5 mm interna
Texto crítico (ANVISA, marca, composição) sempre dentro desta margem.
Resolução
300 dpi no tamanho final
Imagens em CMYK 300 dpi. Vetores preferenciais. Sem JPEG comprimido.
Modo de cor
CMYK + 1 Pantone da linha
Nunca enviar arquivo em RGB. Pantone da linha sobrepõe o CMYK para fidelidade.
Substrato
BOPP branco fosco
Adesivo permanente. Resistente a umidade e variação térmica. Não usar papel.
Impressão
Flexografia 6 cores
CMYK + 2 Pantones (cor da linha + verniz). Bobina rotativa, 8 estações.
Acabamento
Verniz UV localizado
Verniz brilho aplicado sobre o lettering "mãe" e o nome do produto. Restante fosco.
anatomia do rótulo.
Todo rótulo segue a mesma estrutura horizontal. Ela é fixa — não
redesenhar, não rearrumar, não inverter. A composição abaixo é a
única autorizada.
esquema · 1 : 1
↳ sangria · 3mm180 mm × 75 mm
bloco A · identidade
Mavena
suplemento alimentar em cápsulas
Vitamina C · B6 · L-Triptofano Trans-Resveratrol · Niacina · Geléia Real
bloco B · regulatório
Composição
Ingredientes ativos, antiumectantes, composição da cápsula, declaração de glúten/lactose.
Tabela Nutricional
Porções por embalagem, valor energético, %VD por nutriente.
ANVISA · CNPJ · SAC
Número de notificação, fabricante, distribuidor, contato consumidor.
peso & contagem
30 g · 60 cápsulas.
Padrão único para os 4 linhas. Porção: 1 g (2 cápsulas). 30 porções por embalagem. Não criar tamanhos alternativos sem aprovação.
marca + linha
"mãe" branca + nome do produto.
Sempre nessa ordem, sempre na lateral esquerda do rótulo, sempre sobre cor cheia da linha. O lettering vai branco, o nome do produto também — em Puck-Light 38 a 42 pt no tamanho final.
tipografia regulatória
Montserrat Regular · ≥ 6 pt.
Textos legais em Montserrat Regular (peso 400), tamanho mínimo legível de 6 pt no rótulo impresso. Hierarquias de seção em Montserrat Medium 500.
os quatrorótulos.
Cada produto tem ANVISA própria, composição própria, valores
nutricionais próprios. Os arquivos artes-finais estão disponíveis
em labels/. Não imprimir versão fora destes
arquivos.
Os textos abaixo são literais e não negociáveis — exigidos
pela ANVISA para suplemento alimentar. Reproduza sem reescrita,
sem síntese, sem tradução. Em Montserrat Regular 6 pt mínimo.
advertência principal
Este produto não é um medicamento. Não exceder a recomendação diária de consumo indicada na embalagem. Mantenha fora do alcance de crianças. ESTE PRODUTO NÃO DEVE SER CONSUMIDO POR GESTANTES, LACTANTES E CRIANÇAS.
conservação
Instruções de conservação: conservar ao abrigo da luz, do calor e da umidade. Após aberto, manter em local seco e arejado e consumir em até 60 dias. Após o consumo, manter a embalagem bem fechada.
sugestão de uso
2 Cápsulas ao dia. Indicado para maiores de 19 anos. Não exceder a recomendação diária de consumo indicada na embalagem.
composição da cápsula
Composição da Cápsula: Colágeno bovino e dióxido de titânio (Corante INS 171). Contém Amido de Milho, Antiumectante (Dióxido de Silício INS 551), espessante Estearato de Magnésio (INS-470 III). NÃO CONTÉM GLÚTEN E NÃO CONTÉM LACTOSE.
dados de fabricação & distribuição.
Fabricante
OUROCAPS Indústria de Produtos Naturais LTDA ME
CNPJ 50.658.474/0001-01
Endereço Rua Benjamin Constant, 2486 · Jardim Tropical · Olímpia-SP
Origem Indústria Brasileira
Distribuidor
Mãe Vitaminas Farmacêuticas LTDA
CNPJ 47.154.134/0001-20
Endereço Rua Bento de Andrade, 158 · Sala 01 · Jardim Paulista · CEP 04.503-000
SAC fernando.prado@neovita.med.br
checklist do rótulo antes da gráfica.
Dimensão · 180 × 75 mm exatos · sem escala
Sangria · 3 mm em todas as 4 bordas
Segurança · 5 mm interna · sem texto crítico fora
Modo de cor · CMYK · sem RGB · Pantone da linha
Resolução · 300 dpi no tamanho final
ANVISA · número visível em fonte ≥ 6 pt
Advertência · texto literal · sem reescrita
Composição · ingredientes em ordem decrescente
Tabela nutricional · valor energético + %VD por nutriente
Fabricante & distribuidor · CNPJ e endereço completos
Capítulo 09
voz & tom por linha.
Cada linha fala uma língua. As palavras-âncora abaixo abrem cada
voz; o quadro mostra o que fazer e o que não fazer
quando você escreve em cada um.
Genelle
paciência ativa
"Tentar não é projeto. É rotina."
fale do tempo do corpo"calma" sem condescendência
não force "milagre"nada de "vai dar certo" sem lastro
Aurallys
prática e solar
"Atravessar a semana sem desmoronar."
fale de quarta-feira às 15hcotidiano concreto, sem promessa
não moralize"você precisa cuidar de você" é proibido
Mavena
profunda, com humor
"Menopausa não é fim. É cargo novo."
fale entre iguaishumor seco, referência cultural
não infantilizenada de "mulheres de uma certa idade"
Aella
direta, sem dramatizar
"Sua dor é real. Tem nome."
valide o sintoma"você tem razão" como fundação
não dramatizenada de música triste; texto que apoia, não chora
vocabulário obrigatório & proibido (geral).
+ Use
linha · verbete · receita · caso
tem nome · tem cuidado · tem ciência
você não está sozinha · você tem razão
passagem · virada · rotina · corpo no tempo dele
− Evite
"jornada" · "wellness" · "self-care"
"empoderar" · "girl boss" · "guerreira"
"milagre" · "transformador" · "revolucionário"
emojis decorativos · "✨💫🌸"
Capítulo 10
acessibilidade como contrato.
Todo site mãe atende WCAG 2.2 nível AA. Não é diferencial,
é piso. Os pares de cor abaixo já foram testados; qualquer outra
combinação precisa ser validada antes de ir ao ar.
contraste — pares aprovados.
ratio21 : 1
ink sobre branco
ratio5.4 : 1
genelle sobre branco
ratio8.2 : 1
mavena sobre branco
ratio4.7 : 1
aella sobre branco
ratio8.2 : 1
branco sobre mavena
ratio5.4 : 1
branco sobre genelle
ratio8.6 : 1
ink sobre aurallys
ratio4.7 : 1
branco sobre aella
foco visível
2px sólido · mavena.
Todo elemento interativo (link, botão, input, card clicável) tem outline visível ao receber foco. Cor: mavena. Espessura: 2px. Offset: 3px. Não remover.
motion
prefer-reduced.
Toda transição respeita @media (prefers-reduced-motion: reduce). Sem auto-play. Sem parallax forçado. Carrossel só com pause.
alt-text
descreva, não rotule.
Alt-text descreve o que está acontecendo, não "imagem do produto". Decorativa? alt="". Texto da imagem? Repita literal. Pessoa? Nome + ação.
.
v2 · 2026