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
Secciones de la página01/09nav
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.
- marca de comida con producto fotogénico
- colores cálidos y saturados
- venta en mostrador + encargos
- negocio de barrio con personalidad
- servicio serio o técnico (abogacía, salud, finanzas)
- lujo minimalista
- marca fría o monocromática
- negocio sin producto para mostrar en foto
Tono
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.
- 01
Marca de ponta a ponta:
h1"fermento" em minúsculas,24vw(21vw dolg), entrelinha 0.8,letter-spacing: -0.035em. O texto visível éaria-hidden; oh1lê a frase completa emsr-only. - 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. - 03
Adesivos: selo serrilhado (SVG gerado, 22 dentes) com "36 h de fermentação" girando em volta de "36h"; pílulas
fermento-adesivogiradas (−9°, 6°) em tomate e morango. Entram com mola (fermento-cola, escala 0.3 → 1, atraso escalonado). - 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.
- 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, letrasaria-hidden. - 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 para1 − restantes × 0.04quando o próximo chega. Cada cartão tem cor própria (creme, manteiga, morango, pistache), foto 4:3 com contorno e a hora gigante. - 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.
- 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.
- 09
Rodapé chocolate com "fermento" em
27.5vwmanteiga, 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ões0 8px 0, adesivos4px 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())eprefers-reduced-motion: no-preference. Sem suporte ou com movimento reduzido, a página fica parada e completa. - Imagens com
width/height; abaixo da dobraloading="lazy". Cenas da faixa são decorativas (alt="",aria-hidden).
Adaptar à marca do cliente
- Trocar o nome no
h1e no rodapé e medir de novo osvw(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.
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.
Similares
Landings con tono o nicho en común con Fermento.