Brasa.
Restaurante à noite: fundo de carvão, laranja de brasa, serifa itálica e cardápio com linha pontilhada. Fotos em oval e selo girando.
- Tipo
- Landing page
- Tema
- Escuro
- Títulos
- Fraunces
- Texto
- DM Sans
ParaAdultos que saem para jantar, reserva e visita presencial
Seções da página01/07Topo e navegação
Restaurante à noite, iluminado por fogo. Escuro e quente, nunca preto frio. Parece cardápio impresso de casa autoral.
ParaAdultos que saem para jantar, reserva e visita presencial
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Fraunces nos títulos, DM Sans no texto.
TítulosFraunces
Aag!
Brasa 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.
- cardápio curto e autoral
- fotos de comida com luz quente
- marca com laranja, vermelho, terracota ou dourado
- funcionamento à noite
- delivery de volume/fast food barato
- comida saudável/fit (pede visual claro)
- cafeteria de dia com visual leve
- qualquer coisa fora de alimentação
Tom
O que faz ser Brasa
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Brasa 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.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 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 Brasa.