Feira.
Affiche de promo peinte à la main d'un primeur : papier fluo de travers tenu par du ruban de masquage, prix géant au marqueur avec centimes en exposant, ardoise verte à la craie, cagettes en bois et store à rayures. Joyeux, bruyant et de quartier.
- Type
- Landing page
- Thème
- Clair
- Titres
- Permanent Marker
- Texte
- Nunito Sans
PourFamilles du quartier qui achètent des produits frais chaque semaine, au comptoir ou par WhatsApp
Sections de la page01/09toldo listrado + nav com 'aberto hoje'
O cartaz de oferta pintado à mão do sacolão: papel fluorescente torto, preso com fita crepe, preço GIGANTE a marcador. Lousa verde de giz, caixote de madeira, toldo listrado. Alegre, barulhento e honesto. É bairro, não é gourmet.
Extrait du DESIGN.md, en portugais pour l'instant.
PourFamilles du quartier qui achètent des produits frais chaque semaine, au comptoir ou par WhatsApp
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Permanent Marker pour les titres, Nunito Sans pour le texte.
TitresPermanent Marker
Aag!
Feira en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteNunito 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.
- commerce qui vit d'offres et du prix de la semaine
- commande par WhatsApp et livraison dans le quartier
- marque avec rouge, jaune ou vert vifs
- commerçant qui veut paraître proche, sans chichi
- épicerie fine ou bio premium
- marque minimaliste ou de luxe
- restaurant et burger
- service professionnel sérieux (santé, droit)
Ton
Ce qui fait Feira
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Cartaz de oferta (
Cartaz): papel fluorescente girado (--rentre -5° e 5°), fita crepe nos cantos (::before/::after;.feira-fita-1deixa uma fita só no meio), endireita e sobe no hover. - 02
Preço pintado (
PrecoPintado): "R$" pequeno no alto, número gigante, centavos sobrescritos e sublinhados, unidade embaixo ("o kg", "o pé"). - 03
Toldo listrado vermelho/papel com a borda em ondas no topo e no rodapé (
.feira-toldo). - 04
Lousa "hoje tem" com moldura de madeira, traço de giz tracejado e toco de giz no parapeito.
- 05
Caixote (
.feira-caixote, ripas) com frutas SVG por cima: no hero e nas cestas. - 06
Plaquinha de preço preta com furo (
.feira-plaquinha) para "chegou hoje" e etiquetas. - 07
Frutas e verduras em SVG chapado próprio (
FrutaSvg: tomate, banana, melancia, cenoura, alface, laranja, uva, peixe). - 08
Botões com borda preta e sombra dura deslocada (
shadow-[4px_4px_0_#1b1714]), que afunda no clique.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo papel kraft claro
#efe2c6com pontinhos de fibra (no própriotokens.css). Faixa alternada em kraft escurosurface-2(#e2cfa8). - Texto tinta de marcador
#1b1714; secundário#594733. - Primária vermelho-feira
#d4241c: botão principal, nome da loja, preço em cartaz claro, chamada final. - Destaque amarelo-cartaz
#f0ff2e: grifo de marca-texto, botão da chamada final, bolinhas numeradas. - Papéis de cartaz:
.feira-limao,.feira-laranja,.feira-rosa,.feira-verde. Só em cartaz, nunca em fundo de seção. - Lousa verde
#1f4636(.feira-lousa) com giz#f3f0e2e moldura de madeira. Uma lousa por página. - Fontes: Permanent Marker (
font-display) só em título, preço, nome da loja e recado curto. Texto corrido e botões em Nunito Sans bem pesada (font-extrabold).
Regras
- Torto sim, bagunçado não: rotação só nos cartazes e rótulos, no máximo 5°. Grade e alinhamento continuam firmes.
- Nunca Permanent Marker em parágrafo. Rótulo de seção: tarja preta com texto amarelo caixa-alta (
Rotulo). - Cartazes de uma mesma fileira alternam cor e ângulo; nunca duas cores iguais lado a lado.
- Animação:
data-sobeno hero,data-revelaabaixo; um único cartaz balança (.feira-balanca) e a bolinha "aberto" pisca. Tudo para com movimento reduzido. - Ícones lucide só utilitários (WhatsApp, relógio, entrega),
size-4.
Adaptar à marca do cliente
- Cor da marca vira
--d-primary(vermelho, verde ou laranja fortes funcionam). Mantenha kraft, tinta preta e o amarelo-cartaz. - Açougue/peixaria: troque as frutas do
FrutaSvgpor cortes e peixes no mesmo estilo chapado, e o papel rosa vira o cartaz principal. - Empório mais arrumado: menos rotação (±2°) e só duas cores de cartaz. Se o cliente quer ar gourmet, o design certo é outro (Raiz).
Deux fichiers.
Un prompt.
Feira 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 Feira.