Montserrat
Aa Bb Cc 0123 ãõçé
Geométrica, firme, aberta. Onde ela aparece, tem decisão tomada. Nunca em texto corrido: cansa.
Regular 400Medium 500Bold 700
Design System · versão 1 · setembro de 2026
Tudo que a Mari já é, na ordem certa.
Três cores, duas fontes, formas que fazem curva e um movimento que você sente sem reparar. Este é o sistema visual da Mari da Nutri Inova. Quem for montar página, material ou post abre aqui, e copia daqui.
Montserrat organiza. Nunito conversa.
Duas fontes, cada uma no seu lugar. Montserrat é a voz que estrutura: títulos, etiquetas, botões. Nunito é a voz que acolhe: tudo o que se lê de verdade. Nenhuma invade a outra.
Nunito
Aa Bb Cc 0123 ãõçé
Arredondada nas pontas, como tudo aqui. Lê-se sem esforço mesmo em texto longo, que é onde a Mari mais fala.
Light 300Regular 400SemiBold 600Bold 700
A escala
Nove tamanhos e nada fora deles. Os grandes crescem com a tela (clamp()); do T4 para baixo, o tamanho é fixo, porque texto pequeno não pode encolher.
Nutri, você já tem tudo.
DisplayMontserrat 500 ·
--tipo-display42 a 84 px · altura 1,05 · letras -0,025emSó a capa. Uma vez por página.Só falta colocar na ordem certa.
Título 1Montserrat 500 ·
--tipo-t132 a 56 px · altura 1,15Título de página interna.O digital deve trazer liberdade, não sobrecarga.
Título 2Montserrat 500 ·
--tipo-t224 a 36 px · altura 1,15Título de seção. O mais usado.Negócio sustentável não é depender de agenda lotada.
Título 3Montserrat 500 ·
--tipo-t320 a 26 px · altura 1,15Título de cartão, de bloco.Nutri precisa ocupar seu lugar no digital.
Título 4Montserrat 500 ·
--tipo-t418 px fixo · altura 1,15Rótulo de campo, cabeça de sanfona.Aqui a gente não vende fórmula pronta. A gente constrói modelo de negócio real, do seu jeito.
Corpo grandeNunito 300 ·
--tipo-corpo-grande18 a 21 px · altura 1,55A abertura de uma seção, o depoimento.Desde 2015 entendi que meu lugar no mundo ia além da consulta presencial. Comecei no improviso, testei sozinha, errei muito, mas nunca deixei de buscar um caminho que fizesse sentido pra mim e pra minha profissão.
CorpoNunito 400 ·
--tipo-corpo17 px fixo · altura 1,65 · até 62 caracteres por linhaTudo o que se lê de verdade.Legenda, ajuda de campo, rodapé. Pequeno, mas nunca menor que 15 px.
PequenoNunito 400 ·
--tipo-pequeno15 px fixo · altura 1,65Apoio. Em cinza suave.Conteúdo · Método · Produto
EtiquetaMontserrat 700 ·
--tipo-etiqueta12 px · caixa alta · letras +0,14emRotula. Nunca faz frase.Como um título e um parágrafo convivem
Título em oliva, corpo em cinza. O título faz a promessa; o parágrafo conta como. Ênfase dentro do texto é Nunito 600 em oliva, nunca itálico.
Você não precisa de mais um curso. Precisa de uma esteira.
Não é sobre mais um infoproduto, é sobre uma esteira que te dê paz todo mês. Um produto que puxa o outro, uma entrada que leva a uma continuidade, e você sabendo exatamente o que vender em cada etapa.
O que você já sabe fazer é o produto.
A nutri que atende restaurante tem método. A que atende equipe de cozinha tem método. Só que ele mora na cabeça, e o que mora na cabeça não escala e não descansa. Colocar no papel é o primeiro passo, e é mais simples do que parece.
Cinco regras que não se discutem
Título em oliva, corpo em cinza. Nunca o contrário. Um parágrafo inteiro em verde vira parede.
Parágrafo até 62 caracteres por linha. Mais que isso, o olho se perde na volta. O p já nasce com esse limite.
Sem itálico. As fontes não estão hospedadas em itálico, e a voz da Mari sublinha com peso, não com inclinação. Ênfase é em, que aqui vira Nunito 600 em oliva.
Nunito leve (300) só do corpo grande para cima. Em 17 px ela fica fina demais e cinza demais.
Caixa alta só em etiqueta. Uma palavra ou três. Frase em caixa alta grita, e a Mari não grita.
Bege pra respirar, oliva pra sustentar, lavanda pra encantar.
Três cores na proporção 60 / 30 / 10. O bege é o chão. O oliva é a estrutura: títulos, botões, tudo o que decide. A lavanda é o detalhe que faz a pessoa sorrir, e por isso aparece pouco.
60%
30%
10%
Se uma tela tem mais lavanda que isso, alguma coisa está pedindo atenção demais.
As quatro da marca
Clique numa amostra para copiar o código. Estas quatro são as únicas cores "de verdade": todas as outras desta página são versões delas.
Os tons derivados
Nenhum é cor nova. São as quatro de cima mais claras ou mais escuras, porque uma marca precisa de hover, borda e fundo alternado sem inventar nada.
Os papéis
Os componentes nunca chamam a cor pelo nome: chamam pelo papel. Assim, a dobra escura troca os papéis num escopo e tudo se adapta sozinho.
| Papel | Token | Aponta para |
|---|---|---|
| Fundo | --papel-fundo | bege |
| Superfície | --papel-superficie | branco quente |
| Título | --papel-titulo | oliva |
| Texto | --papel-texto | tinta |
| Ação | --papel-acao | oliva |
| Destaque | --papel-destaque | lavanda |
| Destaque em texto | --papel-destaque-texto | lavanda tinta |
| Foco | --papel-foco | lavanda tinta |
| Sucesso | --papel-sucesso | oliva |
| Atenção | --papel-atencao | argila |
| Linha | --papel-linha | linha |
Contraste conferido
Calculado, não estimado. "AA" é o mínimo para texto normal (4,5:1); "AA grande" vale só a partir de 24 px ou 19 px em negrito.
| Combinação | Razão | Nível |
|---|---|---|
| Tinta sobre bege | 6,90:1 | AA |
| Tinta sobre branco | 7,46:1 | AAA |
| Oliva sobre bege | 4,52:1 | AA |
| Branco sobre oliva | 4,89:1 | AA |
| Bege sobre oliva profunda | 8,94:1 | AAA |
| Lavanda sobre oliva profunda | 4,53:1 | AA |
| Lavanda tinta sobre bege | 5,34:1 | AA |
| Tinta sobre lavanda clara | 6,13:1 | AA |
| Tinta suave sobre bege | 4,96:1 | AA |
| Argila sobre bege | 5,05:1 | AA |
| Lavanda sobre bege | 1,97:1 | só decorativo |
O que a lavanda não faz
Não vira texto pequeno (1,97:1 sobre o bege: ninguém lê). Não vira botão principal. Não vira fundo de parágrafo. Quando ela precisa falar, usa a versão tinta, #7A5694. É por aparecer pouco que ela continua sendo reconhecível como Mari.
Não existe vermelho
A Mari não fala com escassez nem com urgência, então a paleta não tem a cor da pressa. Quando um aviso precisa existir, ele usa a argila: um barro quente que chama, mas não assusta.
O que existe, e como cada peça se comporta.
Cada componente aparece aqui em todos os estados que pode ter. Se um estado não está nesta página, ele não existe no sistema. Não invente um: acrescente aqui primeiro.
Botão
Pílula, sempre. Três variantes: o primário decide, o secundário acompanha, o de texto convida. Passe o mouse no primário e veja o traço de lavanda se desenhar em volta: é o detalhe da marca.
Normal como nasce
Hover sobe 2 px, traço se desenha
Quero começar
Ver como funciona
Saber mais
Salvar pra depois
Foco anel lavanda, pelo teclado
Quero começar
Ver como funciona
Saber mais
Ativo no clique: volta ao chão
Quero começar
Ver como funciona
Saber mais
Desabilitado 45% de opacidade, sem cursor
Carregando clique para ver: 1,6 s e "Salvo"
<a class="botao" href="#"> <span class="botao__texto">Quero começar</span> <span class="botao__icone botao__icone--seta"><svg><use href="#ic-seta"/></svg></span> <svg class="botao__traco" aria-hidden="true"><rect pathLength="100"/></svg> </a> variantes: .botao--secundario · .botao--texto · .botao--lavanda · .botao--pequeno · .botao--grande · .botao--largo
Campo de formulário
Rótulo em cima, em Montserrat. Entrada arredondada. Ajuda embaixo, em cinza suave, que muda de cor quando vira erro ou confirmação. O anel de foco é lavanda clara, largo e macio.
Normal. Passe o mouse, clique, digite.
Foco: borda oliva e anel lavanda.
Faltou um pedaço do número. Confere pra mim?
Achei seu perfil.
Desabilitado: fundo bege escuro, sem borda.
Seleção. A setinha herda a cor da ação.
Área de texto. Cresce pela alça, só na vertical.
Marcar e alternar
Etiqueta
Rotula, categoriza, marca estado. Uma palavra ou três, em caixa alta. Nunca uma frase.
Neutra
Lavanda
Oliva
Cheia
Contorno
Com ponto
Com ícone
Método
Cartão
Superfície branca quente com a curva "folha": três cantos redondos e um mais fechado. Só o cartão clicável reage ao cursor; os outros ficam parados, porque cartão que sobe sem levar a lugar nenhum engana.
O que você já sabe é o produto
Fundo branco quente, filete de borda, curva folha. Não reage ao cursor: é conteúdo, não botão.
.cartao
Uma esteira, não mais um curso
Passe o mouse: sobe 2 px, ganha sombra e perde a borda. É um link inteiro, então a área toda responde.
a.cartaoAbrir
Quando um deles precisa chamar
Fundo lavanda clara, sem borda. Um por tela, no máximo: é o lugar dos 10% de lavanda.
.cartao--lavanda
Sobre a oliva profunda
Mesmo componente, com a classe .em-oliva: os papéis trocam e ele se adapta sem uma linha de CSS a mais.
.cartao.em-oliva
Espelhado
A folha invertida (--raio-folha-inv), para alternar quando há dois lado a lado.
Hover congelado
Para você ver o estado parado: 2 px acima, sombra suave, borda sumida.
Depoimento
A prova, na voz da Mari, é sempre com nome próprio de outra nutri e nunca com faturamento próprio. As aspas em lavanda são o único adorno. O texto abaixo é exemplo de preenchimento.
Eu achava que precisava criar um curso pra outras nutris. Foi a Mari que me mostrou que o meu produto era pra dono de restaurante, que é quem eu já atendia. Em dois meses eu tinha a primeira turma.
Eu não queria virar influenciadora. Queria parar de depender de agenda cheia. A Mari entendeu isso antes de eu conseguir explicar.
Sanfona
O <details> nativo: funciona sem JavaScript. O sinal de mais vira menos sem girar: a barra vertical encolhe. Um aberto fecha os irmãos.
Preciso ter audiência grande pra começar?
Não. Precisa ter clareza de pra quem é e o que resolve. Audiência grande com produto confuso vende menos que audiência pequena com produto certo. E a sua audiência pequena já te conhece.
Meu produto tem que ser pra outras nutris?
Não necessariamente. É uma opção, não a opção. Pode ser pra quem você já atende: dono de restaurante, equipe de cozinha, gestor, cliente final.
E se eu não souber gravar vídeo?
Vídeo é um formato, não o formato. Tem produto em PDF, em planilha, em encontro ao vivo, em áudio. O formato vem depois de saber o que você entrega.
Aviso
Três humores, nenhum deles "perigo". O informativo é lavanda, o de confirmação é oliva, o de atenção é argila.
Pra você saber
O material chega por e-mail em até 10 minutos. Se não chegar, olha a caixa de promoções.
Pronto, ficou salvo
Suas respostas estão guardadas. Pode voltar quando quiser.
Faltou uma coisinha
O e-mail ficou sem o arroba. Confere pra mim antes de seguir?
Passos
Para método, jornada, "como funciona". Uma linha tracejada em lavanda liga os passos; o número mora num círculo oliva claro.
Mapear o que você já sabe
O que você faz de olho fechado, que outra pessoa pagaria pra aprender ou pra ter feito.
Organizar em produto
Pra quem é, o que resolve, em que formato entrega. Nessa ordem, e não na ordem do "que plataforma eu uso".
Colocar no digital
Só agora vem a página, o pagamento e o post. Com a ordem certa, isso é a parte fácil.
Preço
O valor dito com clareza e o que vem junto. Sem "de/por", sem relógio, sem "últimas vagas": a Mari não vende com pressa. Valores de exemplo.
Exemplo de preenchimento
Mentoria em grupo
R$ 1.200 ou 12× de R$ 100
Oito encontros ao vivo, quinzenais, com gravação. Turma de até doze nutris.
- Mapa do seu produto pronto no segundo encontro
- Revisão da página de vendas com a Mari
- Grupo da turma por seis meses
Navegação
A pílula do topo desta página. O item ativo é marcado com aria-current, para quem usa leitor de tela ouvir onde está.
Miúdos
Peças pequenas que aparecem em todo lugar: avatar, lista com check, divisor com o raminho e a frase de destaque.
MANI
.avatar · iniciais ou foto
.avatar · iniciais ou foto- Herda o papel de sucesso
- Funciona em qualquer tamanho de texto
Nutri, você já tem tudo. Só falta colocar na ordem certa.
Uma coluna pra ler, uma grade de doze e curva em tudo.
Três larguras de container, uma grade de doze colunas com três atalhos, uma escala de espaço só. E nenhum canto reto: a Mari é curva.
Containers
O de conteúdo segura tudo. O de leitura segura texto corrido. O estreito segura formulário, aviso e cartão solitário. Todos centralizados, com respiro lateral que cresce com a tela.
conteúdo · 72rem (1152px) ·
.containerleitura · 44rem (704px) ·
.container--leituraestreito · 34rem (544px) ·
.container--estreitoA grade de doze
Doze colunas com vão de 1,5rem. Use .col-N para o caso a caso, ou os atalhos .grade--2, .grade--3 e .grade--4 para 90% das vezes. No celular, tudo vira uma coluna sozinho.
1
2
3
4
5
6
7
8
9
10
11
12
.col-8 · texto
.col-4 · lateral
.col-6
.col-6
.col-4
.col-4
.col-4
.col-3
.col-3
.col-3
.col-3
A escala de espaço
Base 4px. Nove degraus e um respiro de seção que cresce com a tela. Toda margem e todo padding vêm daqui.
--esp-14px--esp-28px--esp-312px--esp-416px--esp-524px--esp-632px--esp-748px--esp-864px--esp-996px--esp-secao72 a 144pxPontos de quebra
Dois só. O resto é fluido: tipo com clamp(), container com min(), grade que empilha sozinha.
| Tela | Largura | O que muda |
|---|---|---|
| Celular | até 640px | Tudo em uma coluna. Cabeçalho só com a marca e a pílula rolável. |
| Tablet | 640 a 1024px | Grades de 3 e 4 viram 2. Colunas de 3 a 5 viram 6. |
| Desktop | acima de 1024px | Grade completa. Capa em duas colunas com o raminho à direita. |
O gutter lateral vai de 1,25rem no celular a 3rem no desktop, sem degrau: clamp(1.25rem, 4vw, 3rem).
Raios e formas
Curvas suaves e orgânicas, inspiradas na natureza. A "folha" é a forma assinatura: três cantos de 2rem e um de 0,75rem. Nada de ângulo duro, nada de forma geométrica rígida.
--raio-pilula · botão, etiqueta, nav--raio-g · vitrine, mancha--raio-m · campo, aviso, nota--raio-p · célula, código--raio-folha · cartão, depoimento--raio-folha-inv · o par do ladoSombras
Duas, e ambas esverdeadas, porque sombra cinza sobre bege fica suja. A maioria das peças não tem sombra nenhuma: ela aparece no hover e no que flutua.
--sombra-suave · hover de cartão e botão--sombra-flutua · toast, menu abertoAnatomia de uma seção
Toda seção desta página, e de qualquer página da Mari, segue a mesma ordem: etiqueta, título, abertura, conteúdo.
seção · padding-block: --esp-secao
01 · Etiqueta
O título em Montserrat, até 20 caracteres por linha
A abertura em Nunito leve: uma ou duas frases que dizem o que vem.
conteúdo
conteúdo
conteúdo
Você sente, mas não repara.
O movimento existe pra dar continuidade entre um estado e outro, nunca pra chamar atenção. Se alguém percebe a animação em vez do conteúdo, ela está grande demais.
Princípio 01
Só opacidade, deslocamento e traço
São as três coisas que o navegador anima sem travar num celular fraco. Nada gira, nada quica, nada pisca. A única rotação é o anel de "carregando", e ela é funcional.
Princípio 02
Sai rápido, chega devagar
Toda curva é de saída (ease-out): o elemento começa a se mover no instante do gesto e assenta com calma. É o que faz parecer resposta, e não espera.
Princípio 03
Quem pediu menos, recebe parado
Com prefers-reduced-motion, todos os tempos caem para 1ms e o que respira para de respirar. A página fica inteira, imóvel e legível.
As sete animações
Todas as que existem. Cada palco tem um botão "reproduzir" para você ver de novo; o do botão e o do sublinhado respondem ao mouse.
1 · Revelar e cascata
O bloco sobe 14px e aparece. Os irmãos entram com 80ms de diferença, até oito.
640ms · ease-out · +80ms
2 · Botão com traço
Sobe 2px, ganha sombra e um traço de lavanda se desenha em volta, do começo ao fim.
180ms + traço 1100ms
Só falta a ordem certa
3 · Sublinhado à mão
Um traço lavanda nasce da esquerda sob a palavra que importa. Uma por título.
1100ms · ease-out
4 · Respirar
A mancha de lavanda ao fundo cresce 4% e volta, em oito segundos. Só em fundo grande e calmo.
8s · ida e volta · laço
5 · Traço que se desenha
Um desenho de linha aparece como se estivesse sendo feito à mão, um traço depois do outro.
1100ms · +180ms por traço
0contraste do oliva sobre o bege
6 · Número que conta
Um número de prova sobe de zero até o valor, com a mesma curva de saída do CSS.
1200ms · ease-out
7 · Entrada da capa. A primeira dobra não espera rolagem: as palavras do título sobem uma a uma (55ms entre elas), o texto e os botões entram em cascata e o raminho se desenha. Recarregue a página para ver.
Os tempos e as curvas
Nenhum componente escreve um tempo na mão. Todos apontam para estes tokens.
| Token | Valor | Para quê |
|---|---|---|
| --tempo-rapido | 180ms | hover, foco, mudança de cor |
| --tempo-base | 320ms | abrir, fechar, deslocar, toast |
| --tempo-lento | 640ms | revelar um bloco |
| --tempo-traco | 1100ms | uma linha se desenhando |
| --tempo-contar | 1200ms | número de prova |
| --tempo-respiro | 8s | a lavanda respirando |
| --curva-suave | cubic-bezier(.33, 1, .68, 1) | quase tudo |
| --curva-entrada | cubic-bezier(.22, 1, .36, 1) | revelar, desenhar |
| --curva-padrao | cubic-bezier(.45, 0, .55, 1) | o que vai e volta |
Movimento reduzido
Ligue a prévia para ver esta página como quem pediu menos movimento ao sistema a vê. Tudo continua aqui; só para de se mexer.
No Windows: Configurações → Acessibilidade → Efeitos visuais → Efeitos de animação. No iPhone: Ajustes → Acessibilidade → Movimento → Reduzir movimento. O site respeita sozinho.
@media (prefers-reduced-motion: reduce) {
:root { --tempo-lento: 1ms; --deslocamento-revelar: 0px; /* … */ }
.respira, .flutua { animation: none; }
}
Um traço só, arredondado nas pontas.
Todos desenhados aqui dentro, em SVG, numa grade de 24 por 24, traço de 1,5 e pontas redondas. Herdam a cor do texto: onde o texto é oliva, o ícone é oliva. Cinco deles são os símbolos da Mari.
Os símbolos da marca
Lavanda, flor branca, vela, mão em cuidado e o nó do macramê. São os únicos que podem aparecer grandes e sozinhos, como adorno. Clique para copiar o nome.
Os de interface
Vinte e um, e só. Se precisar de um novo, desenhe na mesma grade, com o mesmo traço, e acrescente aqui.
Tamanhos
Cinco. Do 32 para cima o traço afina para 1,25, senão engrossa demais.
Como usar
Os símbolos moram num <svg> escondido no topo da página. Cada uso é um <use> que aponta para o id.
<svg class="icone" aria-hidden="true"> <use href="#ic-lavanda"/> </svg> /* o ícone herda a cor do texto: */ .meu-bloco { color: var(--papel-destaque-texto); }
Ícone ao lado de texto é sempre aria-hidden="true": o texto já diz o que ele mostra. Ícone sozinho (num botão só de ícone) recebe um <span class="so-leitor"> com o nome da ação.