Introduction
Specs, micro-interactions, and token details often gets lost between Figma and the codebase. I built this as an extention of Tabs to fix that gap for myself. It is a living, self-hosted product library and design system built completely from scratch, serving as a direct bridge between precise design tokens and production-ready React, TypeScript, and Tailwind code.
This started as an intentional learning journey. It became my personal sandbox to explore how far I could go when component, token, and state specs are custom built rather than relying on heavy third-party dependencies.
Flipping the script by keeping full source control right in the platform. It has taught me how to create systems where design and code speak the exact same language, anchored by some guiding principles:
- Transparency: Every component layer is completely open, unstyled, and inspectable right from the code drawer in a way I can understand and tweak as needed. Also allows for easy import and use in other projects.
- Token-First: Sizing scales, typography, and layout states map directly back to foundational system variables rather than guessing.
- Live Testing: Real-time parameters let me test component variants, scaling metrics, and edge cases instantly on the fly.
- UX Intent: The library is informed by real-world product thinking—tailored for constraints, custom views, and user flows.
Platform Anatomy
To make handoffs seamless and keep the feedback loop as tight as possible, this platform is structured around three core areas:
1. Navigation Header
Think of this as the command center for the workspace. Toggle background grid, haptic audio feedback, theme, and code inspection on the fly.
2. Live Code Drawer
A sliding drawer that reveals the exact TypeScript (.tsx) implementation and utility classes for whichever component in view.
3. Inspector Panel
An interactive sidebar designed for live-customisation, a playground if you will. Adjust tokens, sizing, and component states/variants in real-time.