Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightcheerfultastyconfident
FFermento

Fermento.

Bakery showcase in butter yellow, chocolate, tomato and strawberry: a giant croissant floating over the brand in fat, round lettering, crooked stickers, hard-shadow cards and a scroll that tells the story of the 36-hour dough.

Type
Landing page
Theme
Light
Headings
Bagel Fat One
Body
Onest

ForNeighborhood customers and people ordering party cakes; buying on impulse and for occasions

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/fermento

Page sections01/09nav

All the copy lives in content.ts and the colors in tokens.css.
Concept

From DESIGN.md, which is in Portuguese for now.

ForNeighborhood customers and people ordering party cakes; buying on impulse and for occasions

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Bagel Fat One for headings, Onest for body text.

HeadingsBagel Fat One

Aag!

Fermento in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyOnest

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.

Great for
  • food brand with a photogenic product
  • warm, saturated colors
  • counter sales + custom orders
  • neighborhood business with personality
Avoid for
  • serious or technical service (law, healthcare, finance)
  • minimalist luxury
  • cold or monochrome brand
  • business with no product to show in photos
Niches
bakerypastry shoppâtisseriesweets shopcustom cakescaféice cream shopcraft burger jointnaturally leavened pizzeriafood brand

Tone

cheerfultastyconfidenthandcraftedneighborhood

What makes it Fermento

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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õ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

Take Fermento
to your client.

In Claude Code, Cursor or any AI: it reads this design's DESIGN.md and applies the tokens, fonts and copy to your client's project.

Use with AI

Similar

Landings that share a tone or niche with Fermento.

Browse catalog
LandingLightView design

Glacê

LandingLightView design

Assento

LandingLightView design

Feira

LandingLightView design

Navalha