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.
Cada capítulo do sistema dark espelhado para o light — mesma estrutura, tokens recalibrados para fundo claro. Navegue pelo sumário completo.
Três decisões nucleares que sustentam o sistema. Como elas migram do dark para o light sem perder a alma.
Abrir → 02Logo, paleta e geometria que mantêm a marca reconhecível mesmo em ambiente claro — asas em roxo, ponto laranja, pílulas e cards de 20px.
Abrir → 03A Entrelaços fala como quem já viu, já fez, e ainda escolhe acreditar. Confronto que abre escolha — nunca confronto que humilha.
Abrir →Cream Entrelaços (#F4ECE0) substitui o roxo-950 como fundo padrão. Roxo-600 continua dominando CTAs; laranja vira terracota e segue a regra de 3.
A mesma trinca — Inter Tight, Instrument Serif italic, JetBrains Mono — recalibrada para contraste AAA sobre fundo claro.
Abrir → 06O mesmo rigor de respiro do dark: toda seção na mesma cadência, todo card com padding mínimo de 32px.
Abrir → 07A geometria continua diferenciando famílias: pílula para ação, 20px para card, 0px para input — sem exceções.
Abrir → 08Depth ainda é cor, nunca preto puro — hairline branco + glow roxo translúcido, recalibrados para pesar menos em fundo claro.
Abrir → 09A mesma curva-assinatura cubic-bezier(0.22,1,0.36,1) governa todo movimento, agora sobre fundos claros.
18 efeitos prontos — reveal, stagger, magnetic, tilt, ripple, shimmer, parallax — com snippets HTML/CSS/JS copiáveis.
Abrir →CTAs primários em roxo-600 com glow. Ghost para secundários, link para terciários, on-dark para dobras com inversão dark-zone.
Abrir → 11Chip, dash e separator recalibrados para se destacarem sobre fundo claro sem perder o dot-glow laranja.
Abrir → 12O card continua a unidade de conteúdo padrão: 20px de raio, 32px de padding mínimo, agora sobre superfícies claras.
Abrir → 13Stats em grupos de 4, mono no número, contador animado — recalibrados para contraste sobre fundo claro.
Abrir → 14Inputs continuam quadrados — geometria de entrada de dado, não de ação. Focus ring roxo sobre fundo claro.
Abrir → 15Pílulas pequenas em mono. Roxo é o default, laranja segue a regra de 3. Em dark-zone, badge translúcido sobre #220552.
A mesma pílula flutuante com backdrop-blur, hairline e sombra recalibrados para fundo claro.
Abrir → 17Os componentes assinatura — onde a metáfora vira interação — recalibrados para o ambiente light.
Abrir → 17+Modais, toasts, tabs, accordion, dropdowns, switches, skeletons — a segunda camada para sistemas web, em light.
Abrir → 17++O mesmo sistema de ícones — traço 2px, grid 24, currentColor — 24 ícones de marca prontos para copiar.
Abrir →A LP roda na mesma sequência emocional. O Manifesto agora rompe para a dark-zone — a inversão que dá respiro ao light.
Abrir → 19Mesma copy — confronto + escolha, travessia, não promessa. CTAs ranqueados do soft ao hard, recalibrados para o light.
Abrir → 20Cada dobra responde a uma pergunta interna do leitor. A onda emocional é a mesma — só o ambiente muda.
Abrir →As mesmas linhas vermelhas do dark, adaptadas: nunca fundo branco puro, sempre uma inversão dark-zone por página.
Abrir → 22Contraste AAA, focus ring de 3px, touch ≥ 44px — a dignidade ética do manifesto também é técnica, em qualquer tema.
Abrir → 23Sete passos para sair com uma página light que parece da marca — incluindo a inversão dark-zone obrigatória.
Abrir →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.
