<

Voyager
Voyager

Color

Color is fundamental in bringing familiarity and purpose to our users, while giving Quantum Workplace a the tone of seriously light. Color plays an important role with expressing identity and creating recognition in a site. Our colors are designed to make our site easy and enjoyable to use.

User Interface colors

Our user interface colors are split into three palettes: Primary, Semantic, and Extended. Together these color parings bring a fresh, clean, and cool feel to our site.

Primary palette

These colors are the most commonly used, and are the basis on which our product is built. They are the colors of the background for the page and container, our default text color, and the link/primary button color.

Alias Token Primary usage
$qw-background-color Page background color
$qw-content-background Default components background color
$qw-link-color
$color-btn-primary-bg		 Link text and Primary CTA background color
$qw-text-color Text color

Semantic Palette

Semantic colors have assigned meanings and are used consistently to set expectations for users. We use color intentionally to enforce hierarchy and to communicate clearly. Too much color can cause cognitive overload, reducing users' ability to efficiently use our product.

Warning

Never use color as the only means of conveying information.

Info

Alias Tokens
$qw-info-lighter
$qw-info-light
$qw-info
$qw-info-dark
$qw-info-darker

Success

Alias Tokens
$qw-success-lighter
$qw-success-light
$qw-success
$qw-success-dark
$qw-success-darker

Danger

Alias Tokens
$qw-danger-lighter
$qw-danger-light
$qw-danger
$qw-danger-dark
$qw-danger-darker

Warning

Alias Tokens
$qw-warning-lighter
$qw-warning-light
$qw-warning
$qw-warning-dark
$qw-warning-darker

Extended Palette

Maintain contrast ratios for text and their backgrounds of 4.5:1 for regular text, and 3:1 for large text, as recommended by the WCAG. All colors below are accessible with the text color they are displayed with.

Large text means if the font weight is light (300) or normal (400) the text should be no smaller than 24px. If the font weight is Semi-Bold (600), the text should be no smaller than 19px.

Primary (Blue)

Global Token
B
 $qw-blue-0
B
 $qw-blue-1
B
 $qw-blue-2
B
 $qw-blue-3
B
 $qw-blue-4
B
 $qw-blue-5
W
 $qw-blue-6
W
 $qw-blue-7
W
 $qw-blue-8
W
 $qw-blue-9
W
 $qw-blue-10

Neutral

Global Token
B
 $-qw-gray-0
B
 $qw-gray-1
B
 $qw-gray-2
B
 $qw-gray-3
B
 $qw-gray-4
B
 $qw-gray-5
W
 $qw-gray-6
W
 $qw-gray-7
W
 $qw-gray-8
W
 $qw-gray-9
W
 $qw-gray-10

Supporting Palettes

Red

Global Token
B
 $qw-red-0
B
 $qw-red-1
B
 $qw-red-2
B
 $qw-red-3
B
 $qw-red-4
B
 $qw-red-5
W
 $qw-red-6
W
 $qw-red-7
W
 $qw-red-8
W
 $qw-red-9
W
 $qw-red-10

Orange

Global Token
B
 $qw-orange-0
B
 $qw-orange-1
B
 $qw-orange-2
B
 $qw-orange-3
B
 $qw-orange-4
B
 $qw-orange-5
W
 $qw-orange-6
W
 $qw-orange-7
W
 $qw-orange-8
W
 $qw-orange-9
W
 $qw-orange-10

Yellow

Global Token
B
 $qw-yellow-0
B
 $qw-yellow-1
B
 $qw-yellow-2
B
 $qw-yellow-3
B
 $qw-yellow-4
B
 $qw-yellow-5
W
 $qw-yellow-6
W
 $qw-yellow-7
W
 $qw-yellow-8
W
 $qw-yellow-9
W
 $qw-yellow-10

Green

Global Token
B
 $qw-green-0
B
 $qw-green-1
B
 $qw-green-2
B
 $qw-green-3
B
 $qw-green-4
B
 $qw-green-5
W
 $qw-green-6
W
 $qw-green-7
W
 $qw-green-8
W
 $qw-green-9
W
 $qw-green-10

Teal

Global Token
B
 $qw-teal-0
B
 $qw-teal-1
B
 $qw-teal-2
B
 $qw-teal-3
B
 $qw-teal-4
B
 $qw-teal-5
W
 $qw-teal-6
W
 $qw-teal-7
W
 $qw-teal-8
W
 $qw-teal-9
W
 $qw-teal-10

Purple

Global Token
B
 $qw-purple-0
B
 $qw-purple-1
B
 $qw-purple-2
B
 $qw-purple-3
B
 $qw-purple-4
B
 $qw-purple-5
W
 $qw-purple-6
W
 $qw-purple-7
W
 $qw-purple-8
W
 $qw-purple-9
W
 $qw-purple-10