Design with purpose, build with compassion
Welcome to the British Red Cross Design System, a toolkit for creating accessible, consistent, and human-centred digital experiences that support people in crisis.
What is the design system?
The design system ensures consistency, accessibility, and efficiency across all digital products. It provides reusable foundations, components, and patterns to help teams create user-friendly experiences for everyone who uses with our services online.
Accessibility
Accessibility is central to everything we design and build. Our aim is to create digital experiences that everyone can use with ease and confidence.
Read more about our approach in our Design Accessibility Information.
Get started
Getting started for designers
For designer, our getting started guide explains how to use our components, patterns and design resources. It’s the best place to begin when working with the British Red Cross design system.
Getting started for developers
Our design system components are provided in Storybook, along with code examples.
Foundations
Explore the core elements that shape our design language, including colour, typography, spacing, accessibility, and tone of voice.
Components
Browse our library of UI components designed for consistency, accessibility, and ease of use across all British Red Cross digital products.
Patterns
Discover common user journeys and interaction patterns that help people navigate, donate, volunteer, and get support.