Brasa.
Restaurant en soirée : fond charbon, orange braise, empattements en italique et carte avec points de conduite. Photos ovales et sceau qui tourne.
- Type
- Landing page
- Thème
- Sombre
- Titres
- Fraunces
- Texte
- DM Sans
PourAdultes qui sortent dîner, avec réservation et visite sur place
Sections de la page01/07Topo e navegação
Restaurante à noite, iluminado por fogo. Escuro e quente, nunca preto frio. Parece cardápio impresso de casa autoral.
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes qui sortent dîner, avec réservation et visite sur place
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Fraunces pour les titres, DM Sans pour le texte.
TitresFraunces
Aag!
Brasa en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteDM Sans
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- carte courte et d'auteur
- photos de plats en lumière chaude
- marque avec orange, rouge, terre cuite ou doré
- service du soir
- livraison de volume / fast-food bon marché
- cuisine healthy/fit (demande un style clair)
- café de jour au style léger
- tout ce qui n'est pas restauration
Ton
Ce qui fait Brasa
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Brasa devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Brasa.
