Sistema visual Sekiro
O sistema de design deste site: tokens em camadas para os temas Sumi e Washi, componentes compartilhados, microcopy fora do componente e dez regras escritas para serem medidas, com gate de acessibilidade no CI.
- categoria
- pessoal
- stack
- CSS custom properties
- Tailwind
- TypeScript
- Playwright
- axe-core
Contexto
A v2 precisava de uma identidade com personalidade, inspirada na composição japonesa, sem virar fantasia de jogo. E precisava servir a mais de um app do monorepo sem cada um reinventar cor, tipo e texto.
Pressão e restrição
Gosto não se revisa em PR. Se a identidade fosse só referência visual, cada tela nova seria uma discussão, e a primeira regressão de contraste iria ao ar sem ninguém ver.
Decisão
Escrever a identidade como dez regras verificáveis: contraste AA nos dois temas, acento até cerca de 10% da dobra, teste de notan antes de aprovar tela, movimento de 160 a 220 ms, foco visível em qualquer superfície e cor nova só do índice de cores tradicionais japonesas. O resto virou código: tokens semânticos em camadas, componentes em packages/ui e microcopy em pt e en em packages/copy.
Execução
Os temas trocam a camada de tokens, sem inverter cor. O foco ganhou token próprio, separado do acento, e o contraste passou a ser medido também sobre as superfícies, não só sobre o fundo. Movimento contínuo só existe como exceção escrita na regra, e tudo para com reduce-motion.
O que foi medido e cortado
- Kanji decorativo, HUD, medidor e asset do jogo de referência. Ficaram na lista do que não fazer, porque leem como fantasia e não como trabalho.
- Barra de proficiência nas skills. Reprovada porque mostra um nível que nada mediu; o site mostra onde cada ferramenta trabalhou.
Como sei que funcionou
Um gate com axe roda em seis páginas nos dois temas, no build de produção, a cada PR. Ele pegou um contraste de 4,24:1 na etiqueta de ilustração do tema claro antes de ir ao ar. Nenhum componente tem cor escrita à mão.
- regras verificáveis
- 10cada uma com um jeito de conferir, escrito junto da regra
- páginas e temas no gate de acessibilidade
- 6 × 2axe no build de produção, em todo PR
impacto
Tela nova chega com critério de aceite em vez de opinião, e o portfolio-os, quando vier, herda tokens, componentes e texto sem copiar nada.
o que transfere
Escreva a identidade como regra que dá para medir. O que dá para medir dá para pôr no CI, e o que está no CI não depende de alguém lembrar.