Feira.
Hand-painted offer sign from a produce market: crooked fluorescent paper held with masking tape, giant marker prices with superscript cents, green chalkboard, wooden crates and a striped awning. Cheerful, loud and neighborhood.
- Type
- Landing page
- Theme
- Light
- Headings
- Permanent Marker
- Body
- Nunito Sans
ForNeighborhood families who buy fresh food every week, at the counter or via WhatsApp
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForNeighborhood families who buy fresh food every week, at the counter or via WhatsApp
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Permanent Marker for headings, Nunito Sans for body text.
HeadingsPermanent Marker
Aag!
Feira in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyNunito Sans
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- shop that lives on offers and weekly prices
- WhatsApp orders and local delivery
- brand with vivid red, yellow or green
- owner who wants to seem close, without pretense
- gourmet or premium organic deli
- minimalist or luxury brand
- restaurant and burger joint
- serious professional service (healthcare, law)
Tone
What makes it Feira
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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).
Two files.
One prompt.
Feira becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Feira.