Design Vaultby Ravox
Landingclaroluxuososilenciosoclínico
EEsmalte

Esmalte.

Luxo clínico e silencioso: branco-pérola, champagne e preto suave, títulos finos gigantes, superfícies acetinadas e pílulas com reflexo de cromo. Boutique de luxo, não consultório.

Tipo
Landing page
Tema
Claro
Títulos
Italiana
Texto
Jost

ParaAdultos 30-60 de alta renda, tratamento de alto valor com avaliação agendada

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/esmalte

Seções da página01/09nav

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

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

ParaAdultos 30-60 de alta renda, tratamento de alto valor com avaliação agendada

Paleta

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

Tipografia

Italiana nos títulos, Jost no texto.

TítulosItaliana

Aag!

Esmalte em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoJost

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 neutra, preta, dourada ou champagne
  • clínica com espaço físico sofisticado
  • tratamentos de alto valor e agenda exclusiva
Evitar para
  • clínica popular ou de convênio
  • foco em preço e promoção
  • público infantil
  • marca colorida e descontraída
Nichos
odontologia estéticalentes de contato dentalimplantesortodontia invisívelharmonização orofacialclínica odontológica premiumdermatologia premiumcirurgia plástica

Tom

luxuososilenciosoclínicoprecisoexclusivo

O que faz ser Esmalte

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

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

  2. 02

    Pílulas cromo (.esmalte-pilula clara, .esmalte-pilula-escura): reflexo horizontal no meio e um brilho que atravessa no hover.

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

  4. 04

    Experiência em 4 etapas ligadas por um fio champagne, com "gotas" de pérola numeradas.

  5. 05

    Tecnologia: arcada dentária em pontos com linha de escaneamento passando.

  6. 06

    Espaço em placeholders de mármore (veios gerados por feTurbulence) com feixe de luz e uma pérola no pedestal.

  7. 07

    Equipe em retratos com topo em arco alto, CRO de cada profissional abaixo do nome.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo branco-pérola #f7f5f1, nunca branco puro. Blocos em surface #fcfbf8 e cinza-porcelana #ece9e4.
  • Texto preto suave #141414; secundário #6d6a65.
  • Primária grafite #2a2825 (botões escuros em cromo). Detalhe champagne #c8b28a só 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ções text-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, largura max-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 (strokeWidth 1.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-accent e os tons champagne dos gradientes em tokens.css e da Perola. 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 e object-cover; fotos da equipe no lugar de Retrato, mantendo o topo em arco.
Como usar

Dois arquivos.
Um prompt.

O Esmalte 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.

  1. 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
  2. 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
  3. 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
  4. 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 Esmalte.

Ver catálogo
LandingclaroVer design

Planta

LandingclaroVer design

Clipping

LandingclaroVer design

Caso

LandingclaroVer design

Lente