Colors

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.

Primary colors#

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.

Secondary colors#

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.

Color tokens#

These are all of our color tokens and their names. Each hue has 10 tones, ranging from 50 to 900. For product, this more comprehensive number is required for two main reasons:

States: interfaces are interactive, so each component can have 2 to 6 different states (e.g. hover, active, pressed) and this requires lighter and darker tones of each hue;
Dark mode: experiences with dark mode have become more and more frequent, because they help to reduce tiredness in the eyes when using them at night or in dark environments. When you "invert" the colors of an interface, tones that were previously dark tend to become lighter, hence the need for more tones to support this different approach.

Here they are:

Black & White#

black

#000000

white

#FFFFFF

Gray#

gray 50

#F7FAFD

gray 100

#EDF1F7

gray 200

#E2E7F0

gray 300

#CBD2E0

gray 400

#A0ABC0

gray 500

#677389

gray 600

#4A5568

gray 700

#2D3648

gray 800

#1A202C

gray 900

#171923

Blue#

blue 50

#F5F8FF

blue 100

#C0D6FF

blue 200

#8BB3FD

blue 300

#5C93F7

blue 400

#3576ED

blue 500

#225ED8

blue 600

#1649BC

blue 700

#0F369B

blue 800

#0B2574

blue 900

#040C2A

Purple#

purple 50

#F9F7FF

purple 100

#DAD2FF

purple 200

#BAADFC

purple 300

#9D8AF5

purple 400

#826DEB

purple 500

#6B58D6

purple 600

#5647BB

purple 700

#42379A

purple 800

#2D2673

purple 900

#141236

Pink#

pink 50

#FFF5F9

pink 100

#FFC2D9

pink 200

#FF90BB

pink 300

#FC639F

pink 400

#F23F87

pink 500

#D6236D

pink 600

#B21056

pink 700

#89063F

pink 800

#590129

pink 900

#320117

Red#

red 50

#FFF6F6

red 100

#FFC7C7

red 200

#FF9696

red 300

#FD6969

red 400

#F34242

red 500

#E01F1F

red 600

#B61B1B

red 700

#8A1919

red 800

#561212

red 900

#310D0D

Orange#

orange 50

#FFF9F6

orange 100

#FFD0B8

orange 200

#FFA77A

orange 300

#F87E42

orange 400

#F46421

orange 500

#D43D02

orange 600

#A42600

orange 700

#7B1600

orange 800

#4B0900

orange 900

#330300

Yellow#

yellow 50

#FFF9ED

yellow 100

#FFECBB

yellow 200

#FFDD87

yellow 300

#FFB92E

yellow 400

#DB7500

yellow 500

#B35C00

yellow 600

#883E01

yellow 700

#742F01

yellow 800

#5F2102

yellow 900

#3C0901

Green#

green 50

#EEFCF3

green 100

#BDEFCE

green 200

#88DFA5

green 300

#46BD6F

green 400

#2AA254

green 500

#157F3F

green 600

#0D6331

green 700

#0F4D29

green 800

#0B371F

green 900

#072C19

Teal#

teal 50

#ECFCFC

teal 100

#C1F9F8

teal 200

#8FEBEA

teal 300

#39D2D2

teal 400

#009E9E

teal 500

#008080

teal 600

#006666

teal 700

#004D4D

teal 800

#003333

teal 900

#062424

Cyan#

cyan 50

#EAFAFC

cyan 100

#B9EFF9

cyan 200

#8CE5F5

cyan 300

#4DC5DB

cyan 400

#1C9BB5

cyan 500

#077C94

cyan 600

#0A6275

cyan 700

#094E5E

cyan 800

#043542

cyan 900

#022833

Gradient colors#

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.

Accessibility#

We saw above that each hue have tokens going from 50 to 900, 50 being the lightest tone and 900 being the darkest. White is represented by 0, while black is represented by 1000.

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.

Text combinations with black & white#

Black text is WCAG AA accessible on colors ranging from 50 to 400. White text is accessible on colors from 500 to 900. So, 5 combinations for black and 5 for white.

Text combinations between tones#

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.