Colors

Brand Colors

Core brand colors remain consistent across light and dark themes. These colors define the visual identity of the Quantum platform.

Theme Colors - Background

Background colors provide depth and hierarchy to interfaces. These automatically adjust between light and dark themes.

Theme Colors - Text

Text colors ensure proper contrast and readability across themes.

Theme Colors - Borders

Border colors define boundaries and separations between elements.

Theme Colors - Accents & Semantics

Accent and semantic colors communicate meaning and provide visual feedback.

Component-Specific Colors

These colors are specifically designed for certain components or interactive elements.

Usage Guidelines

Color Accessibility

When using colors in your interfaces, ensure they meet WCAG 2.1 AA standards:

• Normal text (under 18pt) should have a contrast ratio of at least 4.5:1
• Large text (18pt or 14pt bold and larger) should have a contrast ratio of at least 3:1
• User interface components and graphical objects should have a contrast ratio of at least 3:1

Theme Compatibility

Always use the CSS variables instead of hardcoded color values to ensure proper theme switching:

/* Incorrect */
.my-element {
  background-color: #FFFFFF;
  color: #333333;
}

/* Correct */
.my-element {
  background-color: var(--theme-background-primary);
  color: var(--theme-text-primary);
}