# Système de design NHS

## Aperçu de l’interface système de design NHS

Choisissez une méthode, consultez l’aide facultative, récupérez après une question restée sans réponse et modifiez votre préférence.

## Référence de conception système de design NHS

Frontend NHS.UK 10.6.1 et manuel des services numériques du NHS. L’aperçu utilise les fichiers locaux officiels CSS/JS avec Arial, et non la police Frutiger sous licence ni le logo du NHS. Les valeurs adaptatives sont vérifiées par rapport au paquet sélectionné ; aucun contenu clinique n’est fourni.

### Typographie et identité

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Font stack | Frutiger W01, Arial, sans-serif | Frutiger nécessite la licence appropriée ; cette étude utilise Arial. |
| nhsuk-body | 16px small / 19px large | Texte de lecture par défaut. |
| nhsuk-body-l | 26px desktop | Paragraphe de chapeau, et non chaque phrase d’introduction. |
| nhsuk-body-s | 14px small / 16px large | Informations secondaires à utiliser avec parcimonie. |
| nhsuk-heading-l | Transactional h1 | Utilisez heading-m pour le h2 qui suit. |
### Variables de couleur sémantiques

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| $nhsuk-text-colour | #212b32 | Contenu principal |
| $nhsuk-secondary-text-colour | #4c6272 | Indications |
| $nhsuk-link-colour | #005eb8 | Destinations des liens |
| $nhsuk-focus-colour | #ffeb3b | Focus clavier |
| $nhsuk-border-colour | #d8dde0 | Limites structurelles |
| $nhsuk-input-border-colour | #4c6272 | Limites des champs de saisie |
| $nhsuk-error-colour | #d5281b | Retour de validation |
| $nhsuk-button-colour | #007f3b | Action principale |
### Espacement adaptatif

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| nhsuk-u-margin-bottom-1 | 4px → 4px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-2 | 8px → 8px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-3 | 8px → 16px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-4 | 16px → 24px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-5 | 24px → 32px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-6 | 32px → 40px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-7 | 40px → 48px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-8 | 48px → 56px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
| nhsuk-u-margin-bottom-9 | 56px → 64px | Petit écran → au-delà de 768px ; utilisez la classe plutôt qu’une copie locale. |
### Composition de page

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| nhsuk-width-container | 960px maximum | Conteneur extérieur à largeur fixe. |
| nhsuk-main-wrapper--s | Smaller vertical wrapper | Recommandé pour les services transactionnels. |
| nhsuk-grid-column-two-thirds | Desktop column; mobile stack | Les largeurs de la grille s’appliquent à partir de 769px. |
| Breakpoints | 320 / 641 / 769 / 990px | Mobile, tablette, ordinateur, grand écran. |
| nhsuk-u-reading-width | Readable content measure | À utiliser lorsque le conteneur environnant est large. |
## Guide complet du système de design système de design NHS

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Contexte du NHS et polices — système de design système de design NHS

### Une interface de santé sans fausse identité

> NHS.UK frontend fournit les bases visuelles et interactives ; il ne planifie pas de consultation et ne détermine pas les modes de consultation proposés par un cabinet. Cette étude présente un rendez-vous fictif et permet au visiteur d’indiquer sa préférence. Le résultat est une vérification locale, pas une réservation.

Frutiger est une ressource de marque du NHS soumise à des conditions de licence. Cette ressource indépendante utilise Arial, la police de remplacement documentée, et n’inclut pas le logo du NHS. Le CSS officiel est conservé intact ; une surcharge locale explicite de la police empêche les requêtes de Frutiger.

Consultez la spécification associée

## Système de design NHS Typographie transactionnelle

### Donner la priorité à la question

Utilisez nhsuk-heading-l pour la question de la page et nhsuk-heading-m pour une section secondaire. Cette approche diffère de celle d’une longue page éditoriale, où le contenu de conseils commence par un titre de niveau heading-xl. La légende du groupe de champs radio peut avoir la taille d’un titre sans perdre sa sémantique de groupe.

Les classes de paragraphe standard distinguent le corps de texte, le texte d’introduction et le texte d’accompagnement de petite taille. Un texte d’introduction de 26px est utile une fois, au début d’une page, tandis que les instructions de rendez-vous restent en texte courant. L’aperçu conserve une largeur de ligne suffisante pour permettre aux dates et aux noms de lieux de passer à la ligne.

Consultez la spécification associée

## Système de design NHS Espacement et conteneur

### L’échelle d’espacement du NHS diffère de celle de GOV.UK

Les unités responsives du NHS suivent une séquence différente et changent au-dessus de 768px. Par exemple, l’unité 6 passe de 32px à 40px. Ne transposez pas la valeur de l’unité 6 de GOV.UK au NHS simplement parce que les noms des classes utilitaires semblent apparentés.

La démonstration utilise le conteneur de 960px et une colonne de lecture aux deux tiers. Le comportement natif de la grille produit une seule colonne en dessous du format bureau. Les changements de mise en page sont gérés par la bibliothèque, tandis que la petite bande d’identité indépendante relève du style de l’application.

```
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}
```

Référence du code

Consultez la spécification associée

### Points de rupture adaptatifs

La documentation définit 641px comme le seuil tablette et 769px comme le seuil bureau. Les largeurs de colonnes de la grille s’appliquent à partir du format bureau ; cela ne signifie pas que toutes les règles typographiques attendent le même seuil. Utilisez les classes natives plutôt que d’appliquer un point de rupture unique à toutes les propriétés.

Consultez la spécification associée

## Système de design NHS Choix groupés du mode de consultation

### Un groupe de champs, une réponse

L’exemple utilise nhsuk-fieldset avec une légende visible et un attribut name commun aux boutons radio. Chaque bouton a son propre id et son propre libellé. L’indication complémentaire est associée au groupe par aria-describedby. Ces relations permettent au navigateur de présenter un choix unique parmi plusieurs options mutuellement exclusives.

La structure de chaque option radio place le bouton et son libellé dans nhsuk-radios__item. Les boutons radio standard conviennent à une question principale ; la variante compacte est prévue pour les contextes de filtres plus denses. Les choix fictifs de mode de consultation restent mutuellement exclusifs lorsqu’on les sélectionne avec les touches fléchées.

- La légende énonce le choix à faire.

- Le même nom pour les options crée le groupe de sélection.

- Chaque libellé pointe vers un ID d’entrée différent.

Consultez la spécification associée

## Système de design NHS Aider sans masquer l’essentiel

### Utilisez un élément details natif

L’exemple details comprend nhsuk-details__summary et un élément span summary-text, suivi de nhsuk-details__text. Il s’ouvre selon le comportement natif du navigateur. L’identité du rendez-vous et le fait qu’aucune réservation n’a lieu doivent rester visibles en dehors de la zone dépliable, car ces informations sont essentielles pour tout le monde.

Dans la version 10.6, le API Nunjucks utilise summary.text ou summary.html ; l’ancienne option summaryText est obsolète. Si vous utilisez des macros, privilégiez la nouvelle structure d’objet. L’exemple HTML évite toute dépendance à un moteur de templates tout en conservant la même structure.

Consultez la spécification associée

## Système de design NHS Erreurs de sélection et récapitulatif

### Validez le groupe sans présélectionner de réponse

Aucune option n’est sélectionnée au départ. Si le visiteur continue sans répondre, un message d’erreur s’affiche en ligne et le groupe est associé à ce message. L’aperçu place alors le focus sur l’erreur. La sélection reste visible au retour du récapitulatif. Ces décisions concernant l’état de l’interface s’ajoutent aux contrôles natifs.

Le récapitulatif reprend le mode choisi et l’identité du rendez-vous fictif. Le bouton indique « Modifier la préférence ». Aucun message ne laisse entendre qu’un service médical a accepté la préférence, et aucun conseil de santé ni aucune consigne de préparation ne sont inventés.

1. Continuez sans avoir sélectionné de mode de consultation.

2. Sélectionnez « Par téléphone » et affichez le récapitulatif local.

3. Choisissez « En personne » et vérifiez le récapitulatif mis à jour.

Consultez la spécification associée

## Système de design NHS Ressources locales de l’interface

### Utilisez le package et le module sélectionnés

La configuration copie le CSS 10.6.1 et le module navigateur dans un répertoire de ressources statiques. Le module exporte initAll ; appelez cette fonction une fois le balisage du composant présent. L’exemple autonome utilise la même distribution servie localement et une surcharge de police Arial au niveau de la page.

Les styles incluent les règles des composants et les bases responsives. Le petit script qui modifie le panneau du récapitulatif est un code d’application distinct. En production, un service remplacerait les données fictives du rendez-vous par des données tenues à jour et traiterait les demandes réelles de préférence via son propre backend.

Consultez la spécification associée

## Système de design NHS Vérifier la composition

### Tenir compte du contexte des services de santé

Les vérifications essentielles consistent à s’assurer que le visiteur peut identifier le rendez-vous, comprendre que sa préférence de mode de consultation n’est pas encore confirmée et modifier son choix sans perdre le contexte. Un message de réussite générique masquerait cette distinction.

Testez le fonctionnement du groupe de boutons radio et du résumé details au clavier, puis vérifiez l’affichage étroit avec un nom de cabinet long. Le message d’erreur en l’absence de sélection doit permettre de revenir au groupe. La bibliothèque apporte des comportements réutilisables, tandis que l’organisation reste responsable des règles réelles de prise de rendez-vous et des informations médicales.

Consultez la spécification associée

## Système de design NHS Exemples de composants du système de design

### Groupe de boutons radio pour le mode de consultation

Un groupe de champs avec libellé, des contrôles natifs mutuellement exclusifs et les classes de composants du NHS.

```
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>
```

Référence du code

### Aide contextuelle facultative

L’élément details natif affiche des informations supplémentaires sans masquer la tâche.

```
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
```

Référence du code

### Exemple autonome complet

Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>
```

Référence du code

- Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement.

- Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu.

## Système de design NHS Configuration de l’agent

### Point de départ de l’implémentation

Placez les commandes shell et HTML dans leurs fichiers respectifs. Arial est une surcharge explicite pour l’aperçu autonome ; les organisations du NHS doivent respecter les conditions réelles de leur licence de police et leurs exigences de marque. Le ZIP de l’exemple complet fonctionnel, disponible dans Sources, fournit également les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/nhs.html. N’ouvrez pas les exemples utilisant des modules via file://.

```
npm install nhsuk-frontend@10.6.1
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>
```

### Un prompt pour votre projet

```
Créez une question autonome sur les préférences de rendez-vous à l’aide de NHS.UK Frontend 10.6.1. Utilisez un fieldset et une legend pour les modes de présence mutuellement exclusifs, des aides associées aux boutons radio et l’élément natif Details pour les informations facultatives. Gardez la question et les instructions essentielles visibles. Lors de la vérification d’un formulaire sans réponse, affichez un récapitulatif des erreurs avec un lien et une erreur en ligne ; préservez le mode sélectionné au retour depuis la page de vérification locale. Chargez le CSS correspondant et initAll du module, avec la surcharge Arial explicitement documentée pour l’étude. N’ajoutez ni recherche de rendez-vous, ni véritable modification de réservation, ni conseil clinique, ni affirmation d’une identité NHS.
```

## Système de design NHS Sources et périmètre

Étude indépendante sur les préférences de rendez-vous, réalisée avec NHS.UK frontend 10.6.1. Aucun logo du NHS, aucune police Frutiger sous licence, aucune véritable réservation, aucune instruction clinique ni approbation implicite.

- Typographie Admissibilité des polices et hiérarchie typographique des transactions.

- Couleur Variables sémantiques nommées.

- Espacement Échelle de classes adaptative.

- Mise en page Conteneur et grille pour ordinateur.

- Boutons radio Structure et états du groupe.

- Details Structure de l’élément de divulgation et macro actuelle API.

- Code source du frontend Implémentation et distribution officielles.

- Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire.

## Système de design NHS Ressources associées

### NL système de design

Composez une interface de service public à partir de composants créés par des contributeurs et d’un thème explicite. Cette référence utilise Utrecht CSS pour illustrer la correspondance des tokens, l’anatomie d’une liste de données et deux thèmes originaux associés au même flux de modification.

### NSW système de design

Découvrez les tokens de design de NSW, la typographie Public Sans et des onglets natifs accessibles au clavier grâce à un guide d’atelier complet accompagné d’une liste de lecture locale autonome.

### ONS système de design

Créez une réponse à un sondage sans contradictions : cases à cocher natives de l’ONS, réponses mutuellement exclusives, références exactes aux types et aux couleurs, et processus complet de vérification locale.


- [Référence de mise en œuvre](https://service-manual.nhs.uk/design-system/components/radios)
- [Source](https://service-manual.nhs.uk/design-system/styles/typography)
- [Source](https://service-manual.nhs.uk/design-system/styles/colour)
- [Source](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Source](https://service-manual.nhs.uk/design-system/styles/layout)
- [Consultez la spécification associée](https://service-manual.nhs.uk/design-system/styles/typography)
- [Référence du code](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Consultez la spécification associée](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Consultez la spécification associée](https://service-manual.nhs.uk/design-system/styles/layout)
- [Consultez la spécification associée](https://service-manual.nhs.uk/design-system/components/radios)
- [Consultez la spécification associée](https://service-manual.nhs.uk/design-system/components/details)
- [Consultez la spécification associée](https://github.com/nhsuk/nhsuk-frontend)
- [Référence du code](https://service-manual.nhs.uk/design-system/components/radios)
- [Référence du code](https://service-manual.nhs.uk/design-system/components/details)
- [Typographie Admissibilité des polices et hiérarchie typographique des transactions.](https://service-manual.nhs.uk/design-system/styles/typography)
- [Couleur Variables sémantiques nommées.](https://service-manual.nhs.uk/design-system/styles/colour)
- [Espacement Échelle de classes adaptative.](https://service-manual.nhs.uk/design-system/styles/spacing)
- [Mise en page Conteneur et grille pour ordinateur.](https://service-manual.nhs.uk/design-system/styles/layout)
- [Boutons radio Structure et états du groupe.](https://service-manual.nhs.uk/design-system/components/radios)
- [Details Structure de l’élément de divulgation et macro actuelle API.](https://service-manual.nhs.uk/design-system/components/details)
- [Code source du frontend Implémentation et distribution officielles.](https://github.com/nhsuk/nhsuk-frontend)