Getting the right colors for your Design System

6 de agosto de 2023

As a designer and artist I love all the spectrum of colors. My favorite colors are violet, pink and green.

My process

When I start a new design interface for a website, the first thing that comes to my mind is branding and I crossed my finger hoping to see a great logo to work with. Color is a foundation for every design system and it’s very important to define well your color palettes because all your design system components will use those colors.

So everything begins with the logo, colors depends on branding. Based on the colors of your logo, you can establish your seed colors. I always begin with a very basic palette.

A simple color guide

Looking at this basic palette we can have a pretty good idea of which colors we can use to quickly mockup our first homepage. Also we need to test the logo variants available with this colors.

Defining color palettes

Once we have make some proposals to the client, then we can start the real color definition for our design system. For example, we decide to use the dark logo.

To extend 🌈 the base colors, I used three figma plugins:

Material Theme builder
Allows me rapidly create the color palette from each seed color (primary, secondary, tertiary and neutrals), also the light and dark palette. It’s based on Material Design 3 color schema. But in case you need to define colors for MUI 5 you can customize the color numbers.
Color Designer
Helps me to adjust these palettes and also add some others like the warning and success palettes. Give me tints, shades and also color harmonies.
Contrast
Helps me to test color accessibility, very important for all the components you will create based on your colors.

Tonal palette

And why we need so many colors? with this extended palettes of tints and shadows, we have more the colors to play with for our components. Also we can use some of then in our illustrations.

Light palette

Using colors on components

Primary colors on buttons

Error colors on alert:

Color usage and guidelines

A design system is incomplete without documentation. I recommend to do this from the beginning. Define how to use colors for:

Text (headings, links, BodyCopy, labels for inputs, disabled texts, placeholders, etc.) Does headings could be in a different color? labels and disabled text could have the same neutral color?
Icons (action icons, decorative icons, icons over dark color, icon buttons, etc.)
Backgrounds. What colors can be used as backgrounds?
Borders or outlines, dividers
and of course how and when to use the primary, secondary, tertiary, error, warning and success colors.