Uma variante clara do sistema — calibrada para LPs comerciais e sistemas web. Mantém o roxo denso, o italic-serif, a regra de 3 do laranja, a curva-assinatura. Muda o ambiente.
Como o sistema dark vira light sem perder a alma. Quatro decisões que governam tudo o resto.
--e-bg: #F4ECE0 · O cream da identidade, usado como fundo principal de LPs e manifestos. Para apps e dashboards, usar --e-bg-app: #F8F4FB — off-white com sussurro violáceo.
O italic-serif em headlines vai em --e-purple-700. CTAs em --e-purple-600. O dark "esmaeceu" o roxo em fundos profundos — aqui, ele canta sozinho contra o cream.
#FF8A1F do dark é berrante em fundo claro. Usamos #C75317 — terracota grave, mais sério. Regra de 3 mantida: máximo três acentos por página.
Hairline + microsombra com rgba(74,32,138, 0.06–0.12). Nunca preto puro, nunca o "drop-shadow SaaS genérico". A profundidade tem cor.
Os mesmos 11 tons de roxo. Quatro fundos novos. Acento laranja em terracota. Texto em roxo-950 para ter alma — não preto puro.
Mesma família (Inter Tight + Instrument Serif + JetBrains Mono), mesma escala, mesmo italic-em-serif. O que muda é a cor do italic — agora em purple-700.
Botões, badges, cards, inputs. Os mesmos do dark, com sombras roxas de baixa opacidade e borders hairline.
Um vídeo de 9 minutos identifica o ponto de dor. Você sai com clareza — não com mais um relatório.
Grupo de 8 pessoas. 90 minutos. Toda quarta.
Texto curto, semanal. Para fermentar a semana.
Sem feed infinito. Só convocação.
2x/ano. Imersão de fim de semana.
As mesmas 12 dobras do dark. Aqui mostramos três exemplos vivos: hero cream, manifesto invertido (zona escura), CTA-âncora.
Terapia tradicional aposta em sessões longas, espaçadas. Aqui apostamos no oposto: encontros curtos, semanais, em comunidade. A dor não some — fica suportável porque divide-se.
"Aqui eu não preciso performar que estou bem. É o primeiro lugar onde isso é verdade em quase uma década."
"O confronto fértil não é dureza. É cuidado denso. Demorei 4 meses para entender a diferença."
"Saí de cada encontro desorganizada por dentro — no melhor sentido. Reorganizei depois, em mim."
O mesmo bloco, dois ambientes. A alma é a mesma. Muda a temperatura.
Programa de 12 meses para reconstruir subjetividade em comunidade.
Programa de 12 meses para reconstruir subjetividade em comunidade.
Três usos canônicos da versão clara. LPs comerciais. Sistemas web (dashboards/SaaS). Biblioteca de motion adaptada.
Landing page completa de venda. Hero cream + manifesto invertido + bloco de prova social + CTA-âncora final.
VER LP →Mock de painel administrativo: navegação lateral, cards de KPI, tabela de membros, tabs, filtros e estado vazio.
VER APP →Reveal, stagger, magnetic button, marquee, ripple, parallax, shimmer — todos calibrados para fundo claro com snippets copiáveis.
VER LIBRARY →Dois arquivos CSS. Importar nesta ordem. Reutilizar todas as classes .e-* conhecidas.
<!-- Fontes --> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono&display=swap" rel="stylesheet"> <!-- Tokens + base do MODO CLARO --> <link rel="stylesheet" href="biblia-light/tokens-light.css"> <link rel="stylesheet" href="biblia-light/base-light.css">
Use --e-bg (cream) como fundo principal. Headlines em sans + italic-serif --e-purple-700. CTAs em --e-purple-600. Adicione UMA dobra invertida (zona escura) para o manifesto/bloco emocional.
Use --e-bg-app (off-white violáceo) como fundo. Cards em #FFFFFF com --e-sh-card. Sidebar em --e-bg-elev. Item ativo na sidebar em --e-purple-600.
Em projetos com toggle, basta trocar a importação dos dois CSS — todas as classes .e-*, .h-*, .lead, etc, mantêm contrato. Componentes não precisam ser reescritos.
