Receita.
L'accessibilité comme identité : grands caractères avec contrôle A− / A+, contraste AAA et blocs d'étiquette et de notice à épaisse bordure noire, bandeau, gélule, blister et croix verte de pharmacie.
- Type
- Landing page
- Thème
- Clair
- Titres
- Atkinson Hyperlegible
- Texte
- Atkinson Hyperlegible
PourPersonnes âgées, malvoyants et leurs aidants ; clients de comptoir qui commandent par téléphone ou WhatsApp
Sections de la page01/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).
Extrait du DESIGN.md, en portugais pour l'instant.
PourPersonnes âgées, malvoyants et leurs aidants ; clients de comptoir qui commandent par téléphone ou WhatsApp
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Atkinson Hyperlegible pour les titres, Atkinson Hyperlegible pour le texte.
TitresAtkinson Hyperlegible
Aag!
Receita en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteAtkinson Hyperlegible
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- public plus âgé ou malvoyant
- commande par WhatsApp ou téléphone
- commerce de santé de quartier, sans luxe
- marque verte ou sans couleur définie
- clinique esthétique ou premium
- marque jeune et branchée
- e-commerce avec beaucoup de produits et de prix
- tech/SaaS
Ton
Ce qui fait Receita
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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).
Deux fichiers.
Un prompt.
Receita devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Receita.
