Color Palette

Sphere uses colors to help amplify the personality of our brand: crisp, balanced and recognizable. The aim of our palette is meant to enhance user experience and how they interact with our marketing and products.

Primary Colors

Primary colors are the core colors we use throughout our user interface. They should be used as the main colors to convey Sphere throughout our core products and marketing. Use 10% opacity stepper to create shades.

Deep Blue
#1b75bb
NAVY Blue
#2b388f
DARK blue
#1d2148
White
#FFFFFF
White
#FFFFFF

Secondary Colors

Secondary colors are meant to help highlight and compliment our primary colors. They help us break out of the box, but stay within our brand guidelines. Use 10% opacity stepper to create shades.

light Blue
#48a4ec
black
#1B1B1B
DARK gray
#D4D6D8
Light gray
#FAFAFA
Alert red
#E53820
success green
#51C71E
notice yellow
#F5BB0F

Gradient Color

A gradient is the gradual blending from one color to another. It makes objects stand out by adding a new dimension to the design and creating realism of the object. In simple terms, gradients add depth.
Use it for covers and backgrounds.

CSS Atributes
linear-gradient(345deg, #61B1E1 -1.5%, #13476A 100%);

Color Combinations

Below are the Sphere brand color combinations that are approved for use in our marketing and products collateral.

Az
Az
Az
Az
Az
Az
Az
Az
Az
Az
Az
Az