ACE Design System
Overview
When I joined Vanguard Software Solution, this is one of their key products and it was still in its early stages. The company was ready to invest in a robust design system for its iGaming product, with the long-term goal of enabling better consistency, and design-to-development automation.
My role was to help building design foundations, components, patterns and define behaviours, govern the design system and report to the principle designer.
Objective
To create a B2B iGaming app template for the Southeast Asian market that supports client-specific branding, themes, and color palettes. The design system needed to allow quick customization, handle multiple themes including light and dark modes, and maintain consistent layouts, components, and user experience across all variations.
Laying Foundations
We started by defining the core elements such as colors, typography, grid, and spacing. These were built to work across themes and light/dark modes, forming a flexible base for every component and template.
Atoms
Molecules
In the molecules level, we combined atom patterns into functional and reusable components.
Organisms
Organisms are more complex UI modules made by combining atoms and molecules into larger structure. At this level, they need to manage content layouts, dynamic data and responsive behaviours.
Localisations for UI components
Since the product serves multiple markets, localization was a key part of the design. We planned UI components to handle:
Text expansion: Thai and Vietnamese often require more characters than English.
Line breaks: Longer phrases in Thai and Vietnamese may push text to a second line.
Dynamic buttons: Buttons scale with text length to avoid truncation and so on.
Currency formats: Some markets, like Indonesia, use larger numbers that require more space in UI components.
For the MVP, we created three distinct template styles, each with unique layouts and visual directions but built on the same design system foundations. This approach set the groundwork for adding more templates in the future without needing to rebuild core components.
Microinteractions
Microinteractions were defined as part of the design system, detailing component behavior, transition easing, speed, and patterns such as slide or fade. This ensured consistent motion guidelines and predictable user experiences across the app.
