Método LUMEN · Design System v2

Sistema Visual
Kathleen Santos

Tokens, tipografia, espaçamento e componentes do Método LUMEN. Paleta Deep Night Blue + Aged Quartz Pink + Soft Champagne Gold.

Identidade visual

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-*

night-50#EEF3F7
night-100#D8E4ED
night-200#B5C9D9
night-300#8AAFC5
night-400#5E90AE
night-500#3B6E8C
night-600 ★#1A2C3A âncora
night-700#243341 CTA light
night-800#162433
night-900#0F1E29 bg dark
night-950#070E14

Aged Quartz Pink — quartz-*

quartz-50#FAF4F5
quartz-100#F3E7E9
quartz-200#E8D8DA
quartz-300#D4B8BC
quartz-400 ★#B8A1A6 âncora
quartz-500#9C8589
quartz-600#7D666B
quartz-700#5E4A4E
quartz-800#3E3033
quartz-900#211A1C

Soft Champagne Gold — gold-*

gold-50#FBF6EE
gold-100#F4E9D4
gold-200#EAD5B0
gold-300#DECA9F
gold-400 ★#D4B88D âncora
gold-500#C09A6A
gold-600#A87C4C
gold-700#8A6236
gold-800#6B4A1F texto light
gold-900#3D2A0F

Neutros Quentes — linen-*

linen-50#FAF6F3 bg-base
linen-100#F4ECE8
linen-200#EAE0DB
linen-300#D9CECD
linen-400#BDB2B0
linen-500#9C908E
linen-600#786D6B
linen-700#564D4B
linen-800#363030
linen-900#1E1A1A

Estados semânticos

success-500#4A9178 sage
warning-500#C98C30 âmbar
danger-500#B05872 rosa-vinho
info-500#527DA2 azul empoeirado
Fontes

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

--font-heading: 'Montserrat' · Display, headlines, labels UI
Montserrat 800
display-lg / extrabold
Desperte a luz
display-md / bold
Método LUMEN
display-sm / semibold
Disciplina construída com empatia
text-2xl / medium
Overline · Método LUMEN · Programa Principal
text-sm / semibold / uppercase / tracking-widest
--font-accent: 'Cormorant Garamond' Regular · Wordmark da marca, taglines editoriais
Kathleen Santos
display-lg / regular — wordmark principal
Kathleen Santos
display-md / regular — wordmark secundário
"a luz que você nasceu para ser"
text-3xl / regular italic — tagline editorial
--font-body: 'Lora' · Parágrafos, citações, corpo editorial

Transformamos o comportamento para que o emagrecimento deixe de ser tentativa e se torne identidade. Lora em 18px com line-height generoso.

text-lg / 400 / leading 1.75

"Constância supera intensidade. Disciplina é construída, não imposta. O resultado real começa pelo comportamento."

text-lg / italic 400 — Lora tem charme em itálico

Body padrão em Lora 16px: leitura tranquila com serifas sutis que transmitem credibilidade sem peso excessivo de display.

text-base / 400 / leading 1.7
"Não existe atalho sustentável. A mudança real começa pelo comportamento, não pela balança."
blockquote — Lora itálico com border-left gold
Layout

Espaçamento

Grid base de 4px. Section spacing com clamp() responsivo.

TokenValorUso
--space-14pxGap mínimo, badge padding
--space-28pxGap interno, ícone + label
--space-416pxPadding input, gap componentes
--space-624pxPadding card, gap grid
--space-832pxPadding card lg, gap seções
--section-mdclamp(4rem,8vw,6rem)Espaçamento padrão entre seções
--section-lgclamp(5rem,10vw,8rem)Seções hero e CTA
--container-max1200pxLargura máxima de conteúdo
Forma

Raios de Borda

xs 4px
sm 6px
md 8px
lg 12px
xl 16px
2xl 20px
3xl 24px
full
Elevação

Sombras

Tinta levemente azulada (night-900 diluído) em vez de cinza puro. Single layer por elemento.

shadow-sm

0 1px 4px rgba(night-900, 0.07)

shadow-md

Hover de cards e elementos elevados

shadow-lg

Modais, popovers

shadow-card

Padrão para cards de conteúdo

accent-shadow

Botões primários night CTA

gold-shadow

Botões gold premium

Movimento

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

TokenValorUso
--duration-xfast75msHover de ícones, feedback instantâneo
--duration-fast150msHover de botões, troca de cor
--duration-base250msPadrão UI (transform, shadow)
--duration-slow400msTransições amplas
--duration-slower600msEntrada de elementos (scroll)
--duration-hero800msHero entry, sequência principal

Curvas de easing

--ease-default
cubic-bezier(0.4, 0, 0.2, 1)
--ease-out
cubic-bezier(0, 0, 0.2, 1)
--ease-in
cubic-bezier(0.4, 0, 1, 1)
--ease-bounce
cubic-bezier(0.34, 1.56, 0.64, 1)
--ease-spring
cubic-bezier(0.175, 0.885, 0.32, 1.275)
--ease-sharp
cubic-bezier(0.4, 0, 0.6, 1)

Animações de entrada — data-animate

Scroll-triggered via IntersectionObserver. Clique em "Reproduzir" para revisar a animação.

fade-in
fade-up
fade-down
slide-left
slide-right
scale-in
blur-in

Stagger — data-stagger

Atraso automático em cascata para listas, grids e pilares.

1
2
3
4
5
6

Animações contínuas

Loops infinitos para urgência, atenção e loading. Removidos sob prefers-reduced-motion.

Vagas limitadas
.animate-pulse-soft
Novo
.animate-float
.animate-wiggle (clique)
.animate-spin

Micro-interações de hover

Passe o mouse sobre os cards.

.hover-lift

translateY(-3px) + shadow-md

.hover-scale

scale(1.02)

.hover-glow

box-shadow accent

Skeleton & Shimmer

Estados de loading antes do conteúdo carregar.

Acessibilidade: Animações de entrada (data-animate, hero-sequence) e contínuas decorativas (pulse, float, wiggle) são desativadas via @media (prefers-reduced-motion: reduce). Hover, focus e transições funcionais permanecem ativos.
Rótulos

Badges

Default Night Gold Premium Quartz Rosé Sage Âmbar Rosa-vinho Info
Conteúdo

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.

Programa Principal

Card Destaque

Variante com borda dourada e shadow CTA. Para pricing card em destaque ou card de oferta principal.

Captura

Formulários — 9 estados

Estado inicial sem interação.
✓ E-mail verificado com sucesso.
⚠ Insira um e-mail válido.
△ Senha com força baixa.
Feedback

Alertas

Inscrição confirmada! Você receberá os próximos passos por e-mail.
Vagas limitadas. Restam apenas 3 vagas para esta turma.
Erro no pagamento. Verifique os dados do cartão e tente novamente.
Período de validação. Programa em fase piloto com turma selecionada.
Prova social

Depoimentos

★★★★★

Pela primeira vez não parei na terceira semana. O método trabalha o comportamento primeiro, e isso mudou tudo para mim.

JM

Júlia M., 26 anos

Participante da turma piloto

★★★★★

Depois de anos colocando todos em primeiro lugar, aprendi que cuidar de mim não é egoísmo. É necessidade.

PC

Patrícia C., 42 anos

Participante da turma piloto

★★★★★

Constância supera intensidade — essa frase mudou minha relação com o processo. Parei de buscar perfeição e comecei a buscar consistência.

RS

Renata S., 38 anos

Participante da turma piloto

Dúvidas

FAQ — Accordion CSS puro

Implementado com <details>/<summary> — zero JavaScript, acessibilidade nativa.

Para quem é o Método LUMEN?
Para mulheres que já tentaram diversas abordagens e buscam uma transformação real baseada em disciplina comportamental, não em dietas extremas ou treinos insustentáveis.
Preciso ter experiência prévia com treino?
Não. O método parte de onde você está hoje. A estruturação gradual é feita de acordo com sua realidade de rotina, energia e histórico.
Como funciona o acompanhamento?
Aulas individuais, encontros em grupo quinzenais, check-ins de progresso, acesso à comunidade e ferramentas exclusivas do programa. Tudo pensado para a mulher real, com rotina real.
Qual é o investimento?
O Método LUMEN é um programa high-ticket com foco em resultado profundo. Os valores e condições são apresentados na conversa de diagnóstico. Solicite sua pré-inscrição.
Bloco B

Hero completo

Método LUMEN · Turma 2025

Desperte a luz
da mulher que você
nasceu para ser.

Transformação comportamental sustentável — para mulheres que querem parar de recomeçar e começar a permanecer.

Vagas limitadas · Programa high-ticket · Diagnóstico gratuito

Tema dark por seção

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.

CTA Gold sobre dark Secundário Ghost
Gold Quartz Sage Rosa-vinho

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