Fome.
Pop art de bande dessinée rétro : rouge ketchup, crème et encre noire, trame Ben-Day, contours épais et étoiles POW. Burger illustré, carte en cases de BD et commande en un geste.
- Type
- Landing page
- Thème
- Clair
- Titres
- Bangers
- Texte
- DM Sans
PourPublic de 16 à 40 ans qui commande à manger sur mobile, le soir et le week-end
Sections de la page01/09Topo e navegação
Pop-art de gibi retrô: vermelho-ketchup, creme de papel velho, tinta preta e mostarda. Retícula ben-day, contorno grosso, sombra dura e estrela "POW". Parece revistinha dos anos 60, não app de delivery.
Extrait du DESIGN.md, en portugais pour l'instant.
PourPublic de 16 à 40 ans qui commande à manger sur mobile, le soir et le week-end
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Bangers pour les titres, DM Sans pour le texte.
TitresBangers
Aag!
Fome en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteDM Sans
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.
- marque avec rouge, jaune ou orange
- carte courte et prix populaires
- commande par WhatsApp ou appli de livraison
- marque avec personnalité et humour
- restaurant gastronomique
- cuisine healthy/fit minimaliste
- marque aux tons pastel ou sobres
- service sur rendez-vous
Ton
Ce qui fait Fome
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Hero em quadro de HQ: fundo de raios mostarda, hambúrguer em camadas em SVG, balão de fala com rabicho e estrela "Novo!" pulsando no canto.
- 02
Caixa de narrador amarela ("Enquanto isso, na chapa…", "Capítulo 1") acima de cada título.
- 03
Cardápio em painéis de tamanhos diferentes (como página de gibi), cada um com número, ilustração, alérgenos e preço dentro de estrela que dá um tranco no hover.
- 04
Retícula ben-day em CSS (
fome-dots,fome-dots-grande,fome-dots-some), sem imagem. - 05
Botões que afundam: sombra dura que some quando clica (
fome-btn). - 06
Como pedir em tira de 3 quadros com calha preta, legenda e balão em cada um.
- 07
Chamada final com estrela POW gigante sobre raios vermelhos.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo creme
#fff3dc(papel de gibi), nunca branco puro. Painéis em#fffaf0. - Tinta
#1a1412para texto, contornos (3px) e sombras duras (6px 6px 0). Nada de sombra borrada. - Primária vermelho-ketchup
#e23a2e: botão de pedido, títulos, estrela "Novo!". - Apoio mostarda
#f5b82e: estrela de preço, caixas de narrador, raios de fundo. - Fontes: Bangers (
--font-bangers) em títulos grandes e inclinados (-rotate-2/-rotate-3), com contorno e sombra deslocada (fome-letreiro). DM Sans (--font-dm-sans) no texto. - Não confundir: não é o Patinha (pastel fofo, arredondado) nem o Choque (preto e neon). Aqui tudo é papel, tinta e retícula.
Regras
- Contorno sempre 3px tinta; sombra sempre dura e para baixo/direita.
- Máximo 2 botões de pedido juntos: WhatsApp e app de delivery.
- Sem logo de app de delivery (nem de WhatsApp) sem autorização da marca dona: botão é texto genérico ("Pedir pelo app de delivery") com ícone neutro. Só use o logo oficial se o cliente tiver o kit de marca e a permissão da plataforma.
- Animações: estrela pulsa, lanche flutua, faixa corre, preço dá tranco no hover. Tudo para em
prefers-reduced-motion. - Texto corrido nunca em Bangers; Bangers só em título, preço, rótulo e botão.
Adaptar à marca do cliente
- Cor da marca: troque
--d-primary(e--fome-tintasó se a marca pedir marrom em vez de preto). Mantenha o creme e a mostarda; se a marca já for amarela, troque o--d-accentpor um tom próximo. - Pizzaria: troque o
Lanchedo hero por uma pizza em SVG no mesmo quadro. Açaí: use oShakecomo base (copo) e mude as cores. Pastelaria: oPastelvira o herói. - Fotos reais: coloque
<img className="object-cover">dentro do painel, no lugar do SVG, e mantenha o contorno e a retícula por cima (fica com cara de gibi mesmo com foto). - Marca sóbria, gourmet ou fit? Esse design provavelmente não é o certo.
Deux fichiers.
Un prompt.
Fome 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 Fome.