MAICON RODRIGUES
Todos os artigos

31 de outubro de 2026 · 5 min de leitura

Como criar uma UI atmosférica sem destruir a legibilidade e a acessibilidade

Interfaces temáticas carregam um dilema de produto: como traduzir o clima de um universo narrativo sem transformar a leitura em uma maratona de fadiga visual?

  • Penumbra
  • Acessibilidade
  • UI de leitura

O desafio

Quando decidi projetar o Penumbra, uma plataforma responsiva para ler um romance de fantasia sombria publicado capítulo a capítulo, o desafio visual não era só deixar a tela bonita ou sombria. Era responder a uma pergunta prática de UX: como a interface pode sustentar a atmosfera da história sem competir com a leitura de longo formato no celular?

Neste artigo, mostro como estruturei as decisões de UI, a tipografia e a acessibilidade para que o tema escuro preservasse o conforto visual do leitor do início ao fim.

Tipografia: separando a ferramenta do conteúdo

Em um produto de leitura, a tipografia é a própria interface. Para não misturar o que é controle do site com o que é narrativa, dividi o texto em duas famílias com funções diferentes:

  • Geist para a ferramenta. Usada só em elementos utilitários: barra de navegação, datas de publicação, botões, tempo estimado de leitura e abas. As linhas geométricas e sóbrias deixam claro que aquilo é um componente do site.
  • Lora para a narrativa. Desenhada para telas, conduz a história. Traz o tom orgânico e literário que a fantasia pede, com altura de x e proporções pensadas para leitura longa no celular.

Separando a navegação da prosa, o leitor passa do modo navegação para o modo imersão sem esforço.

Dois cartões escuros. À esquerda, Geist, a voz da ferramenta, com o rótulo do capítulo, a data, as abas Sinopse e Capítulos e o card Próximo. À direita, Lora, a voz da narrativa, com o título Cinzas de uma vida antiga, a capitular N em vermelho e versos em itálico.
A mesma tela, duas vozes: Geist nos controles e nas informações do capítulo, Lora no título e no texto da história.

Acessibilidade em tema escuro

Um site escuro para uma narrativa sombria parece o caminho óbvio, mas paletas escuras mal planejadas costumam gerar baixo contraste, halação (o brilho que o branco puro cria sobre o preto) e cansaço depois de poucos minutos. Para manter a leitura dentro do nível AA da WCAG, adotei duas regras:

  • Contraste medido. O fundo é preto absoluto (#000000), para combinar com as artes de abertura dos capítulos. O texto troca o branco puro pelo tom Osso (#E9E4DC), com contraste de 16,6:1: nítido, sem ofuscar quem lê no escuro.
  • Uma única cor de destaque. O vermelho Lua (#D4473A) é a única cor vibrante da interface, usada nas capitulares e nos elementos interativos. Sobre o preto, chega a 4,8:1, acima do mínimo da WCAG para texto comum.
Três amostras sobre fundo preto: branco puro com 21:1, que brilha demais; Osso com 16,6:1, aprovado na WCAG AA; e Lua com 4,8:1, aprovado na WCAG AA.
Osso no texto e Lua só nos destaques. O branco puro passa no teste de contraste, mas cansa a vista em leituras longas.

Controles de leitura na mão do leitor

Preferências de leitura mudam de pessoa para pessoa e de aparelho para aparelho, então a interface entrega o controle ao leitor:

  • Tamanho do texto. Os botões A− e A+ ajustam a fonte entre 0,95rem e 1,6rem.
  • Tema Pergaminho. Para quem prefere fundo claro em ambientes muito iluminados. No tema claro, o vermelho escurece para manter o contraste.
  • Barra de progresso discreta. Uma linha fina no topo avança conforme a rolagem e mostra onde o leitor está, sem roubar a atenção do texto.
A tela do Capítulo I no celular em dois temas: Noite, com fundo preto, e Pergaminho, com fundo claro. As anotações mostram os botões A− e A+, a barra de progresso no topo e a capitular em vermelho.
Tema Noite e tema Pergaminho, com ajuste do tamanho do texto e a barra de progresso no topo.

Elementos narrativos sem quebrar o ritmo

Manter o leitor no fluxo exige tratar as nuances do texto com pequenos componentes. Em Penumbra, a prosa intercala versos, encantamentos em latim e trocas de cena:

  • Encantamentos com tradução sob demanda. Colocar a tradução do latim no meio do texto quebraria o ritmo. Ela fica guardada em um botão discreto: quem quer o significado toca e lê, quem prefere a sonoridade original segue sem interrupção.
  • Asterismo nas quebras de cena. No lugar de linhas pesadas, a transição entre cenas usa o asterismo (⁂), que suaviza as pausas dramáticas.
O encantamento em latim em dois estados: com a tradução fechada, só os versos em vermelho e o botão Tradução; e com a tradução aberta, mostrando o texto em português abaixo. Embaixo, o asterismo entre duas linhas finas.
O encantamento em latim com a tradução fechada e aberta, e o asterismo marcando a troca de cena.

Conclusão

UI atmosférica não significa sacrificar a usabilidade pela estética. A atmosfera aparece quando a interface fica discreta o bastante para que só a história permaneça.

Medir o contraste, separar a tipografia utilitária da literária e dar autonomia ao leitor são os pilares que permitem criar produtos temáticos imersivos, funcionais e inclusivos.