Brand colours
These colours don't have specific meaning. Use them thoughtfully to ensure everything remains accessible and on-brand.
| Name | Value | |
|---|---|---|
| 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
| Name | Value | |
|---|---|---|
| brand red | #d8352a |
Text
| Name | Value | |
|---|---|---|
| text primary | #000000 | |
| text secondary | #787887 | |
| text tertiary | #93939f | |
| text white | #ffffff |
Background
| Name | Value | |
|---|---|---|
| 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
| Name | Value | |
|---|---|---|
| border light | #e1e1e3 | |
| border medium | #d6d6da | |
| border strong | #93939f | |
| border focus | #505aaf |
Links
| Name | Value | |
|---|---|---|
| link default | #505aaf | |
| link hover | #29339b |