Hera#86ef95 → #3fe05abrilho · foco · títulos no escuro
Folhas do logo#b4d964 → #6bae47 → #2e853bsó nas folhas do logo
As superfícies usam só três degradês: Papel (branco chapado), Claro (neutro, para zonas e seleção) e Escuro. Não existe cor chapada de acento nem verde de acento. Tokens: grad-papel, grad-claro e grad-escuro.
Produto · frasco sobre um disco, com heraPaleta · os verdes da casaAplicativo · lembrete ligadoOrganização · cada coisa no lugarVazio · ainda não há nadaSucesso · pedido confirmadoEntrega · caixa a caminhoNatureza · muda de heraContato · mensagem enviada
Motion
4
quick · 120
base · 240
slow · 480
ease-out (.2,.8,.2,1) · seguro para movimento reduzido
Principles
7
1COMECE PELA RAIZ · a base importa
2DEIXE RESPIRAR · o espaço também fala
3CUIDADO CLARO · leve, nunca vago
4NATUREZA COM CRITÉRIO · quebre a regra com motivo
Caixa de seleçãoMarcadaOpçãoSelecionadoDesligadoLigado
FeedbackMolecule
10
Copiar nº do pedido
3
Enviando60%
PED-0412 foi confirmado
O envio falhou. Tente de novo.
HomeScreen · navigation · card
11
Fitoterápico · Família · Hedera helixInspire seu mundoDa folha da hera para a sua casa.
Artigo · 2026Plantas que purificam o arArtigo · 6 min de leitura
JobsScreen · modal · progress
12
PED-0412 · RJDrogaria Vida
L241460%
PED-0410 · SPDrogaria São Lucas
L241160%
Confirmar pedido 0412?
O pedido vai para a distribuidora. Mudanças depois abrem um novo.
ContactScreen · form
13
Fale com a genteConte sua dúvida. Respondemos em até 48h.
Assunto
Produto
GridFour breakpoints
14
Celular · 3604 col · margem 16 · calha 16
Tablet · 7688 col · margem 32 · calha 24
Desktop · 128012 col · margem 64 · calha 24
Largo · 192012 col · margem 64 · conteúdo 1792
O conteúdo ocupa colunas inteiras. Blocos de texto: 6 de 12 no desktop, nunca largura total.
RhythmSpace between things
15
8
8
24
48 · 96 desktop
desenhado em 2×
8 dentro do grupoRótulo, título e texto se leem como uma coisa só.
24 entre elementosDo texto à imagem, de campo a campo.
48 · 96 entre seções48 no celular, 96 no desktop. O espaço é o divisor.
Alinhar em 8Todo tamanho e espaço é múltiplo de 8. O 4 só dentro de peças pequenas.
Page layoutsStarting points
16
Destaque + cardsInício, produtos
DivididoArtigo, destaque
LeituraArtigo, termos
Lista + detalhePedidos, caixa de entrada
GaleriaProduto, imagens
PainelNúmeros, status
EtapasCadastro, compra
Sangria totalCampanha, lançamento
ResponsiveOne page, three widths
17
Desktop3 cards · links visíveis
Tablet2 cards · quebra
Celular1 card · menu
As colunas caem, a ordem do conteúdo nunca muda.Abaixo de 768 os links viram menu. A ação principal vai para baixo, em largura total.
Contrast & typeAccessibility · seeing
18
Claro
Aa12,9 texto
Aa7,3 texto
Aa3,8 ícones
Aa2,5 fora
Escuro
Aa12,9 texto
Aa10,3 texto
Aa5,5 texto
Aa3,0 fora
16mínimo do texto
12nada menor
1.5entrelinha do texto
200%zoom, sem rolagem lateral
Uma boa linha tem de 45 a 75 caracteres, para o olho achar a próxima.
4575 caracteres
StructureAccessibility · navigating
19
12
3
4
5
6
7
H1Um por página
H2Seções
H3Nunca pule um nível
O foco segue a leitura: da esquerda para a direita, de cima para baixo.Toda imagem diz o que mostra. As decorativas ficam em silêncio.Links dizem para onde vão, nunca "clique aqui".
Logo · versões por fundo
Papel · colorido
Claro · só mono Mata
Mata · negativo
Noite · negativo
FundoLogoRegra
PapelColoridoMoldura chapada em #6CC04A; palavra em Mata; degradê só nas folhas.
ClaroSó monocromático MataNunca o colorido. Vale para qualquer superfície de acento claro (degradê Claro). Contraste Mata sobre Claro: de 9,9:1 a 12,6:1.
Mata e NoiteNegativo ou mono PapelPalavra em Papel; moldura e folhas mantêm o verde do logo.
Fundo claro do logoPlano, sem 2.5DDegradê Papel (#FEFEFE a #F6F9EE), sem borda grossa, realce ou sombra.
Degradê das folhas#b4d964 → #6bae47 → #2e853bSó nas folhas, em todas as versões coloridas. Moldura e palavra são chapadas, nunca em degradê.
Tamanho mínimo28 px de alturaAbaixo disso, use o ícone das folhas.
LuzDe cima à esquerda: topo claro, face esquerda média, face direita escura.
CorMata, Hera, Papel e os gradientes. Âmbar só no frasco.
SombraUma elipse verde e suave no chão. Nunca preta.
FormatoSVG leve, nítido em qualquer tela, com texto alternativo.
Onde usar
LugarQuando
Vitrine e campanhaPáginas de produto, benefícios e ações de venda, uma por bloco.
Estado vazioQuando ainda não há nada: acolhe e aponta a próxima ação.
SucessoDepois de concluir algo importante.
Rules
1Uma ilustração por vista. Duas disputam o olhar.
2Nunca no lugar de ícone ou botão: ilustração acompanha, não age.
3Sempre com texto alternativo que diga a cena.
4Animadas em loop leve e lento: a peça flutua, folhas balançam, esferas sobem e descem. Paradas para quem pede menos movimento.
Sizes · the stroke stays 2
16
24
32
48
16 dentro de textos e campos · 24 padrão · 32 e 48 para estados vazios e destaques
In context
sac@phitoss.com.br
Volumétricos · 2.5D
folha
frasco
feito
cuidado
entrega
farmácia
agenda
mensagem
Mesmo desenho do flat, sobre uma peça com volume. O volume fica na peça; o desenho segue plano. Para destaques: vazio, sucesso, vitrine de benefícios. Na interface do dia a dia, o flat.
Rules
1Pontas redondas, cantos redondos, sem preenchimento exceto play.
2Ícone sem palavra visível precisa de nome acessível (aria-label).
3Ícones pegam a cor do texto ao lado.
4Não misture conjuntos de ícones. Ícones novos nascem na mesma grade de 24.
5Flat na interface; volumétrico só em destaque, grande (48+) e com palavra ao lado.
Library
arrow-right
arrow-up-right
plus
close
check
menu
search
download
play
globe
mail
agenda
Grid and keylines
MedidaValor
Tela24 × 24
Respiro interno2
Área viva20 × 20
Traço2, pontas e junções redondas
Do and don't
FaçaÍcone e palavra juntos. A palavra carrega o sentido.
Não façaUma fila de ícones sem palavra. Cada pessoa lê uma coisa.
The curve · ease-out (.2, .8, .2, 1)
Saída rápida, pouso suave. As coisas chegam depressa e assentam. O olho lê o estado final, não o trajeto.
Try it · hover
quick · 120 · cor, estado
base · 240 · mover, revelar
slow · 480 · painéis, páginas
What moves, how fast
TrocarDuraçãoExemplo
Passar o mouse, clicar, alternarquick · 120Fundo do botão, caixa, opção da chave
Pequeno movimento ou revelaçãobase · 240Seta que anda, menu, toast, dica
Superfície grandeslow · 480Modal, gaveta, troca de página
Movimento reduzidoinstantO estado muda, nada viaja
Sequence · a modal opens
0120240360480 ms
O véu aparece
Modal sobe 16
O foco entra
Página por trás
parado
Rules
1Uma coisa se move por vez. O resto espera ou fica parado.
2Sair é mais rápido que chegar: saídas usam quick.
3Nunca mova o que alguém está lendo.
4Loops só para carregar, e só depois de 1 segundo.
Radius in use
pílula · botões e seletores
24 bandeja · zonas, áreas de envio
Ativopílula · chips, chaves, selos
Depth without shadows
Linhatraço 1 suave · só divide
Elevadovolume · componente
Claropreenchimento · destaque
Inversopreenchimento · ativo, por cima
Rules
1Sombra verde e suave, degradê só entre os verdes da casa: Mata (#1C6A2A → #003B0D) na ação principal sobre claro; sobre Claro e no escuro a ação principal é clara, quase branca. Nunca preto, nunca arco-íris.
2Nada tem contorno: botões, chips, campos, cartões, telas e modais têm volume. Traço 1 só divide linhas de tabela e listas.
3O único traço forte é o anel de foco em Hera, sempre por fora da peça.
4Bandeja afundada quer dizer aberto: um lugar onde algo pode entrar.
Stroke in use
traço 1 · divide tabelas e listas
traço 2 · anel de foco Hera
PED-0414sem traço · nº do pedido em placa
Space inside things
ComponenteRespiro internoEspaço interno
Botão0 24 · 0 16 · 0 12 · pílula8 ícone ao rótulo
Campo0 164 rótulo ao campo
Chip0 128 ponto ao rótulo
Card168
Toast0 1612
Modal2416
Do and don't
ArtigoArredondado, com volume
FaçaVolume suave: degradê verde e sombra leve, cantos redondos, legível.
ArtigoSombra preta, arco-íris
Não façaSombra preta dura e degradê arco-íris: volume que grita.
Farmácia Central12 caixas de Phitóss · entrega em 2 dias úteis.
1Nº do pedido · placa Claro em volume
2Chip de status
3Título · h3, resumo · pequeno discreto
4Principal + botão de texto
Do and don't
Envie a receita primeiro
FaçaBotão desativado diz o que falta.
Não façaDesativado sem motivo. A pessoa fica presa.
1Comece pela raiza base importaToda tela começa pelos tokens: nenhuma cor, tamanho ou espaço fora da escala.
2Deixe respiraro espaço também falaTire antes de pôr. Uma ideia por seção, uma ação principal por tela.
3Cuidado claroleve, nunca vagoPalavra, imagem e layout dizem a mesma coisa. Microcopy é design.
4Natureza com critérioquebre a regra com motivoRegra quebrada precisa de um motivo que caiba numa frase.
5Inspire fundosem perder o arTipo grande, sangria total, contraste forte, com o texto sempre legível.
6Inspire seu mundocomece por eleRascunhe a ideia antes de abrir o arquivo.
Do and don't
FaçaDeixe respirar. Uma ação principal, o resto recua.
Não façaTrês chamadas iguais. Ninguém sabe para onde ir.
FaçaNatureza com critério. Um destaque só, para ele significar algo.
Não façaTudo em destaque, nada se destaca.
Fundo.
FaçaInspire fundo. Tipo grande com espaço livre em volta.
Fundo.legenda · legenda · legendalegenda · legenda
Não façaUm título tímido espremido entre coisas pequenas.
Where each principle shows up
PrincípioNeste sistema
1 · Comece pela raizTodo valor é um token: cor, tipo, espaço, raio, volume, movimento (seções 2 a 7).
2 · Deixe respirarUma cor de acento, cantos redondos, degradê verde-folha nas ações e volume suave.
3 · Cuidado claroAs regras de microcopy ficam junto dos componentes (10, 11).
4 · Natureza com critérioToda regra vem com o motivo, para poder ser quebrada de propósito.
5 · Inspire fundoDisplay em 80, layouts com sangria, contraste de 12,9:1.
6 · Inspire seu mundoLayouts de página são pontos de partida, não modelos (17).
Top bar · desktop
ProdutoHedera helixSobreArtigos
Menu · mobile, open
ProdutoHedera helixSobreArtigos
Which one
PadrãoUse quando
AbasVistas da mesma coisa, lado a lado. Até 5.
BreadcrumbConteúdo profundo. Mostra o caminho de volta, até 4 níveis.
PaginaçãoListas longas em que a posição importa.
EtapasUm fluxo de 3 a 5 etapas com fim.
MenuAções sobre um item. A destrutiva por último, depois de um divisor, em vermelho.
Tab states
Como usarpadrão
Como usarhover
Como usarativo
Como usardesativado
A full flow · stepper
Pedido
Separação
3Faturado
4Entrega
Long paths · breadcrumb
Início/…/Plantas que purificam o ar/Como usar
Mantenha a primeira e as duas últimas. O meio vira “…”.
Sidebar · dashboard
PortalPedidosLotesNotas fiscais
ContaDados da farmáciaConfigurações
Pedidos
Footer · desktop
States
Form pattern
Quero uma cópia
Rules
1Rótulo em cima, ajuda embaixo. O erro substitui a ajuda, não se soma a ela.
2Valide quando a pessoa sai do campo, não enquanto digita.
3A chave age na hora; a caixa espera o envio.
4Opção para 2 a 5 escolhas, seleção para mais.
Settings list
Novidades por e-mailUm resumo toda segunda
Mostrar nº dos pedidosEm títulos e cards
Tabelas compactasLinhas mais justas em listas longas
Search with suggestions
Hedera helix · como a hera ageXarope de hera · modo de usarHera em casa · cuidados com a planta
Choosing a control
A pessoa precisa…Uso
Escolher 1 entre 2 e 5Opção
Escolher 1 entre muitosSeleção
Escolher váriosCaixa de seleção
Ligar algo agoraChave
Mudar a vistaSegmentado ou abas
EscreverCampo ou área de texto
Upload
Solte os arquivos aqui ou procurePDF, PNG ou JPG · até 200 MB
receita_marina.pdf
60%
embalagem.png4,2 MB
bula_phitoss.pdfMais de 200 MB. Mande um link.
Date, tags and amount
Entrega
12 out 2026
Dia, mês, ano
Assuntos
TosseBulaAdicionar
Valor
BRL1 240,00
Números em mono, moeda primeiro
Empty state
Ainda sem pedidosOs pedidos da sua farmácia aparecem aqui com o lote e a entrega.
Notice · inline
O pedido PED-0413 espera sua confirmação.
Counts and progress
1
12
99+
Separando60%
pequeno
Which one
PadrãoUse quando
ToastResultado de uma ação. Sucesso sai sozinho; erro fica até ser fechado.
AvisoAlgo que a pessoa precisa saber nesta página.
DicaO nome de um botão de ícone. Nunca informação essencial.
BadgeContador de não lidos. Para em 99+.
ProgressoTudo o que leva mais de um segundo.
Loading · skeleton
Mostra a forma do que vem. Depois de 10 segundos, diga o que está acontecendo.
Success
Mensagem enviadaRespondemos em até 48h.
Placement
desktop · toast embaixo à direita
celular · toast em largura total
aviso · topo do conteúdo
Data table
PedidoFarmáciaStatusLotePrazo
PED-0414Drogaria Boa SaúdeativoL241630 set
PED-0413Farmácia CentralentregueL241428 set
PED-0410Drogaria São LucaspausadoL241115 out
PED-0409Farmácia do BairroentregueL241627 set
4 de 24 pedidos
123
Accordion
Quanto tempo leva a entrega?
Pedidos de farmácias parceiras saem em até 5 dias úteis. Retirada na distribuidora, em 2.
Crianças podem tomar?
Precisa de receita?
Desktop · 1280
ProdutoHedera helixSobreArtigos
Fitoterápico · Família · Hedera helixInspire seu mundofeito com o que a natureza sabeDa folha da hera para a sua casa.
Artigo · 2026Plantas que purificam o arRespiração, família, natureza
Artigo · 2025Hera no dia a diaCuidado, família
Artigo · 2025Como ler a bulaBula, uso
Built from
ComponenteSeção
Barra com menu8
Rótulo, H2, texto2
Principal e botão de texto7
Card de artigo7
Flow
1Chega e lê o título.
2Veja onde comprar, ou conheça o produto antes.
3Abre um artigo pelo card.
RuleUma ação principal na primeira dobra. O resto é botão de texto.
Another state · scrolled to work
Produtos
Plantas que purificam o ar
Hedera helix
Another screen · case page
Artigo · 2026Plantas que purificam o arRespiração · Família · NaturezaHera, espada-de-são-jorge e jiboia: três plantas fáceis que deixam o ar de casa mais leve.
Desktop · list and detail
Pedidos
PED-0414 · PRDrogaria Boa Saúde
L241680%
PED-0412 · RJDrogaria Vida
L2418100%
PED-0410 · SPDrogaria São Lucas
L241120%
PED-0414 · PRDrogaria Boa Saúde
ResumoLotesNotas
Pedido
Separação
3Faturado
4Entrega
24 caixas de Phitóss 120 ml, lote L2416. Sai da distribuidora em até 2 dias úteis depois da confirmação.
Built from
ComponenteSeção
Barra com adicionar8
Campo de busca9
Card de pedido com progresso7 · 10
Modal de confirmação sobre véu5 · 6
Flow
1Busca ou percorre a lista.
2Lê o lote e o progresso no card.
3Confirma. O modal diz o que acontece depois.
RuleConfirme só o que não tem volta. O véu é leve: 6% no claro, 88% no escuro.
Another state · no jobs yet
Ainda sem pedidosOs pedidos novos aparecem aqui.
Desktop · split
ProdutoHedera helixSobreArtigos
Fale com a genteConte sua dúvida. Respondemos em até 48h.
sac@phitoss.com.brphitoss.com.brFalar com o SAC
Assunto
Produto
Entrega
12 out 2026
Quero uma cópia
Built from
ComponenteSeção
Barra com fechar8
Campos, seleção, área de texto9
Erro no campo9
Enviar em largura total7
Flow
1Preenche nome, e-mail e assunto.
2Corrige o que o erro indica.
3Envia. A resposta chega em até 48h.
RuleO erro diz como corrigir, ao lado do campo. O botão de enviar fica embaixo, em largura total.
Another state · sent
ObrigadoRespondemos em até 48h.
Spans on 12
12
6
6
4
4
4
8
4
3
3
3
3
3
9
Rules
1Blocos de texto ocupam 6 colunas no desktop, nunca as 12.
2Imagens podem passar da margem; texto nunca.
3As calhas ficam vazias: sem linhas, sem preenchimento.
A page on the grid
Desktop com 12 colunas · celular com 4. Mesmo conteúdo, mesma ordem. Coluna vazia é permitida. É espaço, não desperdício.
Modular grid · columns and rows
As linhas seguem o mesmo ritmo de 8 das colunas. Um bloco ocupa células inteiras, nunca parte de uma.
Asymmetric · 5 and 7
Texto em 5, imagem em 7. Alterne os lados ao longo da página para o olho seguir andando.
Breaking the grid
sangria total
Imagens podem cruzar a margem até a borda da tela. O texto fica dentro.
The grid under a screen
Toda borda cai numa linha de coluna. Ligue a grade para desenhar, desligue antes da revisão.
Space scale
space-14
space-28
space-312
space-416
space-524
space-632
space-748
space-864
space-996
space-10128
Rhythm inside a card
Artigo · 2026
8
Plantas que purificam o ar
8
Artigo · 6 min de leitura
24
Ler artigo →
18 mantém rótulo, título e texto juntos como um grupo.
224 separa o grupo da ação.
3O respiro do card é 16, nunca menor que os espaços internos.
Rhythm down a page
hero
96
96
quote
96 entre seções, 24 entre os elementos dentro delas. No celular, 48 e 16.
Which one
LayoutFunção da páginaOcupa
Destaque + cardsInício, produtos12 · 4 4 4
DivididoArtigo, destaque6 6
LeituraArtigo, termos6, centrado
Lista + detalhePedidos, caixa de entrada4 8
GaleriaProduto, imagens3 3 3 3
PainelNúmeros, status3 9
EtapasCadastro, compra8, centrado
Sangria totalCampanha, lançamento12, sem margem
Anatomy · hero + cards
1
2
3
4
1Navegação · logo à esquerda, links à direita
2Título · 6 colunas, nunca mais largo
3Uma ação principal
4Cards · 3 lado a lado, mesma altura
Choosing
1Comece pela função da página, não pela aparência.
2Misture no máximo dois layouts por página.
3Sangria total uma vez por página. Só funciona como exceção.
What changes at each width
LarguraColunasMargem · calhaNavegaçãoTipo display
Celular · 360416 · 16Ícone de menu48
Tablet · 768832 · 24Ícone de menu56
Desktop · 12801264 · 24Links visíveis80
Largo · 19201264 · 24 · máx 1792Links visíveis80
Navigation at three widths
desktop
tablet
celular
Display type at three widths
Visãodesktop · 80
Visãotablet · 56
Visãocelular · 48
Focus is always visible
Link de texto
Targets
ícone 24 · alvo 48
O rótulo faz parte do alvo
controle + rótulo · altura 48
Rules
1Cor nunca trabalha sozinha: erros levam ícone e palavras.
2Estados mudam de forma, não só de cor: preenchimento, check, opção em relevo.
3Zoom de 200% sem rolar para o lado.
States without color
AtivoPausadoEntregue
DesligadoLigado
Ponto cheio, meio ponto, quadrado. Caixa vazia, caixa marcada. Opção escolhida em peça elevada, com a palavra escrita. Legível mesmo em tons de cinza.
Checklist · before anything ships
Texto 4,5:1 contra o fundo, texto grande 3:1
Foco visível em todo controle
Alvos de no mínimo 48 × 48
Tudo funciona só com o teclado
Zoom de 200% sem rolagem lateral
Movimento reduzido respeitado
Erros ditos em palavras, não só em cor
Imagens descritas, as decorativas em silêncio
Landmarks
header · banner
nav
main · h1
aside
footer · contentinfo
Keyboard
TeclaFaz
Tab · Shift+TabPróximo · controle anterior, na ordem de leitura
Enter · EspaçoAtiva botão, link, caixa
SetasMove dentro de abas, menus, grupos de opção
EscFecha menu ou modal, o foco volta para onde estava
Skip link
Pular para o conteúdoPrimeira parada do teclado. Escondido até receber foco, pula a navegação.
Alt text
ImagemBomRuim
Foto da famíliaMãe e filha rindo juntas pela manhãfoto1.jpg
GráficoPedidos entregues por mês, de 4 para 11Gráfico
Linha decorativaalt="" (silêncio)Linha
Link text
Leia o artigo sobre plantas que purificam o ar →
FaçaDiz para onde vai, mesmo lido sozinho.
Para ler o artigo, clique aqui.
Não faça“Clique aqui” não diz nada numa lista de links.