— PROJECT
Coolmate Design System 2024
— SHIPPED BY
Trang Nguyen – Product Manager
Mai Tran – UX/UI Designer
Marshall Nguyen – Graphic Designer
Hieu Nguyen – Frontend Developer
Built by a small team juggling real product work, this design system had to be simple and useful.
It came together bit by bit – between deadlines, fixes, “what’s design system?” and launches – far from perfect, it does what we need it to.
Problem
After the rebrand, keeping things consistent quickly got tricky.
Our team was juggling feature releases, bug fixes, and design tweaks – so design system work happened whenever we could squeeze it in.
Without a shared source of truth, designers guessed spacing, developers reused whatever code was closest, and the same components got rebuilt differently across pages.
Task
Build design system that reduces rework and helps us stay visually aligned with the new branding without adding more overhead.
Keep it lean, adaptable, and easy to maintain alongside day-to-day projects.
Approach
We created a system that captures the essentials - color, typography, spacing, and reusable components.
It’s built to be simple to use, yet still reflects the brand’s confident, straightforward personality. It’s not final – it keeps evolving as we design, code, and learn from real usage.
Result
We now have a single reference point that cuts through subjective debates. When questions come up – "What blue should this be?" "How much padding?" – there's an answer in the system.
Bonus: the media team now uses the same guidelines for graphics and campaign materials, so everything feels cohesive across touchpoints. They can still be creative, just within a consistent framework.
Built from the brand,
refined for the interface.
This design system turns Coolmate’s human, confident, and straightforward voice into a digital experience that feels effortless and modern.
Variables library
The system translates design decisions into tokens that define every foundational value – from colors and spacing to typography and elevation.
Style guide:
Defining the visual foundation
The style guide establishes the core visual rules that shape the interface – from grid systems and layout structure to typography, color, and icons.
Component library
Each component is built for clarity, scalability, and flexibility, allowing teams to maintain consistent interaction patterns across all screens.
With defined states, variants, and responsive behavior, these components ensure design quality and implementation speed.
Templates
Guidelines:
Simple, usable, and made to evolve
This guideline aims to make the system accessible and actionable for a small team.
Rather than an exhaustive library, it focuses on the essentials – clear Usage and Specs – to support consistent delivery.
The structure allows for incremental updates, keeping the system adaptable as the product evolves.
