Themes

Dark-first, light quando necessário.

O Xami é visualmente brutal — dark é o padrão da marca e o modo em que o produto vive. Light existe para documentação, impressão, export de dados e contextos de handoff dev. Nenhum componente foi desenhado pensando em light-first; quando light for usado, é sempre com o mesmo sistema de tokens.

● DARK · PADRÃO

PRODUTO · HERO · APP

Motor invisível
de vendas.

O modo natural do Xami. 95% do tempo, use este.

Rafael Moraes
DEAL #4872 · GANHO
+112%
STATUS: ÓTIMO DIA 105 · LOOP
◐ LIGHT · DOCS

DOCS · HANDOFF · PRINT

Motor invisível
de vendas.

Use em PDFs, documentação e export de dados.

Rafael Moraes
DEAL #4872 · GANHO
+112%
STATUS: ÓTIMO DIA 105 · LOOP
Token semânticoDark (padrão)Light (opt-in)
--bg1ink-900 · #0D0C24white · #FFFFFF
--bg2ink-800 · #15142Egray-50 · #F7F7FA
--fg1lavender-100 · #E6EAFFink-900 · #0D0C24
--fg-accentpurple-400 · #8A62FFpurple-600 · #5E2FE0
--fg-successsuccess-ink · #7DFFB3success-l · #0EA771
--fg-warningwarning-ink · #FFC670warning-l · #B67A0E
--fg-dangerdanger-ink · #FF7B91danger-l · #D43656
--term-bgterm-bg · #0A0814SEMPRE DARK
Faça
✓Use var(--bg1), var(--fg1), etc. — nunca hexas literais em componentes.
✓Aplique data-theme="light" na <html> ou em qualquer container.
✓Mantenha terminal/code panels sempre dark — é affordance deliberada.
✓Mídia de marketing e hero: dark. Relatórios e docs: light.
Não faça
✗Não crie um modo só-light sem passar pelo dark primeiro — a marca perde peso.
✗Não use #7DFFB3, #FFC670, #FF7B91 direto. Use os tokens --fg-success/warning/danger.
✗Não aplique tons "soft" inventados — os tokens --bg-*-soft já respondem ao tema.
✗Não force light em superfícies promocionais/sales — rompe a identidade brutalista.

Todos os previews têm um toggle DARK · LIGHT no canto superior direito. A escolha persiste por localStorage.