Establishing a Visual Language: Colors

Design Systems
February 28, 2024

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.

microsoft color system in their design system
How Microsoft uses color to distinguish their products.

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.

Atlassian Design System
Atlassian design system

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.

UI Color Palette plugin on Figma for Color Systems
UI Color Palette plugin on Figma for Color Systems

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.

Colors in designs systems simplified
Colors in designs systems simplified

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

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

neutral colors in a design system
Colors in designs systems simplified

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!


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

Download our Design System Blueprint

Are you looking for a comprehensive design system blueprint for your next project? Look no further! Enter your email below to receive our exclusive Design System Blueprint. This resource, created by NEUE WORLD, is packed with valuable insights and practical tips to help you build a solid design system that will elevate your project to the next level.

✓ The Basic Checklist

✓ Designing from Scratch

✓ With Existing Designs

✓ Inventory Checklist

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.