Por que manuscrito, e não interface
A gente não queria fazer mais um aplicativo místico. A gente queria fazer um livro que por acaso mora dentro do navegador — um livro cujas páginas você vira uma carta por vez, cuja tinta seca entre um rascunho e outro, cujas margens carregam a mesma linha fina de ornamento que um tipógrafo do século dezesseis teria assinado embaixo. Chamar isto de manuscrito, e não de interface, não é enfeite poético. Muda cada decisão que desce a partir daqui.
Uma interface é otimizada para vazão. Ela quer levar você da intenção ao resultado no menor número possível de toques. Um manuscrito é otimizado para atenção. Ele quer que você diminua o passo nos momentos certos — a respiração de centramento antes de tirar as cartas, os dois segundos silenciosos enquanto uma carta gira, a pausa antes de a interpretação começar a se depositar na página. A versão da Lunarcana otimizada para vazão seria mais rápida, mais leve, e você nunca mais voltaria para ela.
A paleta marfim sobre obsidiana é a primeira coisa que essa postura pede. Uma página escura é lida como velino aceso por baixo, como o instante em que a vela é encostada na lombada. O tom também sinaliza seriedade num nicho que já foi iluminado até demais por gradientes roxos e fotos de banco com bola de cristal. A gente queria que a Lunarcana, no primeiro olhar, se lesse como um lugar sério para fazer trabalho interno em silêncio — não como um truque de salão.
Três coisas foram descartadas de saída. A gente descartou qualquer imagem mística de banco em qualquer forma — nada de véus esvoaçantes, nada de palmas brilhando, nada de nebulosas roxas. A gente descartou modais pop-up nos momentos cerimoniais — o centramento acontece no fluxo, a revelação acontece no fluxo, nada interrompe. E a gente descartou o enquadramento de adivinhação. A Lunarcana é um grimório digital e um instrumento de escrita. É o espelho, não o oráculo. Tudo abaixo trabalha a serviço dessas três recusas.
Vazão é para ferramenta. Atenção é para ritual.
Cor: marfim, obsidiana, dourado
A paleta tem três notas. O marfim é a tinta padrão — todo parágrafo, toda etiqueta, toda linha discreta de metadado é marfim ou uma de suas variantes desbotadas. A obsidiana é a página — preto absoluto, jamais suavizado para azul-marinho ou carvão, porque no instante em que o fundo esquenta uns poucos graus o dourado perde o limiar e o manuscrito começa a parecer landing page de marketing. O dourado é a terceira nota, e é racionado.
O dourado é apenas sinal de limiar. Ele marca os momentos em que a atenção deve mudar de forma — o sigilo da marca no topo do documento, a capitular que abre uma passagem longa, a linha fina embaixo do cabeçalho de seção, o estado de hover que promete que um botão está ao alcance, a borda brilhando de uma carta a meio giro, a etiqueta de posição que acabou de ser revelada, o glifo da fase da lua no chrome. Fora desses limiares, o dourado é proibido. Uma página inteira pode passar sem um único pixel dourado, e isso é feature.
A razão do racionamento não é estética, é teoria da informação. Se o dourado está em todo lugar, o dourado não está em lugar nenhum — deixa de carregar sinal e vira textura. Guardando-o para os momentos que efetivamente mudam a relação de quem lê com a página, a gente deixa uma única fagulha morna de cor fazer o trabalho que, num design menos disciplinado, dez gradientes juntos falhariam em fazer. A regra do limiar é a regra mais importante deste documento, e a mais provável de ser silenciosamente violada sob pressão de feature.
Onde o dourado é permitido
- O sigilo da Lunarcana no topo do documento.
- A capitular que abre uma passagem longa de texto.
- A linha fina embaixo do cabeçalho de seção.
- Os estados de hover e foco de um controle interativo.
- A borda brilhando de uma carta de tarô a meio giro.
- A etiqueta de posição de uma carta que acabou de ser revelada.
- O glifo da fase da lua no chrome.
A gente não usa roxo. Nem em gradiente, nem como cor de destaque, nem como estado de hover, em lugar nenhum. Roxo é o clichê visual do nicho inteiro de aplicativo místico, e evitá-lo é a maneira mais eficiente de sinalizar que a Lunarcana está fazendo outra coisa.
Tipografia: escala, contraste, respiração
O manuscrito tem oito tokens tipográficos e cada um tem um único ofício. Display é o wordmark e o raro título cerimonial. H1 é a abertura de capítulo. Section é a sobrancelha que introduz um bloco. Body é a prosa longa que você está lendo agora. Body-CJK é a mesma prosa em chinês e japonês, com as formas de letra ajustadas para o ritmo vertical. Eyebrow é o rótulo pequeno em caixa alta. Quiet é o metadado que fica na margem. Numeral é o algarismo tabular usado em contagens.
A escolha do corpo passa por bodyClass(locale) — o helper devolve t-body para latinos e t-body-cjk para zh/ja — porque letras chinesas e japonesas respiram diferente das latinas, e a mesma entrelinha que soa generosa em inglês soa apertada em 中文. Nunca escreva um teste locale === "zh" || "ja" direto no JSX. O helper é a fronteira.
Há uma pegadinha de cascata que vale gravar. As classes .t-* em globals.css são unlayered, ou seja, utilitários arbitrários do Tailwind como text-[1rem] não sobrescrevem font-size, letter-spacing nem line-height em .t-display ou .t-h1. Quando precisar de override responsivo desses três, desça para style inline com clamp() — o inline vence as duas camadas. A gente bateu nessa pedra uma vez no wordmark do Header, e a gente não vai bater de novo.
.t-display · cerimonial
LVNARCANA
.t-h1 · abertura de capítulo
Como desenhamos o manuscrito
.t-eyebrow · rótulo de seção
DIREÇÃO DE ARTE
.t-body · prosa longa
A leitura é uma cerimônia, não uma consulta.
Estas quatro amostras são renderizadas com as mesmas classes .t-* que o resto do manuscrito usa. Não é screenshot. Se a voz de algum token derivar um dia, a deriva aparece aqui primeiro.
Movimento: só transições de opacidade
As transições de fase na Lunarcana desaparecem em opacidade. Elas não deslizam, não pipocam, não saltam com mola no eixo y. Todo o fluxo de leitura — pergunta, centramento, tiragem, revelação, interpretação — acontece dentro de um único AnimatePresence em modo wait, com cada fase entrando por opacidade e saindo por opacidade. Há uma exceção: a própria carta gira em torno do eixo Y durante a virada, porque a carta é uma carta e cartas viram. Toda outra transição é tinta encharcando ou tinta escoando.
A gente removeu layoutId depois da primeira iteração. layoutId é tecnicamente lindo — deixa o Framer executar uma animação FLIP entre dois layouts — mas, no nosso caso, ele provocava pequenos saltos de layout quando o spread se reajustava depois da revelação. A gente substituiu aquele voo por uma transição CSS em left e um fade de opacidade separado no chrome novo, e o manuscrito parou de tremer. O invariante é: nenhum salto de layout, nunca. Se a página mede diferente entre dois estados, o novo estado precisa reservar o espaço antes da mudança.
A preferência por movimento reduzido é respeitada em cada camada. Sob prefers-reduced-motion, o círculo de respiração para de respirar, a virada da carta vira um toggle de opacidade de 300ms, o baralho para de tremer, a vela para de bruxulear, e o flash dourado da virada é silenciado. Aqui, acessibilidade não é caixinha para marcar — para uma ferramenta de meditação, ela é a própria superfície de trabalho.
Curva de opacidade numa transição de fase
O que a gente não faz
Quase todo design system descreve os movimentos que faz. O documento mais difícil de escrever, e o que a gente relê mais vezes, é a lista dos movimentos que a gente se recusa a fazer. Espaço negativo é doutrina. Cinco coisas ficam fora dos limites.
A gente não adivinha o futuro.
A Lunarcana está posicionada como grimório digital, instrumento de escrita, espelho interno — não como adivinhação nem serviço de vidência. O enquadramento carrega peso, tanto porque a política de uso aceitável do nosso processador de pagamentos exige, quanto porque, mais importante, o trabalho interior que as cartas fazem para quem lê é desmontado no instante em que as cartas viram promessa de futuro. A gente diz grimório. A gente diz diário. A gente diz espelho. A gente não diz oráculo.
A gente não usa imagens místicas de banco.
Nada de gradiente roxo, nada de bola de cristal renderizada, nada de véu esvoaçando, nada de palma brilhando, nada de nebulosa atrás do baralho. A arte do baralho em si é a única imagem mística do manuscrito, e o chrome ao redor é seco de propósito para que o baralho fale com a própria voz.
A gente não coloca paywall no ritual central.
O plano gratuito sempre lê. Dois spreads de uso diário são ilimitados, e os demais ficam acessíveis num ritmo mensal. O muro, quando aparece, cerca volume e exportação — nunca o centramento, a tiragem, a revelação nem a interpretação em si. A cerimônia é de quem lê.
A gente não interrompe momentos cerimoniais com modal.
O centramento acontece no fluxo, a revelação acontece no fluxo, a interpretação escorre no fluxo. Um modal pop-up em qualquer um desses instantes estilhaçaria o ritmo. Modais ficam reservados para utilidade — confirmação, ajustes, pagamento — nunca para a cerimônia em si.
A gente não toca som automaticamente.
O padrão é mudo em muitos contextos. A cama ambiente e os efeitos são opt-in pelo chrome, e lembram a última escolha de quem lê. Áudio que assusta um leitor num trem silencioso é a forma mais rápida de perdê-lo, e o manuscrito prefere ficar em silêncio a ser malcriado.
Linhagem e referências
Nada na Lunarcana foi inventado do nada. O manuscrito se apoia numa prateleira longa de trabalhos lentos, feitos à mão, cuidadosamente ornamentados, e prestar contas a essa prateleira é parte da disciplina. Estas são as influências que a gente manteve em mente durante as iterações longas. Nenhuma delas está aqui como namedropping — cada uma está listada porque contribuiu com uma postura específica para o livro final.
- William Morris e a Kelmscott Press
- A convicção de que uma página não é um layout, e sim um tecido, de que as margens importam tanto quanto a coluna, e de que o trabalho encadernado à mão ganha o direito de ser mais devagar que a concorrência industrial.
- Aubrey Beardsley
- A disciplina do traço em preto e marfim e a coragem de deixar áreas grandes da página em branco para que um único ornamento faça toda a fala.
- A cromolitografia do Rider–Waite de 1909
- A iconografia e a lógica de cor específicas do próprio baralho, e o lembrete de que misticismo impresso chega mais nítido a quem lê quando deixa de querer parecer místico e passa a querer parecer um livro sério.
- O manuscrito Voynich
- A atmosfera de uma página que sabe mais do que explica. Marginália. Ornamentos de linha fina. A disposição de deixar quem lê se sentir fora de profundidade por um tempo antes que o sentido se assente.
- O movimento contemporâneo de slow design
- A licença de recusar os padrões de laço-de-engajamento, feed infinito e cadência de dopamina que dominam os aplicativos modernos, e desenhar em vez disso para quem escolheu sentar-se com um único pensamento.
Um convite
Se a doutrina está fazendo o próprio trabalho, ela desaparece assim que você a absorve. A maior parte do que está escrito acima, depois de alguns minutos, vai passar a soar apenas como a sala onde você por acaso está sentada. É essa a intenção. As regras por baixo da superfície estão aqui para que a superfície possa permanecer em silêncio.
Quando estiver com jeito, tire uma carta. O baralho está na sala ao lado. O guia está na prateleira logo acima. A página Sobre conta quem cuida do manuscrito. A gente torce para a encadernação segurar.