Receita.
Accessibility as identity: large type with an A− / A+ control, AAA contrast and label-and-leaflet blocks with thick black borders, color band, capsule, blister pack and the green pharmacy cross.
- Type
- Landing page
- Theme
- Light
- Headings
- Atkinson Hyperlegible
- Body
- Atkinson Hyperlegible
ForOlder adults, people with low vision and their caregivers; counter customers who order by phone or WhatsApp
Page sections01/09Topo e navegação
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).
From DESIGN.md, which is in Portuguese for now.
ForOlder adults, people with low vision and their caregivers; counter customers who order by phone or WhatsApp
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Atkinson Hyperlegible for headings, Atkinson Hyperlegible for body text.
HeadingsAtkinson Hyperlegible
Aag!
Receita in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyAtkinson Hyperlegible
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- older audience or low vision
- ordering by WhatsApp or phone
- neighborhood healthcare business, no luxury
- green brand or no defined color
- aesthetic or premium clinic
- young, trendy brand
- e-commerce with many products and prices
- tech/SaaS
Tone
What makes it Receita
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 01
Faixa preta no topo com controle A− / A / A+: radios que trocam
--receita-escalavia:has(). Todo texto usa as classesreceita-t-*(calculadas a partir de--receita-base, 19px). - 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.
- 03
Serviços como blocos de bula: cabeçalho preto com ícone em quadrado amarelo, "posologia" em mono.
- 04
Passos numerados em cápsula meio verde, meio branca.
- 05
Cartão de uso contínuo com cartela de 14 alvéolos (tomados tracejados, restantes com comprimido).
- 06
Botões com ícone + texto, borda 3px e sombra que afunda ao clicar (
.receita-botao). - 07
Foco sempre visível: contorno preto 4px + halo amarelo.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
Identidade
- Fundo branco quente
#fffdf8; blocos alternados emsurface-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
#a8102acom 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/lgdo Tailwind: usereceita-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).
Two files.
One prompt.
Receita becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Receita.
