Establishing a Visual Language: Colors

Colors are like a box of chocolates - you never know what you're going to get. But in the world of design, you can't just leave it up to chance. That's where establishing a visual language comes in handy, particularly when it comes to creating a color palette. A memorable color palette is the key to creating a cohesive and recognizable design system, so it's worth taking the time to do it right. In this blog post, we're going to take a deep dive into the wonderful world of colors and show you how to choose the perfect shades for your design system, as well as provide some tips and tricks to make it a breeze. So put on your sunglasses (or maybe not, if you're already wearing them indoors) and let's get started on the colorful journey ahead!

‍

Concept of Establishing a Visual Language

Establishing a Visual Language: Colors in Design is the concept of using colors in an intentional, meaningful way to communicate and represent ideas. From magazine covers to websites and apps, colors can be used to evoke emotion, create harmony and contrast, set a mood or tone for the design, or even serve as a visual anchor for a brand. Color can be used to enhance the user experience and create a visually appealing design.

‍

‍

When it comes to using colors, there are some basic rules that should be followed. First of all, try to keep your palette simple – too many colors will make the design look cluttered and confusing. Instead, focus on using two or three main colors in your design, and create a complimentary color palette by mixing the primary colors to create secondary and tertiary tones. This will also make it easy to maintain a consistent look across all of your designs. Check out Atlassian’s Color System to understand how they use it.

Additionally, make sure you are using color intentionally and with purpose – for example, don’t just choose bright red to showcase error state, rather use a hex that is close to the hex of your brand color. Colors should be chosen to represent the brand or message of the design, and used in a way that helps convey that.

Finally, be sure to consider color accessibility when designing – many people with visual impairments rely on colors to process information quickly and accurately. To ensure your designs are accessible, use high-contrast colors for text and be mindful of how you utilize color for navigation.

‍

‍

Creating a Color Palette for your Design System

Identify your Primary Brand Color

If you have a graphic designer or brand designer, this usually comes from their side. So follow the brand guidelines to pick the primary colors that you can start using from. If you are the one creating this brand, go do some research on your market and come back to this article. We are focussing on Design System for Digital Interface, so once you have that - continue this article.

Now assuming you have your Primary Color, we will use our Layer’s Foundation Purple to show you step by step how to get started.

Layers Foundation is a product created by the team of Neue World to bridge the gap between Clients and Freelancers to build a trustless platform by using the technology of blockchain. Because it’s the Neue World’s Design Team who created the complete website and brand guidelines. Let’s use that as a guide for us to move with this article.

Let’s use our Primary Brand Color #8E0DFF and use this tool called UI Color Palette to help us build a Color Palette based on Google Material Design.

‍

‍

And then once we have it, we will reduce the color palette from being so complex (remember, this is a beginners guide) and focus on just the ones that we want.

1. Primary
2. Primary Hard
3. Primary Soft
4. Primary Subtle

Purpose of doing this is such that the primary palette is comprised of neutrals, white, and purple (our primary) to make sure that the brand stays consistent due to the purple, while the neutrals and whites are used in logical ways throughout product and marketing to guide the eye and highlight the important bits.

We can then use Primary (#8E0DFF) for primary actions, buttons, text links, for indicating progress and represent the brand. Neutral can be used for text and headings, and white or Subtle Grey for page backgrounds.

‍

‍

You can also use a similar technique to build colors for the following

1. Neutrals
2. Error
3. Success
4. Warning

‍

‍

No Brand Guidelines? Follow this

Creating an effective and cohesive visual language is a necessary step in any digital project. This language contains elements such as shapes, typography, patterns, textures, and most importantly colors. Establishing a color palette for a design system is key to achieving the desired aesthetic. It can be complicated to find the right balance between the tones you need to convey the message you want your designs to communicate. Here are some tips on how to create a color palette that works for your design system.

1. Analyze Your Audience: Who is going to be using your design system? It’s important to consider who will be interacting with it and what kind of values or emotions you want to convey. Considering the audience’s culture, age group, and gender will help you create a palette that resonates with them.
2. Collect Reference Colors: Start by compiling colors from existing elements used in your designs such as logos or images. This is a great way to ensure cohesion between the design system and any other materials already used.
3. Choose Your Color Palette: Once you have gathered all the reference colors, it’s time to decide on a color palette . You should consider the main message your design system needs to convey, and pick colors that will reflect that message. If you need help in narrowing down or expanding your options, there are many online resources to help you.
4. Test Your Colors: When you have finalized your color palette, it’s essential to test it before implementing it in your design system. This will give you an idea of how the colors will interact with each other and if they reflect the values that were intended.

By following these tips, you can create a color palette that will provide the perfect foundation for your design system. Colors can be tricky to manage and balance but with some careful planning, you can build a color palette that communicates your message effectively. Good luck!

‍

Resources

Build a Design System from 0 to 1: Color System by Miaomiao_Liu

Material Design: The Color System by Google

Colors by Polaris Shopify

Colors by Atlassian

Fluent2 Colors by Microsoft