Criando um Reverie mais sereno: do chat ao produto inteiro

Se você abriu uma conversa nos últimos dias, talvez tenha percebido que algo está diferente.

A interface do chat ficou um pouco mais serena. As mensagens estão mais fáceis de ler, os controles parecem mais leves e painéis e janelas já não disputam tanta atenção com a conversa. Nada foi movido para um lugar desconhecido, mas o espaço ao redor dos seus personagens começou a parecer mais calmo.

Começamos pelo chat porque é onde muitas pessoas passam mais tempo no Reverie. Também era o melhor lugar para testar a pergunta por trás desta reformulação: como uma interface deve parecer quando precisa continuar confortável durante uma conversa inteira, e não apenas causar uma boa primeira impressão?

O que você viu ali não foi uma atualização isolada. Foi a primeira parte visível de um novo sistema de design, que agora se estende por todo o produto — da descoberta e das páginas de personagens às ferramentas de criação, histórias, pagamentos, recompensas, configurações e pequenas telas utilitárias entre elas.

O Reverie sempre foi expressivo.

Essa personalidade aparecia em bordas marcantes, sombras visíveis, cartões em camadas, controles coloridos e superfícies que pareciam objetos, não apenas retângulos na tela. Isso dava calor ao produto e o tornava reconhecível.

Mas uma linguagem visual adequada a uma fase do produto pode ficar pesada demais na fase seguinte.

À medida que o Reverie cresceu, a interface passou a sustentar muito mais do que descoberta. As pessoas permanecem mais tempo nas conversas, gerenciam personagens, escrevem histórias, comparam planos, configuram ferramentas avançadas e percorrem fluxos cada vez mais complexos. Os detalhes decorativos que dão personalidade a uma página de apresentação podem virar ruído visual quando se repetem em cada diálogo, cartão, menu e botão.

Não redesenhamos o Reverie para torná-lo menos distinto. Fizemos isso para que sua identidade venha da própria experiência.

Mais leve, não mais frio

“Leve” pode facilmente virar sinônimo de fundos brancos, texto cinza fino e componentes tão discretos que tudo parece inacabado. Esse nunca foi o objetivo.

O novo sistema é mais sereno, mas continua acolhedor.

Substituímos o branco intenso por superfícies neutras com um leve tom. O texto ficou mais escuro e firme onde a leitura prolongada importa. As bordas são mais discretas, as sombras mais rasas e as cores usadas com mais intenção. O resultado pesa menos visualmente sem perder a sensação de que o Reverie é um lugar feito para histórias e relacionamentos.

Esse equilíbrio é especialmente importante no roleplay. Uma conversa não é um painel de configurações. As pessoas leem mensagens longas, percebem mudanças sutis de tom e permanecem muito tempo na mesma tela. Tipografia e fundo precisam continuar confortáveis depois de vinte minutos, não apenas parecer limpos em uma captura de tela.

Tipografia feita para leituras longas

Uma das mudanças mais importantes também é uma das menos dramáticas: reforçamos a hierarquia tipográfica.

Títulos grandes continuam expressivos, mas o texto corrido ganhou mais presença. Rótulos importantes, navegação e ações usam pesos mais fáceis de identificar. O texto secundário continua secundário, sem ficar tão apagado que ler se torne trabalhoso.

O princípio é simples:

Textos longos devem parecer calmos e consistentes.
Ações devem ser reconhecíveis antes da leitura de cada rótulo.
Informações de apoio devem recuar sem desaparecer.
A página deve permanecer legível em diferentes telas, temas e condições de luz.

Boa tipografia não exige atenção. Ela facilita mantê-la.

Uma linguagem de componentes em todo o produto

Isto não foi uma troca de visual página por página. Reconstruímos a linguagem dos componentes compartilhados que sustentam o produto.

Botões, cartões, diálogos, menus, abas, formulários, tabelas, tooltips, avisos, gavetas, popovers e elementos de navegação agora seguem as mesmas regras para:

raio dos cantos
contraste das bordas
cor das superfícies
elevação
indicação de foco
estados de hover e pressionado
peso do texto
espaçamento
cores semânticas

Essa consistência importa mais do que qualquer escolha visual isolada. Quando a mesma ação parece e se comporta da mesma forma em todo lugar, a interface exige menos interpretação. Uma ação destrutiva parece destrutiva. Uma opção selecionada parece selecionada. Uma superfície flutuante se separa da página abaixo. A ação principal é fácil de encontrar sem que todo botão tente ser principal.

Também criamos variantes semânticas mais claras para destaques e sucesso. Agora elas fazem parte do sistema compartilhado, em vez de serem gradientes e cores personalizados recriados em cada recurso.

A parte difícil: encontrar as exceções

Atualizar o componente de botão não atualiza automaticamente todos os botões.

Produtos acumulam decisões locais: um cartão de preços com borda própria, uma janela de recompensa com brilho personalizado, um modal de compartilhamento com fundo especial, uma ação escondida com gradiente particular ou um cartão que recria o comportamento de hover do zero.

São essas exceções que costumam deixar uma reformulação inconsistente.

Nossa revisão foi além da biblioteca de componentes. Trouxemos de volta à linguagem comum as interfaces personalizadas que valia a pena ajustar: experiências de marketing, fluxos de pagamento, recompensas, conquistas, cartões de personagens e histórias, janelas de compartilhamento, navegação, estados vazios, banners e telas utilitárias menos visitadas.

Nem toda exceção foi removida. Algumas interfaces precisam de identidade mais forte para comunicar celebração, urgência, raridade ou status. A diferença é que esses momentos agora ampliam o sistema, em vez de ignorá-lo.

Menos decoração, interação mais clara

A reformulação remove efeitos que pareciam interativos sem acrescentar informação útil.

Sombras pesadas não aparecem mais em todos os cartões. O movimento no hover é mais contido. Gradientes ficam reservados para momentos que merecem ênfase. Bordas definem estrutura sem colocar cada conteúdo dentro de outra caixa.

Ao mesmo tempo, os estados reais de interação ficaram mais claros:

Opções selecionadas mostram seu estado visual e semanticamente.
O foco do teclado é mais fácil de acompanhar.
Cartões interativos compartilham tratamentos consistentes de hover e foco.
Botões comunicam hierarquia por variantes compartilhadas.
Diálogos e menus se destacam do fundo sem parecer separados do produto.

Ao reduzir a decoração, abrimos espaço para melhorar o feedback. A interface se move menos, mas comunica mais.

A acessibilidade faz parte do sistema visual

Um sistema de design está incompleto se descreve apenas como os componentes aparecem com um mouse.

Durante a refatoração, revisitamos indicadores de foco, comportamento pelo teclado, semântica de seleção, contraste e cartões interativos. Alguns controles agora informam com mais clareza às tecnologias assistivas quando estão pressionados ou selecionados. Itens de histórias que funcionam como links podem receber foco e ser ativados pelo teclado. O foco segue a mesma lógica visual em todos os controles compartilhados.

Essas mudanças são discretas de propósito. A acessibilidade não deve parecer um modo separado sobre o produto; deve estar no comportamento padrão.

Uma base melhor para o que vem a seguir

O resultado mais valioso deste trabalho não é um tom, raio ou sombra específicos. É haver menos respostas concorrentes para a mesma pergunta de design.

Ao criar um novo recurso, não precisamos decidir do zero como um diálogo deve parecer, como um campo deve responder ou como representar um cartão selecionado. O sistema já fornece essas respostas. Isso torna o trabalho mais rápido e, principalmente, a experiência mais previsível.

Consistência não é fazer todas as telas parecerem iguais. É oferecer expectativas estáveis para que o conteúdo possa mudar sem tornar a interface desconhecida.

O que esperamos que você perceba

Idealmente, não muita coisa de imediato.

O Reverie deve simplesmente parecer mais fácil de ler, mais tranquilo de navegar e mais coerente ao passar da descoberta para a conversa, a criação e as ferramentas da conta. Ações importantes devem aparecer mais cedo. Controles secundários devem parar de disputar atenção. Sessões longas devem cansar menos a visão.

Os personagens continuam expressivos. As histórias continuam atmosféricas. Momentos que merecem celebração ainda podem ser vibrantes.

A interface apenas aprendeu melhor quando falar — e quando ficar quieta o bastante para que todo o resto importe.

O novo sistema de design agora percorre toda a experiência Reverie. Se algo parece especialmente melhor — ou ainda fora do lugar —, queremos ouvir você em nossa comunidade no Discord.