Designing for Platform Foundations and UI Components System

Context

My Role

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).

Contribution

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

• 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.

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.

Progression of My Design System Thinking Approach

• 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.

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

1. Storybook for UI Components & Patterns Documentation

Requirement

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.

Challenge

• 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.

Outcome

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.

Behind the Scene

2. Semantic Token System

Requirement

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.

Outcome

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.

Impact

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.

Behind the Scene

3. Migration from Legacy Component to New Version

Requirement

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.

Process, Challenges and Consideration

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.

Outcome and Learning

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.

Behind the Scene

4. Qube Design Library (2019)

Requirement

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.

Process & Outcome

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.

Impact

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.

Behind the Scene