01 Paleta de cores — imutável
Extraída do template Medix e congelada por decisão do dono do projeto. Nenhuma cor fora desta lista pode aparecer em qualquer deliverable. O fundo de página é sempre #f3f6ef; azul-marinho é cor de elemento (texto, botão, bloco de destaque), nunca de fundo de página inteira.
Fundo
#f3f6ef
fundo de página inteira
Azul-marinho
#0b1e5b
texto, títulos, botão sólido, bloco CTA
Coral
#f6a290
CTA primário, traços de eyebrow, detalhes
Ciano
#cff0f9
cards de destaque, badges, avatares
Ciano-suave
#ddf4fd
cards secundários (variação clara do ciano)
Rosa
#f6d1cc
cards de destaque, badges alternos
Rosa-suave
#f6e9e6
cards secundários (variação clara do rosa)
Salmão
#f7ccc6
terceiro nível de card, avatares
Pêssego
#ffe8d3
cards de destaque, círculos de artigos
Lilás
#cbc0d3
círculos de planos, avatares, detalhes
Creme
#f2e9e4
blocos de depoimento, fundos alternados
Branco
#ffffff
cards, badges, ícones, widget
0 28px 56px -30px rgba(11,30,91,.3).
02 Tipografia — EB Garamond em tudo
Duas fontes fixas. Display: Sacker's — a Sackers Gothic da Monotype (estilo gravador, caps-only); como é comercial, o equivalente livre no Google Fonts é a Julius Sans One. Ela assina títulos, menu, botões, rótulos e badges — sempre em caixa alta com tracking. Texto corrido: EB Garamond (gratuita, PT-BR completo), porque uma fonte uppercase-only não lê parágrafos. Nenhuma terceira fonte entra.
Sua saúde, acompanhada.
Cuidado completo, sem complicação
Conheça nossos médicos
Texto corrido com medida máxima de 29–30rem. Opacidade .75–.82 quando for texto de apoio.
Clínica multidisciplinar
Especialidade · resultado em 24h
font-variant-numeric:lining-nums; ④ parágrafos nunca ultrapassam ~65 caracteres por linha; ⑤ rótulos de dado (cargo, data, preço) em versalete com tracking .14–.2em; ⑥ espaçamento entre linhas ENXUTO: corpo 1.42, texto de apoio no máximo 1.45 — nunca mais que isso; ⑦ itens de menu e navegação sempre em MAIÚSCULAS com tracking .14em na Sacker's; ⑧ títulos, botões, badges e rótulos usam a Sacker's (Sackers Gothic, Monotype 1994 — caps-only; equivalente livre: Julius Sans One) e o texto corrido permanece em EB Garamond.
03 Espaço & forma
Ritmo vertical
Seções respiram com clamp(80px, 10vw, 136px) de respiro. Cabeçalho de seção (.sec-head) termina com margem de clamp(2.6rem, 5vw, 4.2rem). Gap padrão entre cards: clamp(20px, 2.5vw, 28px).
Raios de borda
Pequeno 16px (inputs) · médio 24px (widget, cards médios) · grande 36px (cards de conteúdo) · pílula 999px (botões, badges, nav, letreiros). Blocos de destaque (CTA, quote) podem usar 40–48px.
Sombras
Sempre azul-marinho translúcido, nunca cinza/preto puro. Card: -30px de spread. Elemento flutuante (widget, badge): 0 36px 72px -36px rgba(11,30,91,.4).
Estrutura de seção
- Eyebrow — categoria da seção, versalete + traço coral
- Título — step-2, com ênfase itálica
- Lider — 1 frase de apoio, opacidade .78
- Conteúdo — cards/lista em grid de 3 colunas (2 no tablet, 1 no mobile)
- Ação — link "Saiba mais →" ou botão, sempre alinhado à esquerda do conteúdo
Cabeçalho de seção centrado só quando a seção é "vitrine" (planos, médicos). Seções de leitura são alinhadas à esquerda.
04 Componentes
Botões
Botão primário = coral (no hover, vira navy). Em fundo navy, primário continua coral. Setas "→" ganham deslize de 4px no hover. Nunca mais de um botão sólido visível por bloco.
Badges & pílulas
Badges flutuantes (brancos, sombra) anunciam benefícios; pílulas de especialidade alternam ciano e rosa; pílulas de rede social têm borda fina.
Formulário & dados
Rótulo de campo em versalete coral-esmaecido; input com raio 12–14px e fundo branco. Avatar = iniciais sobre círculo pastel (rotação ciano→pêssego→rosa→lilás→salmão→creme). Estatística = número grande + rótulo versalete, com traço coral à esquerda.
Blocos de assinatura
Texto de depoimento aqui — uma ideia central, dita com as palavras do cliente.Nome · relação com a clínica
Selo girante (texto circular em EB Garamond, núcleo coral com cruz branca) assina o hero. Depoimento vive em bloco creme com aspas gigantes em coral translúcido.
05 Movimento — coreografado, não decorativo
Padrões fixos
- Entrada coreografada — elementos do hero sobem 28px em sequência (delays .08s → .62s), easing
cubic-bezier(.22,1,.36,1), duração .9s - Contadores — números sobem em 1,1s com desaceleração cúbica quando entram na tela
- Microinterações de hover — translateY(-8px) em cards, seta desliza 4px, sublinhado coral cresce da esquerda, ícone gira -8°, halo pastel escala 1.35
- Selo & flutuantes — rotação contínua de 22s; flutuação vertical de 6s alternando ±12px
- Letreiro duplo — duas fileiras de pílulas deslizam em direções opostas (34s / 38s) com inclinação de -2°
Restrições
- Sem revelação dependente de scroll/JS — todo conteúdo deve existir visível por padrão; animação é camada, nunca porta de entrada. (Aprendido em produção nesta conversa.)
- Uma assinatura por página — o selo girante é o único elemento em rotação contínua
- Easing único —
cubic-bezier(.22,1,.36,1)para tudo que entra; linear só em letreiros - Respeito absoluto a
prefers-reduced-motion: reduce— desligar todas as animações - Nada de parallax nem fade longo demais (>1s)
06 Conteúdo — português do Brasil, sempre real
Tom de voz
- Português do Brasil, sem Lorem ipsum — todo texto é real e específico
- Tom caloroso e direto: "Sua saúde, acompanhada de perto", não "Soluções inovadoras em healthtech"
- Promessas concretas: "Resultado em 24h", "30 minutos, sem custo" — número sempre que possível
- Verbos de ação nos botões: "Agendar consulta", "Ver o que está incluído" — nunca "Enviar" ou "Saiba mais" sozinho em CTA principal
- Empatia antes de técnica: "sem jargão", "sem fila de espera", "sem surpresa na fatura"
Placeholders obrigatórios
Dados que o dono precisa preencher antes de publicar aparecem sempre entre colchetes — nunca inventados:
[telefone] · [endereço]
Nomes de médicos, CRMs, preços e avaliações (4,9) são ilustrativos e levam nota de rodapé "*Valores ilustrativos — substitua pelos dados reais."
Regra: é pior um placeholder visível do que um dado falso plausível em material que será impresso ou publicado.
07 Regras de ouro — o que aprendemos nesta conversa
- Cores congeladas — a paleta do item 01 nunca muda, nem "aproximação". Antes de entregar, medir o resultado (screenshot + amostragem de pixels) e confirmar que cada fundo/elemento usa o hex exato.
- Duas fontes fixas — Sacker's (Sackers Gothic; equivalente livre Julius Sans One) em caixa alta para títulos, menu, botões e rótulos; EB Garamond para texto corrido. Nenhuma outra fonte entra.
- Conteúdo real em PT-BR — zero Lorem ipsum em deliverable para o dono; copy de verdade desde a primeira versão.
- Placeholders honestos — [colchetes] para o que falta; nota de ilustratividade para nomes e preços.
- Design de referência — buscar padrão nos melhores shots de Behance/Dribbble (health/medical/editorial): nav flutuante em pílula, booking hero, eyebrows em versalete, prova social, escala tipográfica fluida.
- Verificar antes de entregar — renderizar e inspecionar a imagem final: texto cortado, sobreposição, seção invisível, contraste. Falha encontrada = corrigida antes da entrega.
- Acessibilidade de piso — foco visível (outline coral 3px), contraste AA, reduced-motion respeitado, alvos de toque ≥44px.
- Classe A, não "bom o suficiente" — cada rodada de feedback deve subir o nível: assinatura visual única por página, coreografia, acabamento de detalhe.
- Espaçamento enxuto — line-height 1.42 no corpo, 1.45 no texto de apoio, no máximo; gaps de lista apertados (.25rem); nada de linhas "flutuando".
- Menu em maiúsculas — todo item de navegação é uppercase com tracking .1em.
- Pílula nunca é cor-de-fundo — toda pílula, badge, chip e nav flutuante tem preenchimento SÓLIDO (branco ou uma cor da paleta). Fundo transparente, translúcido ou igual ao fundo da página é proibido: a pílula desaparece. (Violado e corrigido em produção.)
08 Tokens CSS — cole e use
Copie este bloco como :root de qualquer projeto novo do sistema:
Este documento é a fonte da verdade. Quando surgir uma decisão nova de design em conversas futuras, ela entra aqui como regra numerada — e a versão sobe.