Glacê.
Vitrina de confitería en crema de vainilla, frutilla y pistacho: glaseado que chorrea entre secciones, toldo rayado, dulces bajo cúpula de vidrio con etiqueta de cordel y serifa de alto contraste. Dulce, pero sofisticado.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Gloock
- Texto
- Albert Sans
ParaQuienes compran dulces para regalar, para fiestas o como un gusto; pedido por WhatsApp con retiro o entrega
Secciones de la página01/08Topo e navegação
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.
Del DESIGN.md, que por ahora está en portugués.
ParaQuienes compran dulces para regalar, para fiestas o como un gusto; pedido por WhatsApp con retiro o entrega
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Gloock en los títulos, Albert Sans en el texto.
TítulosGloock
Aag!
Glacê en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoAlbert Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- marca con rosa, crema, pistacho o chocolate
- carta con fotos de producto recortado
- venta por encargo con plazo
- cajas y kits para regalo
- marca infantil redondeada y demasiado colorida
- restaurante de salados
- delivery de volumen con precio bajo
- tech/SaaS
- marca oscura o neón
Tono
Lo que lo hace Glacê
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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#25331apor cima, nunca branco. - Cacau
#3a2119como 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, larguramax-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-sobeno hero,data-revelaabaixo 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..3eglace-fita-0..2notokens.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 dobtnPrimario). 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.
Dos archivos.
Un prompt.
Glacê se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Glacê.