Here you’ll find out what our key brand colors are – and the structure rules we’ve designed to help show them at their best. The biggest change you’ll notice is that we’ve simplified our color palette to create more impact when we use our primary colors.
These are the key colors of the brand and the primary representation of Glance.
It’s important to note that the use of white is important in keeping things open and accessible. White also provides the contrast that gives all the other colors maximum impact.
We also have a collaboration gradient, with usage rules to follow.
NAME: Dark Blue
RGB: 218 92 52
HEX: 0B3885
CMYK: 100 89 18 5
PMS: 2736C
NAME: Light Blue
RGB: 47 169 224
HEX: 2FA9E0
CMYK: 69 16 0 0
PMS: 305C
NAME: Blue Gradient
RGB: 47 169 224 / 218 92 52
HEX: 2FA9E0 / 0B3885
CMYK: 69 16 0 0 / 100 89 18 5
NAME: White
RGB: 255 255 255
HEX: FFFFFF
CMYK: 0 0 0 0
Secondary focus colors
These colors are used to highlight information so should not be overused – in case their impact is lessened.
NAME: Focus Green
RGB: 3 201 155
HEX: 03C99B
CMYK: 70 0 54 0
PMS: 3385C
NAME: Focus Orange
RGB: 248 127 1
HEX: F87F01
CMYK: 0 61 100 0
PMS: 151C
NAME: Focus Purple
RGB: 168 112 223
HEX: A870DF
CMYK: 44 61 0 0
PMS: 265C
Neutral Colors
A selection of colors for use to create depth and readability.
NAME: Light
RGB: 0 0 0
HEX: 00A5F0
CMYK: 60 40 40 100
NAME: Blue Gray
RGB: 58 74 102
HEX: 3A4A66
CMYK: 83 69 38 24
PMS: 2378C
NAME: Blue
RGB: 190 213 240
HEX: BED5F0
CMYK: 23 9 0 0
PMS: 657C
NAME: Mid Blue
RGB: 232 239 248
HEX: E8EFF8
CMYK: 7 3 0 0
PMS: 656C
NAME: Light Blue
RGB: 243 246 250
HEX: F3F6FA
CMYK: 4 1 0 0
Color balance
It’s important that colors are used for the right purposes, as this helps create an overall color balance that sets the right tone of the brand.
Proportions
Below shows some examples of proportional use. Overall, white, and the two blues should be dominant. Use neutrals to add depth and variety – and use focus colors sparingly, to increase their impact when they’re used.
Gradient use
How to use gradient with text
The gradient should only be used sparingly (for greater impact) and requires set rules to ensure it works well.
White text is always legible on the gradient, but if you’re using text with two color types on a full page gradient the primary dark blue text should always lay on the light blue area of the gradient.
How to use the gradient bar
Here we have examples of the gradient being used as a bar to hold image blocks and copy. The gradient adds an energetic backdrop to the various elements on top.
IMAGE HOLDING BAR
WHITE TEXT ONLY
COVERS
HERO WEB BANNERS
When not to use the gradient
Often the use of the primary blues can be more impactful than using the gradient, for example if you want to bring more focus and legibility to items on top.
WHEN USING ICONS
WHEN USING BLOCK COLOR ON TOP
ON LOGO BLOCK
DON'T MIX TEXT COLORS ON BAR
Accessibility
On White
Here are the available color options when you’re producing communications digitally on white – (including accessibility ratings).
On Primary Blues
These are the colors that work well when producing communications digitally on the primary blues (including accessibility ratings).
On Neutrals
Here are colors that work well when producing communications with digitally neutral colors (including accessibility ratings).
