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
#
140529
PMS
276 C
Copy
Black
#
0D0D17
PMS
Black 6C
Copy
Dark
#
373753
Copy
Mid
#
73739C
Copy
Light
#
D4D4E3
Copy
White
#
F8F8FA
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.
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
#
140529
PMS
276 C
Copy
Black
#
0D0D17
PMS
Black 6C
Copy
Dark
#
373753
Copy
Mid
#
73739C
Copy
Light
#
D4D4E3
Copy
White
#
F8F8FA
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
#
5DB9FE
Copy
Base
#
2B95ED
Copy
Dark
#
0A69C2
Success
Copy
Light
#
79E289
Copy
Base
#
32B84B
Copy
Dark
#
29893C
Warning
Copy
Light
#
F8D859
Copy
Base
#
F3B435
Copy
Dark
#
DE6B08
Error
Copy
Light
#
FF8A8A
Copy
Base
#
FF4242
Copy
Dark
#
D02323
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
#
EFEBFF
Copy
100
#
E5DBFF
Copy
200
#
D0BFFF
Copy
300
#
AB8DFB
Copy
400
#
896BF5
Copy
Brand color
Primary
500
#
680CE9
Copy
600
#
44108E
Copy
700
#
280953
Copy
800
#
1D073C
Copy
Brand color
Secondary
900
#
140529
Gray
Copy
Brand color
White
0
#
F8F8FA
Copy
100
#
F3F3F7
Copy
Brand color
Light
200
#
D4D4E3
Copy
300
#
9D9DBE
Copy
Brand color
Medium
400
#
73739C
Copy
500
#
4E4E74
Copy
Brand color
Dark
600
#
373753
Copy
700
#
171726
Copy
800
#
11111D
Copy
Brand color
Black
900
#
0D0D17
Blue
Copy
0
#
E7F5FF
Copy
100
#
C7E7FF
Copy
200
#
9ED5FF
Copy
300
#
5DB9FE
Copy
400
#
2B95ED
Copy
500
#
0A69C2
Copy
600
#
0B3C6A
Copy
700
#
062541
Copy
800
#
03172B
Copy
900
#
021122
Teal
Copy
0
#
E4FCF7
Copy
100
#
BAF8EB
Copy
200
#
8EF1DE
Copy
300
#
4DE0C3
Copy
400
#
0DBA9A
Copy
500
#
02856F
Copy
600
#
025043
Copy
700
#
023129
Copy
800
#
011E19
Copy
900
#
011915
Green
Copy
0
#
EAFCEE
Copy
100
#
BCF6C3
Copy
200
#
A3F0AE
Copy
300
#
79E289
Copy
400
#
32B84B
Copy
500
#
29893C
Copy
600
#
165523
Copy
700
#
0C3B16
Copy
800
#
08260E
Copy
900
#
041A09
Yellow
Copy
0
#
FDF8DD
Copy
100
#
FDF2C1
Copy
200
#
FCEA9C
Copy
300
#
F8D859
Copy
400
#
F3B435
Copy
500
#
DE6B08
Copy
600
#
9D4206
Copy
700
#
6E2E03
Copy
800
#
441903
Copy
900
#
300903
Orange
Copy
0
#
FFF2E0
Copy
100
#
FFE3C2
Copy
200
#
FFD6A3
Copy
300
#
FFBA66
Copy
400
#
FD8535
Copy
500
#
E54C10
Copy
600
#
9D4206
Copy
700
#
611805
Copy
800
#
440F04
Copy
900
#
300903
Red
Copy
0
#
FFE5E5
Copy
100
#
FFD6D6
Copy
200
#
FFC2C2
Copy
300
#
FF8A8A
Copy
400
#
FF4242
Copy
500
#
D02323
Copy
600
#
8A0F0F
Copy
700
#
5C0A0A
Copy
800
#
490303
Copy
900
#
3A0404
Pink
Copy
0
#
FFE5F0
Copy
100
#
FFD1E3
Copy
200
#
FCC2D7
Copy
300
#
FA89B2
Copy
400
#
E55285
Copy
500
#
CF2560
Copy
600
#
811239
Copy
700
#
530923
Copy
800
#
44041A
Copy
900
#
360215
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.
