WMG Chords — Color

Overview

Color establishes the visual tone of our products, with a palette and usage guidelines for consistency and accessibility.

About tokens

We use tokens to manage color, sizing, and spacing across the system. In Figma, switch variable modes (ADA vs WMG) from the design panel; in code, prefer semantic tokens (--bg-level-*, --text-*, --primary-*) over raw hex values.

Color value #226FF5

→

Primitive wmg blue/500

→

Semantic primary-bg-default

Base

Base color tokens are used for background colors. These tokens are global and work the same in ADA and WMG applications. Refer to the elevation section for usage.

Semantic — backgrounds (dark mode)

--bg-default-inverse

--bg-default

--bg-level-01

--bg-level-02

--bg-level-03

--bg-level-04

--bg-level-05

Alpha

Alpha tokens are used to create variations in opacity or transparency for base colors.

Semantic — alpha surfaces

--alpha-bg-default-emphasis

--alpha-bg-strong-emphasis

Primary

WMG's primary color tokens represent the core brand color—WMG blue. They're used for elements that need strong visual emphasis.

Background

--primary-bg-default

--primary-bg-hover

--primary-bg-pressed

--primary-bg-disabled

Alternate ADA themes may use non-blue primaries; Chords default stays WMG blue per tokens.

Secondary

WMG's secondary color tokens provide a complementary color—WMG dark blue—to the primary palette. They're used for less prominent interactive elements or to create visual contrast.

Background

--secondary-bg-default

--secondary-bg-hover

--secondary-bg-pressed

--secondary-bg-disabled

Tertiary

WMG's tertiary color—WMG yellow—tokens used as an accent or used in combination with WMG primary to highlight AI services.

Background

--tertiary-bg-default

--tertiary-bg-hover

--tertiary-bg-pressed

--tertiary-bg-disabled

System

Used for positive actions, outcomes, or statuses.

Success

--success-bg-default

Used for errors, invalid states, or critical issues.

Error

--error-bg-default

Used for potential issues, cautions, or alerts that need user attention.

Warning

--warning-bg-default

Used for general information, updates, or non-urgent notifications.

Info

--info-bg-default

--info-bg-strong

Data

Data visualization color tokens provide a consistent, accessible palette for charts, graphs, and other data representations. Use these tokens in order to maximize visual distinction between data series.

Data visualization palette

--data-01-blue

--data-02-yellow

--data-03-pink

--data-04-teal

--data-05-violet

--data-06-orange

--data-07-aqua

--data-08-indigo

--data-09-blue

--data-10-yellow

--data-11-pink

--data-12-teal

--data-13-violet

--data-14-orange

--data-15-aqua

--data-16-indigo

--data-17-blue

--data-18-yellow

--data-19-pink

--data-20-teal

--data-21-violet

--data-22-orange

--data-23-aqua

--data-24-indigo