How to create a color system/Color Atoms And how to generate a tonal color palette in Figma
Creating a color system or utilizing color atoms in design is crucial for several reasons, playing a pivotal role in the overall visual appeal and communication of a project. It ensures consistency in design by establishing a set of predefined colors. This consistency helps create a cohesive and unified visual identity across various elements of a project, such as logos, websites, or marketing materials.
These are some steps to take when creating a color system
- Go through the brand identity document: When assigned a specific project as a product designer, one of your initial tasks involves a comprehensive review of the brand identity document provided by the company you are collaborating with. This document typically encompasses essential elements such as the company logo, designated brand colors, and other relevant materials. Your primary responsibility in this phase is to meticulously examine the brand identity document.
- Choose the brand color as your primary color: This choice is imperative because the primary color serves as the dominant hue, embodying and representing your brand identity. The primary color should be utilized across various key elements within your project, including but not limited to background color, buttons, headings, call-to-action elements, and other crucial components.
- Choose a secondary color: The secondary color should serve as a supporting element to the primary color; it should not overshadow the primary color but rather complement it. Its usage includes serving as a secondary call-to-action (CTA), supporting background color, and as a stroke color on elements using the primary color as a fill color
- Choose an accent color(optional): An accent color is employed to draw attention to a prominent element that requires immediate focus. If your project lacks any elements demanding swift attention, you may choose to skip this step. The usage of an accent color includes highlighting very important icons and information alerts.
- Choose a dark color(optional): To expand the range of neutral color choices, it is recommended to select a dark color, often in the form of black. This color can be applied to text, backgrounds, and strokes, providing versatility in design.
- Choose a light color(optional): A light color should be chosen to expand neutral color options; it is typically a shade of white. It can be used for text, background, and strokes.
- Choose an error color(Non optional): This color will be used to display error messages; in most cases, it is red. Its usage includes text, background, and strokes.
- Choose a success color(Non optional): This color will be used to display success messages; in most cases, it is green. Its usage includes text, background, and strokes.
- Generate a tonal palette for each of the chosen color: A tonal palette typically involves variations of a color, ranging from lighter to darker shades. So, for each chosen color, you would generate a range of tones, creating a palette that spans different shades or intensities of that specific color. This helps in achieving visual harmony and flexibility in design by having a variety of tones within the chosen color scheme.
How to generate a tonal color palette in figma
A tonal palette can be created in Figma using a plugin called ‘UI Color Palette.’ Begin by selecting the color for which you want to generate a tonal palette. For example, if I am creating a tonal palette for my primary color below:
select the desired color by left-clicking on it. Then, go to the ‘Plugin’ menu, choose ‘Manage Plugins,’ search for ‘UI Color Palette,’ and click ‘Create Color Palette.’ This action will generate various tones for your primary color.”
Select each color tone individually and save it to your color library.