Introduction
An independent case study in owning a design system end-to-end — from Figma to production code, by one designer.
What is this?
This is an independent case study — a self-initiated reimagining of Bangkok Bank as a complete design system. It isn't affiliated with, endorsed by, or connected to the bank. I designed it in Figma and built it in code myself, to see how far one designer can take a system in the AI era: from brand and tokens all the way to shipped, production-ready React.
Built on shadcn/ui and Tailwind CSS, every component here is the same code running this site — theme-aware, accessible, and ready to copy into a real project.
Why I built it
Design and engineering usually live in two worlds with a hand-off in between. I wanted to close that gap and own the whole loop myself — so nothing gets lost in translation.
- ✓Design and code, one hand — the Figma library and this codebase are maintained by the same person, so intent survives all the way to production.
- ✓Always in sync — a token changes in Figma, it changes in the code. One source of truth, both sides.
- ✓AI as the multiplier — modern AI tooling lets a single designer ship production code, not just mockups.
- ✓Real, not a mockup — every screen here is live React, accessible by default (WAI-ARIA), running in your browser right now.
FAQ
Is this Bangkok Bank's official design system?
No. It's an independent, self-initiated case study that uses the Bangkok Bank brand as a creative exercise. It isn't affiliated with, endorsed by, or connected to the bank in any way.
Are you a designer or an engineer?
A designer — one who ships code too. This project is my argument that in the AI era, that line is blurring, and a single person can carry an idea from Figma frame to production component.
Can I actually use these components?
Yes. They're built on React + Tailwind CSS + shadcn/ui and work with Next.js, Remix, Vite, or any React setup. Copy the code straight from the docs — you own it the moment you paste it.
How do design and code stay in sync?
Tokens are CSS variables in globals.css that mirror the Figma styles. Change a value once and it cascades across every component — the same way it does in the Figma library.
On This Page