DICE Design System

A global Multi-brand, Multi-product design system built from the ground up.

Design Ops

CATEGORY

Design Ops

MY ROLE

Product Designer

TEAM

2 PD, 1 LPD, 2+ Engnieers + more

💃🏼 Gayatri.G

What did I do? 👩🏻‍💻

Design Research

Audit

Token Mapping

Iconography

Collaboration

Component Library

Educational Workshops

Zero height Documentation

Project Timeline ⏳

A rough visual timeline of the entire process, from initiation till success measurement.

Audit

Research

System Foundation

Testing & Iterations

Design - Dev Syncs

System Rollout

Workshops & Trainings

User feedbacks

Component Building

Component Prioitization

1+ Year Timeline

Preliminary Insight

Why is Design System Needed?

A design system ensures consistency, efficiency, and collaboration across digital products by providing unified guidelines and reusable components, fostering innovation and scalable solutions in a cohesive brand identity.

Components

Consistency

With Design System

Component Reuse Level

Without Design Sytem

Design Audit

Here are the pain points of our products 🥹

Our existing products having the inconsistent in design, here is the example of our design audit.

planning

12+ Project Planning sessions

In the initial stage of design system improvement, we identified areas where we could make improvements to help users save time and effort in their work.

Initial work

Only 65% of tokens are following the logic of implementation

Designer efforts

1 week is required to change manually all the components. Which is estimated 50h of work

 

Token defects

Inconsistent theming and token logic led to designer and developer defects, causing issues during UAT and even in production.

Many Libraries

Designers and developers can’t get a clear reference for their work. Too many options = doubt = mistakes

process

We followed Atomic Design Model

Atomic Design gave us a clear structure for transforming small UI elements into complex interfaces, making the system easy to scale and adapt across multiple brands.

Atoms

Molecules

Organisms

Templates

Pages

Scroll down to see how did we ended up here 👩🏻

FOUNDATIONS & THEMEING

Design Tokens

Design Tokens are the single source of truth for all core design values used across a product stored as named, reusable variables that work for both design and code.

Reference

Value

Semantic

Component

ds.ref.palette.

yellow-500

#FF5A5A

ds.sys.color.

caution

ds.comp.alert-caution-background-color

These tokens are then used consistently in Figma and Frontend code (CSS / JS / iOS / Android)

Design-to-Code

Storybook

Storybook serves as a centralised, interactive "workbench" that bridges the gap between design and code by providing a single source of truth for building, testing, and documenting UI components in total isolation.

By integrating Storybook into our DesignOps workflow, we transformed the handoff from a static document to an interactive validation session. This allowed designers to live-test component edge cases using the Controls panel, reducing 'design-to-spec' bugs by 70 %.

FOUNDATIONS

Types Design Tokens

COlors

Brand

System

Surface

Supporting

States - Base/Hover/Active/InActive

Primary

Secondary

Tertiary

Positive

Negative

Caution

Utility

Disable

Surface Lowest

Surface Low

Surface High

Surface Highest

Red

Orange

Green

Blue ..

Playing video: Applying Color semantic’s

color-red-600 → #E60023 (design token) - Value

error-bg → color-red-600 (semantic token) - Meaning

Typography

Large

Medium

Small

Extra Small

Font - Weight/Style/Line Height

Display

Title

Headline

Body

Label

spacing & sizes

Stack Spacing

Inline Spacing

Container Spacing

Sizes - Includes the radius(corner) as well

Heading and paragraph

List items

Form fields

Sections inside a card

Icon and text

Buttons in a row

Label and input

Chips or tags

Cards

Modals

Bottom sheets

Sections

Page layouts

Playing video: Applying Spacing and Size

All spacing and sizing values start from 4px and scale in multiples from there values below this are referred to as X-Half, X-Quarter, and None.

Theming

Types of Themes

BetMGM

BWIN

#FFCC00

#C0A971

ref.color.

primary.500

ref.color.

primary.800

semantic.color.

primary.base

Scalable & Reusable UI

Components

Components are reusable, self-contained UI elements built using design tokens and variables to ensure consistency across the product. Each component is designed with flexible properties (variants, states, sizes) and Auto Layout, allowing it to scale across different contexts while reducing duplication and speeding up design and development.

Components in detail

Scroll

Components GIFs in Carousel

Filled Button

4 functional interaction states

6 style variations

3 sizes

3 prominence variations

leading and trailing icon slots

AA accessibility compliance

Out of the box code

Figma components

Bug support

Autonomous updates

Components Properties

Inclusive by Default

Accessibility

Accessibility is embedded into the design system by defining accessible color contrast, typography scales, and focus states at the token level. Components are built with clear states (hover, focus, disabled, error) and support keyboard navigation and screen readers, ensuring inclusive experiences without requiring redesign at later stages.

Color

Type

Hardware UI

WCAG 2.1 Level AA

Brands

Devices

Abilities

Inclusive

Usable

Empowering

Snippets of WCAG & A11y in Dice

Note that Dice has followed guidelines to build accessible products (A11y) that meet WCAG 2.1.

Dice Educational Sessions

Dice Knowledge

Rolling out a design system is only half the journey; the real impact begins by ensuring it is understood, adopted, and championed across the organization. As a systems team, we took a human-centered approach to bridge the gap between building components and empowering the people who use them.

Educational Resources

A system only scales when silos are broken. By hosting townhalls with our engineering partners, we ensured that DICE wasn't just a design tool, but a unified workflow that aligned visual intent with technical execution from the very first workshop.

Zeroheight

Documentation

Rolling out a design system is only half the journey; the real impact begins by ensuring it is understood, adopted, and championed across the organization. As a systems team, we took a human-centered approach to bridge the gap between building components and empowering the people who use them.

ROW Zeroheight

Best collaboration Zero height award

In-person collaboration

Dice Workshop

DICE was never just about tokens and components; it was about the people behind them. Our Vienna onsite workshops transformed the system into a shared mission, allowing us to align with engineers, PMs, and stakeholders in real time to solve complex challenges and bridge the gap between vision and execution.

DS x Engineering x Product, Vienna - spring 2025

Project with dice

Live projects

This are few of the project which made a huge impact in business and smooth transition with design and dev collaborations.

Prize Draws

18+ Restrictions and T&C's apply.

Expires in 7 Days

Weekly Prize Draw

Win a share of 1 million Gala Points every week!

100

Buy entry

18+ Restrictions and T&C's apply.

Expires in 7 Days

1 Entry

Monthly Prize Draw

Stand a chance to win £5,000 in Weekly prize draw

200

Need 100 more Gala Points

Collect

Put your points to use

Gala Points expire on 7th Aug 23:59 UK time

Free Spins

Bingo

Real-Life Treats

Expiring Soon

Cash

Expires in 10 Days

3 Free Spins

To use on top Gala Slots

18+ Restrictions and T&C's apply.

100

Expires in 10 Days

5 Bingo Tickets

Your next full house is waiting!

18+ Restrictions and T&C's apply.

200

Need 500 more Gala Points

Expires in 10 Days

£1 Bingo Bonus

More chances, more bingo fun!

18+ Restrictions and T&C's apply.

200

Need 500 more Gala Points

Expires in 10 Days

5 Golden Chips

Take your seat and play in style!

18+ Restrictions and T&C's apply.

200

Need 500 more Gala Points

Expires in 10 Days

£5 Uber Voucher

Treat yourself to a ride or a delivery straight to your door.

18+ Restrictions and T&C's apply.

200

Need 500 more Gala Points

Expires in 10 Days

£5 Uber Eats Voucher

Hungry? Use your Voucher to order

your favourite food.

18+ Restrictions and T&C's apply.

200

Need 500 more Gala Points

More info about Gala Points

Points history

Get detailed history on your points

How to Play

Get detailed steps about how to play

Terms & Conditions

Gala Points

18+. Runs from 24.06.25 until further notice. Participate in selected promotions to get Gala Points. Gala Points collected each calendar month will expire on 7th of the following month. No cash equivalent. Player restrictions and T&Cs apply.

 

PROMOTIONAL TERMS & CONDITIONS

 

By participating in this Promotion, you will have to agree to these Promotional Terms and Conditions. It is important that you read them carefully as they explain how this promotion works, including relevant restrictions and wagering requirements.

These Promotion Terms & Conditions apply to this Gala Points promotion (the “Promotion”). These must be read along with our General Terms and Conditions, which can be found HERE and the Standard Promotional Terms and Conditions, which can be found HERE & HERE.

 

PROMOTIONAL PERIOD

1.     The Promotion is available to Eligible Players (as defined below) from 24th June 2025 until further notice (the “Promotional Period”).

 

WHO QUALIFIES FOR Gala Points

2.     This Promotion is available to customers of our Foxy brands (Foxy Bingo or Foxy Games, referred to as the “Website”) who:

a.     have a verified Website account;

b.     are over 18 years old; and

c.      resident in the UK.

(an “Eligible Player”)

3.     Eligible Players must not access the Website from a restricted country. A list of countries from which Eligible Players may access their website account can be found HERE.

 

WHAT ARE Gala Points

4.     "Gala Points” are tokens of no monetary value that are awarded to Eligible Players by participation in the promotions listed in these Promotional Terms and Conditions. Gala Points can be used to redeem offers as set out on the Website designated area (the “Gala Points Shop”).

 

HOW TO COLLECT Gala Points

5.     Eligible Players can earn a minimum of 10 and a maximum of 10,000 Gala Points by participating in the following promotions:

a.     Plinko (full Terms & Conditions found HERE[KS1] ):

                                               i.     Eligible Players can collect Gala Points once per day when they play Plinko;

                                              ii.     The number of Gala Points collected will be shown on the pop-up message displayed when the Eligible Player wins. Gala Points will be credited automatically to their Gala Points Balance.

b.     Slots Tournaments (full Terms & Conditions can be found HERE)[KS2] .

                                               i.     Eligible Players can collect Gala Points once per tournament/day when they play Slots Tournaments.

                                              ii.     Eligible Players can access the details of each Tournament prize split by clicking on the ‘i’ icon, located within the Tournament Card.

                                             iii.     At the end of each Slots Tournament, Eligible Players who have gained a ranking on the leaderboard will receive a Reward. Ranking positions that will be paid out per tournament will be detailed within the ‘i’ in each Tournament Card in the Tournaments Lobby.

                                             iv.     Eligible Players who have participated in a Slots Tournament will receive an inbox message at the end giving full details of their prize. An Eligible Player will also be able to find full details and value of the credited prize on either the ‘Offers’ page, or the Gala Points Shop, in the ‘Transactions’ section.

                                              v.     Gala Points will be credited automatically to the Eligible Player’s Gala Points Balance on completion of the Tournaments as per leaderboard prizes displayed on the Tournaments Hub.

 

c.      Gala Points Slots Arcade (full Terms & Conditions can be found HERE[KS3] )

                                               i.     Eligible Players can play in the Gala Points Slots Arcade for the chance to increase their Gala Points balance.

                                              ii.     Each spin of the Slots Arcade games will cost an Eligible Player a minimum of 10 and maximum of 200 [EP4] Gala Points, which will be deducted from their Gala Points balance.

                                             iii.     Eligible Players can choose how many Gala Points they wish to wager within the Slots Arcade. The games within the Slots Arcade will have the same percentage return to player as the equivalent real money slot games.

                                             iv.     All winnings in the Slots Arcade will be paid in Gala Points.

 

d.     Gala Points Bingo Arcade (full Terms & Conditions can be found HERE[KS5] )

                                               i.     Eligible Players can play in the Gala Points Bingo Arcade for the chance to increase their Gala Points balance.

                                              ii.     Each bingo ticket will cost an Eligible Player a minimum of 10 and maximum of 480 Gala Points, which will be deducted from their Gala Points balance.

                                             iii.     Eligible Players can choose how many Gala Points they wish to wager within the Bingo Arcade. The games within Gala Points Bingo Arcade will have the same percentage return to player as the equivalent real money bingo games.

                                            iv.     All winnings in the Bingo Arcade will be paid in Gala Points.

 

e.     Gala Points can also be collected by participating in other Promotions, as specified in the relevant Promotional Terms and Conditions.

 

6.     Gala Points will be credited automatically to the Eligible Player’s Gala Points Balance on completion of any of the outlined promotions in point 5.

7.     There is no cash alternative to Gala Points.

8.     There is no limit to the amount of Gala Points an Eligible Player can collect during the Promotional Period.

9.     Gala Points collected during any calendar month within the Promotional Period will expire on the 7th day of the following month. Any unused Gala Points will be forfeited after the 7th day of the month following their collection. Any unused Gala Points at this time will be forfeited and will not be re-issued.

10.  An Eligible Player can redeem their Gala Points via the Gala Points Shop at any time during the Promotional Period providing they have the balance required to redeem the relevant offer.

11.  By redeeming Gala Points for an offer within the Gala Points Shop an Eligible Player agrees to the specific Terms & Conditions of that offer. Full Terms & Conditions can be found in the Gala Points Shopp, within the section covering each available offer.

12.  An Eligible Player can access the record of their Gala Points transactions via the Gala Points Shop.

13.  An Eligible Player’s Gala Points Balance will be displayed on their account next to their Cash Balance.

14.  Once Gala Points have been redeemed for an offer, a record of this transaction will be logged within the transaction history in the Gala Points Shop and a player will not be able to amend the offer selection.

OFFERS AND REWARDS [EP6] AVAILABLE WITHIN THE Gala Points SHOP:

Gala Points SLOTS ARCADE AND BINGO ARCADE

15.  Eligible Players can access the Gala Points Slots Arcade and Bingo Arcade and play for the chance to increase their Gala Points balance, as explained in terms 5c and 5d.

FREE SPINS SPECIFIC CONDITIONS

16.  The value of the Free Spins will be shown on the relevant offer tile, accessible within the Gala Points Shop.

17.  The full Terms & Conditions for the ‘Free Spins’ offer will be available to access and read prior to redeeming the offer with Gala Points.

18.  The Free Spins can be used on the games mentioned in the relevant offer tile.

19.  Once a Free Spins offer has been selected and purchased via the Gala Points Shop, they will be credited to the Eligible Player’s account and they will have to be used within 7 days, or they will expire and not be re-issued.

20.  Free Spins cannot be exchanged for cash.

CASINO BONUS SPECIFIC CONDITIONS

21.  The value of the Casino Bonus will be shown on the relevant offer tile, accessible within the Gala Points Shop.

22.  The full Terms & Conditions for the ‘Casino Bonus’ offer will be available to access and read prior to purchasing the offer with Gala Points.

23.  The Casino Bonus can be used on any table/game across the site (excluding bingo).

24.  The Casino Bonus has a wagering requirement of 1 time (1X).

25.  Once a Casino Bonus offer has been selected and purchased with Gala Points it will be credited to the Eligible Player’s account and it will have to be used within 7 days, or it will expire and not be re-issued.

26.  The Casino Bonus cannot be exchanged for cash.

BINGO BONUS SPECIFIC CONDITIONS

27.  The value of the Bingo Bonus will be shown on the relevant offer tile, accessible within the Gala Points Shop.

28.  The full Terms & Conditions for the ‘Bingo Bonus’ offer will be available to access and read prior to purchasing the offer with Gala Points.

29.  The Bingo Bonus can be used in the bingo rooms mentioned in the relevant offer tile.

30.  The Bingo Bonus has a wagering requirement of 2 times (2X).

31.  Once a Bingo Bonus offer has been selected and purchased with Gala Points it will be credited to the Eligible Player’s account and it will have to be used within 7 days, or it will expire and not be re-issued.

32.  The Bingo Bonus cannot be exchanged for cash.

BINGO TICKETS SPECIFIC CONDITIONS

33.  The value of the Bingo Tickets will be shown on the relevant offer tile, accessible within the Gala Points Shop.

34.  The full Terms & Conditions for the ‘Bingo Tickets’ offer will be available to access and read prior to redeeming the offer with Gala Points.

35.  The Bingo Tickets can be used in the bingo rooms mentioned in the relevant offer tile.

36.  Once a Bingo Ticket offer has been selected and purchased via the Gala Points Shop, the Bingo Tickets will be credited to the Eligible Player’s account and they will have to be used within 7 days, or they will expire and not be re-issued.

37.  Bingo Tickets cannot be exchanged for cash.

 

GOLDEN CHIPS SPECIFIC CONDITIONS

38.  The value of the Golden Chips will be shown on the relevant offer tile, accessible within the Gala Points Shop.

39.  The full Terms & Conditions for the Golden Chips offer will be available to access and read prior to purchasing the offer with Gala Points.

40.  The Golden Chips can be used on the tables/games mentioned in the relevant offer tile.

41.  The Golden Chips carry no wagering requirement.

42.  Once a Golden Chips offer has been selected and purchased with Gala Points, the Golden Chips will be credited to the Eligible Player’s account and will have to be used within 7 days, or they will expire and not be re-issued.

43.  The Golden Chips cannot be exchanged for cash.

 

CASH REWARD SPECIFIC CONDITIONS

44.  The value of the Cash Reward will be shown on the relevant offer tile, accessible within the Gala Points Shop.

45.  The Cash Reward carries no wagering requirements and will be issued automatically to an Eligible Player’s account balance after being selected.

46.  The Cash Reward has a value of £15.

 

OTHER IMPORTANT TERMS

47.  Promoter: LC International Limited registered in Gibraltar and having its registered office at Suite 6, Atlantic Suites, Europort Avenue, Gibraltar.

48.  The Promoter reserves the right to withdraw the Promotion from anyone who does not qualify or is excluded from the offers or promotion under the General Website Terms & Conditions.

49.  The Promoter may place restrictions on the Eligible Player’s account in order to comply with our legal and regulatory obligations, this could include deposit restrictions and restrictions on the bonus offers that the Eligible Player can participate in. The Promoter will not be responsible should these restrictions, which may include Safer Gambling measures, affect the ability to complete the requirements of this promotion and/or to release any bonus, benefits or prizes.

50.  The Promoter reserves the right to change, end or restrict access to any Promotion, if required for legal and/or regulatory reasons, including where necessary to prevent fraud or other unlawful behavior.

51.  In the event of any error, system failure, or any other type of error that may result in the crediting of funds, winnings, or rewards to a player’s Website account in connection with this Promotion, the Promoter will try and correct the error as soon as possible after becoming aware of the same. This means that the Promoter may withhold or reclaim funds or winnings in connection with the issue in order to place an affected account to the same status it was immediately prior to the issue arising.

 

 

 [KS1]URL pending

 [KS2]URL Pending

 [KS3]URL Pending

 [EP4]As per Foxy Arcade T&Cs

 [KS5]URL Pending

 [EP6]Better to add

Good morning, Enya!

Your balance

0

MENU

120

My Balance

£20.00

Collect

Play

Redeem

Designs using dice design system

Deposit

£20.00

Search

Home

Slots

New

Jackpots

Exclusive

Live Casino

18+. Free to play. 1 spin per customer/day. Rewards available: Cash, Casino Bonus, Free Spins, LadBucks, Free Bet, Free Bingo Ticket. Rewards valid 7 days (exc. cash). Guaranteed reward on Supercharged Days. Reward restrictions and T&Cs apply.

TOP GAMES

Our Most Popular Games

See All (160)

Exclusive

Learnings

Takeaways

  • Gained expertise in Figma Variables and scalable multi-brand theming
  • Learned how to design systems that actively reduce design debt across teams
  • Strengthened cross-functional collaboration by working closely with engineering, product, and brand teams
  • Understood the importance of education, documentation, and advocacy to drive adoption
  • If done again, I would involve engineering earlier in token planning to minimise rework and alignment loops

📖

Design systems cannot be built in isolation.Success comes from collaborating early, aligning deeply with engineering, and treating stakeholders as co-creators not consumers.

Thank you for watching 🙏🏻