ACE Design System
Overview
ACE is a scalable and reusable Design Language System (DLS) created for an iGaming mobile app product at Vanguard Software Pte Ltd.It was built with Atomic design principles to ensures consistency and scalability across between our design team and engineering team. My role was to build design foundations, components, patterns and define behaviours, govern the design system and report to the principle designer.
Objective
To create a mobile-first design system for MVP phase, ensure consistency across UI components and improve collaboration between designs and developers. Also ACE design system is supposed to empowers internal teams and external clients to build, customise and reskin iGaming experience with ease.
DSL Structure
ACE DLS was structured around Atomic Design principles, where every UI element is built systematically from the smallest foundational parts to complete pages. Starting from tokens and atoms, we combined them into molecules, grouped them into functional organisms, and assembled full-page templates and screens.
Foundations
Foundations includes visuals base such as Colors, Typography, Grid, Spacing. We prepared across for 3 different themes (e.g. Luxe Red, Royal Purple, Posh Grey) and for light modes and dark modes.
Atoms
At the Atoms levels, we created the smallest UI elements such as Button variants, checkbox, dropdown, and so on. Each elements has it’s own anatomy diagrams and usage documents in our design system to ensure how each component was constructed, where it should (or should not) be used and how it adapts across various screen types.
Molecules
In the molecules level, we combined combined atom patterns into functional and reusable components.
Since our product is a multi-market iGaming product, localisation was a critical part in design. Rather than assuming design would work in English only, we have to test the component across different languages to ensure it wouldn’t break our design component and remain flexible.
Beyond building component, I also created usage guidelines and behaviour rules for the necessary components within the design system. Example : the Wallet, Button Group, I defined rules
Maximum two lines for the title
If the title exceed two, truncate it
Maximum one line for the amount value
If the amount value exceeds one line, truncate and append the currency unit immediately after the truncated value
If the title wraps into more than one line, hide all icons to maintain clean vertical alignment
Organisms
Organisms in DLS are more complex UI modules made by combining atoms and molecules into larger structure. They need to manage content layouts, dynamic data and responsive behaviours.
Templates
In our DLS, Templates served as the structural blueprints for pages. They are the combination of organisms, molecules and atoms arranged into fully functional wireframes.
We have 3 distinct template styles to match different brand identities and future clients. They are Futuristic, Modern and Classic templates which have different layout structure.
Microinteractions
In DLS, I also documented microinteraction. Each interaction was described with their Behaviour such as how the component moves or reacts, Transition easing function such as Ease-in, Ease-out, Transition Speed in ms (milliseconds) and Pattern such as Slide, Fade etc. For certain components, I researched and prototyped interactions in CSS and JavaScript to clarify motion behavior and document implementation details accurately.
Conclusion
My role as design system owner, I was responsible to create flexible and scalable foundation for a growing iGaming ecosystem. This project strengthened my skills in building design systems that empower faster product development and easier customisation.
