Entrelaços · Fundamentos do Modo Claro

Como importar

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

2 arquivos · mesmas classes .e-* do dark

Tokens de cor

Fundos · 4 ambientes

Token	Valor	Uso
`--e-bg`	#F4ECE0	Cream · fundo de LPs e manifestos
`--e-bg-app`	#F8F4FB	Off-white violáceo · apps e dashboards
`--e-bg-elev`	#FFFFFF	Elevação · cards e painéis
`--e-dark-zone`	#220552	Inversão escura dentro do light

Texto · roxo-950, nunca preto puro

`--e-text`	#11022B	Primário (roxo-950 — tem alma)
`--e-text-secondary`	rgba(17,2,43,.72)	Secundário · leads, parágrafos
`--e-text-muted`	rgba(17,2,43,.50)	Captions, labels mono

Acento · terracota (regra de 3 mantida)

`--e-orange`	#C75317	Terracota queimado · badges, palavra-âncora, ponto da logo
`--e-orange-bright`	#E26B1F	Hover de acento
`--e-orange-soft`	#F0B488	Fills sutis

Roxo · escala idêntica ao dark

Os 11 tons de --e-purple-50…950 são os mesmos do dark. No light, o --e-purple-700 colore o italic-serif das headlines e o --e-purple-600 os CTAs. Ver escala completa na página de cores (toggle Light) →

Sombras, raio & motion

Sombras roxas, baixa opacidade

--e-sh-card, --e-sh-md, --e-sh-purple — sempre rgba(74,32,138, .04–.12) + hairline. Nunca preto puro, nunca drop-shadow genérico.

Raio inalterado

Pílula = ação · 20px = card · 0px… no light inputs ganham --e-r-md (12px) para leitura mais suave em fundo claro.

Motion idêntico

A curva é a alma: cubic-bezier(0.22, 1, 0.36, 1). Mesmas durações. O modo não muda o tempo.

Foco visível

--e-sh-focus = halo roxo 3px. Obrigatório em inputs e botões — acessibilidade é coerência ética.

Regras do modo claro

✓ Faça

Cream #F4ECE0 como fundo de LP. Off-white #F8F4FB para apps.
Italic-serif em roxo-700 nas headlines — a assinatura tipográfica.
Uma zona escura por página (manifesto/bloco emocional) para criar ritmo — espelha a inversão cream do dark.
Terracota perto do cursor e em badges de urgência. Regra de 3 por página.
Cards em branco com sombra roxa de baixa opacidade + hairline.

✗ Nunca

Branco puro como fundo de página. Mata a temperatura da marca — use cream.
Laranja brilhante #FF8A1F do dark — berra no claro. Use terracota #C75317.
Preto puro em texto ou sombra. Texto é roxo-950, sombra é roxo translúcido.
Mais de 3 acentos laranja por página. O light perdoa menos o excesso.
Trocar as fontes. Inter Tight + Instrument Serif + JetBrains Mono nos dois modos.

Quando usar light vs. dark

Dark é o default da marca — institucional, manifesto, presença premium. Light é para LPs comerciais de conversão, sistemas web (dashboards, apps) e qualquer produto vendido para empresas, onde clareza e familiaridade corporativa pesam mais.

Ambientes prontos

↗

As regras e tokens do modo claro.