Design system created and maintained for SaaS Web Products for high consistency and best practices

01 - Resources & Guidelines

There are critical elements in the process of building the design system for the organization: Material UI and the Organization Branding.
· Material UI have an exhaust list of elements, including their variants, combinations, behaviors and the best part: the ready-to-use codes.
· Organization Branding is how you can turn the elements in Material UI into the one with your organization’s own voice, whether is soft or strong, cool or passionate, professional or personal. You can create your own tone and deliver a unique message through style, font and color.

02 - System Structure

There is a pyramid structure in SaaS Product Design System:

03 - Design Priniples

04 - Application in Design

It is important to follow a procedure to apply design system, otherwise the design work might get lost or overwritten. It is also important to collect feedbacks from designers to improve or fix any compatible or responsive issues. Most importantly, design system is a living system which needs to interact with the real application cases and evolve constantly to fit the organization’s needs.

05 - Implementation

Design system is not only serving the designers, but also could be developed into SDK for easier engineer implementation in the long run. How to deliver a living design system to engineer, review and approve the implementation is important. Chromatic and Storybook are tools used to review the style, behavior of Design System. Versioning control in design system is important to track the changes.

06 - Design System Preview


Dropdown List Item

Dropdown List Templates

Kanban Board