Design Vaultby Ravox
Landingclarodivertidobarulhentoretrô
FFome

Fome.

Pop-art de gibi retrô: vermelho-ketchup, creme e tinta preta, retícula ben-day, contornos grossos e estrelas POW. Lanche ilustrado, cardápio em quadrinhos e pedido em um toque.

Tipo
Landing page
Tema
Claro
Títulos
Bangers
Texto
DM Sans

ParaPúblico 16-40 que pede comida pelo celular, à noite e no fim de semana

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/fome

Seções da página01/09Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

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.

ParaPúblico 16-40 que pede comida pelo celular, à noite e no fim de semana

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Bangers nos títulos, DM Sans no texto.

TítulosBangers

Aag!

Fome em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoDM Sans

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • marca com vermelho, amarelo ou laranja
  • cardápio curto e preço popular
  • pedido por WhatsApp ou app de delivery
  • marca com personalidade e humor
Evitar para
  • restaurante de alta gastronomia
  • comida saudável/fit minimalista
  • marca de tons pastel ou sóbrios
  • serviço com agendamento
Nichos
hamburgueriadeliverydark kitchenfood truckpizzaria deliveryaçaípastelarialanchonete

Tom

divertidobarulhentoretrôapetitosodireto

O que faz ser Fome

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 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.

  2. 02

    Caixa de narrador amarela ("Enquanto isso, na chapa…", "Capítulo 1") acima de cada título.

  3. 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.

  4. 04

    Retícula ben-day em CSS (fome-dots, fome-dots-grande, fome-dots-some), sem imagem.

  5. 05

    Botões que afundam: sombra dura que some quando clica (fome-btn).

  6. 06

    Como pedir em tira de 3 quadros com calha preta, legenda e balão em cada um.

  7. 07

    Chamada final com estrela POW gigante sobre raios vermelhos.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo creme #fff3dc (papel de gibi), nunca branco puro. Painéis em #fffaf0.
  • Tinta #1a1412 para 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-tinta só se a marca pedir marrom em vez de preto). Mantenha o creme e a mostarda; se a marca já for amarela, troque o --d-accent por um tom próximo.
  • Pizzaria: troque o Lanche do hero por uma pizza em SVG no mesmo quadro. Açaí: use o Shake como base (copo) e mude as cores. Pastelaria: o Pastel vira 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.
Como usar

Dois arquivos.
Um prompt.

O Fome vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Fome.

Ver catálogo
LandingclaroVer design

Nanquim

LandingclaroVer design

Rótulo

LandingclaroVer design

Maré

LandingclaroVer design

Receita