Sistema de Design

A gramática visual da marca

Cada decisão visual segue o mesmo critério da avaliação clínica: nada por tendência, tudo por proporção. Um véu de vidro fosco levemente dourado, duas atmosferas — clara e imersiva — e um movimento contido, sem excesso.

Cor

Uma paleta que nunca vira fundo

Dourado é acento, texto e brilho — nunca superfície inteira. A base é sempre creme quente ou obsidiana quente: preto e branco puros não aparecem em lugar nenhum do sistema.

Ouro — bronze ao champanhe

100#F4E8CC
300#DBBE7C
500 · marca#B58E45
700 · texto#7A5B2B

Neutros quentes

sand 50#FBF9F4
sand 200#EEE6D7
ink 500 · muted#635A4C
ink 900 · texto#1A1611

Nude — acento de pele

100#F5E6DC
200#E9CDBC
300#D8AF9A

Uma quarta família — status clínico (sucesso, atenção, alerta) — fica deliberadamente dessaturada. Nada de cor vibrante para comunicar estado; o contexto é clínico, não um painel de produto.

Tipografia

Duas vozes, uma hierarquia

Uma grotesca contemporânea para títulos, tracking apertado; um sans humanista leve para o corpo, entrelinha alta. A serifa aparece só em citações — o discurso da marca, não a interface.

6xl · displayBeleza com critério
3xl · títuloEstética que valoriza você
lg · corpoCada avaliação parte da sua individualidade.
xs · eyebrowSIMULAÇÃO 3D
"A estética deve valorizar quem você é, nunca transformar você em outra pessoa."

Espaço & Luz

Ritmo generoso, profundidade sem excesso

O espaçamento segue uma escala só, base 4px. A translucidez segue a mesma lógica: quanto menos opaco o véu, mais decorativo; quanto mais opaco, mais denso o conteúdo que ele sustenta.

Escala de espaçamento

12px
24px
48px
96px · seção

Escala de véu

véu · 1Transparentedecorativo
véu · 2Padrãocards
véu · 3Legíveltexto denso

Marca

Um lockup, duas atmosferas

O mesmo sistema resolve dois registros: claro e público para o consultório, escuro e imersivo para a simulação 3D. Nenhum token muda de nome entre os dois — só de valor.

Consultório · público

Estética que valoriza você

Base clara e serena, camadas de vidro e luz. Critério clínico, muito ar.

Ver procedimentos
data-theme="brand"
Simulação 3D · imersivo

Veja com clareza

Obsidiana quente para o 3D brilhar. Ouro ganha bloom; vidro ganha vida.

Iniciar simulação
data-theme="immersive"

Movimento

O vidro reage

Movimento moderado, sem bounce, orquestrado por GSAP. Emprefers-reduced-motion, cada recurso mostra o estado final direto — sem exigir animação de ninguém.

Tilt 3D

Profundidade real, não sombra

O card inclina seguindo o ponteiro — a mesma física usada no visualizador facial 3D.

O título se revela

Caractere a caractere, com máscara — o recurso mais teatral do motor, reservado para aberturas.