Receita.
Accesibilidad como identidad: letra grande con control A− / A+, contraste AAA y bloques de etiqueta y prospecto con borde negro grueso, franja, cápsula, blíster y cruz verde de farmacia.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Atkinson Hyperlegible
- Texto
- Atkinson Hyperlegible
ParaAdultos mayores, personas con baja visión y quienes los cuidan; clientes de mostrador que piden por teléfono o WhatsApp
Secciones de la página01/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).
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos mayores, personas con baja visión y quienes los cuidan; clientes de mostrador que piden por teléfono o WhatsApp
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Atkinson Hyperlegible en los títulos, Atkinson Hyperlegible en el texto.
TítulosAtkinson Hyperlegible
Aag!
Receita en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoAtkinson Hyperlegible
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- público mayor o con baja visión
- pedidos por WhatsApp o teléfono
- negocio de salud de barrio, sin lujo
- marca verde o sin color definido
- clínica estética o premium
- marca joven y canchera
- e-commerce con muchos productos y precios
- tech/SaaS
Tono
Lo que lo hace Receita
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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).
Dos archivos.
Un prompt.
Receita se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Receita.