Fome.
Pop-art de cómic retro: rojo ketchup, crema y tinta negra, trama ben-day, contornos gruesos y estrellas POW. Comida ilustrada, carta en viñetas y pedido en un toque.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Bangers
- Texto
- DM Sans
ParaPúblico de 16 a 40 años que pide comida por el celular, de noche y los fines de semana
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaPúblico de 16 a 40 años que pide comida por el celular, de noche y los fines de semana
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Bangers en los títulos, DM Sans en el texto.
TítulosBangers
Aag!
Fome en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoDM Sans
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.
- marca con rojo, amarillo o naranja
- carta corta y precio popular
- pedido por WhatsApp o app de delivery
- marca con personalidad y humor
- restaurante de alta gastronomía
- comida saludable/fit minimalista
- marca de tonos pastel o sobrios
- servicio con agendamiento
Tono
Lo que lo hace Fome
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Fome 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 Fome.