Brand colors
Each individual color has its own meaning:
- Blue: sky, wisdom, dependable, committed
- Green: nature, balance, growth, compassion
- Ochre: sun/light, optimism, creativity, clarity
- Red: energy, passion, authority, confidence
These colors and their meanings help define the way our audience feels about Skylight’s brand. It also helps us create assets that reflect the emotions we want to evoke. Using primary colors demonstrates how we start with basic building blocks, and can combine them into anything.
Primary palette
blue-200
#1d5392
blue-100
#468fba
ochre-40
#fbe8be
gray-300
#1c1d20
gray-200
#37383b
gray-100
#54565a
The Skylight brand mainly uses blue, gray, and ochre. The blue is the accent color for the gray text. The light ochre is a tertiary color used for backgrounds.
Secondary palette
red-100
#df635c
ochre-100
#f4c55c
green-100
#80b690
gray-80
#76767b
gray-40
#bbbbbd
gray-20
#ddddde
Skylight’s secondary palette contains the rest of the color logos. We use these colors, along with blue, in illustrations.
We use the gray colors for text, charts, etc.
Tints
Blue
blue-20
blue-20
#dae9f1
blue-40
blue-40
#b5d2e3
blue-60
blue-60
#90bcd6
blue-80
blue-80
#6ba5c8
blue-100
blue-100
#468fba
blue-200
blue-200
#1d5392
blue-300
blue-300
#031a54
Green
green-20
green-20
#dfede3
green-40
green-40
#bfdbc7
green-60
green-60
#b3d3bc
green-80
green-80
#99c5a6
green-100
green-100
#80b690
green-200
green-200
#609c70
green-300
green-300
#418152
green-400
green-400
#295C30
Red
red-20
red-20
#f9e0de
red-40
red-40
#f2c1be
red-60
red-60
#eca19d
red-80
red-80
#e5827d
red-100
red-100
#df635c
red-200
red-200
#ba3932
red-300
red-300
#961c0b
Ochre
ochre-20
ochre-20
#fdf3de
ochre-40
ochre-40
#fbe8be
ochre-60
ochre-60
#f8dc9d
ochre-80
ochre-80
#f6d17d
ochre-100
ochre-100
#f4c55c
ochre-200
ochre-200
#e99821
ochre-300
ochre-300
#a66910
ochre-400
ochre-400
#834e00
Gray
gray-5
gray-5
#f8f8f8
gray-20
gray-20
#ddddde
gray-40
gray-40
#bbbbbd
gray-60
gray-60
#989a9c
gray-80
gray-80
#76767b
gray-100
gray-100
#54565a
gray-200
gray-200
#37383b
gray-300
gray-300
#1c1d20
To provide a practical range of values for web/screen applications, we’ve extended the original base palette (indicated by the -100 suffix).
We also added labels to each swatch so you can check whether there’s sufficient contrast to meet WCAG 2.0 Level AA guidelines.