Bolt Design System

The system that unified a multi-game ecosystem with adaptable, reusable components built to flex across games and accelerate design-to-development delivery.

Project

Design System

Role

Senior UI UX Designer

Software

Figma

Date

August 2025

12+

Games

17+

Components

64+

Variables

Why did we need one…

When I joined, every game looked and behaved differently because each team designed and built in isolation. Colors didn’t match, typography was inconsistent, and core components varied from product to product. We needed a single source of truth that defined our foundations and provided adaptable components every team could use.

Over six months, I built a system that brought consistency and coherence across the entire game suite.

7

Teams

20+

Designers and Developers

5.6K

Inserts in a week

How it started…

I audited every game and team library, pulled all components, styles, and tokens into one place, and identified what needed to be unified versus kept game-specific. This gave me a clear foundation to build a central system that feeds consistent core components and tokens into each game’s design library.

Adaptive Design

Adaptive Design

A background-reactive design style that blends into any game theme without forcing a fixed colour identity.

A background-reactive design style that blends into any game theme without forcing a fixed colour identity.

Smart Components

Smart Components

Components built with multi-state properties for quick switching and minimal duplication

Components built with multi-state properties for quick switching and minimal duplication

Variables & Styles

Variables & Styles

Color, typography, and spacing driven by variables that update instantly across all games

Color, typography, and spacing driven by variables that update instantly across all games

Nested Components

Nested Components

Smart internal nesting that lets components resize and reflow across different layouts and screen types.

Smart internal nesting that lets components resize and reflow across different layouts and screen types.

Slots

Slots

A custom slot system that allowed designers to place their own elements inside core components before Figma officially supported it

A custom slot system that allowed designers to place their own elements inside core components before Figma officially supported it

Responsive

Responsive

Auto layout and padding logic that adapts components to different language content and game scenarios.

Auto layout and padding logic that adapts components to different language content and game scenarios.

Rollout…

Within weeks, the unified components and tokens were being used across every game, and the system became the default source of truth for new features and updates. It brought alignment, speed, and a shared visual language to a product ecosystem that previously had none.

© 2025 Razi Refi Rafeek

Updated on November 2025