Bangkok Design System
Bangkok Design System is my personal case study in building a design system that lives in code first, and installs straight into a project.
- Role
- Creator, designer and builder
- Product
- Code-first design system
- Platform
- Web, custom shadcn registry
- Status
- Live Visit ↗
The challenge
Most design systems live in Figma and slowly drift away from the product. I wanted a system teams can install directly into their codebase, so design and code never split.
What I designed
- Tokens for color, type, spacing and radius
- Component library built on shadcn/ui
- Custom shadcn registry for one-command installs
- Documentation site deployed on Vercel
- Usage analytics with Vercel Analytics and PostHog
How I worked
Every component starts as a token decision, then becomes code, then gets documented on the live site. Design and code move together, in that order, every time.
Highlights
Components install with one command
One source of truth for design and code
A case study I use in courses and talks
Tools
shadcn/uiNext.jsTailwindVercelPostHog