Building a Color System: Organizing and Applying Colors in Design Systems

Understanding the Role of Colors in a Design System

When designing a system, color is one of the most important elements for creating a consistent and structured visual language. A well-defined color system includes foundational colors, action colors, semantic colors, and accessibility considerations. Each of these plays a critical role in ensuring that the design remains scalable, easy to use, and aligned with both branding and usability principles.

One of the first things to establish is the different types of colors needed in a design system. These typically include global colors like primary, secondary, and tertiary shades, as well as background colors, state-based colors (such as hover or focus states), and visualization colors for data representation. Greys or neutral colors often make up the largest color collection because they are used extensively across backgrounds, borders, text, and structural elements.

Why Grey is a Key Component in Design Systems

Grey tones are applied to a wide range of elements, including backgrounds, borders, and text. A well-structured grayscale palette helps create visual hierarchy and contrast across surfaces. Most design systems use a numerical naming convention, such as a scale from 100 to 800, to provide clarity and consistency. This avoids the confusion of vague terms like “light grey” or “dark grey” and ensures each shade has a distinct place in the system.

In many cases, a 10-step grayscale is used to provide a balanced range of tones, but for more complex systems (such as those that support light and dark themes) a more extended scale may be necessary. For example, a design system might define greys from White 100 (pure white) to Grey 800 (nearly black). In dark mode, instead of using true black for text or backgrounds, a deep grey is often preferred to reduce eye strain while maintaining contrast. This careful balance ensures a more comfortable reading experience, especially for text-heavy interfaces.

Organizing and Naming Colors in a Design System

Naming colors properly is crucial for making the system easy to navigate and scalable over time. Instead of using descriptive names like “light blue” or “deep red,” a numeric or structured naming approach is more effective. For example, colors can be categorized using numbers (e.g., Blue 100 to Blue 800) or grouped based on function, such as:

Neutral Colors (Greys): Used for backgrounds, borders, content, and text.
Primary Colors: Represent the brand’s core color, often used for buttons and call-to-action elements.
Secondary Colors: Complementary to the primary color and used for highlights or secondary actions.
Semantic Colors: Indicate system states, such as success (green), errors (red), warnings (yellow), and information (blue).
Thematic Colors: Applied to specific UI elements like charts, graphs, and data visualizations.

Using a structured naming system makes it easier for designers and developers to understand how colors should be applied throughout the product.

Applying Colors Across UI Components

Different shades of grey and other system colors are used in a variety of ways. For example, eyebrow text (small, grayed-out text positioned above a heading) uses a subtle grey tone to provide context without drawing too much attention. Similarly, greys are commonly applied to elements such as borders, drop shadows, lightboxes, and selection indicators.

For interactive components, feedback and action colors are crucial. These colors visually communicate system states and guide users through an interface. Here’s how they are typically applied:

Buttons: Primary buttons use the brand’s main color, while destructive actions use red. Disabled buttons are usually greyed out.
Form Inputs: Error states have red borders, success states use green, and focus states are highlighted in blue.
Notifications and Alerts: Red for critical errors, green for success messages, yellow for warnings, and blue for informational messages.
Status Indicators and Badges: Green for active status, yellow for pending actions, and red for errors.
Charts and Data Visualizations: Categorical colors differentiate data sets, while sequential gradients indicate data trends.
Accessibility Features: High-contrast focus indicators ensure that users with visual impairments can navigate the interface effectively.

Each of these elements must be carefully defined to maintain clarity and ensure a consistent user experience.

Why Fewer Feedback Colors Are Needed Compared to Neutral Colors

Unlike greys, which are applied to almost every part of an interface, feedback colors have more limited use cases. Because of this, fewer variations are required. Typically, only a few shades of blue, green, red, and yellow are needed to cover different states, such as hover, active, and disabled.

For instance, a success state may only need three variations: a deep green for the main state, a lighter green for backgrounds, and a slightly darker green for hover states. Similarly, error messages may only require a base red for the primary alert, a darker version for emphasis, and a lighter one for backgrounds. Keeping feedback colors minimal ensures clarity and prevents unnecessary complexity.

The Importance of Using Color Variables in Design Systems

When building a scalable design system, defining color variables is more effective than relying on static hex codes. Color variables allow designers and developers to create a foundation of primitive colors that can be mapped to various UI elements dynamically.

Unlike local color styles, which are just references to hex values, variables offer much greater flexibility. For example, instead of linking a primary button directly to a specific shade of blue, it can reference a variable such as “Primary Action Color,” which can later be updated across the entire system with minimal effort.

This approach is particularly useful when companies need to update their branding or adapt colors for accessibility. Instead of manually changing colors throughout the product, updating the variable once ensures consistency across all components.

Final Thought

Creating a structured color system in a design system is about more than just picking colors. It’s about organization, consistency, and usability. From defining neutral greys for backgrounds and borders to carefully selecting feedback colors for buttons and alerts, every decision impacts the overall user experience. Using variables and structured naming conventions makes it easier to maintain and scale the system over time.

If you’d like to discuss this topic further or explore how I can help you build one for your project or your team, feel free to reach out at [email protected]. I’d love to hear from you!