Sekiro visual system
The design system behind this site: layered tokens for the Sumi and Washi themes, shared components, microcopy kept out of components, and ten rules written to be measured, with an accessibility gate in CI.
- category
- personal
- stack
- CSS custom properties
- Tailwind
- TypeScript
- Playwright
- axe-core
Context
The v2 needed an identity with personality, drawn from Japanese composition, without turning into game cosplay. It also had to serve more than one app in the monorepo without each one reinventing color, type and copy.
Pressure and constraint
Taste cannot be reviewed in a pull request. If the identity were only a mood board, every new screen would be an argument, and the first contrast regression would ship unnoticed.
Decision
Write the identity as ten verifiable rules: AA contrast in both themes, accent up to about 10% of the fold, a notan test before approving a screen, motion between 160 and 220 ms, visible focus on every surface and new colors only from the index of traditional Japanese colors. The rest became code: layered semantic tokens, components in packages/ui and pt and en microcopy in packages/copy.
Execution
Themes swap the token layer instead of inverting colors. Focus got its own token, separate from the accent, and contrast is measured on surfaces too, not only on the background. Continuous motion exists only as an exception written into the rule, and everything stops under reduce-motion.
What was measured and cut
- Decorative kanji, HUD, gauges and assets from the reference game. They went on the do-not list, because they read as cosplay rather than work.
- Proficiency bars on skills. Rejected because they show a level nothing measured; the site shows where each tool has worked instead.
How I know it worked
An axe gate runs on six pages in both themes, against the production build, on every pull request. It caught a 4.24:1 contrast on the light theme's illustration label before it shipped. No component has a hand-written color.
- verifiable rules
- 10each with a way to check it, written next to the rule
- pages and themes in the accessibility gate
- 6 × 2axe on the production build, on every pull request
impact
A new screen arrives with acceptance criteria instead of opinions, and the portfolio-os, when it comes, inherits tokens, components and copy without duplicating any of them.
what transfers
Write the identity as rules you can measure. What you can measure you can put in CI, and what is in CI does not depend on anyone remembering.