The categories in the project are roughly divided into visual, common, layout, navigation, data entry, data display, feedback, other, assembly, and page demo, some ideals are from Ant-Deisng. The definition of categories can be increased or decreased according to the project, and the most basic and top priority design system is the visual and layout.
Phase 1: Visual definition
The definition of visual is an important element of the visual base in the design system.
The colors are divided into primary color, secondary color, white, black, neutral color, system color, and gradient color.
The primary and secondary colors can be separated into two different classes of light and dark colors. White and black will define different classes of transparency. The transparent class is simple from 5% — 10% — 20% — 40% — 60%, 80% to 100%, It is often used on different background (light/dark) blocks.
The neutral color can be taken from the classes of black color’s transparent that are usually solid colors.
The system color is used as a color for warnings, successes, errors, etc. Gradual color is optional, mainly defined according to project needs.
A numerically related naming method, to use relative adjectives as names rather than absolute naming. The main color naming should not be replaced by BlueColor instead of PrimaryColor…When the primary color is changed in the future, you only need to change the color value of Primary. Instead of spending a lot of time modifying the relevant css names on all pages. The naming of the text is also the same reason~
The definition of the font is that don’t define many text sizes that are close and meaningless. The most important thing is to define the headline, subtitle, subscript, text and hints.
Sometimes designers often blindly adjust the size of the text only needs of the current vision, and ignore the definition of these words without purpose and system.
In the case of Shopmatic’s project, the font size is limited to only 8 different size fonts.
The key points of the selection of the font must be complete, at least there are four different font formats of bold, medium, general, and light, which can help the text to show more varied visual changes. Similarly, the choice of fonts used in a project is also based on streamlining, which avoids the import of too many fonts and leads to heavy reading.