Getting Started with Color Module for Your Design System

Introduction

Design systems are the backbone of web development, and color plays a pivotal role within them. It serves to convey meaning, establish visual hierarchy, and maintain a consistent user experience. In this debut design-centric blog post, we'll delve into the process of constructing a color module for your design system. Drawing inspiration from renowned design systems, we'll explore how to create an effective and adaptable color palette.

Organizing Colors into Logical Groups

The initial step in crafting a color module is organizing colors into logical groups. This involves categorizing colors based on their intended purpose, such as primary, surface, or neutral, as well as functional colors for handling errors and warnings.

As the saying goes, "The two hardest things in programming are naming things and cache invalidation."

While nearly every design system incorporates a primary color, it's crucial not to conflate the color name (e.g., white, green, or red) with the color's intention (e.g., primary or secondary). For instance, a variable named primary might be used across buttons, links, and header elements, but the actual color may evolve from blue to green or red during a redesign.

A recommended approach is to define colors within a palette-like structure:

--blue-10: #e6f6ff;
--blue-20: #bae6ff;
--blue-30: #82cfff;
--blue-40: #33b1ff;
--blue-50: #1192e8;
--blue-60: #0072c3;
--blue-70: #00539a;
--blue-80: #003a6d;
--blue-90: #012749;
--blue-100: #061727;

Establish a swatch by mapping colors to variable names:

--primary: var(--blue-50);
--primary-hover: var(--blue-60);
--primary-active: var(--blue-70);

Then, apply styles to specific elements using the swatch:

.button {
  color: var(--primary);
}

Organizing colors in this manner simplifies comprehension for both designers and developers, promoting consistent use of the color palette throughout the design system. It also ensures that colors are applied appropriately to UI elements and components while maintaining overall design system consistency.

Defining Usage Guidelines

For uniform color application across your design system, it's imperative to establish clear usage guidelines. These guidelines should delineate when and how to use each color, implement constraints, and encourage best practices. By providing usage guidelines, designers and developers can make informed decisions when applying colors to UI elements and components.

A personal favorite resource of mine is the Material Design Color Guidelines. It's an invaluable learning tool for both novice and experienced designers and developers.

Usage guidelines can be both explicit and implied. Consider the visualization above: the use of primary and text-on-primary variables implies their combination for surface and content. While exceptions may arise, this approach often aligns with intended effects, as exemplified by the outline variation of a button:

Releasing the Color System

After defining and organizing your color module, it's time to release it to other developers within your organization. This entails integrating the color module into your design system's component library and granting developers access to design tokens or variables for each color. This empowers them to apply colors to UI elements and components without resorting to hardcoded values.

Maintaining consistency between design tokens and CSS variables by using consistent naming conventions is crucial for ease of comprehension. For instance, if you name a color in your design tokens primary, use --primary as the corresponding CSS variable. These variables often carry a design system prefix, so keep them concise.

If CSS variables aren't your preference, consider using Sass variables or a hybrid approach. Personally, I favor the latter, prefixing Sass variables with an underscore _ and using them as follows:

$_primary: var(--primary, $primary);
$_text-on-primary: var(--text-on-primary, $text-on-primary);

.button {
    background: $_primary;
    color: $_text-on-primary;
}

This approach allows for both Sass variable overrides during build time and direct use of CSS variables in the browser, enabling seamless support for dynamic theming such as dark mode or custom user preferences for color schemes.

Accessibility in Color Module

Accessibility is an indispensable aspect of any design system. When constructing your color module, it's imperative to ensure that your color choices adhere to accessibility standards like the Web Content Accessibility Guidelines (WCAG). This commitment ensures your design system is inclusive and user-friendly for individuals with visual impairments or color vision deficiencies.

To attain accessible color combinations, leverage tools such as the WCAG Color Contrast Checker to verify that text and background colors maintain adequate contrast ratios. Additionally, consider offering alternative color schemes, including a high-contrast mode, to accommodate diverse user preferences and requirements.

Seeking inspiration for meticulously curated color palettes? The Tailwind color palette is a treasure trove of vibrant options and serves as an excellent starting point for crafting your own color module.

Maintaining the Color Module

As your design system evolves, it's essential to proactively maintain your color module, preserving consistency and accessibility. This involves periodic reviews of your color choices and updates to align with evolving design system requirements.

Tools like Figma can streamline color module maintenance by offering a centralized repository for storing and updating colors. Create a color palette in Figma and leverage the recently introduced Rest API to automate the color module update process.

Case Studies and Examples

To provide practical insights and real-world applications, let's examine some prominent design systems and their color modules:

1. Material Design: Google's Material Design system recently received an update to version 3. It features an expansive color module with a wealth of examples and use cases. Notably, it offers a distinctive approach to state-based color variations.

2. Fluent Design System: Microsoft's Fluent Design System boasts a color module comprising primary colors, functional colors, and extended palettes. The system underscores the significance of color in conveying meaning and establishing visual hierarchy while prioritizing accessibility.

3. Atlassian Design System: Atlassian's Design System encompasses a color module encompassing primary, secondary, and functional colors, along with an extended palette for shades and tints. The system provides comprehensive guidelines for effective color usage and emphasizes accessibility.

4. Shopify Polaris: Shopify's Polaris Design System features a color module with primary, secondary, and functional colors, plus an extended palette for shades and tints. Similar to others, it underscores the role of color in conveying meaning, maintaining visual hierarchy, and ensuring accessibility.

Conclusion

Building a comprehensive color module for your design system is probably the first part of actually creating a Design System. It's one of the most important (and biggest) pieces of the puzzle, but it would greatly help you in the long run and help you achieve consistency across your products and applications.

Most of the suggestions I make in this blog posts are based on my own experience with implementing UI component libraries and building applications with them. Feel free to reach me out on Twitter and share your experience with color modules and design systems in general.