Build CMS Design System
Background
Mola have a CMS (Cloud Management System) to add, manage, organize the content on that product. so the CMS itself have Dashboard and Content Manager, so i create the set of design standart to reduce redundancy and being consistency on multiple pages. I using Atomic Design Methodology for guidance to build this design system.
The Goal
- Costumizable and Adaptable
- Easily to custom and adaptable components and assets, if the master components had bit changes the child components will adapt with the master. very usefull for designer cause they don't have to custom them one by one.
- Consistency and efficient
- Keeping consistency the Interfaces on different pages and platfrom, also improve the quality of Experiences for the product itself.
- Flexible and Accessible for entire team
- Very usefull cause the designer don’t need to create the same component many times, they just called the components what they needs.
- Scaleable
- Can accomodate a problem for future, for example multiple platform product, development business needs on future.
Layout System
8px Modular Spacing System
so we used design measurements on multiple 8 or at least 4. that makes consistecy on multiple pages and platforms, 4px for border corner radius we used.
Measurements rem format is what developer used for our spacing system.
Grid System
Grid to locate the elements to achieve consistency and guide implementation on development. So we have 2 grid system with different page needs, you can looks the specs below.
Colors
Defining colors itself i check accessbility, like the contrast between elements accoding the needs. also ask feedback to other designer and product head about the colors and combination.
Colors in UI design can speak in ways that are every bit as powerful as copy. They not only affect how your design looks, but can go as far as to elicit emotion and reflect the personality of your brand. Colors also play an important role in how your designs "look & feel", and the first impression.— by Untitled UI
General Colors
Primary
Primary is the identity the product color, these are used to make the elements stand out.
Base
Base color is the list of Elements color that usually mostly used on all pages. like background, header, and other things.
Objects
List of neutral colors, usually used for element card, smaller components.
Text
List of color for text, that can flexible to used for other needs text.
States
These are colors that communicate or feedback purpose. mostly used for success, error, warning, and Information messages.
Button States
List of color for button states, like Hover, Pressed, Disable, etc.
Analytics Colors
Chart
Chart color usually used for detail page on analytics, but flexible to used for other pages.
Dashboard
Dashboard color usually for dashboard, but flexible to used for other pages.
Defining Naming Format
Typography
So i don’t create and define a typography for this csm product, so i recycle to used mola typography. that we’re already done it for mola typography. basically typography on Mola and CMS is same. but i will tell how to define a scaleable typography
We’re using a font visual calculator which type-scale.com. so we using Major Second as scaling, and 16px for base size.
Here’s the font type off mola. So on CMS we only using Paragraph font group, because mola had bigger screen platform which TV other while CMS not have bigger screen platform.
We naming it same as the color, Paragraph stands for Platform Size, Regular and Bold stands for Font Weight, and number stands for font sizing. Line height we using 1.5 mostly on the font, and 1.3 for much bigger font.
Icons
So for the icons i recycle again used Mola Iconography, we’re decide the CMS icons have same file place with Mola because the style also similar each other (basic icons only). So if i need some icons for the cms, i will create on master file that mola using icons.
Components
So this design system using Figma as main tools, the Auto Layout and Variants features applicable on our components. Such a button, forms, card, table, and other.
Auto Layout
The auto layout on figma is very usefull feature, because the components can grow to fill or shrink to fit. for example preview implemented auto layout on sidebar menu and button section.
Variants
The variants some feature to make it the components looks simple. they reduce complexity of instance, make it easier to browse what we needs.
Conclusion
We still more exploring and learn the best practice to make design system, cause i’am not a dedicated design system 😁. creating this DSM very challenging and communication to others designer is very important to make this component used properly by the others.
