Work in progress
Colour
Colours are defined in the NHS iOS App Design as extensions on SwiftUI's Color.
All colours will adapt to dark mode, except for those with the 'Only' suffix, which are fixed.
Semantic
Use these colours in the context they’re designed for. In all ohter cases, use a named colour from the colour palette instead.
| Code |
Light |
Dark |
.nhsBackground
|
|
|
.nhsText
|
|
|
.nhsSecondaryText
|
|
|
Accent
This can be used as an accent colour, and represents the NHS brand blue.
| Code |
Light |
Dark |
.nhsAccent
|
|
|
Core palette
| Code |
Light |
Dark |
.nhsBlue
|
|
|
.nhsAquaGreen
|
|
|
.nhsBlack
|
|
|
.nhsGreen
|
|
|
.nhsOrange
|
|
|
.nhsPink
|
|
|
.nhsPurple
|
|
|
.nhsRed
|
|
|
.nhsWhite
|
|
|
.nhsWarmYellow
|
|
|
.nhsYellow
|
|
|
Greyscale
| Code |
Light |
Dark |
.nhsGrey1
|
|
|
.nhsGrey2
|
|
|
.nhsGrey3
|
|
|
.nhsGrey4
|
|
|
.nhsGrey5
|
|
|
Dark variants
| Code |
Light |
Dark |
.nhsDarkAquaGreen
|
|
|
.nhsDarkBlue
|
|
|
.nhsDarkGreen
|
|
|
.nhsDarkOrange
|
|
|
.nhsDarkPink
|
|
|
.nhsDarkPurple
|
|
|
.nhsDarkRed
|
|
|
.nhsDarkYellow
|
|
|
Pale variants
| Code |
Light |
Dark |
.nhsPaleAquaGreen
|
|
|
.nhsPaleBlue
|
|
|
.nhsPaleGreen
|
|
|
.nhsPaleOrange
|
|
|
.nhsPalePink
|
|
|
.nhsPalePurple
|
|
|
.nhsPaleRed
|
|
|
.nhsPaleYellow
|
|
|
Fixed colours
These use the same colour value in both light and dark mode. Use them when you need a colour that does not change.
| Code |
Light |
Dark |
.nhsBlueOnly
|
|
|
.nhsAquaGreenOnly
|
|
|
.nhsBlackOnly
|
|
|
.nhsGreenOnly
|
|
|
.nhsOrangeOnly
|
|
|
.nhsPinkOnly
|
|
|
.nhsPurpleOnly
|
|
|
.nhsRedOnly
|
|
|
.nhsWhiteOnly
|
|
|
.nhsDarkAquaGreenOnly
|
|
|
.nhsDarkBlueOnly
|
|
|
.nhsDarkGreenOnly
|
|
|
.nhsDarkOrangeOnly
|
|
|
.nhsDarkPinkOnly
|
|
|
.nhsDarkPurpleOnly
|
|
|
.nhsDarkRedOnly
|
|
|
.nhsDarkYellowOnly
|
|
|
.nhsPaleAquaGreenOnly
|
|
|
.nhsPaleBlueOnly
|
|
|
.nhsPaleGreenOnly
|
|
|
.nhsPaleOrangeOnly
|
|
|
.nhsPalePinkOnly
|
|
|
.nhsPalePurpleOnly
|
|
|
.nhsPaleRedOnly
|
|
|
.nhsPaleYellowOnly
|
|
|