Colour

Our colour palette creates visual harmony and ensures accessibility across all our applications, helping us communicate clearly and effectively.

The Conversation

Brand colours

These colours don't have specific meaning. Use them thoughtfully to ensure everything remains accessible and on-brand.

NameValue
white
#ffffff
black
#000000
gray
50
100
200
300
400
500
600
700
800
900
red
50
100
200
300
400
500
600
700
800
900
indigo
50
100
200
300
400
500
600
700
800
900
blue
50
100
200
300
400
500
600
700
800
900
green
50
100
200
300
400
500
600
700
800
900
yellow
50
100
200
300
400
500
600
700
800
900

Semantic colours

These colours are designed for particular use cases. They help us maintain consistent, purposeful colour usage across all our products.

Brand

NameValue
brand red
#d8352a

Text

NameValue
text primary
#000000
text secondary
#787887
text tertiary
#93939f
text white
#ffffff

Background

NameValue
background light primary
#ffffff
background light secondary
#f1f1f2
background light tertiary
#e1e1e3
background dark primary
#202020
background dark secondary
#383838
background dark tertiary
#4b4b4e
background donation primary
#d8352a
background donation secondary
#b81f14
background newsletter primary
#29339b
background newsletter secondary
#202879
background green primary
#29a37a
background green secondary
#1f7a5c

Border

NameValue
border light
#e1e1e3
border medium
#d6d6da
border strong
#93939f
border focus
#505aaf

Links

NameValue
link default
#505aaf
link hover
#29339b