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.
- 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
- 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.
- Evidência
- 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.
- 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.