Colors

The color system provides a consistent palette across all components while supporting brand-specific customization through CSS variables.

Core Colors

Core colors define the primary visual identity of the brand. These colors are used throughout the interface for branding, interactive elements, and backgrounds.

Background Colors

Background colors create layered surfaces and visual depth. These tokens define the hierarchy of backgrounds across components and layouts.

Text Colors

Text colors ensure proper hierarchy and readability across different backgrounds and contexts.

Status Colors

Status colors communicate feedback and states to users. These remain consistent across brands for universal recognition.

Usage

CSS Variables

Colors are available as CSS custom properties. This allows components to automatically adapt when the brand theme changes.

1/* Using CSS Variables */
2.button-primary {
3  background-color: var(--color-primary);
4  color: var(--color-surface);
5}
6
7.card {
8  background-color: var(--color-surface);
9  border: 1px solid var(--color-text-muted);
10}
11
12.text-muted {
13  color: var(--color-text-secondary);
14}

Tailwind Classes

When using Tailwind CSS, the color classes are configured to use the CSS variables, enabling seamless theme switching.

1<!-- Using Tailwind classes (configured) -->
2<button class="bg-primary text-white">
3  Primary Button
4</button>
5
6<div class="bg-surface text-text-primary">
7  Card content
8</div>
9
10<p class="text-text-secondary">
11  Secondary text
12</p>

Brand-Specific Extended Palette

Each brand may have an extended color palette for product-specific styling. Currently viewing the House of Brands palette.

Accessibility

All color combinations used in the design system meet WCAG 2.1 AA contrast requirements:

• Normal text: minimum 4.5:1 contrast ratio
• Large text (18px+): minimum 3:1 contrast ratio
• Interactive elements: minimum 3:1 contrast ratio against backgrounds

Design Token Reference