Fermento.
Vitrine de boulangerie en jaune beurre, chocolat, tomate et fraise : un croissant géant qui flotte au-dessus de la marque en lettres grasses et rondes, autocollants de travers, cartes à ombre dure et défilement qui raconte les 36 heures de la pâte.
- Type
- Landing page
- Thème
- Clair
- Titres
- Bagel Fat One
- Texte
- Onest
PourClients du quartier et personnes qui commandent un gâteau pour une fête ; achat d'envie et d'occasion
Sections de la page01/09nav
Extrait du DESIGN.md, en portugais pour l'instant.
PourClients du quartier et personnes qui commandent un gâteau pour une fête ; achat d'envie et d'occasion
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Bagel Fat One pour les titres, Onest pour le texte.
TitresBagel Fat One
Aag!
Fermento en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteOnest
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- marque alimentaire avec un produit photogénique
- couleurs chaudes et saturées
- vente au comptoir + commandes
- commerce de quartier avec de la personnalité
- service sérieux ou technique (droit, santé, finance)
- luxe minimaliste
- marque froide ou monochrome
- activité sans produit à montrer en photo
Ton
Ce qui fait Fermento
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Emmenez Fermento
chez votre client.
Dans Claude Code, Cursor ou n'importe quelle IA : elle lit le DESIGN.md de ce design et applique tokens, polices et textes au projet du client.
Similaires
Des landings qui partagent un ton ou un secteur avec Fermento.
