Design System Starter
A small, opinionated component library — tokens, primitives and documentation — built to keep my own projects visually consistent instead of restyling buttons every time.
- Role
- Design systems
- Year
- 2025
- Instruments
- Figma
- React
- TypeScript
- Tailwind CSS
- Radix UI
IOverview
Every new project started with the same two days of work: picking type scales, settling on spacing, rebuilding a button. This is that groundwork done once, as a documented system with a Figma library and a matching React implementation that share the same token names.
IIThe problem
Design files and code drifted apart immediately. A colour adjusted in Figma never made it to the stylesheet, components were rebuilt slightly differently in each project, and there was no single source of truth for what 'medium spacing' actually meant.
IIIThe approach
A token layer defined once and consumed by both sides. Figma variables and CSS custom properties use identical names, so a change is a rename rather than a translation. On top of the tokens sits a set of accessible primitives — button, input, card, dialog, badge — each documented with its variants and the rule for when to use it.
Key features
- Colour, type, spacing and radius tokens shared between Figma and CSS
- Accessible primitives built on Radix UI
- Light and dark themes authored separately rather than inverted
- Usage documentation with do and don't examples for each component
- Keyboard and screen-reader behaviour verified per component
Moreobservations
Campus Event Platform
A single place for a college to publish events, take registrations and check attendees in — replacing the spreadsheet-and-WhatsApp workflow most departments run on.
Shared Expense Tracker
A hostel-room expense splitter that settles a month of shared costs into the smallest possible set of payments.