Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightfunloudretro
FFome

Fome.

Retro comic-book pop art: ketchup red, cream and black ink, Ben-Day halftone, thick outlines and POW stars. Illustrated burgers, a comic-panel menu and one-tap ordering.

Type
Landing page
Theme
Light
Headings
Bangers
Body
DM Sans

ForPeople 16-40 who order food on their phone, at night and on weekends

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/fome

Page sections01/09Topo e navegação

All the copy lives in content.ts and the colors in tokens.css.
Concept

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.

From DESIGN.md, which is in Portuguese for now.

ForPeople 16-40 who order food on their phone, at night and on weekends

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Bangers for headings, DM Sans for body text.

HeadingsBangers

Aag!

Fome in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyDM Sans

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • brand with red, yellow or orange
  • short menu with popular prices
  • orders by WhatsApp or a delivery app
  • brand with personality and humor
Avoid for
  • fine dining restaurant
  • minimalist healthy/fit food
  • pastel or sober brand
  • service that works by appointment
Niches
burger jointdeliverydark kitchenfood truckdelivery pizzeriaaçaípastel shop (Brazilian fried pastries)snack bar

Tone

funloudretroappetizingdirect

What makes it Fome

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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.
How to use

Two files.
One prompt.

Fome becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Fome.

Browse catalog
LandingLightView design

Nanquim

LandingLightView design

Rótulo

LandingLightView design

Maré

LandingLightView design

Receita