Colours

New

Light theme

Web accessibility guidelines

In efforts in making the web a better and accessible place to everyone, please visit link below to see recommendation on how to implement AODA standard across Questrade.com and all other Questrade domains.

view aoda guidelines & implementation

Core set

These colours make up the majority of colours on questrade.com and also define the Questrade brand.

Questrade Grey

Basic foundation

Grey tones are a foundational colour for Questrade and are used across the Questrade design system. Light grey tones are most commonly used for general purpose backgrounds & regions, while darker ones are common on borders and in text colours.

700

#262D33

600

#5E6D83

500

#78899F

400 (PRIME)

#CED6E2

300

#F2F2F8

200

#F8F8FA

100

#FFFFFF

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-grey-100"></div>

<p class="color-grey-700"></p>

Colour tones vary from 700 to 100 (from darker to lighter)

Questrade Green

Primary, positive, successful

Questrade green is the primary brand colour for Questrade, and its digital counterpart is meant align with our brand designs primary colour. Primary green should never be used for backgrounds. For any text applications Green 500 (on light) should be used to ensure legibility.

700

#1C5F1F

600

#217024

500

#227C20

400 (PRIME)

#389B3C

300

#5DBE62

200

#ADDEAF

100

#EBF7EB

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-green-100"></div>

<p class="color-green-700"></p>

Colour tones vary from 700 to 100 (from darker to lighter)

Supporting set

These colours act as supporting colours to the core set. They are to be used sparingly and only in specific cases (please see each individual description).

Blue

Secondary, interactive, status

Questrade Blue plays an important role to denote certain interactive elements like inline links and tertiary CTAs. Questrade Blue is also used for “info” level status’.

700

#003878

600

#00428F

500

#0055B6

400 (PRIME)

#0066DB

300

#1682FF

200

#8BC1FF

100

#E2F0FF

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-blue-100"></div>

<p class="color-blue-700"></p>

Colour tones vary from 700 to 100 (from darker to lighter)

Red

Danger, alert, and error

Red is the status colour for errors and critical alerts.

700

#851021

600

#9D1328

500

#C91A33

400 (PRIME)

#D33E54

300

#F54C64

200

#F9A5B2

100

#FEE9EC

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-red-100"></div>

<p class="color-red-700"></p>

Colour tones vary from 700 to 100 (from darker to lighter)

Yellow

Attention, notice, and in progress

Yellow is the status colour for mild alerts and warnings.

700

#715800

600

#866800

500

#AB8400

400 (PRIME)

#CEA000

300

#FBC610

200

#FCE287

100

#FEF8E2

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-yellow-100"></div>

<p class="color-yellow-700"></p>

Colour tones for vary from 700 to 100 (from darker to lighter)

Orange

Educational, caution, and status

Orange is the status colour for educational tips.

700

#974009

600

#B34B0B

500

#E5600E

400 (PRIME)

#ED7D37

300

#FF9451

200

#FFC9A8

100

#FFF2E9

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-orange-100"></div>

<p class="color-orange-700"></p>

Colour tones for vary from 700 to 100 (from darker to lighter)

Purple

Status

Purple is not currently used in the design system.

700

#591A67

600

#691F7A

500

#86279D

400 (PRIME)

#9545A8

300

#B459C9

200

#DAADE4

100

#F7EBF8

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-purple-100"></div>

<p class="color-purple-700"></p>

Colour tones vary from 700 to 100 (from darker to lighter)

Profit & Loss Colours

Status

Used in charting, graphs and other data visualizations to show profit and loss information. PL 100 is to be used primarily for backgrounds, while PL 300 is meant to hold text values. PL 200 can be used for specific graphics (up/down chevrons, candle sticks etc)

Currently these colours are only used by the product team.

PL-Green

Profit and Loss Green is to be used in charting tools were profits and upturns need to be represented.

300

#087346

200 (PRIME)

#159A62

100

#E4F5EF

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-pl-green-100"></div>

<p class="color-pl-green-300"></p>

Colour tones for PL vary from 300 to 100 (from darker to lighter)

PL-Red

Profit and Loss Red is to be used in charting tools were losses and downturns need to be represented.

300

#B41005

200 (PRIME)

#E94B41

100

#FFECE8

Implementation

Use `bg` prefix for background and `color` prefix for content color

<div class="bg-pl-red-100"></div>

<p class="color-pl-red-300"></p>

Colour tones for PL vary from 300 to 100 (from darker to lighter)

Dark Theme

Dark mode is not yet supported on Qcom properties, but the dark palette has been included for use when we need to display UI elements, text or other objects on dark backgrounds.

Core set

These colours make up the majority of colours on questrade.com and also define the Questrade brand.

Questrade Grey

Basic foundation

Grey tones are a foundational colour for Questrade and are used across the Questrade design system. Light grey tones are most commonly used for general purpose backgrounds & regions, while darker ones are common on borders and in text colours.

700

#F2F2F8

600

#8E97AD

500

#6A7687

400 (PRIME)

#313A45

300

#262D33

200

#111317

100

#07090A

Implementation

Use `--dt` modifier for dark theme

<div class="bg-grey-100--dt"></div>

<p class="color-grey-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Questrade Green

Primary, positive, successful

Questrade green is the primary brand colour for Questrade, and its digital counterpart is meant align with our brand designs primary colour. Primary green should never be used for backgrounds. For any text applications Green 500 (on light) should be used to ensure legibility.

700

#8FD292

600

#7BCA7E

500

#56BB5B

400 (PRIME)

#389B3C

300

#227C20

200

#144416

100

#0A210B

Implementation

Use `--dt` modifier for dark theme

<div class="bg-green-100--dt"></div>

<p class="color-green-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Supporting set

These colours act as supporting colours to the core set. They are to be used sparingly and only in specific cases (please see each individual description).

Blue

Secondary, interactive, status

Questrade Blue plays an important role to denote certain interactive elements like inline links and tertiary CTAs. Questrade Blue is also used for “info” level status’.

700

#84BDFF

600

#6DB1FF

500

#449BFF

400 (PRIME)

#1E87FF

300

#066ADE

200

#03346F

100

#011A38

Implementation

Use `--dt` modifier for dark theme

<div class="bg-blue-100--dt"></div>

<p class="color-blue-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Red

Danger, alert, and error

Red is the status colour for errors and critical alerts.

700

#FF9CAA

600

#FF8A9A

500

#FF697F

400 (PRIME)

#FF4B65

300

#CE3A4F

200

#671D28

100

#330E14

Implementation

Use `--dt` modifier for dark theme

<div class="bg-red-100--dt"></div>

<p class="color-red-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Yellow

Attention, notice, and in progress

Yellow is the status colour for mild alerts and warnings.

700

#FFE897

600

#FFDF75

500

#FFD548

400 (PRIME)

#FFCB1A

300

#D2A200

200

#624B00

100

#2A2100

Implementation

Use `--dt` modifier for dark theme

<div class="bg-yellow-100--dt"></div>

<p class="color-yellow-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Orange

Educational, caution, and status

Orange is the status colour for educational tips.

700

#FFBC91

600

#FFAF7C

500

#FF9958

400 (PRIME)

#FF8436

300

#DA671E

200

#6D330F

100

#361907

Implementation

Use `--dt` modifier for dark theme

<div class="bg-orange-100--dt"></div>

<p class="color-orange-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Purple

Status

Purple is not currently used in the design system.

700

#E1A4EF

600

#DB93EB

500

#D075E5

400 (PRIME)

#C759E1

300

#A047B4

200

#50245A

100

#27122D

Implementation

Use `--dt` modifier for dark theme

<div class="bg-purple-100--dt"></div>

<p class="color-purple-700--dt"></p>

Colour tones vary from 700 to 100 (from lighter to darker)

Profit & Loss Colours

Status

Used in charting, graphs and other data visualizations to show profit and loss information. PL 100 is to be used primarily for backgrounds, while PL 300 is meant to hold text values. PL 200 can be used for specific graphics (up/down chevrons, candle sticks etc)

Currently these colours are only used by the product team.

PL-Green

Profit and Loss Green is to be used in charting tools were profits and upturns need to be represented.

300

#6BC895

200 (PRIME)

#47AD6A

100

#143128

Implementation

Use `--dt` modifier for dark theme

<div class="bg-pl-green-100--dt"></div>

<p class="color-pl-green-300--dt"></p>

Colour tones for PL on dark theme vary from 300 to 100 (from lighter to darker)

PL-Red

Profit and Loss Red is to be used in charting tools were losses and downturns need to be represented.

300

#FA6286

200 (PRIME)

#FE4D6D

100

#411722

Implementation

Use `--dt` modifier for dark theme

<div class="bg-pl-red-100--dt"></div>

<p class="color-pl-red-300--dt"></p>

Colour tones for PL on dark theme vary from 300 to 100 (from lighter to darker)

Colours Usage

Primary text

Grey 700 | #262D33

Example

This is an example of the primary text colour

<p class="color-grey-700">This is an example of the primary text colour</p>

Subtle text

Grey 600 | #5E6D83

Example

This is an example of subdued text colour

<p class="color-grey-600">This is an example of subdued text colour</p>

Accented text

Green 500 | #227C20

Example

This is an example of accented text.

This is an example of subdued accented text.

<h4 class="heading-5 heading-5--bold color-grey-700 m-b-xs">This is an example of <span class="color-green-500">accented text</span>.</h4>
<h4 class="heading-5 heading-5--bold color-grey-600">This is an example of subdued <span class="color-green-500">accented text</span>.</h4>