When I joined Superhero, a design system was already in place. My responsibility was to maintain and evolve it, ensuring it continued to meet the needs of the team.

I identified opportunities to improve the system's usability and spoke with designers to understand their pain points. The feedback revealed three key challenges:

• Difficult navigation: Finding the right component in Figma was time-consuming.

• Unclear component choices: Designers weren't always sure which component to use.

• Inconsistent token usage: Unclear naming conventions made it difficult to identify the right colour tokens.

I took ownership of auditing and improving the system, focusing on two key areas: simplifying the component library and restructuring the colour tokens.

1. Simplifying the component library

The problem

The existing Figma library contained numerous redundant components, making it difficult to find the right component and understand which version to use.

For example, buttons were created as separate components for primary, secondary, and other variants, rather than as variants of a single button component. Other components simply wrapped existing components, adding unnecessary complexity without providing additional value.

The approach

I audited and restructured the component library to reduce duplication and make components easier to discover and use:

• Consolidated components: Combined related components into a single component with variants where appropriate.

• Removed redundant wrappers: Eliminated unnecessary components that duplicated or wrapped existing components.

• Simplified the library: Reduced the number of components designers had to navigate, making it easier to find and select the right option.

The impact

Reduced the component library from 907 components to 204 — a 78% reduction.

The streamlined library made component selection more intuitive, with fewer duplicate results and less ambiguity. Designers and developers also gave verbal feedback that the design system was significantly easier to use.

2. Restructuring colour tokens

The problem

Designers struggled to identify the appropriate colour tokens because many had similar purposes and colour but unclear or overlapping names, such as color.text.primary and color.text.primaryCaption.

This made it harder to understand which token to use in a given context and introduced unnecessary friction into the design process.

The approach

I worked with the design team to establish a consistent naming convention that was intuitive and easy to understand.

I then mapped the existing tokens to the new naming structure, consolidating tokens that served the same purpose where appropriate. This reduced duplication and made the system's colour definitions easier to navigate. For example:

The impact

Reduced the colour token count from 175 to 147 — a 16% reduction.

The new naming convention gave designers greater clarity when choosing tokens and helped establish a more consistent approach to colour usage across the design system.

The outcome

By taking ownership of the design system improvements from audit through implementation, I made the Superhero design system leaner, clearer, and easier to use:

• 78% fewer components, reducing duplication and simplifying component discovery.

• 16% fewer colour tokens, supported by a clearer and more consistent naming convention.

• Positive team feedback, with designers and developers reporting that the system was significantly easier to use.

Beyond reducing the number of components and tokens, the work addressed the underlying sources of confusion. The result was a more intuitive design system that better supported the team's day-to-day design and development workflows.