Semantic palette
The semantic colour palette uses colour to convey meaning and enhance user understanding. These colours are linked to specific emotions, actions or concepts, providing visual cues that support intuitive interaction across digital and print content.
Common examples include green for success, red for errors or warnings, and blue for information. These associations help guide users by reinforcing important messages and promoting consistent communication.
The semantic palette is designed to be accessible, ensuring that colour choices meet contrast requirements and are inclusive for users with colour vision deficiencies.
Success
success-50
#eff9ed
success-100
#e0f3de
success-150
#d2eccf
Success 04
success-200
#c4e5c0
success-250
#aad6a5
success-300
#8fc78a
success-350
#74b76f
Success 03
success-400
#58a854
success-450
#49a146
success-500
#399936
success-550
#259224
Success 02
success-600
#008a07
success-650
#007204
success-700
#005a02
success-750
#004401
Success 01
success-800
#002f00
success-850
#002200
success-900
#001600
success-950
#000b00
Warning
warning-50
#fff3ed
warning-100
#ffe8de
warning-150
#ffddcf
Warning 04
warning-200
#fdd2c0
warning-250
#f6bda5
warning-300
#eea88a
warning-350
#e6936f
Warning 03
warning-400
#dd7d53
warning-450
#d87244
warning-500
#d36734
warning-550
#ce5c21
Warning 02
warning-600
#c95000
warning-650
#a83f03
warning-700
#882f03
warning-750
#692001
Warning 01
warning-800
#4b1200
warning-850
#390a00
warning-900
#270400
warning-950
#170100
Danger
danger-50
#fff0ef
danger-100
#ffe2e1
danger-150
#ffd4d4
Danger 04
danger-200
#fdc6c6
danger-250
#f4acad
danger-300
#ea9294
danger-350
#df787c
Danger 03
danger-400
#d35d65
danger-450
#cd4e59
danger-500
#c63f4e
danger-550
#bf2c42
Danger 02
danger-600
#b81237
danger-650
#990b2a
danger-700
#7c061f
danger-750
#5f0214
Danger 01
danger-800
#44000a
danger-850
#330005
danger-900
#230002
danger-950
#140001
Info
info-50
#e9eef7
info-100
#d4ddeb
info-150
#c0cce0
Info 04
info-200
#acbbd5
info-250
#96a9cc
info-300
#8098c2
info-350
#6b86b8
Info 03
info-400
#5775ae
info-450
#4d6ca9
info-500
#4264a4
info-550
#385b9e
Info 02
info-600
#2e5299
info-650
#23427f
info-700
#193366
info-750
#10254f
Info 01
info-800
#071738
info-850
#040f2a
info-900
#02071c
info-950
#00030f