Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightsweetsophisticatedhandcrafted
GGlacê

Glacê.

Pastry shop showcase in vanilla cream, strawberry and pistachio: icing dripping between sections, striped awning, sweets under glass domes with twine tags and a high-contrast serif. Sweet, but sophisticated.

Type
Landing page
Theme
Light
Headings
Gloock
Body
Albert Sans

ForPeople buying sweets as gifts, for parties or as a treat; ordering via WhatsApp with pickup or delivery

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

Page sections01/08Topo e navegação

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

Vitrine de confeitaria: creme de baunilha, morango e pistache, cobertura escorrendo entre as seções e cada doce sob uma cúpula de vidro. Doce, mas sofisticado: serifa de alto contraste, nada de fonte arredondada ou cara de festa infantil.

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

ForPeople buying sweets as gifts, for parties or as a treat; ordering via WhatsApp with pickup or delivery

Palette

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

Typography

Gloock for headings, Albert Sans for body text.

HeadingsGloock

Aag!

Glacê in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyAlbert Sans

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
  • brand with pink, cream, pistachio or chocolate
  • menu with cut-out product photos
  • made-to-order sales with lead times
  • gift boxes and kits
Avoid for
  • overly rounded, colorful children's brand
  • savory restaurant
  • high-volume low-price delivery
  • tech/SaaS
  • dark or neon brand
Niches
pastry shopsweets shopcustom cakesice cream shopgelateriagourmet brigadeiro shopdessert cafémacaronscookieskids' party sweetschocolate shop

Tone

sweetsophisticatedhandcraftedinviting

What makes it Glacê

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

  1. 01

    Cobertura escorrendo (Cobertura): SVG em pattern entre seções; a cor de cima pinga na de baixo.

  2. 02

    Toldo listrado no topo, com bicos recortados por máscara (.glace-toldo).

  3. 03

    Cúpula de vidro (Cupula): fundo pastel + vidro com reflexo e puxador; o vidro sobe no hover.

  4. 04

    Etiqueta de preço com barbante (Etiqueta): balança no hover do card.

  5. 05

    Granulado como textura sutil (.glace-granulado, opacidade 25-40%) e confeitos antes dos rótulos.

  6. 06

    Monte sua caixa: radios + :has() trocam colunas, recheio, fita e total. Sem JavaScript.

  7. 07

    Prazos com pontilhado de cardápio e passos em comanda com borda picotada.

  8. 08

    Selo girando com o texto da casa no hero.

House rules

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

View DESIGN.md

Identidade

  • Fundo creme de baunilha #fbf3e4; cartões em #fffaf1; bloco da caixa em rosa claro #f9e2e0.
  • Texto chocolate amargo #3a2119; secundário #6e4a3c. Nunca preto, nunca texto pastel sobre pastel.
  • Primária morango #c2345a: botões, palavra de destaque, faixa de sabores, preços.
  • Destaque pistache #a8c686: selos ("Novo", "Sem glúten"), numeração dos passos, botão da chamada final. Sempre com texto verde-escuro #25331a por cima, nunca branco.
  • Cacau #3a2119 como fundo só na barra de aviso e na chamada final.
  • Fontes: Gloock (peso 400, sempre grande, sem itálico) para títulos, preços e nomes de produto; Albert Sans para o resto. Rótulos em caixa-alta espaçada tracking-[0.28em].

Regras

  • Seções com pb-24, largura max-w-6xl. Uma cobertura entre blocos de cor diferente; não empilhar duas.
  • Máximo de 2 botões por tela. Botão primário com "fundo de bala" (sombra interna embaixo).
  • Animações: data-sobe no hero, data-revela abaixo da dobra, e só as da casa (faixa, selo, etiqueta, vidro). Todas param com movimento reduzido.
  • A caixa depende dos ids glace-tam-4/9/16, glace-sabor-0..3 e glace-fita-0..2 no tokens.css. Mudou tamanhos, sabores ou fitas? Ajuste as regras :has() e as cores lá.
  • Abas da vitrine: até 4 categorias (glace-cat-0..3). Mais que isso, acrescente regra no CSS.

Adaptar à marca do cliente

  • Cor da marca vai em --d-primary (e na sombra do btnPrimario). Mantenha creme e chocolate.
  • Marca com verde ou azul pastel: troque o pistache (--d-accent) e mantenha o texto escuro por cima.
  • Sorveteria: dê mais espaço à categoria de gelatos e use fundo="pistache" nas cúpulas.
  • Marca infantil muito colorida e arredondada? Prefira Patinha ou Faixa.
How to use

Two files.
One prompt.

Glacê becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Glacê.

Browse catalog
LandingLightView design

Fermento

LandingDarkView design

Brasa

LandingLightView design

Assento

LandingLightView design

Nanquim