Fundo marinho.
Luz dourada.
Premium.
Night-900 como base. Gold-400 como CTA e acento luminoso. Quartz-300 como destaque editorial. Texto em linen para calor sem frieza do branco puro.
Tokens semânticos dark
No dark, os acentos abrem em luminosidade. Gold-400 vira CTA sólida sobre marinho. Quartz-300 aparece em destaques editoriais. Linen-50 como texto principal — calor sem frieza.
Superfícies dark
Acentos luminosos dark
Estados dark
Tipografia em dark
Montserrat em linen-50 para headlines com força. Cormorant Garamond italic em gold-300 para o wordmark luminoso. Lora itálico em quartz-200 para destaques editoriais com calor.
Lora em linen-100 em modo dark. Legibilidade premium sobre fundo marinho — o contraste quente evita a frieza do branco puro sobre preto.
"Constância supera intensidade. O resultado real começa pelo comportamento, não pela balança."
Body padrão em Lora 16px sobre marinho: 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. Mesma escala do tema light — apenas as superfícies mudam para night-* e os acentos ganham luminosidade.
| 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
No dark, as sombras ficam mais profundas (rgba night-950) e os acentos gold ganham glow luminoso. Single layer por elemento.
Tinta marinha profunda diluída
Hover de cards e elementos elevados
Modais, popovers em dark
Padrão para cards de conteúdo
Botões primários gold em dark
Acento quartz em dark
Motion
Mesmos tokens do tema light — apenas as cores dos elementos demo trocam para os tons luminosos do dark. Todas as animações 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.Botões em dark
Badges
Cards
Card padrão dark
Surface night-800 sobre bg-base night-900. Ícone gold muted. Sombra com tinta azul profunda.
Card quartz dark
Ícone quartz-rosé. Para seções de acolhimento e persona feminina em tema dark.
Card destaque dark
Borda dourada e gold shadow. Para pricing card ou oferta high-ticket em seção dark.
Finalmente entendi que constância não depende de motivação. Depende de estrutura.
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 dark
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="light" inline
Esta seção usa data-theme="light" dentro de uma página dark. Fundo linen-50, CTA night sólida, bordas quentes.
Card light em página dark
Surface branco sobre fundo linen. Sombra azulada suave. Para seções de prova social ou FAQ em landing dark.
"Constância supera intensidade — sete palavras que mudaram minha relação com o processo."