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
Primary
#
680CE9
PMS
Violet C
Copy
Secondary
#
1E0033
PMS
276 C
Copy
Black
#
0F0D16
PMS
Black 6C
Copy
Dark
#
35343C
Copy
Mid
#
CCCBD1
Copy
Light
#
F8F8FA
Copy
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.
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
Primary
#
680CE9
PMS
Violet C
Copy
Secondary
#
1E0033
PMS
276 C
Copy
Black
#
0F0D16
PMS
Black 6C
Copy
Dark
#
35343C
Copy
Mid
#
CCCBD1
Copy
Light
#
F8F8FA
Copy
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
Light
#
A3D3FB
Copy
Base
#
76AAEF
Copy
Dark
#
1F3EAA
Success
Copy
Light
#
91EA99
Copy
Base
#
40D066
Copy
Dark
#
016E3A
Warning
Copy
Light
#
EDE78E
Copy
Base
#
D4CD52
Copy
Dark
#
636408
Error
Copy
Light
#
FDB0B1
Copy
Base
#
E04542
Copy
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
0
#
F8F5FF
Copy
100
#
EDE0FE
Copy
200
#
D7BCFD
Copy
300
#
B482FA
Copy
400
#
9553F8
Copy
Brand color
Primary
500
#
680CE9
Copy
600
#
5900BE
Copy
700
#
440087
Copy
800
#
340060
Copy
Brand color
Secondary
900
#
1E0033
Gray
Copy
Brand color
Light
0
#
F8F8FA
Copy
100
#
F2F1F6
Copy
200
#
E5E4E9
Copy
Brand color
Medium
300
#
CCCBD1
Copy
400
#
A9A8AF
Copy
500
#
77767F
Copy
600
#
55545D
Copy
Brand color
Dark
700
#
35343C
Copy
800
#
0F0D16
Copy
Brand color
Black
900
#
0F0D16
Blue
Copy
0
#
E5FAFF
Copy
100
#
C6ECFC
Copy
200
#
A3D3FB
Copy
300
#
76AAEF
Copy
400
#
4B7AD9
Copy
500
#
2157CE
Copy
600
#
1F3EAA
Copy
700
#
0D227E
Copy
800
#
01145E
Copy
900
#
00062F
Teal
Copy
0
#
D6FFF5
Copy
100
#
B5F6E9
Copy
200
#
76E4D7
Copy
300
#
3CCBC5
Copy
400
#
2AA1A4
Copy
500
#
147F87
Copy
600
#
036873
Copy
700
#
03414F
Copy
800
#
35343C
Copy
900
#
00181E
Green
Copy
0
#
EBFFE7
Copy
100
#
CFF8C7
Copy
200
#
91EA99
Copy
300
#
40D066
Copy
400
#
32A859
Copy
500
#
148540
Copy
600
#
016E3A
Copy
700
#
064826
Copy
800
#
012C17
Copy
900
#
001A0D
Yellow
Copy
0
#
FFFAEC
Copy
100
#
F9F1C9
Copy
200
#
EDE78E
Copy
300
#
D4CD52
Copy
400
#
B0AA31
Copy
500
#
7E7F1B
Copy
600
#
636408
Copy
700
#
424006
Copy
800
#
2A2601
Copy
900
#
191700
Orange
Copy
0
#
FFF5F1
Copy
100
#
FEDBCE
Copy
200
#
FFC4A4
Copy
300
#
F2995B
Copy
400
#
DF7A30
Copy
500
#
B45F19
Copy
600
#
904808
Copy
700
#
633203
Copy
800
#
442100
Copy
900
#
2D1100
Red
Copy
0
#
FFF4F4
Copy
100
#
FED6D7
Copy
200
#
FDB0B1
Copy
300
#
FA7370
Copy
400
#
E04542
Copy
500
#
C02C21
Copy
600
#
A41C1E
Copy
700
#
7B0A0C
Copy
800
#
570305
Copy
900
#
3A0102
Pink
Copy
0
#
FFF3FF
Copy
100
#
FEDDFA
Copy
200
#
FDB1E7
Copy
300
#
F373C0
Copy
400
#
E54399
Copy
500
#
BE276D
Copy
600
#
A51750
Copy
700
#
740830
Copy
800
#
550220
Copy
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
Use 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.
