Esmalte.
Luxe clinique et silencieux : blanc nacré, champagne et noir doux, titres fins géants, surfaces satinées et pastilles à reflet chromé. Une boutique de luxe, pas un cabinet.
- Type
- Landing page
- Thème
- Clair
- Titres
- Italiana
- Texte
- Jost
PourAdultes de 30 à 60 ans à hauts revenus, traitement à forte valeur avec consultation sur rendez-vous
Sections de la page01/09nav
Luxo clínico e silencioso: branco-pérola, champagne e preto suave, títulos finos e enormes, superfícies acetinadas. Parece boutique de luxo, não consultório. Não é o Sereno (verde, amigável) nem o Pétala (rosé, beleza).
Extrait du DESIGN.md, en portugais pour l'instant.
PourAdultes de 30 à 60 ans à hauts revenus, traitement à forte valeur avec consultation sur rendez-vous
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Italiana pour les titres, Jost pour le texte.
TitresItaliana
Aag!
Esmalte en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteJost
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 neutre, noire, dorée ou champagne
- clinique avec un espace physique sophistiqué
- traitements à forte valeur et agenda exclusif
- clinique populaire ou conventionnée
- focus sur le prix et les promotions
- public enfant
- marque colorée et décontractée
Ton
Ce qui fait Esmalte
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Pérola do hero: forma orgânica (dente/pérola abstrato) em SVG com base radial, véu iridescente, luz champagne refletida e reflexos brancos. Flutua devagar sobre uma sombra que respira.
- 02
Pílulas cromo (
.esmalte-pilulaclara,.esmalte-pilula-escura): reflexo horizontal no meio e um brilho que atravessa no hover. - 03
Tratamentos em lista com numeral romano champagne; no hover (desktop) o nome desliza e a descrição se abre. No celular a descrição fica sempre visível.
- 04
Experiência em 4 etapas ligadas por um fio champagne, com "gotas" de pérola numeradas.
- 05
Tecnologia: arcada dentária em pontos com linha de escaneamento passando.
- 06
Espaço em placeholders de mármore (veios gerados por
feTurbulence) com feixe de luz e uma pérola no pedestal. - 07
Equipe em retratos com topo em arco alto, CRO de cada profissional abaixo do nome.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo branco-pérola
#f7f5f1, nunca branco puro. Blocos emsurface#fcfbf8e cinza-porcelana#ece9e4. - Texto preto suave
#141414; secundário#6d6a65. - Primária grafite
#2a2825(botões escuros em cromo). Detalhe champagne#c8b28asó em fios, numerais, anéis e brilhos. - Uma única seção escura (
#141414), a de Tecnologia. Não repita. - Fontes: Italiana nos títulos, sempre grandes (hero até
8.5rem, seçõestext-7xl). Jost 300 no texto; rótulos em Jost 400, caixa-alta,tracking 0.32em(.esmalte-rotulo).
Regras
- Respiro exagerado: seções
py-28 md:py-36, larguramax-w-7xl. Na dúvida, mais espaço. - Máximo de 2 botões por tela. Botão escuro para a ação principal, cromo claro para a secundária.
- Animação lenta e rara: entrada (
data-sobe/data-revela), flutuação da pérola, varredura do scanner. Nada quicando. - Ícones lucide finos (
strokeWidth1.25–1.5), pequenos. - Nada de emojis, selos coloridos ou ícone de dente de clip-art.
Adaptar à marca do cliente
- Marca com cor própria discreta (dourado, bronze, azul-petróleo escuro)? Troque
--d-accente os tons champagne dos gradientes emtokens.csse daPerola. Mantenha o fundo pérola e o preto suave. - Marca vibrante (azul royal, verde-limão, laranja) ou clínica de convênio/volume: esse design provavelmente não é o certo; olhe o Sereno.
- Fotos reais do espaço entram no lugar de
Marmore, com o mesmo formato eobject-cover; fotos da equipe no lugar deRetrato, mantendo o topo em arco.
Deux fichiers.
Un prompt.
Esmalte 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 Esmalte.
