Guidelines

How to use this design system well. Standards for accessibility, content, search, performance and tokens that apply to every component in the catalog and to any page assembled from them.

What this section is

The component catalog shows what the system contains. This section covers how to use it: the standards a page has to meet once the components are assembled into one.

Every guideline here is written to be checkable. Where a rule has a number attached, that number is the pass mark, not a suggestion.

How to read these pages

  • Rules apply to output, not to source. A component can be perfectly built and still produce an inaccessible page if the content passed into it is wrong.
  • Automated checks cover part of the ground. This system runs schema, contrast and axe validation on every component preview. Those catch a slice of the failures. The rest is manual review.
  • Findings stay visible. Open issues are reported rather than hidden. A guideline page states the standard, and the validation report states where the system currently sits against it.
Loading tokens…

Sections

Accessibility

The conformance target, the contrast floors, and what a keyboard has to be able to reach.

Performance

Core Web Vitals budgets, image and font loading, and what to measure after launch.

Content and Writing

Voice, capitalisation, button and error copy, and the length each slot expects.

SEO

Metadata, heading order, structured data and the URL rules that keep pages indexable.

Design Tokens

The variable layer every component reads from, and how to extend it safely.

Where the rules come from

These guidelines restate public standards rather than invent house rules:

Anything that is a house decision rather than a standard is marked as such on the page where it appears.