Color Usage

The Sentient Science color palette is inspired by the confidence, trust and accuracy that we would like our users to walk away with feeling when they use our products and services.

The Role of Blue - Hero

I would like to introduce you to Cerulean. This is our primary color that is used to help us reinforce our presence and unify our touch points from marketing to product. It is sharp and clear, making it bold and optimistic, while at the same time it's soft and inviting. It is at the heart of every communication, and should be used intentionally but sparingly. As with all colors in the palette, you should be mindful of the color values provided in these guidelines. When used appropriately and accurately, the colors have an incredible impact.

Where do we use it?

Cerulean is often used for our logo color, backgrounds, buttons, and text links. The accompanying shades of blue can be used to create depth, motion and hover effects. It can also be used for some typography, as long as it passes WCAG AA requirements.

Primary Blue

A
Pass
A
Fail
A
Pass
A
Pass
Cerulean
0, 116, 168
100, 31, 0, 34
#0074a8
7690 C
199, 100, 33

Additional Shades

A
Pass
A
Pass
A
Fail
A
Fail
Deep Blue Sky
0, 168, 241
100, 30, 0, 5
#00A8F1
2925 C
198, 100, 47
A
Fail
A
Fail
A
Pass
A
Pass
Blue Lagoon
0, 93, 133
100, 30, 0, 48
#005D85
647 C
198, 100, 26

The Role of Orange - Sidekick

I would like to introduce you to Dark Orange. This is our secondary color, also known as an accent color. This serves as the sidekick to our hero Cerulean. Orange is a color compliment to Blue which allows it to stand out to call attention. With great power comes great responsibility and that is why Orange should be used sparingly so it does not over power our primery brand color.

Primary Orange

A
Pass
A
Pass
A
Fail
A
Fail
Dark Orange
255, 140, 0
0, 45, 100, 0
#FF8C00
151 C
33, 100, 50

Additional Shades

A
Pass
A
Pass
A
Pass
A
Fail
Mango Tango
212, 112, 0
0, 47, 100, 17
#D47000
1385 C
32, 100, 42
A
Fail
A
Fail
A
Pass
A
Pass
Golden Brown
163, 86, 0
0, 47, 100, 36
#A35600
160 C
32, 100, 32

The Role of White

We use white mainly to define space, to balance out the other colors in the palette, and to accentuate other important visual elements.

A
Pass
A
Pass
A
Fail
A
Fail
White
255, 255, 255
0, 0, 0, 0
#FFFFFF
-
0, 0, 100

The Role of Neutrals

Dark Neutrals

The dark neutrals are very effective for creating contrast and are therefore the primary color used for typography. Occasionally the dark neutrals are found in print materials but they rarely dominate the palette.

A
Fail
A
Fail
A
Pass
A
Pass
Arsenic
54, 69, 79
32, 13, 0, 69
#36454F
432 C
204, 19, 26
A
Fail
A
Fail
A
Pass
A
Pass
Midnight
34, 48, 61
44, 21, 0, 76
#22303D
7546 C
209, 28, 19
A
Fail
A
Fail
A
Pass
A
Pass
Tangaroa
21, 38, 54
61, 30, 0, 79
#152636
7547 C
209, 44, 15

Light Neutrals

Light neutrals are helpful for offsetting content in a primarily white layout without losing warmth and cleanliness, and are therefore often used as a background color for web components. They should never be used for text on light backgrounds because they do not create enough contrast. However, their subtlety allows for them to be helpful in creating subtle shadows or depth.

A
Pass
A
Pass
A
Fail
A
Fail
Alica Blue
242, 243, 244
1, 0, 0, 4
#F2F3F4
656 C
210, 8, 95
A
Pass
A
Pass
A
Fail
A
Fail
Linke Water
203, 207, 218
7, 5, 0, 15
#CBCFDA
538 C
224, 17, 83
A
Pass
A
Pass
A
Fail
A
Fail
Rock Blue
156, 164, 188
17, 13, 0, 26
#9CA4BC
535 C
225, 19, 67

Reference:

Last Updated: 1/11/2019, 10:38:51 AM