From Design Tokens to a Design System • 

A scrappy start, an uphill battle, and a system that shipped anyway.
New Brand Design Tokens

There was no design system, just a tangled mess of duplicated components, arbitrary styles, and accessibility-unfriendly brand rules. When I raised contrast issues, the Creative Director said, “Sometimes you have to sacrifice accessibility for good design.” (We disagreed.)

Meanwhile, handoffs were slow, QA was a minefield, and the product was scaling without structure.

There wasn’t buy-in for a design system, so I didn’t wait. I started small, cleaning up styles and defining tokens while working on product features.

The turning point? The team was breaking the monolith and rebuilding parts of the product in React. I saw a window to implement structure from the ground up.

I partnered with engineers to integrate tokens, build Storybook, and introduce reuse into the development flow, all while navigating pushback from a branding team that was not yet ready for digital demands.

Laced. styleguide

I kickstarted and led the design system initiative from the ground up, defining design tokens, naming conventions, audit criteria, and creating hands-on documentation. I partnered closely with engineers to build it into Storybook and used a quiet migration to React as the strategic moment to embed the system into the new architecture. Despite pushback from the brand and no formal buy-in, the system gained traction fast, slashing handoff time, improving accessibility, and becoming the foundation for three major features.

The three phases of the Implementation process of the new brand.

This wasn’t just about components, it was about credibility. By seizing the migration window and demonstrating impact quickly, I helped turn a “nice-to-have” into a necessity. In the end, it wasn’t politics that made it stick, it was momentum.

Company

LACED.

Year

2022-23

Design Tools

Figma and Overflow

  • Because “just email support” isn’t a return policy.
  • Receive, process, authenticate, classify, store, inventory, and resell processes are synchronised with the rest of the system.
  • Receive, process, authenticate, classify, store, inventory, and resell processes are synchronised with the rest of the system.
  • Receive, process, authenticate, classify, store, inventory, and resell processes are synchronised with the rest of the system.
  • Because “just email support” isn’t a return policy.
  • Receive, process, authenticate, classify, store, inventory, and resell processes are synchronised with the rest of the system.
Back To Top
VIEW