Theme Branding Guide

Explore style components

Explore Components

Colours

dark

#11171f

17, 23, 31

mid-dark

#1d1f2d

29, 31, 45

mid-light-dark

#30334b

48, 51, 75

light-dark

#51557e

81, 85, 126

mid-dark-light

#6c6f9e

108, 111, 158

mid-light-dark-light

#7882c9

120, 130, 201

light-dark-light

#8c93e1

140, 147, 225

primary-dark

#4a3e54

74, 62, 84

primary

#604d71

96, 77, 113

primary-mid-light

#9173ab

145, 115, 171

primary-light

#bcb0d2

188, 176, 210

secondary-dark

#5f5e3a;

95, 94, 58

secondary

#7e7c4f

126, 124, 79

secondary-mid-light

#abaa68

171, 170, 104

secondary-light

#c7c69d

199, 198, 157

tertiary-dark

#385b54

56, 91, 84

tertiary

#468074

71, 128, 116

tertiary-mid-light

#66ac9e

102, 172, 158

tertiary-light

#9ad6ca

154, 214, 202

success-dark

#0e7159

14, 113, 89

success

#00916d

0, 145, 109

success-mid-light

#4ac6a7

74, 198, 167

success-light

#a7ded0

167, 222, 208

info-dark

#375763

55, 87, 99

info

#6795b1

103, 149, 177

info-mid-light

#82adc8

130, 173, 200

info-light

#9accd6

154, 204, 214

warning-dark

#786942

120, 105, 66

warning

#b19a5e

177, 154, 94

warning-mid-light

#c8b884

200, 184, 132

warning-light

#d6d2a4

214, 210, 164

danger-dark

#774641

119, 70, 65

danger

#b16d67

177, 109, 103

danger-mid-light

#cc9b95

204, 155, 149

danger-light

#d8b9ac

216, 185, 172

light

#cdd5e0

205, 213, 224