Styles

Colour

How we use colour so it carries meaning consistently, meets accessibility, and works in light and dark across every Single Record product.

How colour is organised

Colour is held in three tiers, and which tier you are allowed to touch depends on what you are doing.

• Primitives are the raw palette, for example --color-blue-800. They carry no meaning. Never reference a primitive from a component.
• Semantic tokens carry the meaning, for example --sr-color-interactive-primary. This is the tier you build with.
• Component tokens exist only where one part of a component needs a value that cannot be expressed semantically.

Picking by role rather than by hue is what makes dark mode and future palette changes possible. A component that asks for "the primary interactive colour" keeps working when that colour changes. A component that asks for "Blue 800" does not.

/* Correct: ask for the role. */
.sr-panel {
  background: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  color: var(--sr-color-text-primary);
}

/* Wrong: a primitive, and a raw hex. */
.sr-panel {
  background: var(--color-blue-50);
  border: 1px solid #d8dde0;
}

Semantic tokens

These are the tokens to build with. Every value below is read from the published token artifact, so this table cannot drift from what ships.

Interactive

Surface

Text

Border

Contrast

Body text and essential UI must meet WCAG 2.2 AA: 4.5:1 for text, and 3:1 for large text, icons and borders. We target AAA where the pairing allows it. Validate a token against the surface it will actually sit on, not against white by default.

Ratios are computed at build time from the published token values.

Accents are not text colours

The brand accent --sr-color-brand-accent is an accent only. It does not carry white text at body size, so never use it to fill a button or any surface that needs white text on it. Use --sr-color-interactive-primary for that.

Never colour alone

Colour is never the only signal. This is a hard requirement, not a preference: it is WCAG 1.4.1, and in a clinical context a status that only reads as "red" is a patient-safety problem.

• Pair a status colour with text, and usually an icon as well.
• A selected table row carries a non-colour signal too, such as a selection control or a left accent border.
• Form validation states pair the colour with an error message tied to the field.
• Review screens in greyscale. If you cannot tell the states apart, it fails.

Focus

The focus ring is --sr-color-border-focus at #0d8bad, and it is the same colour in light and dark mode so that focus behaves predictably wherever a control appears. It scores 3.63:1 against the page background and 2.04:1 against the primary fill, so it stays visible on both.

There is no separate focus primitive. An earlier yellow focus colour was replaced by this one and has been removed from the palette, so if you find a yellow focus ring anywhere it is stale code.

.sr-button:focus-visible {
  outline: 3px solid var(--sr-color-border-focus);
  outline-offset: 2px;
}

Dark mode

Dark mode is a second set of values behind the same semantic names. A component written against semantic tokens needs no dark-mode code of its own. Because the names do not change, the rule stays the same: never reach past the semantic layer to a primitive, or the component will not follow the theme.

The palette

The raw primitives, rendered live from the published tokens. Reference these from semantic tokens only, never from a component. The number on each swatch is its step.

Blue, NHS Wales blue and the primary brand

Cyan, DHCW blue, used for the accent and the focus ring

Navy

Navy is deliberately a short ramp. It is a narrow utility family used for dark surfaces, disabled borders and disabled text, and steps are added only when a semantic token needs one.

Grey, the neutral UI ramp

Red, critical and destructive

Green, success

Yellow, warning

Info blue

Accessibility requirements