Design System Showcase
Colour Palette
Purple
#541c35
Accent Purple
#a5546c
Bright Purple
#9470A1
Bright Purple 2
#AD86BB
Pale Purple
#E7E8F3
Dusty Purple
#C9C8E2
Pale Purple 2
#7F415C
Red
#c85869
Red Pale
#DF807D
Rose
#D37987
Peach
#eebab9
Pink
#f4c2c1
Blue
#b7c5d0
Stone
#b2b2b2
Stone 2
#BEA4A4
Light White
#d8d8d8
Grey
#e9e2d9
Grey 2
#F0F5FA
Mid Grey
#BFBFBF
Cream
#fff8f4
Cream 2
#FFF9F5
Cream 3
#FFFAF6
Pale White
#FBF9FC
Pale Blue
#ECEDF5
NIHR Blue
#144578
Black
#1f2a2e
Off Black
#1F2A2E
Dark Green
#07424A
Wind Chimes
#D6CED8
Calm Healing
#BFB5C1
Dark Harmonies
#ABABAB
Foggy Echos
#B8B8B8
Lightening Sparks
#CED5E9
Ice and Silence
#DFE7EE
Typography Scale
Headlines
This is a headline
Size: 42px (desktop and mobile)
Line-height: 110%
Font: Alegreya Sans Medium (500)
Body Text
This is body text that shows the consistent typography used throughout the site on both mobile and desktop.
Size: 22px (desktop and mobile)
Line-height: 29px
Font: Inter Medium (500)
Footer Text
Mobile: 16px / Desktop: 20px
Font: Inter
Navigation
Size: 18px (desktop), 14px (mobile)
Line-height: 130% (desktop), 100% (mobile)
Font: Alegreya Sans Bold
Letter spacing: 0.08em
Tailwind Text Sizes
Font Families
Inter (Sans Serif)
Regular: The quick brown fox jumps
Medium: The quick brown fox jumps
Semi-bold: The quick brown fox jumps
Bold: The quick brown fox jumps
Used for: Body text, footer text
Manrope (Sans Serif)
Regular: The quick brown fox jumps
Medium: The quick brown fox jumps
Semi-bold: The quick brown fox jumps
Bold: The quick brown fox jumps
Used for: Title text (non-English languages)
Alegreya Sans (Title)
Regular: The quick brown fox jumps
Medium: The quick brown fox jumps
Bold: The quick brown fox jumps
Used for: Headlines, navigation, titles (English only)