Temas — Dark e Light Mode

A Retents atende dois públicos com preferências diferentes. O dark mode é nossa expressão visual mais forte — sofisticação, foco, profundidade. O light mode existe para quem trabalha em ambientes iluminados ou simplesmente prefere fundos claros. Ambos são tratamentos de primeira classe: nenhum é um fallback do outro.

Quando usar cada tema

Contexto	Dark	Light
Marketing site (`retents.ai`)	Padrão	Opcional via `prefers-color-scheme`
Produto / dashboard	Padrão	Suportado — seguir tokens `light.*`
Emails transacionais	—	Sempre light (fundos claros têm melhor suporte)
PDFs e impressão	—	Sempre light
Materiais externos (decks, propostas)	Capa e slides de destaque	Slides de conteúdo denso

Dark mode

O dark mode é a identidade visual primária da Retents. Transmite sofisticação, foco e controle — o mesmo estado de atenção de quem está gerenciando dados de retenção.

Retenção do mês

último período

87,3%

Alunos em risco

contato pendente

Receita protegida

este mês

R$ 4.820

Ver alunos em risco Exportar relatório

Tokens dark mode

Papel	Token	Valor
Fundo principal	`background.DEFAULT`	`#000000`
Superfície	`background.surface`	`#0A0A0A`
Elevado (inputs, menus)	`background.elevated`	`#111111`
Texto primário	`text.primary`	`#FFFFFF`
Texto corpo	`text.secondary`	`rgba(255,255,255,0.70)`
Texto labels	`text.muted`	`rgba(255,255,255,0.45)`
Borda padrão	`border.DEFAULT`	`rgba(255,255,255,0.15)`
Accent / CTA	`brand.500`	`#e7580f`
Hover do CTA	`brand.600`	`#c94208`

Light mode

O light mode usa os mesmos tokens de marca — mesma família tipográfica, mesmo laranja, mesma estrutura de componentes — com a paleta invertida para alta legibilidade em ambientes claros.

Retenção do mês

último período

87,3%

Alunos em risco

contato pendente

Receita protegida

este mês

R$ 4.820

Ver alunos em risco Exportar relatório

Tokens light mode

Papel	Token	Valor
Fundo principal	`light.background.DEFAULT`	`#ffffff`
Superfície	`light.background.surface`	`#f9f9f9`
Elevado (inputs, menus)	`light.background.elevated`	`#f3f3f3`
Texto primário	`light.text.primary`	`#0a0a0a`
Texto corpo	`light.text.secondary`	`rgba(0,0,0,0.65)`
Texto labels	`light.text.muted`	`rgba(0,0,0,0.45)`
Borda padrão	`light.border.DEFAULT`	`rgba(0,0,0,0.10)`
Accent / CTA	`brand.600`	`#c94208`
Hover do CTA	`brand.700`	`#a23109`

Por que brand.600 e não brand.500 em light mode? O #e7580f não atinge contraste WCAG AA (4.5:1) sobre fundo branco. O #c94208 atinge 4.6:1 — aprovado para texto e botões.

Implementação

CSS (via `prefers-color-scheme`)

/* Dark — padrão */
:root {
  --bg: #000000;
  --bg-surface: #0a0a0a;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.70);
  --border: rgba(255, 255, 255, 0.15);
  --accent: #e7580f;
  --accent-hover: #c94208;
}

/* Light — preferência do sistema */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-surface: #f9f9f9;
    --text-primary: #0a0a0a;
    --text-secondary: rgba(0, 0, 0, 0.65);
    --border: rgba(0, 0, 0, 0.10);
    --accent: #c94208;
    --accent-hover: #a23109;
  }
}

Tailwind (dark mode via classe)

<!-- Fundo -->
<div class="bg-white dark:bg-background">

<!-- Texto -->
<p class="text-[#0a0a0a] dark:text-white">

<!-- Botão primário -->
<a class="bg-brand-600 dark:bg-brand-500 hover:bg-brand-700 dark:hover:bg-brand-600 text-white">

<!-- Card -->
<div class="bg-[#f9f9f9] dark:bg-background-surface
            border border-[rgba(0,0,0,0.08)] dark:border-border
            rounded-lg">

Efeitos por modo

Glass morphism

O glass morphism (backdrop-filter) funciona diferente em cada modo:

Dark mode — translúcido sobre preto, efeito profundo e vísivel:

background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);

Light mode — sem glass. Use superfície elevada com sombra sutil:

background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);

Glass morphism sobre fundo branco não tem efeito visual perceptível — a transparência se mescla ao fundo. Substitua por elevação com sombra.

Shadow glow

Dark mode — box-shadow: 0 0 40px rgba(231,88,15,0.35) funciona bem sobre preto.

Light mode — não use shadow-glow. Use borda colorida com brand.600:

border: 1px solid rgba(201, 66, 8, 0.30);
box-shadow: 0 4px 16px rgba(201, 66, 8, 0.10);

Regras

Nunca use brand.500 (#e7580f) como texto ou botão sobre fundo branco — não passa WCAG AA. Use brand.600 (#c94208)
Nunca use glass morphism em light mode — substitua por superfície com sombra
Sempre teste contraste nos dois modos ao criar um novo componente
Nunca force um modo específico no produto — respeite prefers-color-scheme do usuário
As cores de status (success, warning, error) funcionam nos dois modos sem ajuste — foram escolhidas por isso
Imagens e ilustrações devem funcionar em ambos os fundos — evite assets com fundo fixo branco ou preto