Glacê.
Vitrine de pâtisserie en crème vanille, fraise et pistache : glaçage qui coule entre les sections, store à rayures, douceurs sous cloche de verre avec étiquette en ficelle et empattements très contrastés. Gourmand, mais sophistiqué.
- Type
- Landing page
- Thème
- Clair
- Titres
- Gloock
- Texte
- Albert Sans
PourPersonnes qui achètent des douceurs pour offrir, pour une fête ou pour se faire plaisir ; commande par WhatsApp avec retrait ou livraison
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourPersonnes qui achètent des douceurs pour offrir, pour une fête ou pour se faire plaisir ; commande par WhatsApp avec retrait ou livraison
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Gloock pour les titres, Albert Sans pour le texte.
TitresGloock
Aag!
Glacê en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteAlbert Sans
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 avec rose, crème, pistache ou chocolat
- carte avec photos de produits détourés
- vente sur commande avec délai
- coffrets et kits cadeaux
- marque enfantine trop arrondie et colorée
- restaurant salé
- livraison de volume à petit prix
- tech/SaaS
- marque sombre ou néon
Ton
Ce qui fait Glacê
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Glacê devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Glacê.