Sistema Visual
Kathleen Santos
Tokens, tipografia, espaçamento e componentes do Método LUMEN. Paleta Deep Night Blue + Aged Quartz Pink + Soft Champagne Gold.
Paleta v2
Três famílias cromáticas âncora + neutros linen. Deep Night Blue (autoridade), Aged Quartz Pink (calor feminino), Soft Champagne Gold (premium). Família linen substitui o cinza frio nos fundos.
Deep Night Blue — night-*
Aged Quartz Pink — quartz-*
Soft Champagne Gold — gold-*
Neutros Quentes — linen-*
Estados semânticos
Tipografia v2
Três fontes coordenadas: Montserrat para headlines e UI (autoridade sem peso excessivo), Cormorant Garamond Regular para o wordmark da marca e taglines editoriais, e Lora para corpo de texto (charme editorial, itálico expressivo).
Transformamos o comportamento para que o emagrecimento deixe de ser tentativa e se torne identidade. Lora em 18px com line-height generoso.
"Constância supera intensidade. Disciplina é construída, não imposta. O resultado real começa pelo comportamento."
Body padrão em Lora 16px: leitura tranquila com serifas sutis que transmitem credibilidade sem peso excessivo de display.
"Não existe atalho sustentável. A mudança real começa pelo comportamento, não pela balança."
Espaçamento
Grid base de 4px. Section spacing com clamp() responsivo.
| Token | Valor | Uso |
|---|---|---|
| --space-1 | 4px | Gap mínimo, badge padding |
| --space-2 | 8px | Gap interno, ícone + label |
| --space-4 | 16px | Padding input, gap componentes |
| --space-6 | 24px | Padding card, gap grid |
| --space-8 | 32px | Padding card lg, gap seções |
| --section-md | clamp(4rem,8vw,6rem) | Espaçamento padrão entre seções |
| --section-lg | clamp(5rem,10vw,8rem) | Seções hero e CTA |
| --container-max | 1200px | Largura máxima de conteúdo |
Raios de Borda
Sombras
Tinta levemente azulada (night-900 diluído) em vez de cinza puro. Single layer por elemento.
0 1px 4px rgba(night-900, 0.07)
Hover de cards e elementos elevados
Modais, popovers
Padrão para cards de conteúdo
Botões primários night CTA
Botões gold premium
Motion
Tokens de duração e easing, animações de entrada (scroll-triggered), micro-interações de hover e estados contínuos. Todas as decorativas respeitam prefers-reduced-motion: reduce.
Durações
| Token | Valor | Uso |
|---|---|---|
| --duration-xfast | 75ms | Hover de ícones, feedback instantâneo |
| --duration-fast | 150ms | Hover de botões, troca de cor |
| --duration-base | 250ms | Padrão UI (transform, shadow) |
| --duration-slow | 400ms | Transições amplas |
| --duration-slower | 600ms | Entrada de elementos (scroll) |
| --duration-hero | 800ms | Hero entry, sequência principal |
Curvas de easing
Animações de entrada — data-animate
Stagger — data-stagger
Animações contínuas
Micro-interações de hover
.hover-lift
translateY(-3px) + shadow-md
.hover-scale
scale(1.02)
.hover-glow
box-shadow accent
Skeleton & Shimmer
@media (prefers-reduced-motion: reduce). Hover, focus e transições funcionais permanecem ativos.Badges
Cards
Pilar Gold
Card com ícone dourado. Usado para pilares do método, diferenciais premium, itens de programa high-ticket.
Pilar Quartz
Card com ícone quartz-rosé. Usado para seções de acolhimento, mentalidade, depoimentos, prova social.
Card Destaque
Variante com borda dourada e shadow CTA. Para pricing card em destaque ou card de oferta principal.
Formulários — 9 estados
Alertas
Depoimentos
Pela primeira vez não parei na terceira semana. O método trabalha o comportamento primeiro, e isso mudou tudo para mim.
Depois de anos colocando todos em primeiro lugar, aprendi que cuidar de mim não é egoísmo. É necessidade.
Constância supera intensidade — essa frase mudou minha relação com o processo. Parei de buscar perfeição e comecei a buscar consistência.
FAQ — Accordion CSS puro
Implementado com <details>/<summary> — zero JavaScript, acessibilidade nativa.
Para quem é o Método LUMEN?
Preciso ter experiência prévia com treino?
Como funciona o acompanhamento?
Qual é o investimento?
Hero completo
data-theme="dark" inline
Esta seção usa data-theme="dark" na própria tag, sem alterar o tema global da página. Fundo marinho profundo, acentos gold luminosos.
Card em seção dark
Surface night-800. Ícone gold sobre dark. Contraste linen sobre marinho.
Blockquote dark
"Constância supera intensidade. O resultado real começa pelo comportamento."