Design System For Beginner: Color Style Guide
Many start-up companies in Indonesia have started focusing on creating Design Systems for their products. If you’re a fresh graduate or designer who wants to create a design system, I’ll give you tips on how and what you need to do first.
“Styles come and go. Good design is a language, not a style.”
–Massimo Vignelli, Italian Designer
First, you need to create a Style Guide. Wondering about what a Style Guide is? You can find out more here.
As the Nielsen Norman Group says, a style guide contains specific implementation guidelines, visual references, and design principles for creating interfaces and other design deliverables. They said the most-common style guide focuses on branding like Colors, Typography, Logos, etc.
In this chapter, I’ll show you how to start to create a Color Style Guide as a first step to getting better at Design Systems.
Starting with Primary Color and Secondary Color
Before you create the Colors Style Guide, you must decide the primary color that’ll be your digital product identity. To identify your product’s primary color, check which colors are most frequently used in your UI.
For example, Lion Parcel has red as its primary color and this color will be used the most in the app to strengthen brand awareness.
You can use a Secondary Color to accent and distinguish your product. Some apps don’t have a Secondary Color because it’s optional. You can use primary color to accent elements if you don’t have a Secondary Color.
Neutrals Color for Background, Text Color, etc
Neutral colors are often used for backgrounds, text color, border color, etc, and typically don’t represent your brand. They’re mostly shades of black, soft grey, or even white.
Semantic Color to Support your UI
While designing a UI, you need to create colors for Error, Success, Warning, etc to communicate and provide information to the user. In Lion Parcel, we use Green for success, Red for critical or error, Yellow for warning, and Blue for highlights.
Products or Services Color
Some apps have multiple products or services that need color consistency to give users awareness. Product or service colors are optional and are not a required color for your UI. As we can see, Gojek uses different colors for their services like GoRide with Green, GoPay with Blue, and GoFood with Red.
At Lion Parcel, we have different colors for our product services. For example, we use Purple for our Onepack service.
Shades and Tints Color
Usually, designs require additional shades and tints to be used in varied or unexpected cases. We can create Shades and Tints Color from Primary and Secondary Color.
Color Naming is Important
To make things easier for all designers, you need to name the colors in Figma and create the color styles. Gives names like “Primary App” or “White Surface” is better than its hex code.
Check Color Contrast is a Must!
After creating all the colors needed, you need to test the color contrast with WCAG. WCAG guidelines recommend that for standard text color contrast is 4,5:1 and for large text is 3:1, while for UI element it is 3:1. You can explore more about the WCAG Color Contrast guidelines and test the color contrast with a plugin called “Contrast” in Figma.
Color is an important element of a Design System, it will affect your whole UI and will affect users while using your digital product.
Everyone’s got a different start, so don’t be afraid to start something outside your comfort zone. I’m also still a learner in Design Systems, but I hope this article will help you create a Design System starting with the Color Style Guide.
Thank you, and please enjoy reading this article!
Source :
