Por que seu dark mode parece errado

Não é falta de cuidado. É matemática.

Este artigo faz parte de uma série sobre Design Tokens com intenção e contexto. Se você ainda não leu os anteriores, o quarto da série explica a arquitetura de camadas do Aplica — incluindo a camada Mode, que é o núcleo do que vou discutir aqui.

Dois quadrados. Mesmo hexadecimal. Percepções opostas. É assim que o contexto mente — e é assim que o HSL te engana. Imagem gerada pelo Gemini (Nano Banana 2.0).

O seu dark mode parece errado.

Não porque você foi descuidado. Não porque seu time não se importou. Mas porque o sistema que você usou para calculá-lo mente.

O sintoma que você já reconhece

O modo escuro funciona. Parece errado. Não é descuido — é o espaço de cor que você usou para calculá-lo. Imagem gerada pelo Gemini (Nano Banana 2.0).

Você sabe qual é o visual. O modo escuro (dark mode) que parece lavado — as cores vibrantes ficaram apagadas, sem vida, como um monitor mal calibrado. Ou o oposto: cores gritando em fundos escuros, saturação explodindo, olhos cansando depois de cinco minutos.

Às vezes é mais sutil. O verde de feedback que “parece verde errado” no escuro. O azul primário que de alguma forma ficou arroxeado. O cinza que perdeu toda a relação visual com o cinza do modo claro (light mode).

Esses problemas têm um nome. Chama-se usar HSL para fazer coisas que HSL não foi construído para fazer.

Em 1995, um professor do MIT provou que você não vê cores

A Ilusão do Tabuleiro de Xadrez de Adelson, 1995. Os quadrados A e B têm o mesmo valor de cinza. O contexto de iluminação é o que você vê — nunca a cor absoluta. Imagem gerada pelo Gemini (Nano Banana 2.0).

Edward Adelson publicou uma demonstração que ficou famosa — a Ilusão do Tabuleiro de Xadrez. Dois quadrados no tabuleiro, A e B, parecem completamente diferentes. O A parece cinza escuro. O B parece quase branco.

Essa fiz manualmente. Por quê? A IA não consegue entender as sutilezas e as instruções básicas. O trabalho de fazer com prompt é maior do que fazer manualmente. E não venha me falar que conseguiu de primeira fazendo no Claude Optimus Prime/Primal… não vai colar!

São exatamente o mesmo hexadecimal.

Isso não é truque de mágica. É o sistema visual humano funcionando como foi projetado: sempre contextualizando. O seu cérebro vê o A dentro de uma região de sombra e compensa. Vê o B ao lado de quadrados escuros e compensa de novo. A cor percebida é sempre relativa ao ambiente. Nunca absoluta.

O HSL não sabe disso.

Para o HSL, L: 50% é L: 50% — independente de matiz, independente de contexto. O sistema declara uma taxa de luminosidade e acha que acabou. O problema é que um amarelo com L: 50% parece completamente diferente de um azul com L: 50%. Visualmente, o amarelo parece muito mais claro. Os números são idênticos. A percepção não é.

Quando você constrói uma paleta em HSL e inverte os índices para gerar modo escuro, está tratando as cores como se fossem matematicamente iguais quando não são. O resultado é um modo escuro que “parece errado” — porque está errado, mesmo que os números pareçam certos.

O mecanismo perceptual (aqui a coisa começa a ficar nerd e legal pra caramba!!!!) por trás dessa ilusão está documentado em Adelson & Somers (2020).

O que a maioria faz — e por que não funciona

Três abordagens comuns para modo escuro. Todas falham pelo mesmo motivo: a geração de cores em um espaço que não corresponde à percepção humana. Imagem gerada pelo Gemini (Nano Banana 2.0).

Existem três abordagens comuns para modo escuro. Todas têm o mesmo problema de fundo.

Inverter as cores. A mais ingênua e a mais rápida. O fundo claro vira escuro, o texto escuro vira claro. Funciona para escala de cinza puro. Quebra imediatamente com qualquer cor de marca porque a inversão HSL não preserva relações de contraste perceptual.

Criar uma paleta escura manualmente. Um designer olha para as cores do modo claro e escolhe equivalentes “que pareçam certos” para o modo escuro. Funciona enquanto o designer com bom olho está disponível. Não escala. Não é auditável. Não garante contraste.

Usar Tailwind (ou similar) com variantes de dark. Você define dark:bg-gray-900 e por aí vai. O sistema utilitário te dá os blocos de construção. Te deixa livre para montar errado de maneiras infinitamente criativas ("sad, but true").

Nenhuma dessas abordagens endereça o problema raiz: a geração de cores em um espaço que não corresponde à percepção humana.

OKLCh: o espaço que faz o que o nome promete

HSL declara passos iguais. OKLCh entrega passos que parecem iguais. A diferença é que no OKLCh os números correspondem ao que o olho vê. Imagem gerada pelo Gemini (Nano Banana 2.0).

OKLCh (Lightness, Chroma, Hue) foi desenvolvido para resolver exatamente o problema de Adelson em código.

A diferença fundamental: no OKLCh, L: 0.5 realmente parece L: 0.5 — independente de matiz. Clarear 10% em um azul e clarear 10% em um amarelo produz resultados visualmente equivalentes. O sistema é perceptualmente uniforme: os números correspondem ao que o olho humano percebe.

Os mesmos 6 matizes. O mesmo valor declarado de luminosidade. Resultado completamente diferente para os olhos — no HSL. No OKLCh, o que o número diz é o que você vê. Imagem gerada pelo Gemini (Nano Banana 2.0).

Isso muda o que é possível.

Com OKLCh, você pode gerar uma paleta inteira a partir de uma única cor de marca e ter certeza de que cada nível vai parecer uniformemente diferente do anterior. Não matematicamente diferente — perceptualmente diferente. Você pode inverter índices para gerar modo escuro e saber que as relações de contraste vão sobreviver à inversão. Você pode reduzir saturação globalmente e saber quanto reduzir para que o resultado pareça confortável em fundos escuros sem perder identidade.

Com HSL, você calcula. Com OKLCh, você prevê.

Como o Aplica calcula o modo escuro

O modo escuro não é uma nova paleta. É a mesma paleta vista de trás para frente. O nível 10 do modo claro vira o nível 190 do modo escuro — e as relações de contraste sobrevivem porque a inversão acontece em OKLCh. Imagem gerada pelo Gemini (Nano Banana 2.0).

Quando você declara uma cor de marca no config — um hex qualquer — o Aplica executa um pipeline em OKLCh:

Converte para OKLCh. O hex entra como RGB e é convertido para o espaço perceptual. A partir daqui, todas as operações acontecem em OKLCh.

Gera 19 níveis de paleta. O matiz é fixado. A luminosidade varia em 19 passos uniformes, do nível 10 (mais claro) ao nível 190 (mais escuro), com o nível 100 como âncora — a cor exatamente como foi declarada no config. O número não é arbitrário: um décimo passo a partir da âncora chegaria ao branco puro (L=1.0) ou ao preto puro (L=0.0) — deixaria de ser uma cor utilizável em interface. 19 é o máximo com significado. Cada nível tem três propriedades calculadas: background, txtOn e border. O txtOn de cada nível é calculado para passar WCAG AA (4.5:1) sobre aquele background — automaticamente, sem checar na mão.

Gera modo escuro por inversão de índices. O modo escuro não é uma nova paleta. É a mesma paleta vista de trás para frente: dark[10] = light[190], dark[190] = light[10]. O nível 100 — a cor base — permanece igual. As relações de contraste são preservadas porque a inversão acontece em OKLCh, onde os índices correspondem à percepção.

Reduz saturação no modo escuro. Cores vibrantes sobre fundos escuros causam fadiga visual — os olhos trabalham mais para processar o contraste de saturação. O padrão do Aplica reduz 15% do chroma em todo o modo escuro (fator 0.85). Não é uma decisão estética. É fisiologia.

19 níveis. Âncora em 100. Modo escuro = a mesma paleta, lida de trás para frente. Nenhum valor novo calculado — a inversão já estava lá. Imagem gerada pelo Gemini (Nano Banana 2.0).

O resultado: você declara uma cor. O engine entrega modo claro e modo escuro com contraste garantido, paleta harmônica, saturação ajustada — sem uma decisão manual.

Mode e Surface não tratam da mesma coisa

Mode trata de como a pessoa percebe (claro, escuro, daltonismo, alto contraste). Surface trata do que destacar na superfície (padrão ou invertido). São eixos ortogonais — mudar um não afeta o outro. Imagem gerada pelo Gemini (Nano Banana 2.0).

Existe uma confusão que vai além da matemática das cores — e que produz modos escuros quebrados mesmo quando o espaço de cor está certo.

Modo claro e modo escuro não são inversões visuais. São intenções estruturais sobre contraste e percepção.

A camada Mode define como o sistema se comporta em diferentes contextos de percepção. O modo escuro é o exemplo mais familiar — mas a mesma camada é, por princípio, onde também moram um modo para daltonismo (paleta deslocada para cinza, diferenças de matiz mais definidas), um modo de alto contraste para baixa visão (relações de luminância exageradas), ou qualquer outra dimensão de percepção que o sistema precise suportar. Mode é sobre acessibilidade. Mode é sobre como aquela pessoa enxerga o mundo.

3 modos × 2 surfaces = 6 combinações. Todas corretas. Nenhuma exige que você calcule — o sistema já calculou. Imagem gerada pelo Gemini (Nano Banana 2.0).

A camada Surface trata de outra coisa inteiramente: destaque estrutural dentro de um modo. Uma interface no modo claro pode ter uma seção com fundo de cor de marca, um banner invertido, uma área premium com fundo escuro — tudo dentro do mesmo contexto de contraste definido pelo Mode. Surface responde à pergunta “o que queremos destacar nessa superfície?” — não “como esse sistema deve se comportar para essa pessoa?”.

A confusão entre as duas camadas é o que produz modos escuros que parecem certos no Figma e quebram na prática. Alguém usou Surface para resolver o que deveria ser tratado em Mode. Ou tratou o modo escuro como “inverter a Surface” quando na verdade é uma propriedade estrutural de percepção.

No Aplica, a separação é inviolável: Mode cuida de contraste e percepção. Surface cuida de destaque e contexto de fundo. Nenhuma das duas conhece a outra — e é exatamente isso que torna o sistema previsível em qualquer combinação.

O txtOn que você nunca mais precisa calcular

Cada token de cor carrega o seu txtOn — o texto acessível calculado automaticamente. WCAG AA garantido. Você não verifica. O sistema já verificou. Imagem gerada pelo Gemini (Nano Banana 2.0).

Existe um detalhe da arquitetura que merece atenção separada.

Cada token de cor no Aplica carrega junto o seu txtOn — o token de texto calculado para ter contraste WCAG AA (4.5:1) sobre aquele fundo. Não existe token de cor sem o seu par de texto acessível.

background e txtOn — sempre juntos, sempre corretos. O sistema calcula o par acessível no momento da geração. WCAG AA não é verificado depois — já está embutido. Imagem gerada pelo Gemini (Nano Banana 2.0).

Isso significa que uma IA gerando um componente não precisa calcular contraste. Um desenvolvedor escrevendo CSS não precisa calcular contraste. Um designer montando uma tela não precisa calcular contraste. O sistema já calculou. O sistema garantiu.

interface.feedback.danger.normal.background já sabe que o texto sobre ele deve ser interface.feedback.danger.normal.txtOn. Em modo claro e em modo escuro. Para qualquer marca que passe pelo pipeline.

Acessibilidade não como checklist — como propriedade do token.

O modo escuro que parece certo

O modo escuro que parece certo não acontece por acidente. Acontece quando o cálculo foi feito no espaço certo. Imagem gerada pelo Gemini (Nano Banana 2.0).

Quando um modo escuro parece natural — quando as cores do modo claro têm equivalentes escuros que “fazem sentido”, quando o contraste é consistente, quando a identidade da marca sobrevive à inversão — alguém fez o cálculo no espaço certo.

Quando parece errado, é quase sempre porque alguém fez no espaço errado e esperou que o olho compensasse.

O olho compensa. Mas cobra. Em fadiga, em inconsistência, em interfaces que funcionam mas não convencem.

Seu dark mode parece errado porque os números que você usou para calculá-lo eram precisos — e estavam errados ao mesmo tempo. Como os quadrados de Adelson: o número diz uma coisa, o olho vê outra. A diferença é que no tabuleiro é proposital. No seu Design System, não é.

Poe Bellentani trabalha com design para internet desde 2000 e com Design Systems desde 2013. É o criador do Aplica Design System e do Aplica Tokens Theme Engine.

Aplica Design System

• Site: aplica.me
• Documentação: docs.aplica.me

Nesta série:

• Design Tokens com intenção e contexto — A jornada do Aplica Theme Engine
• A IA não erra à toa. O problema é o sistema que você deu para ela.
• Como ensinei o Claude e o Cursor a criar interfaces usando meu Design System
• As 5+1 camadas do Aplica — e por que cada uma existe separada
• Por que seu dark mode parece errado ← você está aqui

Referências e leitura complementar

• Ilusão do Tabuleiro de Xadrez (Checker Shadow Illusion) — Wikipedia
• Adelson & Somers (2020) — The perception of lightness and darkness (bioRxiv)
• OKLCh — Matemática e algoritmos — Aplica
• Pipeline OKLCh — Tutorial do Aplica System Designer
• Inclusive Dark Mode: Designing Accessible Dark Themes — Smashing Magazine
• Camada Mode — Aplica
• Camada Surface — Aplica