Single Record Design System

The design system for the Single Record programme in NHS Wales (DHCW). It supports clinical and administrative products across web, Blazor/.NET, React and .NET MAUI. Every page here is a real implementation of the system, rendered from the built design tokens and the actual reference components, not a mockup.

Styles

Typography, colour, spacing, and the token translator.

Components

Buttons and tables, with live previews and framework code.

Figma & catalogue

The Figma library and the component catalogue.

Contribute

Report an issue or request a component or change.

Principles

Accessibility is a hard requirement. WCAG 2.2 AA is the minimum, AAA where feasible.
Consistency over novelty. Align with GDS and NHS England before inventing.
Tokens are the source of truth. Figma variables build to the same tokens this site consumes.

How content works here

For general UX guidance we link out to NHS.UK and GOV.UK rather than duplicate content that is maintained upstream. We write original guidance only for Single Record specifics: tokens, clinical rationale, and how our components behave.