Colors

Our color palette plays a vital part in how we present ourselves. Our clean canvas of White and Charcoal represents our open approach, whilst a fusion of vibrant colors brings energy and differentiation.

Previewlink

Primary colorslink

Our primary color palette consists of White, Charcoal, Violet and Fuchsia. These colors are present across most touch points from marketing to product.

Fuchsia and Violet are our lead colors, helping us to be unique and stand apart from our competitors.

charcoal
c
C 100#414141
violet
v
V 100#694ED6
fuchsia
f
F 100#C137A2
white
w
W 100#FFFFFF

Primary variantslink

The dark versions of the primary colors have a black overlay with 30% of opacity.

The numbers 100, 75, 50... are levels of tint of the color.

check
C 100 - dark#2D2D2D
c
C 100#414141
check
C 75#707070
check
C 50#9F9F9F
check
C 25#CECECE
check
C 10#EAEAEA
check
C 2#FAFAFA
check
V 100 - dark#493694
v
V 100#694ED6
check
V 75#8F7BE1
check
V 50#B4A6EA
check
V 25#D9D3F5
check
F 100 - dark#862670
f
F 100#C137A2
check
F 75#D069B9
check
F 50#DF9AD0
check
F 25#EFCCE7

Secondary colorslink

Our extended palette works alongside Fuchsia and Violet to complete a full fusion of colors across the spectrum.

Secondary colors must always be used with Fuchsia and Violet. They must never replace our primary colors.

Crimson
r
R 100#E40046
check
R 75#EA3F74
check
R 50#F17FA2
check
R 25#F8BDCF
Amber
o
O 100#FF8A3D
check
O 75#FFA76D
check
O 50#FFC39C
check
O 25#FFE1CD
Gold
y
Y 100#F0B323
check
Y 75#F3C65A
check
Y 50#F7D991
check
Y 25#FBEBC7
Lime
l
L 100#D2D755
check
L 75#DDE17F
check
L 50#E8EAA9
check
L 25#F3F4D3
Grass
g
G 100#56C271
check
G 75#80D194
check
G 50#A9E0B7
check
G 25#D4EFDA
Ocean
b
B 100#5BC1D7
check
B 75#84D0E1
check
B 50#ADE0EB
check
B 25#D6EFF5

Gradientslink

The gradient conveys the 'fusion' element of our brand. Inspired by the blend of colors in our logo, it plays a supporting role to provide vibrancy where flat color would feel too heavy.

vertical
g
horizontal
V
F
R
R
0%#694ED6
70%#C137A2
90%#E95247
100%#E42D1A

Usagelink

check
G 100#414141
close
R 100#414141
Success / Error

Green and red are commonly associated with positive/negative outcome. We use Grass and Crimson from our palette with a tint level of 100 to respectively evoke successful and error states.

C 2#FAFAFA
Background

For backgrounds we recommend a subtle tint of Charcoal. Associated with white, it helps separating blocks without cluttering the interface.

high emphasis100%
medium emphasis50%
low emphasis25%
Emphasis

Three levels of emphasis are available. A higher emphasis will draw more attention to a label while low emphasis is mostly used for disabled texts.