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.
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.
Semantic Tokens
Semantic tokens map brand colours to functional roles, ensuring consistency across all components and contexts.
Surfaces
Text
Buttons
Borders
Inverse Theme
Icons
The Care UK icon library — 73 brand-specific icons across three groups: System (UI affordances), Social (external networks) and Care Home (facilities and amenities). All icons are Care UK-only and not shared across other brands in the multi-brand framework.
System
UI affordances — navigation, actions, status, feedback. 41 icons.
Social
External social networks. 4 icons.
Care Home
Facilities, amenities and services available in care homes. 28 icons.
Toggle
A pill-shaped switch with a magenta thumb. Used for binary on/off settings.
Specification
| Property | Value | Token |
|---|---|---|
| Track size | 34 × 14 px | — |
| Track radius | 7 px (full pill) | — |
| Thumb size | 20 × 20 px | — |
| Thumb colour (all states) | #D7088B | --color-brand-accent |
| Track — Off | #EBEBEB | — |
| Track — On | #EB83C5 | Pink 50 |
| Track — Disabled | #707070 | --color-grey-70 |
| Hover halo | 40 × 40 light purple | Dark Purple 10 |
| Thumb position | Centred vertically — overhangs track top & bottom by 3px | — |
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).