Shokunin Design System
web
Visit Shokunin Design System (opens in a new tab)Problem it solved
Every studio project was deciding its own colour, type and spacing.
A living design system: tokens, components and a reference site that every Shokunin property draws from.
AI workflow
- Tokens kept as DTCG JSON, the single source for CSS and Swift
- Contrast pairs checked by script before anything ships
- Figma variables diffed against the tokens with Claude
Features
- Design tokens
- React component package
- Dark and light modes
- Swift tokens
Software
- React
- Vite
- CSS custom properties
- Hostinger