Design System Delavie
Tokens, tipografia, movimento e componentes da marca — vivos, direto do código que roda a clínica. Use esta página para revisar o que já existe e decidir o que aplicar.
A sensação antes da regra
Luxo quente, feminino, clean e sofisticado. Muito respiro, serifa de alto contraste, dourado como detalhe — nunca como preenchimento — sobre fundo champagne.
Luxo quente
Champagne + espresso + dourado antigo. Acolhe, não grita.
Feminino
Serifa em itálico, gestos suaves, composição calma.
Clean
Espaço em branco generoso; um peso forte por bloco.
Sofisticado
Ouro no tipográfico, sage na estrutura. Detalhe preciso.
Tokens da paleta
Definidos em oklch no globals.css e consumidos por classes Tailwind (bg-*, text-*, border-*). O dourado é a camada tipográfica/preciosa; o sage é a camada estrutural/UI. Há tema dark, mas a marca é light por padrão.
--backgroundFundo champagne#F5EFE4--cardSuperfície de cartão#FCFAF5--foregroundTexto · espresso#2C2722--mutedBloco neutro#EBE3D6--muted-foregroundTexto secundário#857B68--secondaryTaupe claro#E4DACA--borderLinhas / contornos#D9CFBC--accentDourado suave (fundo)#ECE0CC--goldDourado antigo · tipográfico#B08A52--sageVerde-sage · estrutural#74908A--sage-inkSage aprofundado · texto#4F6B65--sage-softSuperfície sage (chips)--sage-lineLinha/contorno sage--primaryBotões/realces escuros#352F29--primary-foregroundTexto sobre primary#F4EEE2--ringFoco (dourado)#B08A52--destructiveErro / atençãoVozes da marca
Títulos em serifa de alto contraste (font-heading); corpo e UI em sans (Geist). Eyebrow em caps espaçada dourada é a assinatura tipográfica.
Sua melhor versão
Ciência e cuidado
Porque acreditamos no cuidado constante.
Palavra em ouro foil no título
Parágrafo de destaque (text-lg). Tratamentos faciais, corporais e terapias conduzidos por equipe especializada.
Texto de apoio (text-sm, muted). Detalhes, legendas e descrições secundárias vivem aqui.
font-mono · valores e tokensTrês primitivas + o brilho
Escolha pela intenção. Regra de composição da home: o box entra ANTES da tipografia. Sem JS / reduced-motion, tudo aparece estático. Role a página para disparar as demos.
Fade + leve subida + desfoque saindo. Para blocos, cartões e imagens.
Revela palavra a palavra, em cascata
Logo, símbolo e motivos
Logo oficial vetorizado do EPS. Símbolo (círculo + folha) em pêssego/terracota/sage. Ornamento dourado de 4 pontas é o motivo recorrente e atemporal.
Aplicações de foto aprovadas
Cinco linguagens canônicas para usar foto na landing — escolhidas no Design Lab. Componentes prontos e parametrizáveis em src/components/brand/photo-treatments.tsx; hoje usam a foto da recepção, trocam por qualquer imagem real.
A estética que nasce do cuidado
Cada detalhe da clínica é pensado para o seu tempo — ciência e acolhimento no mesmo gesto.
Clínica de la Vie
estética avançada · São Paulo
à meia-luz
Blocos prontos
Cabeçalho de seção, botões, CTA de WhatsApp, badges, cartões, acordeão e placeholder de foto — exatamente como aparecem no site.
A Clínica Delavie
Ciência, tecnologia e um atendimento verdadeiramente acolhedor.
Raio e ritmo
Raio base 0.5rem — cantos discretos, nada 'bolha'. CTAs de WhatsApp são pílula por affordance. Seções: py-20 mobile / py-24 desktop, container max-w-6xl, separadas por border-t e alternância bg-card/40.
rounded-smrounded-mdrounded-lgrounded-xlrounded-2xlrounded-3xlrounded-full--radius: 0.5rempy-20 / lg:py-24 · max-w-6xlborder-t border-border/60 + bg-card/40Do & Don't
O essencial para não sair do tom da marca.
- ·Dourado em detalhes; espresso em texto/botões; champagne no fundo.
- ·Serifa para títulos e frases-assinatura; sans para corpo.
- ·Bastante espaço em branco; composição calma.
- ·Sage na estrutura/UI (chips, anéis, fios); ouro no tipográfico.
- ·Rosa / mauve / roxo — não pertence à marca.
- ·Dourado em grandes áreas chapadas.
- ·Cantos muito arredondados / sombras pesadas.
- ·Mais de um peso 'gritante' por bloco.