[DESIGN] Design System and Style Guide

TEMCO | 06.11| 706

Hello, everyone, the design update of GUHADA is here.
At this time, we want to share the design system and style guide.

Design System Process

To proceed with the design process, there are 4 steps as shown below.

1. Discover.
Design research and review.
2. Define.
Data analysis, project understanding, and concept idea justification and review through the design.
3. Develop.
Design specification, prototyping, and development.
4. Deliver.
Show the product, conduct user verification, feedback based on tests with edits and security.

As mentioned before, “Moodboard” is used often when we set up for the rough design system construction. It is a step where we can set up and share the rough concept through the Moodboard, before considering the concept and specific mood.

(For the details on Moodboard exposure, you can check out the past content below)

Moodboard is a method for mosaic, collage, typography, icon, UI and more sample images, presiding the visualization of image analysis

UI Style Guide

The next step is creating the “UI Style Guide”. This week’s topic, the style guide focuses on planning for the color, typography, UI elements and more. The advantage of this step is that you can decrease the time spent on detailed tasks before solving any issues.

The design system’s advantage
1. Consistency
2. Reusability
3. Velocity
4. Gain time to focus on innovative ideas

The common misconception about the design system is that “it is not flexible since the design is mostly pre-set and there is no need for a new design.” However, if there is such a system that is flexible, the designer can focus on innovative ideas rather than thinking about the color or how to design the corners of a button.

Creating Design system and Caution

1. Consistent update

The design system needs to be updated as if it is alive, with the product information. Continuous innovation is needed through consistent feedback from the actual application of the

2. Detailed Policy Justification

Just developing components for the design system is not enough for all the teams to use the aligned design. There is a need for setting policy for using which component at which given period.

3. Organization for easy understanding

The guideline and policy have to be easy for designers to understand. When organizing the policy, it has to be in a form of do’s and don’ts, in order to be effective.

4. Cooperation with others

A design system is not something that a specialized team develops and distribute. It is important to cooperate with designers and developers for the system.

After completing the style guide, to execute the real mock-up, the follow-up problems can happen. The team stage and product design may come out with similar results or it could be different based on the level of the contents. Also, the design is separated by the OS level, the synchronization level may become lower and lower and the product uniformity may be reduced. Especially, if the process is focused on agile’s sprint method, the process may be more focused on the update.

It is good to use colors that raise the brand value. However, we’ve considered the accessibility and selected the sub colors that can raise the visual awareness of the main color. Also, we’ve adopted the component system where many consider it as a Lego block system, which is a repetition of the component combination and it has the advantage of product uniformity and quick processing. We’ve set up the design in a way that the code for developers matches the components of the design with the symmetrical setting so that uniform application of the product is possible.

For each component of the shopping mall, the design team has placed all the colors that GUHADA represents. Other than such design, the design team is working on the details page, login page, and more.

In addition, the design team is working on GUHADA goods.

Please stay tuned for GUHADA platform, which is planned to launch in September of this year.

TEMCO: Innovative Supply Chain Data Management and E-Commerce platform through Blockchain and Smart Contract Technology.

▶TEMCO Chatroom:
▶TEMCO Official Website:

[DESIGN] Design System and Style Guide was originally published in TEMCO on Medium, where people are continuing the conversation by highlighting and responding to this story.

Comment 0


Are you sure you want to delete this post?