Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Instalar el KitGuía
LandingClarolujososilenciosoclínico
EEsmalte

Esmalte.

Lujo clínico y silencioso: blanco perla, champán y negro suave, títulos finos gigantes, superficies satinadas y píldoras con reflejo cromado. Boutique de lujo, no consultorio.

Tipo
Landing page
Tema
Claro
Títulos
Italiana
Texto
Jost

ParaAdultos de 30 a 60 de alto ingreso, tratamiento de alto valor con evaluación agendada

Obtener acceso · desde 49 BRLo todos los diseños por 297 BRL al año
Abrir en pantalla completa Usar con IA
/preview/esmalte

Secciones de la página01/09nav

Todo el texto está en content.ts y los colores en tokens.css.
Concepto

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

Del DESIGN.md, que por ahora está en portugués.

ParaAdultos de 30 a 60 de alto ingreso, tratamiento de alto valor con evaluación agendada

Paleta

Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.

Tipografía

Italiana en los títulos, Jost en el texto.

TítulosItaliana

Aag!

Esmalte en una línea

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoJost

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.

Ideal para
  • marca neutra, negra, dorada o champán
  • clínica con espacio físico sofisticado
  • tratamientos de alto valor y agenda exclusiva
Evitar para
  • clínica popular o de convenio
  • foco en precio y promoción
  • público infantil
  • marca colorida y desenfadada
Nichos
odontología estéticacarillas dentalesimplantesortodoncia invisiblearmonización orofacialclínica odontológica premiumdermatología premiumcirugía plástica

Tono

lujososilenciosoclínicoprecisoexclusivo

Lo que lo hace Esmalte

Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.

  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.

Reglas del juego

Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.

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.
Cómo usarlo

Dos archivos.
Un prompt.

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

  1. 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
  2. 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.
  3. 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
  4. 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 Esmalte.

Ver catálogo
LandingClaroVer diseño

Planta

LandingOscuroVer diseño

Minuto

LandingClaroVer diseño

Lavra

LandingClaroVer diseño

Clipping