Design Vaultby Ravox
Landingclaroconfiávelhumanodireto
RReceita

Receita.

Acessibilidade como identidade: letra grande com controle A− / A+, contraste AAA e blocos de etiqueta e bula com borda preta grossa, tarja, cápsula, blíster e cruz verde de farmácia.

Tipo
Landing page
Tema
Claro
Títulos
Atkinson Hyperlegible
Texto
Atkinson Hyperlegible

ParaIdosos, quem enxerga pouco e quem cuida deles; cliente de balcão que pede por telefone ou WhatsApp

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/receita

Seções da página01/09Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

Acessibilidade como identidade. Letra grande, contraste AAA, alvos de toque grandes e o visual de etiqueta de remédio e bula: blocos de borda preta grossa, faixa de tarja, cápsula, blíster e a cruz verde. Limpo, confiável e humano. Não é clínica (Sereno) nem luxo (Esmalte).

ParaIdosos, quem enxerga pouco e quem cuida deles; cliente de balcão que pede por telefone ou WhatsApp

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Atkinson Hyperlegible nos títulos, Atkinson Hyperlegible no texto.

TítulosAtkinson Hyperlegible

Aag!

Receita em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoAtkinson Hyperlegible

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • público mais velho ou com baixa visão
  • pedido por WhatsApp ou telefone
  • negócio de saúde de bairro, sem luxo
  • marca verde ou sem cor definida
Evitar para
  • clínica estética ou premium
  • marca jovem e descolada
  • e-commerce com muitos produtos e preço
  • tech/SaaS
Nichos
farmácia de bairrodrogariafarmácia de manipulaçãohomeopatiaortopediaprodutos hospitalareshome carecuidador de idososclínica de vacinação

Tom

confiávelhumanodiretoacessívelde bairro

O que faz ser Receita

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Faixa preta no topo com controle A− / A / A+: radios que trocam --receita-escala via :has(). Todo texto usa as classes receita-t-* (calculadas a partir de --receita-base, 19px).

  2. 02

    Etiqueta do pedido no hero: linhas de bula com pontilhado, blíster em SVG e tarja no rodapé, com sombra verde chapada e uma cápsula balançando no canto.

  3. 03

    Serviços como blocos de bula: cabeçalho preto com ícone em quadrado amarelo, "posologia" em mono.

  4. 04

    Passos numerados em cápsula meio verde, meio branca.

  5. 05

    Cartão de uso contínuo com cartela de 14 alvéolos (tomados tracejados, restantes com comprimido).

  6. 06

    Botões com ícone + texto, borda 3px e sombra que afunda ao clicar (.receita-botao).

  7. 07

    Foco sempre visível: contorno preto 4px + halo amarelo.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo branco quente #fffdf8; blocos alternados em surface-2 #f6f0e2.
  • Texto quase preto #141414; secundário #3b3b3b (continua AAA). Nada de cinza claro.
  • Primária verde-farmácia #0b5d3b (7,9:1 com branco): botões, cruz, seção de descontos.
  • Destaque amarelo-atenção #ffd23f, sempre com texto preto: rótulos, avisos, foco, chamada final.
  • Tarja #a8102a com filete preto (.receita-tarja): só como faixa gráfica, com texto branco em negrito.
  • Fontes: Atkinson Hyperlegible (400/700) em tudo; Azeret Mono para códigos, doses, telefone.

Regras

  • Base de 19px. Nunca usar text-xs/sm/lg do Tailwind: use receita-t-sm|md|lg|xl|2xl|h1, senão o A+ não pega.
  • Alvo de toque mínimo 48px; botões principais min-h-16.
  • Nunca texto em cima de imagem. Foto (quando houver) fica em bloco próprio com borda.
  • Bordas de 3px em preto. Sombra só chapada (verde ou preta), nunca difusa.
  • Links sublinhados. Nenhuma informação só por cor (tomado = tracejado + check).
  • Tarja vermelha é elemento gráfico pontual (etiqueta, cartão, rodapé). Não usar tarja preta como decoração: ela significa controle especial.
  • Animação discreta: entrada do hero, revela ao rolar, cápsula balançando. Tudo para com movimento reduzido.

Adaptar à marca do cliente

  • Cor própria: troque --d-primary (manter contraste ≥ 7:1 com branco) e a sombra verde da etiqueta.
  • Amarelo e preto ficam: são a parte de acessibilidade, não de marca.
  • Ortopedia/hospitalar: troque os serviços (aluguel de cadeira de rodas, medida de meia de compressão).
  • Home care/cuidador: "como pedir" vira "como contratar"; a cartela vira agenda de visitas.
  • Clínica de vacinação: a cartela vira carteirinha de vacina (doses tomadas x próximas).
Como usar

Dois arquivos.
Um prompt.

O Receita vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Receita.

Ver catálogo
LandingclaroVer design

Trena

LandingclaroVer design

Rótulo

LandingclaroVer design

Lente

LandingclaroVer design

Carteira