DrDoctor Design System docs

Browse foundations and components using the navigation on the left. New here? Start with the overview below.

Principles

TBC — the design principles are still to be agreed with the design guild and will be added here once confirmed.

About the versioning

Assets are published to https://assets.drdoctor.co.uk under a versioned path, for example /v0.4/main.css. The current version is v0.4.

  • Versions are additive. Older paths are kept and never removed, so existing apps keep working when a new version ships.
  • Adopt the latest version promptly. When every patient app references the same version, a patient downloads and caches a single copy of the assets across all apps, rather than a different version per page.
  • Version numbers match the CDN path (e.g. v0.4) and are recorded in CHANGELOG.md following the Keep a Changelog format. New changes are added under a placeholder ## [X.Y.Z] - DATE heading that is filled in when the pull request is merged.

Overall page structure

Load the design system stylesheet in the head, then optionally a single trust theme after it:

              
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/v0.4/main.css" />
<!-- optional: one trust theme, loaded after main.css -->
<link rel="stylesheet" href="https://assets.drdoctor.co.uk/themes/gstt.css" />

A typical page body starts with a skip link, wraps its content in .body__wrapper, and ends with a footer:

              
<body>
  <a href="#main-content" class="skip-link">Skip to main content</a>

  <main id="main-content" class="body__wrapper">
    <!-- cards, components and content go here -->
  </main>

  <footer>
    <p>…</p>
  </footer>
</body>

.body__wrapper centres the content and owns the horizontal page padding, so cards and containers inside it do not manage their own side margins.

When authoring a new page or component docs, prefer a description list (<dl> with <dt> / <dd>) for term-and-description content such as class or prop references, rather than nesting more <div>s. It is more semantic and needs less markup.

Loading inside the NHS App instead? Do not load the assets above — load the NHS design system stylesheet as described on the home page.