Care UK Design System

A guide to our brand colours, typography, semantic tokens, and interactive components.

Colour Palette

The Care UK brand palette is anchored by Dark Purple as the primary colour, with Pink and Dark Pink as accent colours. The full primitive set includes warm secondary tones.

Dark Purple 100
#560A61
--color-brand-primary
Dark Blue 100
#321267
--color-brand-primary-dark
Pink 100
#D7088B
--color-brand-accent
Dark Pink 100
#9E1E87
--color-surface-secondary
Medium Purple 100
#663399
Secondary/Medium Purple
Sky Blue 100
#00A8E0
Secondary/Sky Blue
Green 100
#96D600
Secondary/Green
Yellow 100
#FFD500
Secondary/Yellow
Orange 100
#FFA400
Secondary/Orange
Dark Purple 10
#EDE5EE
Background/Secondary
White
#FFFFFF
--color-surface-default

Typography

All type is set in Apex Rounded — a friendly, accessible typeface. Two weights are used: Book (400) for body copy and Medium (600) for headings, navigation, and emphasis.

2XL Headline64px / 90 lh
Weight 600
Care starts here
XL Headline48px / 68 lh
Weight 600
Care starts here
Large Headline36px / 50 lh
Weight 600
Care starts here
Medium Headline30px / 42 lh
Weight 600
Care starts here
Small Headline24px / 34 lh
Weight 600
Care starts here
XS Headline21px / 30 lh
Weight 600
Care starts here
Body Large18px / 25 lh
Weight 400
We provide award-winning care for older people and those living with dementia across our network of homes.
Body Regular16px / 22 lh
Weight 400
We provide award-winning care for older people and those living with dementia across our network of homes.
Body Small14px / 20 lh
Weight 400
We provide award-winning care for older people and those living with dementia across our network of homes.
Button Text18px / 25 lh
Weight 500 · UPPERCASE
Find a care home

Semantic Tokens

Semantic tokens map brand colours to functional roles, ensuring consistency across all components and contexts.

Surfaces

Background/Primary#FAFAFA
Background/White#FFF
Background/Secondary#EDE5EE
Background/Tertiary#560A61
Background/Alternate-1#9E1E87

Text

Text/Primary#333333
Text/Secondary#560A61
Text/Tertiary#FFF
Text/Link#D7088B
Text/Disabled#999

Buttons

Button/Primary#560A61
Button/Secondary#FFF
Button/Tertiary#D7088B
Button/Alternate-1#321267

Borders

Border/Primary#EDE5EE
Border/Secondary#D7088B
Border/Tertiary#FFF

Inverse Theme

Surface#560A61
Text#FFF
Links#FEC576
Focus ring#FEC576

Buttons

Buttons use Apex Rounded at 18px uppercase with consistent padding of 12px vertical and 20px horizontal. Each variant supports Default, Hover, and Pressed states.

Primary Button

The default action button. Dark Purple 100 fill with white text. Darkens to Dark Blue 100 on press.

Default
Hover
Pressed
Try it

Secondary Button

Outlined variant for secondary actions. White fill with Dark Purple border and text. Fills with Dark Purple on hover.

Default
Hover
Pressed
Try it

Secondary on Colour Background

White-outlined variant used on coloured backgrounds. Fills with brand purple on hover.

Default
Hover
Pressed
Try it

Secondary on Image

Solid white variant used over photographic backgrounds. Gains a border on hover.

Default
Hover
Pressed
Try it

Accessibility — Contrast Grid

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA). Large text (18px+ bold or 24px+) requires 3:1 (AA) and 4.5:1 (AAA).