Feira.
Cartaz de oferta pintado à mão de sacolão: papel fluorescente torto preso com fita crepe, preço gigante a marcador com centavos sobrescritos, lousa verde de giz, caixotes de madeira e toldo listrado. Alegre, barulhento e de bairro.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Permanent Marker
- Texto
- Nunito Sans
ParaFamílias do bairro que compram comida fresca toda semana, no balcão ou pelo WhatsApp
Seções da 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.
ParaFamílias do bairro que compram comida fresca toda semana, no balcão ou pelo WhatsApp
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Permanent Marker nos títulos, Nunito Sans no texto.
TítulosPermanent Marker
Aag!
Feira em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoNunito 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.
- comércio que vive de oferta e preço da semana
- pedido por WhatsApp e entrega no bairro
- marca com vermelho, amarelo ou verde vivos
- dono que quer parecer próximo, sem pose
- empório gourmet ou orgânico premium
- marca minimalista ou de luxo
- restaurante e hamburgueria
- serviço profissional sério (saúde, advocacia)
Tom
O que faz ser Feira
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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).
Dois arquivos.
Um prompt.
O Feira 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 Feira.