Backoffice — B2B Gaming Design System

I started by defining the color and typography libraries, leveraging Figma Variables to manage themes efficiently. Using the same approach, I built a standardized library of measurements, including spacing, card dimensions, and modal sizes, to maintain visual coherence and adaptability.

All components were designed following the Atomic Design Methodology, ensuring a modular and systematic structure. For complex components like buttons with multiple variants, after several iterations and team testing, we decided to create a master base file defining core properties such as font size, padding, and border radius. This base was then nested within the main component, allowing us to modify only the visual styles (e.g., Primary, Accent, and state variations).

Finally, the Design System was published as a shared library, enabling seamless integration of components across all page designs and improving collaboration within the design and development teams.