Uniform chip & tag components

In 2024, a dedicated design system team was formed to support the rollout of a new visual language across the product suite. Our small team—one director, three engineers, and three designers—was tasked with driving adoption of consistent, scalable UI foundations. We inherited legacy components from a previous internal effort, and I began systematically reevaluating these patterns while defining interaction specs across both the coded and Figma libraries. This included efforts to resolve ambiguity between similarly scoped components like “Chip,” “Tag,” and “Status Tag,” ensuring each served a purpose grounded in real-world product needs.

Role	Interaction designer
Time	Q2 2025
People	Visual designer

Background

When I joined the Uniform Design System team, we had a partially built Figma library that included both a “Tag” and a “Chip” component—along with a third component called “Status Tag.” These components originated from an earlier grassroots design system effort and were already in use across several product teams. However, their definitions and points of differentiation were somewhat unintuitive, leading to inconsistent implementations and overlapping use cases.

To address this ambiguity, I initiated a review of how these components were used in practice. This led to a broader effort to clarify their roles, reduce redundancy, and establish clearer, more scalable guidance to support both design and engineering teams going forward.

Discovery

Lorem ipsum

Exploration

Lorem ipsum

Refinement

Lorem ipsum

Heading

Lorem ipsum