Color

Our brand's bold and energetic colors symbolize our commitment to making quantum technology useful and to be a key enabler of the quantum age.
View downloads
Bold
/
Energetic

Color sits at the heart of our brand, helping to build recognition and trust; Violet is our primary color paying homage to the ultraviolet lasers used to manipulate qubits. Our color guidelines ensure that we use color consistently and effectively to create balance, ensure accessibility, and focus attention for astronger and more impactful brand presence.

Brand colors

Copy
#
680CE9
Primary
#
680CE9
PMS
Violet C
Copy
#
1E0033
Secondary
#
1E0033
PMS
276 C
Copy
#
0F0D16
Black
#
0F0D16
PMS
Black 6C
Copy
#
35343C
Dark
#
35343C
Copy
#
CCCBD1
Mid
#
CCCBD1
Copy
#
F8F8FA
Light
#
F8F8FA
Copy
#
FFFFFF
White
#
FFFFFF
Usage Proportions
This breakdown highlights the prominence of dark colors in our brand, with Gray 900 being the most used.
Primary
12%
Secondary
18%
Black
44%
Light
14%
Dark
4%
Mid
4%
White
4%

Core usage

Effective use of color is essential to establish a consistent and cohesive brand identity. Our brand features three distinct themes: primary, secondary, and tertiary, each serving a specific purpose in our brand.

Dark Default

Use our primary brand color scheme, featuring dark colors with light text, for top-level brand promotion to maintain visual coherence and brand identity.

Examples:
Website, business cards, social media, brand collateral, or merchandise.

Secondary

Use our complementary secondary theme alongside the primary and tertiary themes to add visual interest and maintain consistency in promotional materials.

Examples:
Social media, brand collateral, or merchandise

Light

The tertiary theme's light color scheme and task-oriented focus is for products and technical documentation; use sparingly in brand promotion.

Examples:
Letterhead, products, documentation, technical manuscripts, social profile, or merchandise.

Color contrast

Ensure accessibility and visual impairments are considered when using our colors.

For easy pairing:

  • If background color is 400 or less use text color 500 or greater.
  • If background color is 500 or more, use text color 400 or less.

Always review accessibility in context.

Example of color palette accessibility: Tones 0-400 on white background, 500-900 on dark background.
Example of a plot using the Q-CTRL visualization library styles

Data visualization

Effective data visualization is vital in communicating our company's value to our customers. Our visualization library provides guidance on accessible use of color in visualizations.

Core list

Core colors

These are our primary brand colors and should be used consistently across all branded materials. They form the backbone of our brand identity and help to create a strong and recognisable visual presence.
Copy
#
680CE9
Primary
#
680CE9
PMS
Violet C
Copy
#
1E0033
Secondary
#
1E0033
PMS
276 C
Copy
#
0F0D16
Black
#
0F0D16
PMS
Black 6C
Copy
#
35343C
Dark
#
35343C
Copy
#
CCCBD1
Mid
#
CCCBD1
Copy
#
F8F8FA
Light
#
F8F8FA
Copy
#
FFFFFF
White
#
FFFFFF

Semantic colors

Consistent use of semantic colors improves clarity and enhances user experience by effectively communicating information, success, warning, and error messages.
Info
Copy
#
A3D3FB
Light
#
A3D3FB
Copy
#
76AAEF
Base
#
76AAEF
Copy
#
1F3EAA
Dark
#
1F3EAA
Success
Copy
#
91EA99
Light
#
91EA99
Copy
#
40D066
Base
#
40D066
Copy
#
016E3A
Dark
#
016E3A
Warning
Copy
#
EDE78E
Light
#
EDE78E
Copy
#
D4CD52
Base
#
D4CD52
Copy
#
636408
Dark
#
636408
Error
Copy
#
FDB0B1
Light
#
FDB0B1
Copy
#
E04542
Base
#
E04542
Copy
#
A41C1E
Dark
#
A41C1E

Support colors

These colors complement core and semantic colors, providing versatility for data visualization, categories, illustration, and animation. Use them sparingly for a consistent brand look.
Violet
Copy
#
F8F5FF
0
#
F8F5FF
Copy
#
EDE0FE
100
#
EDE0FE
Copy
#
D7BCFD
200
#
D7BCFD
Copy
#
B482FA
300
#
B482FA
Copy
#
9553F8
400
#
9553F8
Copy
#
680CE9
Brand color
Primary
500
#
680CE9
Copy
#
5900BE
600
#
5900BE
Copy
#
440087
700
#
440087
Copy
#
340060
800
#
340060
Copy
#
1E0033
Brand color
Secondary
900
#
1E0033
Gray
Copy
#
F8F8FA
Brand color
Light
0
#
F8F8FA
Copy
#
F2F1F6
100
#
F2F1F6
Copy
#
E5E4E9
200
#
E5E4E9
Copy
#
CCCBD1
Brand color
Medium
300
#
CCCBD1
Copy
#
A9A8AF
400
#
A9A8AF
Copy
#
77767F
500
#
77767F
Copy
#
55545D
600
#
55545D
Copy
#
35343C
Brand color
Dark
700
#
35343C
Copy
#
0F0D16
800
#
0F0D16
Copy
#
0F0D16
Brand color
Black
900
#
0F0D16
Blue
Copy
#
E5FAFF
0
#
E5FAFF
Copy
#
C6ECFC
100
#
C6ECFC
Copy
#
A3D3FB
200
#
A3D3FB
Copy
#
76AAEF
300
#
76AAEF
Copy
#
4B7AD9
400
#
4B7AD9
Copy
#
2157CE
500
#
2157CE
Copy
#
1F3EAA
600
#
1F3EAA
Copy
#
0D227E
700
#
0D227E
Copy
#
01145E
800
#
01145E
Copy
#
00062F
900
#
00062F
Teal
Copy
#
D6FFF5
0
#
D6FFF5
Copy
#
B5F6E9
100
#
B5F6E9
Copy
#
76E4D7
200
#
76E4D7
Copy
#
3CCBC5
300
#
3CCBC5
Copy
#
2AA1A4
400
#
2AA1A4
Copy
#
147F87
500
#
147F87
Copy
#
036873
600
#
036873
Copy
#
03414F
700
#
03414F
Copy
#
35343C
800
#
35343C
Copy
#
00181E
900
#
00181E
Green
Copy
#
EBFFE7
0
#
EBFFE7
Copy
#
CFF8C7
100
#
CFF8C7
Copy
#
91EA99
200
#
91EA99
Copy
#
40D066
300
#
40D066
Copy
#
32A859
400
#
32A859
Copy
#
148540
500
#
148540
Copy
#
016E3A
600
#
016E3A
Copy
#
064826
700
#
064826
Copy
#
012C17
800
#
012C17
Copy
#
001A0D
900
#
001A0D
Yellow
Copy
#
FFFAEC
0
#
FFFAEC
Copy
#
F9F1C9
100
#
F9F1C9
Copy
#
EDE78E
200
#
EDE78E
Copy
#
D4CD52
300
#
D4CD52
Copy
#
B0AA31
400
#
B0AA31
Copy
#
7E7F1B
500
#
7E7F1B
Copy
#
636408
600
#
636408
Copy
#
424006
700
#
424006
Copy
#
2A2601
800
#
2A2601
Copy
#
191700
900
#
191700
Orange
Copy
#
FFF5F1
0
#
FFF5F1
Copy
#
FEDBCE
100
#
FEDBCE
Copy
#
FFC4A4
200
#
FFC4A4
Copy
#
F2995B
300
#
F2995B
Copy
#
DF7A30
400
#
DF7A30
Copy
#
B45F19
500
#
B45F19
Copy
#
904808
600
#
904808
Copy
#
633203
700
#
633203
Copy
#
442100
800
#
442100
Copy
#
2D1100
900
#
2D1100
Red
Copy
#
FFF4F4
0
#
FFF4F4
Copy
#
FED6D7
100
#
FED6D7
Copy
#
FDB0B1
200
#
FDB0B1
Copy
#
FA7370
300
#
FA7370
Copy
#
E04542
400
#
E04542
Copy
#
C02C21
500
#
C02C21
Copy
#
A41C1E
600
#
A41C1E
Copy
#
7B0A0C
700
#
7B0A0C
Copy
#
570305
800
#
570305
Copy
#
3A0102
900
#
3A0102
Pink
Copy
#
FFF3FF
0
#
FFF3FF
Copy
#
FEDDFA
100
#
FEDDFA
Copy
#
FDB1E7
200
#
FDB1E7
Copy
#
F373C0
300
#
F373C0
Copy
#
E54399
400
#
E54399
Copy
#
BE276D
500
#
BE276D
Copy
#
A51750
600
#
A51750
Copy
#
740830
700
#
740830
Copy
#
550220
800
#
550220
Copy
#
3D0115
900
#
3D0115

Gradients

Gradients can be used for illustrations, animations, or small accent details. The must be use sparingly and with care to maintain visual consistency and cohesion.
Violet
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Gray
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Blue
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Teal
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Green
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Yellow
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Orange
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600
Red
Light
100
200
Mid
200
300
Dark
300
400
Brand color
Darker
400
500
Darkest
500
600
Pink
Light
100
200
Mid
200
300
Dark
300
400
Darker
400
500
Darkest
500
600

Usage guidelines

Do
Use the secondary color as the background for hero photography.
Do
Follow the guidance on using color themes, to ensure a consistent brand and user experience.
Do
Use the Visualization Guidelines to ensure brand consistency and optimal accessibility.
Do
Use color strategically to establish a clear visual hierarchy, communicate meaning, and guide users through the interface.
Do
Utilize the Primary color to create focal points and draw attention to critical elements and actions, guiding users for a seamless experience.
Don't
Overuse the primary violet color; it should be reserved as an accent to intentionally grab the viewer's attention.
Don't
Compromise on accessibility. Ensure optimal legibility and contrast by avoiding text colors similar to the background.
Don't
Overuse bright colors. Prioritize our core brand colors, and reserve the extended colors only for illustrations or key UI components such as badges.
Don't
Use colors or gradients outside of the approved color list. Colors must adhere to the brand guidelines for a cohesive look.

Downloads

Color palettes are available as .ase, .clr, and .json files, if you have creative cloud you can also access them here.
Use the .clr file to add color swatches to the native mac color picker, here are the install instructions.