Ravox UIby Ravox Labs
Ravox UIby Ravox Labs
Install the KitGuide
LandingLightluxuriousquietclinical
EEsmalte

Esmalte.

Quiet clinical luxury: pearl white, champagne and soft black, giant thin headlines, satin surfaces and pills with a chrome reflection. A luxury boutique, not a doctor's office.

Type
Landing page
Theme
Light
Headings
Italiana
Body
Jost

ForHigh-income adults 30-60, high-value treatment with a scheduled consultation

Get access · from R$49or every design for R$297 a year
Open full screen Use with AI
/preview/esmalte

Page sections01/09nav

All the copy lives in content.ts and the colors in tokens.css.
Concept

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

From DESIGN.md, which is in Portuguese for now.

ForHigh-income adults 30-60, high-value treatment with a scheduled consultation

Palette

The four colors that define the design and every variable in tokens.css. Click to copy.

Typography

Italiana for headings, Jost for body text.

HeadingsItaliana

Aag!

Esmalte in one line

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

BodyJost

The reading font carries long paragraphs without tiring the eye.

Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.

0123456789 · $1,234.56 · Sep 25, 7:30 PM

Who it's for

What the AI compares with your client to pick the design.

Great for
  • neutral, black, gold or champagne brand
  • clinic with a sophisticated physical space
  • high-value treatments and an exclusive schedule
Avoid for
  • budget or insurance-based clinic
  • focus on price and promotions
  • children's audience
  • colorful, casual brand
Niches
cosmetic dentistrydental veneersimplantsinvisible orthodonticsfacial harmonizationpremium dental clinicpremium dermatologyplastic surgery

Tone

luxuriousquietclinicalpreciseexclusive

What makes it Esmalte

The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.

  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.

House rules

Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.

View 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.
How to use

Two files.
One prompt.

Esmalte becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.

Prompt for the agent Use with AI

Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.

  1. 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
  2. 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
  3. 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
  4. 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.

Similar

Landings that share a tone or niche with Esmalte.

Browse catalog
LandingLightView design

Planta

LandingDarkView design

Minuto

LandingLightView design

Lavra

LandingLightView design

Clipping