Brasa.
Restaurant at night: charcoal background, ember orange, italic serif and a menu with dotted leader lines. Oval photos and a spinning seal.
- Type
- Landing page
- Theme
- Dark
- Headings
- Fraunces
- Body
- DM Sans
ForAdults who go out for dinner, with reservations and in-person visits
Page sections01/07Topo e navegação
Restaurante à noite, iluminado por fogo. Escuro e quente, nunca preto frio. Parece cardápio impresso de casa autoral.
From DESIGN.md, which is in Portuguese for now.
ForAdults who go out for dinner, with reservations and in-person visits
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Fraunces for headings, DM Sans for body text.
HeadingsFraunces
Aag!
Brasa 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.
- short, signature menu
- food photos in warm light
- brand with orange, red, terracotta or gold
- evening service
- high-volume delivery / cheap fast food
- healthy/fit food (needs a light look)
- daytime café with a light look
- anything outside food service
Tone
What makes it Brasa
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 01
Fotos em oval (
rounded-[50%]), com brilho de fogo embaixo. - 02
Selo circular laranja com texto girando e chama no centro.
- 03
Cardápio com linha pontilhada entre prato e preço (
.brasa-pontos), preço sem "R$". - 04
Grão de papel leve sobre a página inteira (
.brasa-grao). - 05
Brilho laranja desfocado saindo de baixo na chamada final.
- 06
Link secundário sublinhado em dourado, em vez de segundo botão.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
Identidade
- Fundo carvão quente
#16110d, superfícies#1f1813e#2a2019. Nunca cinza neutro. - Texto creme
#f3e9dc; secundário#b3a595. - Primária laranja-brasa
#e2622f: botões, preços e a palavra em destaque. - Destaque dourado
#dcae55para rótulos, categorias do cardápio e horários. - Fontes: Fraunces (peso médio, itálico para ênfase) nos títulos e nomes de pratos; DM Sans no texto.
Regras
- Fotos precisam ter luz quente. Foto fria ou com flash estoura o clima; avise o usuário.
- Cardápio na landing mostra 2 categorias de 3 pratos no máximo. O resto vai para "Cardápio completo".
- Títulos de seção em itálico, frases curtas.
- Nada de ícone de comida (garfo, prato). Só a chama.
Adaptar à marca do cliente
- Pizzaria/hamburgueria:
--d-primarypode ir para vermelho#d9412b. Mantenha o fundo quente. - Wine bar: primária vinho
#b0344fe destaque dourado continuam funcionando.
Two files.
One prompt.
Brasa 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.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 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.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 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 Brasa.