Design System Colors Page

A project to update a design system’s color page.
Including redesigning the existing Colors page, creating semantic colors and Dos and Don’ts.


UX Wizards is a design community for enthusiasts of all levels to share knowledge and grow together. UX Wizards launched the first Design system on April 14, 2021 (I joined this first design system project and worked on Logos and Icons page).

Designers and developers used the design system for 6 months and we found out that colors are not used consistently across digital products so we created color guidelines. In addition, we reviewed the existing color page and made brand colors more scannable.


2021, 6 month


Project Lead, Design, and Development


Seiko (self), Max (Designer), Chaela (Designer), Kaisen (Developer)


Figma, Material UI, Github


We used color page for months and we found some challenges.

  • Designers and developers take time to find a brand color because the brand color section has lot of information.
  • Colors are not used consistently. For example purple color is used for text and link. This caused confusion for the product users.


Overall color page goals are 2 things.

  • Improve brand color swatch to be more scannable to find the color faster.
  • Include basic color rules to use color in an intended and consistent way.

We worked on 3 sections

This case study has 3 sections. First is redesigning the existence color page which is the brand colors section. Second is the Semantic colors. Third is the Dos and Don'ts. This case study follows by the order.

project starting image and the final

1.Review the existing page and redesign

This is the first section of the page and displays brand colors. When we reviewed this section, Design System had been used for over 6 months and this was a good opportunity to come back and iterate the design. existing page and redesign

Challenge of the redesign

Current brand colors come with a lot of information which includes color swatches, color codes, and code snippets for HTML and CSS. Users Find a color among all of this information takes time.

Goals of the redesign

To simplify the brand color design and make finding color information faster.

Before and after

Before taking you through the process. I'd like to show the Before and After of the design. As you can see the design is simpler and the brand color is more scannable. I thought this section would be easy but it was challenging because we had different opinions.

exsisting colors page

Should We Keep The Code Snippets Or Remove Them?

We started the discussion on whether to remove code snippets or not. Designers had different opinions. Some agree, and others thought it better to keep the code snippets. We couldn’t come to a conclusion at the meeting, so how should we decide? We decided to ask users. How users have been using it? Is it a useful feature or not so much? Instead of assuming and designing, we conducted a user interview.

exsisting colors page

User feedback on existing color page

We asked 5 designers and developers who used the existing website for 6 months to get feedback.

Feedback we received

  • Have you used the CSS/HTML code snippets feature in the last 6 months :
    • No one used the code snippets feature in the last 6 months.
    • Feel redundant to repeat code snippets for each color since the difference is only background Class name.
    • Have one code sample and the rest can be removed.
    • Can we move code snippets moves to another section or page instead of removing all.
  • Other general feedback:
    • Add a color token name. We use token name but we don’t mention it on the page.
    • Do we need RGB and CMYK color codes? I haven’t used those.
    • Nice to have a copy hex code feature. Currently, we need to highlight and copy every time.
  • This feedback session was turing point to remove code snippets.

List Of Updates

Based on the feedback, we made an update list.

list of update


Iterations 1 & 2: Brand color swatch

Removed Code snippets, RGB, and CMYK colors. Added each brand color’s tokens. This is the before and after the brand color swatch. You can see the now brand colors are focal points.

color swatch design iteration


Here is the exploration of the color swatch section. We started from removing code snippets. Increased visibility of color swatch and then removed RGB and CMYK colors. Final we removed copy icons so looks color stands out more.

color swatch exploration

Iteration 3: Copy function

I did a few iterations on the copy feature. The below image was a major change. The original version of the copy icon is small. To copy a HEX code, users needed to press on a small icon area. In the final design, I made the color swatches into buttons. Hover states Copy Hex is visible because users use this on desktop and this indicates to next action. One consideration of this final design is the user may need to use few times to understand how to use it.

image of copy function of the iteration

Copy interaction overview

The color swatch enlarges and the Copy HEX text appears if the user hovers over a color. When clicked, the HEX value is copied to the clipboard and the HEX Copied feedback is displayed.

copy interaction overview

Color Contrast

We use black and white color text to have good contrast. How did we choose black or white text? This is followed by the contrast guide on the color swatch. On the color swatch, white and black Color contrasts are shown each color. We took the passing color. So Navy color swatch used white text and the white color swatch used black text in this example.

copy function text colors

Demo of the copy function

Iteration 4: Move Copy Snippets to Components Page

Even though we removed code snippets from colors page, we decided to keep the code on the components page. This Component page is HTML/CSS specific.

image of component pages

2.Create Semantic Colors

This is the second section and it shows the color roles.

2.Create Semantic Colors

Challenge of the semantic colors

Our challenge of Semantic color is UX Wizards has over 10 designers who are working on websites and products. They use brand colors but the usage is not consistent. Users need to remember color usage for each product.

The image right is an example of color being inconsistent and confusing. This uses purple for both titles and links, and users need to think about which is a link and which is a title. We wanted to avoid this type of problem across the products.

2.Create Semantic Colors

Goals of the semantic colors

Our goal is to create a color guideline to use color intentionally in order to increase brand cohesion and better useability across digital products. In addition, reduce color decision fatigue for designers and developers.

Learning from mature design systems

We started with research to determine how established design systems display semantic colors on their website.

logos of the researched design system

Our favorite user interface was E-trade

What we liked about it

  1. There are links that take to the category.
  2. Colors are categorized by usage, therefore scannable.
  3. Each color swatch has a copy function, users are able to copy HEX, Class, or SASS in one click.
  4. The color and description are grouped together. Even though there are similar color shades, it is clear which color should be used.
Things likes of the e-trade

Other findings

  • Gitlab has straightforward and clear descriptions for its color guidelines. However, It would be nice if the description came with color swatches so people knew the exact color they meant with each description.
  • Shopify (Polaris), and Atlassian have Semantic color charts that are a nice overview.
  • Salesforce, Atlassian, and E-trade have brand colors and semantic colors grouped together. This shortens the page.
famouse design system semantic colors

Audit existing products and categorized color use

I audited UX Wizard’s digital products (Website and Design system) and took screenshots of key components. Then I categorized them into Background, Buttons, Links, and Accent Colors to see which colors are used. These screenshots are shown below.

audit components

Created semantic color categories

After the exploratory research and audit products, we discussed the design layout and the semantic color categories we’d like to include. We selected colors that can be the standard for each category like text, button, and background colors. We hadn’t had error and success colors, but we decided to add them to the page for future production.

color categories

Design semantic color Version 1

By using the semantic color categories, we created the Design version 1.

design v1

Feedback session with executive board members and a Web lead

We conducted a feedback session with our stakeholders using the V1 Design to ensure our design was heading in the right direction.

The feedback we received was:

  1. Breakdown sections more to reach an item quickly
  2. Add examples usage to showcase semantic colors in real practice
  3. Error and success colors look too saturated. Test more colors to find ones that match our brand

Given this feedback we did 3 iterations to address the issues brought up in the freedback session.


Iteration 1: Breakdown sections

We made this change to find an item quickly. Before text, buttons and banners were in one section, now we created a separate section for text and buttons. The banner color was moved to under the background. In addition, we created Borders and lines in their own section.

Below is before and after changes in detail.

breakdown section before and after

Iteration 2: Add examples usage

To showcase the color guide in real practice, another designer made this sample design.

usage examples

Iteration 3: Error and success colors

We received feedback that the error and success color looks too saturated, but how can we judge which color is the best? Just looking at the color is hard to tell whether this color works or not. To overcome this, we created a sample UI. Then we picked 3 potential color pairs and applied them to the UI to compare the colors.

error and success

Final of the semantic colors

final of the semantic color

3.Create Dos and Don’ts

This last section was made by another designer. I contributed the styling.

2.Create Semantic Colors

The Dos and Don’ts section is to showcase how to use colors effectively and avoid mistakes that we found in the past. After the design, Dos and Dont's are side by side to clarify the comparison.

do and don't


All the sections are now consolidated into one. We reviewed the contents and design to make sure it flowed nicely and the design is unified.

final image of the colors page

This is the demo of the final Colors page

If we had more time

1. The current color swatch is ordered like the original brand guide. We’d like to change this order to be by shade.

future iteration. Change color swatch order by shared

2. The colors page is long. How can we enhance the UI and improve usability?

Lesson and Learned

  • We worked section by section instead of creating everything. This gave us better focus without being overwhelmed.
  • When team has different opinions, ask users and how they are using. This can be to help make decision.
  • Getting feedback early stage and iterate design. This will make better design instead of assuming and designing.