Build design system for DigiSale web admin
Timeline
12 weeks
Overview
Let's talk about The DigiSale
DigiSale is a B2B SaaS developed by MLTech Soft, which provides distribution management system for FMCG enterprises. As a small company with limited resources, a Design System is critical to ensure consistent and efficient product development.
Challenge
There is no design system for DigiSale web admin and the current design is a combination of different styles
DigiSale needs to update the existing product with the new design system effectively and consistently.
DigiSale needs to speed up the design flow that is not only friendly with developer but it also can utilize the AI-power.
Design System Breakdown
Design token overview
Tokens point to style values like colors, typography, spacing, or shadow. Design tokens meaningfully connect style choices that maintain consistency and streamline the design and development process within a design system.
I structured all design tokens using kebab-case syntax. This specific naming convention achieved two critical goals:
For Developers: Seamlessly matches CSS/SASS variables, eliminating renaming effort and hand-off friction.
For AI Integration: Clean, semantic kebab-case hierarchies allow AI models and Figma plugins to accurately read, map, and automate layouts.
Building the Foundation
Color Token
The name of semantic colors token consists of up to 4 words that describe how and where to use the color on an interface.
Typography Token
As a complex B2B SaaS platform, the interface frequently handles data-heavy dashboards, intricate tables, and multiple data points on a single screen, I made a strategic typographic shift from Roboto (current design) to Inter and standardized the base font size at 14pt.
Inter is specifically designed for computer screens and excels in high-density user interfaces, while setting the base font size to 14pt allowed us to maximize the number of data points in single web screen.
Other Token
Building the Components
DigiSale is scheduled to launch their web admin firstly. Because of this, I concentrated to build the web components.
To speed up our daily workflow, I made sure every single component came with all its states ready to go as variants. All the team had to do was search the Assets panel, grab the component they needed, and toggle the properties to customize it instantly.
In total, I have built…
Components
Deliverables
The templates
To protect the unique selling points of product and comply with strict NDA, this template is presented as simplified concepts of DigiSale which built directly from our new design system to show system logic without exposing unreleased features.
Reflection
This project taught me a valuable lesson in prioritization. A design system doesn't need to be 100% perfect on day one, it needs to be functional enough to help the team move fast, and we iterate as we grow, especially in a small startup enterprise.
