Feira.
Cartel de oferta pintado a mano de verdulería: papel fluorescente torcido pegado con cinta de enmascarar, precio gigante a marcador con centavos en superíndice, pizarra verde de tiza, cajones de madera y toldo rayado. Alegre, ruidoso y de barrio.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Permanent Marker
- Texto
- Nunito Sans
ParaFamilias del barrio que compran comida fresca todas las semanas, en el mostrador o por WhatsApp
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaFamilias del barrio que compran comida fresca todas las semanas, en el mostrador o por WhatsApp
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Permanent Marker en los títulos, Nunito Sans en el texto.
TítulosPermanent Marker
Aag!
Feira en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoNunito 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.
- comercio que vive de ofertas y precio de la semana
- pedido por WhatsApp y entrega en el barrio
- marca con rojo, amarillo o verde vivos
- dueño que quiere parecer cercano, sin pose
- almacén gourmet u orgánico premium
- marca minimalista o de lujo
- restaurante y hamburguesería
- servicio profesional serio (salud, abogacía)
Tono
Lo que lo hace Feira
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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).
Dos archivos.
Un prompt.
Feira 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 Feira.