Landingclarodocesofisticadoartesanal

GGlacê

Glacê.

Vitrine de confeitaria em creme de baunilha, morango e pistache: cobertura escorrendo entre as seções, toldo listrado, doces sob cúpula de vidro com etiqueta de barbante e serifa de alto contraste. Doce, mas sofisticado.

Tipo: Landing page
Tema: Claro
Títulos: Gloock
Texto: Albert Sans

ParaQuem compra doce para presentear, festa ou mimo; pedido por WhatsApp com retirada ou entrega

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano

Abrir em tela cheia

/preview/glaceTela cheia

Seções da página01/08Topo e navegação

Todo o texto fica em content.ts e as cores em tokens.css.

Conceito

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.

ParaQuem compra doce para presentear, festa ou mimo; pedido por WhatsApp com retirada ou entrega

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Gloock nos títulos, Albert Sans no texto.

TítulosGloock

Aag!

Glacê em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoAlbert Sans

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.

Combina com

marca com rosa, creme, pistache ou chocolate
cardápio com fotos de produto recortado
venda por encomenda com prazo
caixas e kits para presente

Evitar para

marca infantil arredondada e colorida demais
restaurante salgado
delivery de volume com preço baixo
tech/SaaS
marca escura ou neon

Nichos

confeitariadoceriabolos sob encomendasorveteriagelateriabrigaderia gourmetcafeteria de docesmacaronscookiesdoces para festa infantilchocolateria

Tom

docesofisticadoartesanalconvidativo

O que faz ser Glacê

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

01
Cobertura escorrendo (Cobertura): SVG em pattern entre seções; a cor de cima pinga na de baixo.
02
Toldo listrado no topo, com bicos recortados por máscara (.glace-toldo).
03
Cúpula de vidro (Cupula): fundo pastel + vidro com reflexo e puxador; o vidro sobe no hover.
04
Etiqueta de preço com barbante (Etiqueta): balança no hover do card.
05
Granulado como textura sutil (.glace-granulado, opacidade 25-40%) e confeitos antes dos rótulos.
06
Monte sua caixa: radios + :has() trocam colunas, recheio, fita e total. Sem JavaScript.
07
Prazos com pontilhado de cardápio e passos em comanda com borda picotada.
08
Selo girando com o texto da casa no hero.

Regras do jogo

Direto do DESIGN.md.

Ver 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.

Como usar

Dois arquivos.
Um prompt.

O Glacê vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.

Parecidos

Landings com tom ou nicho em comum com Glacê.

Ver catálogo

LandingescuroVer design