Designing for Platform Foundations and UI Components System

Since the beginning of my design career in 2017, design systems have always been at the center of my workflow. I entered the industry during a time when design systems were a hot topic and teams were actively hosting round tables, debating adoption challenges, and investing max effort into building scalable UI foundations. So far in my career, I have been leading design system work across various companies, partnering closely with engineers to improve design–dev collaboration, shipping speed, and overall product quality.

Specialized in React-based ecosystems (ShadCn, Tailwind, AntDesign, Material UI).

Across companies, I have contributed to defining and scaling UI library for B2B product suites, which includes:

All these effort were aimed to ensure consistent, traceable, and shared understanding of design patterns and language across teams for thoughtful scalability and improving product development velocity.

The following covers few impactful works that contirbuted to design system and platform foundations.

DynamoAI used ShadCN as the base for its React component system, but our product areas required more complex patterns that mixed ShadCN primitives with custom, product-specific components. As the team grew, it became essential to create a unified component structure so designers and developers could reuse these patterns consistently, instead of reinventing same variations each time.

I collaborated with two developers and a designer to audit the codebase, clean up inconsistent data-display and overlay components, and set up Storybook as a quick reference for the team. I also created a lightweight documentation template that supports faster onboarding, clearer implementation, and easier adoption for both developers and AI agents using our coded design repo.

We also added AI workflow for generating documentation (story) for new components.

The platform's visual inconsistencies grew as multiple teams contributed with different workflows. Fixing this at the component level required significant engineering effort, and doing so without a solid foundation would increase drift. We decided to standardize the primitives first by introducing unified design tokens for colors, typography, and spacing, creating a consistent base for future component updates.

We discovered that color, spacing, and typography primitives were scattered across design files and the codebase in many formats. First, we converted all raw color, spacing, and typography values into structured Tailwind primitives. Then, once the foundation was stable, we moved from primitives to semantic tokens that mapped directly to product meaning and usage. This approach allowed us to cleanly modernize the codebase without disrupting ongoing development.

Significantly reduced visual drift across the product suite by introducing meaningful, purpose-driven token definitions, and aligned design language with the codebase to ensure clarity and consistency during Figma Dev Mode inspection and implementation.

A new data table component was adopted by a different product team at DynamoAI, offering stronger performance, richer controls, and more flexible data handling. Our team needed to replace the legacy table in our product and ensure the new component supports our specific use cases, improves the overall experience, performance stability and preserved all core functionalities that users rely on.

Conducted a full audit of how the legacy table was implemented to understand functional requirements, data flows, and integration points. Worked closely with the Engineering team to map limitations, dependencies, and code complexity, and to identify where tradeoffs would be required during adoption.

A key technical difference influenced many decisions: the legacy component relied on server-side rendering, while the new component operated entirely through client-side rendering, impacting performance, pagination, and data-fetching behaviors.

We refined the new component with necessary adjustments to align with our product requirements and deployed it incrementally, validating each feature to ensure that existing work and user flows remained unaffected.

Performance auditing played an important role alongside user experience improvements. During the migration, protecting existing core functionality that users depend on was the highest priority. Any enhancement had to maintain continuity and avoid breaking established workflows.

The organization needed a scalable component library to streamline UI development, reduce duplication, and ensure visual consistency across multiple product modules. At the time, teams were creating the same UI patterns independently, resulting in fragmented experiences and slower development cycles.

We built Qube Design Library (QDL) by defining component anatomy, and creating design-system ready variants by leveraging Figma smart layout concept, and establishing naming patterns. This library served as the shared UI foundation across all product modules. We also introduced Zeplin as an inspect tool for engineering to explore the components easily and streamline development hand-off.

With QDL in place, design-to-development handoffs became clearer, UI inconsistencies were greatly reduced, and development teams could move faster with less back-and-forth. It also empowered new team members to onboard more quickly by referencing a shared visual language.

Beyond these works, I have contributed to various other design system initiatives including icon systems, typography guidelines, component definitions, and more. Feel free to reach out if you'd like to discuss design systems and more.

Xiaomi Service Mobile App


• Extending frameworks like ShadCN into far more tailored to product needs and architecture than a simple visual refresh.
• Creating semantic token architectures with meaningful hierarchy.
• Refactoring and driving adoption of legacy components.
• Establishing and maintaining Storybook as the single source of truth.
• I started my design system journey with visual refresh work, where I fixed UI inconsistencies, improved visual quality, and created basic reusable components.
• I then moved into building scalable and consistent patterns, strengthening component behavior, improving design and development handoff, and documentation.
• This later expanded into working closely with Eng Team to align patterns with API contracts, payload structures, and performance needs for a more efficient system.
• I am now focused on shaping AI-ready components and documentation that both humans and AI tools can understand easily to build faster with accuracy at scale.
• Similar ShadCN components were imported and renamed differently due to gaps in our design–dev handoff and unclear differentiation between components.
• Fragmented product experience and made feature reviews and testing difficult.
• As a lean team, we needed documentation that was clear but not heavy or time-consuming to maintain, so a lightweight and sustainable approach was essential.

Timeline: 2023-Present

Focus: Storybook, Component Library, Token System

Context

My Role

Contribution

Progression of My Design System Thinking Approach

1\. Storybook for UI Components & Patterns Documentation

Requirement

Challenge

Outcome

Behind the Scene: Documentation Examples

2\. Semantic Token System

Requirement

Outcome

Impact

Behind the Scene: Auditing, Defining and Scripting for Conversion and Mapping

To read full UX report on Semantic Token Migration,

3\. Migration from Legacy Component to New Version

Requirement

Process, Challenges and Consideration

Outcome and Learning

Behind the Scene: Checklist, Iteration and Shoutout

4\. Qube Design Library (2019)

Requirement

Process & Outcome

Impact

Behind the Scene: Qube Design Library Hierarchy and Artifacts

Up Next: