LandingClaroalegresabrososeguro
FFermento

Fermento.

Vitrina de panadería en amarillo manteca, chocolate, tomate y frutilla: un croissant gigante flotando sobre la marca en letra gorda y redonda, stickers torcidos, tarjetas de sombra dura y un scroll que cuenta las 36 horas de la masa.

Tipo
Landing page
Tema
Claro
Títulos
Bagel Fat One
Texto
Onest

ParaClientes de barrio y quienes encargan tortas para fiestas; compran por antojo y por ocasión

/preview/fermento

Secciones de la página01/09nav

Todo el texto está en content.ts y los colores en tokens.css.
Concepto

Del DESIGN.md, que por ahora está en portugués.

ParaClientes de barrio y quienes encargan tortas para fiestas; compran por antojo y por ocasión

Paleta

Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.

Tipografía

Bagel Fat One en los títulos, Onest en el texto.

TítulosBagel Fat One

Aag!

Fermento en una línea

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoOnest

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.

Ideal para
  • marca de comida con producto fotogénico
  • colores cálidos y saturados
  • venta en mostrador + encargos
  • negocio de barrio con personalidad
Evitar para
  • servicio serio o técnico (abogacía, salud, finanzas)
  • lujo minimalista
  • marca fría o monocromática
  • negocio sin producto para mostrar en foto
Nichos
panaderíapasteleríapâtisseriedulceríatortas por encargocafeteríaheladeríahamburguesería artesanalpizzería de masa madremarca de comida

Tono

alegresabrososeguroartesanalde barrio

Lo que lo hace Fermento

Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.

  1. 01

    Marca de ponta a ponta: h1 "fermento" em minúsculas, 24vw (21vw do lg), entrelinha 0.8, letter-spacing: -0.035em. O texto visível é aria-hidden; o h1 lê a frase completa em sr-only.

  2. 02

    Croissant flutuando (croissant.webp, transparente, 1600×1100) por cima do nome, em camadas: posição → entrada (fermento-entra: sobe 90px girando −10°) → saída com a rolagem (fermento-sai, scroll(root), sobe 16vh e gira −9° no primeiro 100vh) → Flutua.tsx (inclina até 10° e desliza até 26px seguindo o mouse, com amortecimento; desligado no toque e com movimento reduzido) → balanço parado (fermento-balanca, 5.5s). A sombra no chão encolhe no mesmo ritmo do balanço.

  3. 03

    Adesivos: selo serrilhado (SVG gerado, 22 dentes) com "36 h de fermentação" girando em volta de "36h"; pílulas fermento-adesivo giradas (−9°, 6°) em tomate e morango. Entram com mola (fermento-cola, escala 0.3 → 1, atraso escalonado).

  4. 04

    Faixa de cenas sobre chocolate: duas fileiras de 8 cenas quadradas (800×800, raio 28px) presas à rolagem, uma para cada lado, e entre elas os nomes dos pães em Bagel gigante (manteiga/morango alternados, estrela de 8 pontas em tomate) correndo mais rápido.

  5. 05

    Manifesto que assa: frase em Bagel que ganha cor letra por letra (opacidade 0.16 → 1, sobe 0.14em) na sua fatia da rolagem. Frase inteira em sr-only, letras aria-hidden.

  6. 06

    36 horas de um croissant sobre tomate: 4 cartões sticky (top 4.5rem/6rem + 22px por índice) em trilhos de 88–92vh; o de baixo encolhe para 1 − restantes × 0.04 quando o próximo chega. Cada cartão tem cor própria (creme, manteiga, morango, pistache), foto 4:3 com contorno e a hora gigante.

  7. 07

    Cardápio: cartões coloridos com o produto recortado vazando pela borda de cima (cai girando ao entrar na tela; no hover sobe 14px e gira ±5°), adesivo creme e preço em pílula chocolate girada −4°. O resto do balcão em lista com réguas de 3px e preço em Bagel.

  8. 08

    Encomendas sobre morango (a seção sobe 40/64px por cima da anterior, cantos arredondados): 3 passos com número gigante e sombra de texto tomate, depois a ficha chocolate com tamanhos, horários e endereço.

  9. 09

    Rodapé chocolate com "fermento" em 27.5vw manteiga, cortado pela borda de baixo e subindo de trás dela ao entrar.

Reglas del juego

Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.

Identidade

  • Padaria de fermentação natural tratada como vitrine de loja de doce: campo de cor saturada e
  • apetitosa, o produto gigante flutuando por cima da marca e adesivos colados tortos. Página em
  • amarelo-manteiga (#F4B73A) com tinta chocolate (#2A160A); as seções trocam de cor inteira
  • (chocolate, tomate #EC5B2F, creme #FFF1D6, morango #F7A1C4) e os cartões usam também
  • pistache (#A8C96B). Display em Bagel Fat One (só 400, gorda e redonda), texto em Onest
  • (500 a 800). Nada de serifa, nada de terracota em creme.
  • Tudo que é "objeto" tem contorno chocolate de 3px e sombra dura chapada (sem desfoque): botões
  • 0 5px 0, cartões 0 8px 0, adesivos 4px 4px 0. É o que dá o ar de adesivo/brinquedo.

Regras

  • Contraste: chocolate sobre manteiga 9.6:1, sobre tomate 5.0:1, sobre morango 8.9:1; creme sobre chocolate 15:1. Texto corrido nunca em tomate ou morango sobre claro; "36h" do selo usa #B8391A (5.2:1 no creme).
  • Botão principal sempre chocolate com texto creme e sombra dura tomate (creme quando a seção é tomate). Hover sobe 3px e a sombra cresce; clique afunda. Foco: contorno 3px chocolate (creme no escuro).
  • Nada de brilho, vidro, degradê em texto ou fundo. A única sombra macia é a do croissant no chão.
  • Movimento: entrada do hero com data-sobe (+ fermento-entra/fermento-cola); abaixo da dobra tudo dentro de @supports (animation-timeline: view()) e prefers-reduced-motion: no-preference. Sem suporte ou com movimento reduzido, a página fica parada e completa.
  • Imagens com width/height; abaixo da dobra loading="lazy". Cenas da faixa são decorativas (alt="", aria-hidden).

Adaptar à marca do cliente

  • Trocar o nome no h1 e no rodapé e medir de novo os vw (24/21vw e 27.5vw valem para 8 letras de Bagel Fat One): largura do texto ÷ largura da tela, deixando ~3% de folga.
  • O produto do hero precisa de fundo transparente, proporção próxima de 16:11 e ser o produto-símbolo da casa. Os produtos do cardápio: transparentes, 1000×800 (horizontais) ou 1100×1000 (altos).
  • Cores: manter um campo saturado claro como fundo (manteiga) e a tinta bem escura; a cor da marca do cliente entra no lugar do tomate (sombra dos botões, seção do processo, selo "saído às 7h"), conferindo o contraste do chocolate por cima (≥ 4.5:1).
  • Se a fonte do cliente não for gorda, manter Bagel Fat One só na marca e nos títulos.
  • Os 4 passos do processo trocam de assunto conforme o nicho (fermentação de pizza, torra do café, maturação do hambúrguer), sempre com uma hora ou um número real de cada etapa.
Claude Code

Lleva Fermento
a tu cliente.

En Claude Code, Cursor o cualquier IA: lee el DESIGN.md de este diseño y aplica tokens, fuentes y textos en el proyecto del cliente.

Usar con IA

Similares

Landings con tono o nicho en común con Fermento.