Stake

Design system  ⎯  2026

Project overview

At Stake, I shaped and scaled a cross-platform design system that supported app, desktop and the marketing website. The goal wasn’t just consistency, it was also to create shared infrastructure that made better product decisions easier and faster and made it more efficient for design and engineering to build products faster.

My role covered system strategy, token architecture, governance, and rollout. I worked closely with engineering to define primitives, semantic layers, and component patterns that could flex across multiple modes and different product contexts.

We prioritised improvements based on real product needs and customer feedback, growing the system intentionally rather than expanding it for its own sake.

The primitive layer was designed as the foundation of the colour system. Instead of assigning meaning directly to hex values, I defined structured scales for light and dark modes, ensuring consistent contrast relationships across themes. These primitives don’t carry product meaning themselves, instead they exist to provide stability and predictability. Semantic tokens then reference this layer, which allows us to evolve the visual language without rewriting the system from scratch. It also makes the system alot more scalable.

With primitives defined at the base, teams could design in one mode and toggle to dark mode instantly. This helped save alot of time when designers need to test dark mode assets.

The primitive tokens weren’t just a set of colours, there were also a numeric scale. That numbering gave us a consistent reference point when defining semantic tokens, so we weren’t mapping meaning to random hex values. Instead, we could anchor intent to a position on the scale and maintain the 4 point grid system. Which informed the other semantic groups of tokens and meant we could confidently create semantic groups for:

  • Spacing (padding, stack & inline)
  • Typography
  • Radius
  • Elevation
  • Component based (min-height/widths)
  • Platform based (mid button widths for web)

Over the course of my time at Stake, the design system evolved alongside the team. We began fully in Sketch, then transitioned into Figma where two separate systems emerged to support different frontend teams. As the organisation grew, maintaining parallel systems started to create duplication and drift. I led the effort to consolidate and refine those components into a single, unified system, Altera, one that could support a growing group of designers and engineers while reducing fragmentation. The shift wasn’t just about merging libraries; it was about creating shared structure, clearer ownership, and a foundation that could scale with the product.

Consolidating the system reduced the constant micro-decisions that previously required discussion, from spacing nuances to interaction states. With clearer standards in place, teams could focus on solving product problems rather than re-negotiating UI details. It gave squads the confidence to operate more autonomously while staying aligned.

Having all this foundational work set up in the design system means that designers can spend more time thinking about the delightful moments like this prototype that i created for the order journey when a user goes to submit their order.