Fermento.
Vitrine de padaria em amarelo-manteiga, chocolate, tomate e morango: um croissant gigante flutuando sobre a marca em letra gorda e redonda, adesivos tortos, cartões de sombra dura e rolagem que conta as 36 horas da massa.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Bagel Fat One
- Texto
- Onest
ParaClientes de bairro e quem encomenda bolo para festa; compra por vontade e por ocasião
Seções da página01/09nav
ParaClientes de bairro e quem encomenda bolo para festa; compra por vontade e por ocasião
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Bagel Fat One nos títulos, Onest no texto.
TítulosBagel Fat One
Aag!
Fermento em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoOnest
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.
- marca de comida com produto fotogênico
- cores quentes e saturadas
- venda no balcão + encomenda
- negócio de bairro com personalidade
- serviço sério ou técnico (advocacia, saúde, finanças)
- luxo minimalista
- marca fria ou monocromática
- negócio sem produto para mostrar em foto
Tom
O que faz ser Fermento
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Leve o Fermento
para o cliente.
Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.
/escolher-design usar o design Fermento (fermento)
Parecidos
Landings com tom ou nicho em comum com Fermento.