Color is a tool that distinguishes our brand and helps us create consistent and intuitive experiences in our products. Rock's colors were designed to be versatile and accessible.
Blue is our main color, it can be viewed throughout our products and marketing. It is also used for the icon on our logos.
From the psychology perspective, blue can mean many things. If lighter, it can mean energy, liveness, vibration, restlessness, impressiveness, good spirit and fun. If darker, the meaning is more of credibility, authority, strength, tradition and class. Our blue is a mix of those meanings. It represents youthfulness, liveness and also authority and credibility.
It is important to remember that these meanings are relative, so they can change according to the context in which the color appears and the pairing with other ones.
Our dark gray is used on our logo and used for copy and background colors.
White is the preferred background color as it reflects clarity, minimalism and a clean design. It can also be used as a text color on a colored background.
Our secondary and extended palette are used in our sub-brands, illustrations, channels, and help to diversify our communication, working as a support for our main colors.
Secondary colors are used to provide vibrancy to a design. Use these energetic colors to complement primary colors and break up white space.
These are all of our color tokens and their names. Each hue has 10 tones, ranging from
900. For product, this more comprehensive number is required for two main reasons:
Here they are:
Our passion for colors doesn’t stop at solid colors. Below are various gradients you can use in a design.
Keep in mind that gradients should be used sparingly and mostly for background colors or in illustrations.
We saw above that each hue have tokens going from
50 being the lightest tone and
900 being the darkest. White is represented by
0, while black is represented by
To make it easier for designers and developers to create accessible combinations, we have a few general rules that are applicable to all hue combos.
Black text is WCAG AA accessible on colors ranging from
400. White text is accessible on colors from
900. So, 5 combinations for black and 5 for white.
If the difference between two values is 450 or greater, the combination is WCAG AA accessible for text use, with minimum contrast ratio of 4.5:1.
500 - 50 = 450. So, it's an accessible combination.
500 - 0 = 500. So, it's an accessible combination.
400 - 0 = 400. So, it's not an accessible combination.
900 - 400 = 500. So, it's an accessible combination.
For graphical elements, the rule is a little more flexible. The contrast ratio can be minimal 3:1.
Combinations of colors number 400 with 50 or white wouldn't be accessible for text, but they are for graphic elements, such as icons.