Colour Scales
Colour Scales
Brand Colour Scales
Each brand colour expands into a 10-step scale from lightest (50) to darkest (900). The base value is highlighted with a white top border.
Solar Gold
primary-gold
#FBF6E4
#F5E9BF
#EDDA96
#E2C76A
#D4B23E
#AF8B0F
#93750C
#755D0A
#584607
#3B2F05
Polar Sand
primary-sand
#FDFBF5
#F8F1E0
#F1E5C8
#EBD9AE
#DFC58C
#C9AB6A
#B0924E
#8E7439
#6B5729
#493B1B
Violet Energy
accent-violet
#F3EEF6
#E0D5E8
#C9B8D5
#B09AC0
#8C73A0
#684D7C
#574068
#463355
#352741
#241A2E
Aurora Green
accent-green
#ECF8F4
#CCEDE2
#A8E0CE
#84D3BA
#66C8A7
#51B793
#439A7B
#357C63
#285E4B
#1A4033
Nitrogen Blue
accent-blue
#E8F4F7
#BFE1E9
#93CCD8
#67B7C7
#4199AC
#1A7489
#156173
#114E5C
#0D3B46
#092830
Ember Rose
accent-rose
#F9EEEF
#F0D2D7
#E3B0B9
#D58D9A
#C46B79
#B04A5A
#943E4C
#78323D
#5C262F
#401A21
Functional Colour Scales
Semantic colours for UI feedback states, each with a full 10-step scale for flexible usage across light and dark contexts.
Success
functional-success
#EBF7F2
#C8EBDD
#A1DCC5
#79CCAD
#55BB93
#3D9E7A
#338566
#296B52
#1F523E
#15382B
Warning (Solar Flare)
functional-warning
#FBF1EC
#F5D9CC
#ECBCA8
#E19D82
#D98463
#D06A45
#B0593A
#8F482F
#6E3724
#4E2719
Error (Signal Red)
functional-error
#FDEEEF
#F9D4D5
#F2B2B5
#EA8E92
#E57479
#E05A60
#BE4C51
#9A3D42
#772F33
#542124
Info
functional-info
#EAF6F9
#C5E5ED
#9CD3E0
#72C0D2
#50ACC2
#3098B2
#288096
#206879
#184F5D
#103742
Usage Guidance
How to apply the scale steps across your UI to maintain consistency and hierarchy.
50 – 100
Backgrounds
Subtle tinted backgrounds, hover fills, wash layers
200 – 300
Borders & Dividers
Light borders, focus rings, secondary highlights
400 – 500
Primary UI
Buttons, icons, active elements — the core brand expression
600 – 700
Active / Pressed
Pressed states, dark mode accents, high-contrast elements
800 – 900
Text on Light
Dark-on-light text tinted with brand colour for richness