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.
- 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
- 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.
- Evidence
- 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.
- 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.