NHS 设计系统.

名称 / 规则	值 / 配置	用途
`Font stack`	`Frutiger W01, Arial, sans-serif`	Frutiger 需要获得相应授权；本研究选用 Arial。
`nhsuk-body`	`16px small / 19px large`	默认正文文本。
`nhsuk-body-l`	`26px desktop`	引导段落，不用于每一条介绍性文字。
`nhsuk-body-s`	`14px small / 16px large`	谨慎使用的次要信息。
`nhsuk-heading-l`	`Transactional h1`	后续的 h2 使用 heading-m。

语义化颜色变量

名称 / 规则	值 / 配置	用途
`$nhsuk-text-colour`	`#212b32`	正文内容
`$nhsuk-secondary-text-colour`	`#4c6272`	提示
`$nhsuk-link-colour`	`#005eb8`	链接目标
`$nhsuk-focus-colour`	`#ffeb3b`	键盘焦点
`$nhsuk-border-colour`	`#d8dde0`	结构边界
`$nhsuk-input-border-colour`	`#4c6272`	输入框边界
`$nhsuk-error-colour`	`#d5281b`	验证反馈
`$nhsuk-button-colour`	`#007f3b`	主要操作

响应式间距

名称 / 规则	值 / 配置	用途
`nhsuk-u-margin-bottom-1`	`4px → 4px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-2`	`8px → 8px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-3`	`8px → 16px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-4`	`16px → 24px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-5`	`24px → 32px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-6`	`32px → 40px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-7`	`40px → 48px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-8`	`48px → 56px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。
`nhsuk-u-margin-bottom-9`	`56px → 64px`	小屏幕 → 768px 以上；使用该类，不要在本地重复定义。

页面布局

名称 / 规则	值 / 配置	用途
`nhsuk-width-container`	`960px maximum`	固定宽度的外层容器。
`nhsuk-main-wrapper--s`	`Smaller vertical wrapper`	适用于事务型服务。
`nhsuk-grid-column-two-thirds`	`Desktop column; mobile stack`	网格宽度从 769px 起生效。
`Breakpoints`	`320 / 641 / 769 / 990px`	手机、平板、桌面、大型桌面。
`nhsuk-u-reading-width`	`Readable content measure`	外围容器较宽时使用。

NHS 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

DESIGN-nhs.md

完整指导、实现起点和源代码链接。

下载指南

NHS 设计系统 NHS 背景与字体

不冒用身份的医疗界面

NHS.UK frontend 提供视觉和交互基础，但不会安排咨询，也不会决定诊所支持哪些出席方式。本研究展示一个虚构的预约，并允许访客选择偏好。选择结果仅供本地查看，并非预约。
摘自本 OpenDesign 指南

Frutiger 是 NHS 品牌资产，使用时须遵守授权条件。本独立资源使用文档注明的回退字体 Arial，且不包含 NHS 标志。官方 CSS 保持不变；显式的本地字体覆盖设置可避免请求 Frutiger。

NHS 设计系统事务型字体排版

用问题本身建立层级

页面问题使用 nhsuk-heading-l，次级章节使用 nhsuk-heading-m。这与长篇编辑类页面不同，后者的指南内容从 heading-xl 开始。单选字段集的图例可以采用标题字号，同时保留分组语义。

常规段落类用于区分正文、引导文字和小号辅助文案。页面开头适合使用一次 26px 的引导文字，而预约说明应保持普通正文样式。预览保留了足够的行宽，便于日期和地点名称换行。

NHS 设计系统间距与容器

NHS 间距体系不同于 GOV.UK 间距刻度

NHS 响应式单位采用不同的序列，并在 768px 以上切换。例如，单位 6 会从 32px 变为 40px。不要仅因辅助类名称相似，就把 GOV.UK 的 unit-6 数值用于 NHS。

示例使用 960px 容器和三分之二宽度的阅读栏。原生网格行为会在桌面断点以下切换为单列布局。布局变化由库控制，小型独立身份标识条则由应用样式控制。

scss

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

响应式断点

文档将 641px 定义为平板断点，将 769px 定义为桌面断点。网格列宽从桌面断点起生效，但这并不意味着所有字体规则都要等到同一个断点才生效。请使用原生类，不要为所有属性实现一个统一断点。

NHS 设计系统分组选项：出席方式

一个字段集，一个答案

示例使用 nhsuk-fieldset，包含可见图例，并为单选输入使用相同的 name 属性。每个输入都有各自的 id 和标签。通过 aria-describedby 将提示与整个分组关联。这些关系让浏览器能够将其作为一组选一的选项呈现。

单选项结构会将输入和标签放在 nhsuk-radios__item 内。标准单选项适用于主要问题；小号变体适用于更紧凑的筛选场景。使用方向键操作时，虚构的出席选项仍保持互斥。

图例说明要做出的选择。
共用的 attendance name 属性将选项组成一个选择组。
每个标签都指向不同的输入 ID。

NHS 设计系统提供帮助，但不隐藏关键信息

使用原生 details 元素

details 示例包含 nhsuk-details__summary 和 summary-text span，后面接 nhsuk-details__text。它使用浏览器原生行为展开。预约身份和“不会进行任何预约”的说明应放在 disclosure 外，因为每个人都需要看到这些信息。

在 10.6 中，Nunjucks API 使用 summary.text 或 summary.html；较旧的 summaryText 选项已弃用。如果使用宏，建议采用新的对象结构。HTML 示例无需依赖模板，同时保留相同的结构。

NHS 设计系统选项错误与回顾

验证选项组，但不要预先选择选项

初始状态下不选择任何选项。未作答就继续时，会显示行内错误，并将选项组与该错误信息关联。随后预览会聚焦到错误信息。返回回顾页面时，已选选项仍会显示。这些是叠加在原生控件之上的应用状态决策。

回顾页面会再次显示所选方式和虚构的预约身份。操作按钮标注为“更改偏好”。页面不会显示暗示临床服务已接受该偏好的确认信息，也不会虚构健康建议或准备要求。

请先选择出席方式，再继续。
选择“电话”，然后打开本地回顾页面。
将偏好更改为“亲自到场”，并检查更新后的回顾页面。

NHS 设计系统本地前端资源

使用选定的软件包和模块

此设置会将 10.6.1 CSS 和浏览器模块复制到静态资源目录。该模块导出 initAll；请在组件标记生成后调用它。独立示例使用同一份本地提供的发行版本，并在页面级别覆盖为 Arial。

样式包含组件规则和响应式基础样式。用于更改回顾面板的小型脚本属于独立的应用代码。生产服务应以维护中的数据替换虚构的预约记录，并通过自己的后端处理实际的偏好请求。

NHS 设计系统检查组合方案

确认医疗服务场景

关键检查点是：访客能够识别预约，理解出席偏好尚未确认，并能在不丢失上下文的情况下更改所选方式。通用的成功提示会模糊这一区别。

使用键盘操作单选按钮组和 details 摘要，然后在窄屏视图中检查较长的诊所名称。未选择选项时，错误应引导用户返回选项组。该库提供可复用的行为，但实际预约规则和临床信息仍由相关机构负责。

NHS 设计系统组件示例

出席方式单选按钮组

使用带标签的 fieldset，包含互斥的原生输入控件和 NHS 组件类。

html

<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>

可选的上下文帮助

原生 details 元素可展示补充信息，而不会隐藏当前任务。

html

<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>

完整的独立示例

完整文档包含其布局、控件与初始化。解压所链接的示例归档，即可获得完全一致的相对 vendor 资源，然后通过 HTTP 提供服务。

html

<!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>