Brasa.
Restaurante de noche: fondo de carbón, naranja de brasa, serifa cursiva y carta con línea punteada. Fotos ovaladas y sello giratorio.
- Tipo
- Landing page
- Tema
- Oscuro
- Títulos
- Fraunces
- Texto
- DM Sans
ParaAdultos que salen a cenar, con reserva y visita presencial
Secciones de la página01/07Topo e navegação
Restaurante à noite, iluminado por fogo. Escuro e quente, nunca preto frio. Parece cardápio impresso de casa autoral.
Del DESIGN.md, que por ahora está en portugués.
ParaAdultos que salen a cenar, con reserva y visita presencial
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Fraunces en los títulos, DM Sans en el texto.
TítulosFraunces
Aag!
Brasa 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.
- carta corta y de autor
- fotos de comida con luz cálida
- marca con naranja, rojo, terracota o dorado
- funcionamiento nocturno
- delivery de volumen / comida rápida barata
- comida saludable/fit (pide un look claro)
- cafetería de día con look ligero
- cualquier cosa fuera de gastronomía
Tono
Lo que lo hace Brasa
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Brasa 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 Brasa.