# GOV.UK 设计系统 ## GOV.UK 设计系统 界面预览 提交空字段、查看关联错误、修正答案，并在检查页面修改某个值。不会有任何信息离开此页面。 ## GOV.UK 设计系统 设计参考 参考 GOV.UK Frontend 6.5.1 和截至 2026 年 10 月 3 日的 v6 最新文档。十六进制值是参考快照；在生产环境中优先使用 Sass 命名函数。预览加载本地官方 CSS 和 JavaScript，使用替代字体和独立品牌标识。 ### 字体与响应式排版 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | govuk-heading-xl | 32px / 35px → 48px / 50px | 平板断点前后的字号与行高；页面标题。 | | govuk-heading-l | 27px / 30px → 36px / 40px | 平板断点前后的字号与行高；问题标题。 | | govuk-heading-m | 21px / 25px → 24px / 30px | 平板断点前后的字号与行高；分节标题。 | | govuk-body-l | 21px / 25px → 24px / 30px | 平板断点前后的字号与行高；导语文本。 | | govuk-body | 19px / 25px → 19px / 25px | 平板断点前后的字号与行高；正文。 | | govuk-body-s | 16px / 20px → 16px / 20px | 平板断点前后的字号与行高；辅助文本。 | ### 字体适用条件 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | GDS Transport | service.gov.uk services | 该子域名上的服务必须使用官方字体。 | | Independent preview | Helvetica Neue, Helvetica, Arial, sans-serif | 无品牌 Frontend 指南推荐使用的替代字体栈；不加载 Transport 字体文件。 | ### 响应式与固定间距 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | unit 0 | 0px → 0px; static 0px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 1 | 5px → 5px; static 5px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 2 | 10px → 10px; static 10px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 3 | 15px → 15px; static 15px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 4 | 15px → 20px; static 20px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 5 | 15px → 25px; static 25px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 6 | 20px → 30px; static 30px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 7 | 25px → 40px; static 40px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 8 | 30px → 50px; static 50px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | | unit 9 | 40px → 60px; static 60px | 小屏到大屏采用响应式变化；govuk-spacing(unit) 保持固定。 | ### 功能性色彩名称 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | govuk-functional-colour("text") | #0b0c0c | 主要可读内容 | | govuk-functional-colour("secondary-text") | #484949 | 提示与辅助信息 | | govuk-functional-colour("link") | #1a65a6 | 普通链接 | | govuk-functional-colour("link-hover") | #0f385c | 链接悬停状态 | | govuk-functional-colour("link-visited") | #54319f | 已访问的链接 | | govuk-functional-colour("border") | #cecece | 结构分隔线 | | govuk-functional-colour("input-border") | #0b0c0c | 输入框边界 | | govuk-functional-colour("focus") | #ffdd00 | 仅键盘焦点 | | govuk-functional-colour("focus-text") | #0b0c0c | 焦点状态下的黄色文字 | | govuk-functional-colour("error") | #ca3535 | 验证反馈 | | govuk-functional-colour("success") | #0f7a52 | 成功反馈 | | govuk-functional-colour("body-background") | #ffffff | 阅读背景层 | ### 布局基础组件 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | govuk-width-container | 1020px maximum | 默认外层内容宽度；如确有内容需求，可覆盖此设置。 | | govuk-grid-row + govuk-grid-column-two-thirds | 2/3 at wider widths | 将问题和正文限制在易读的栏宽内；小屏幕下改为堆叠布局。 | | govuk-main-wrapper | Main content region | 用于宽度容器内的主内容区域。 | ### 断点与控件轮廓 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | $govuk-breakpoints.mobile | 320px | Sass 断点键，并非必须新增的布局。 | | $govuk-breakpoints.tablet | 641px | 默认的响应式排版、间距和网格断点；样式指南将其描述为大于 640px。 | | $govuk-breakpoints.desktop | 769px | 额外的命名断点。 | | $govuk-focus-width | 3px | 焦点轮廓宽度；应与文档所述的焦点样式搭配使用。 | ## GOV.UK 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## GOV.UK 设计系统 版本与品牌标识 ### 采用独立品牌标识的 v6 参考 > 本参考依据 v6 文档制作，采用其较大的小屏幕字号和更新后的功能性色彩。因此，旧截图中可能会显示不同的值。上表记录的是当前文档所述的默认值，并未混用不同版本。 此在线示例是一项虚构的社区活动咨询。它不使用皇冠、GOV.UK 字标、Transport 字体或真实提交端点。任务内容和本地验证规则由应用自行设定；组件结构则以链接中的官方示例为依据。 阅读配套规范 ### 选择合适的字体方案 对于符合条件的 service.gov.uk 服务，应在官方实现中使用 GDS Transport。其他域名上的公共服务必须使用其他字体。本独立示例采用推荐的 Helvetica Neue、Helvetica、Arial、sans-serif 替代方案；更换字体无需舍弃设计系统的层级体系。 阅读配套规范 ## GOV.UK 设计系统 字体与阅读节奏 ### 使用完整的字号和行高组合 咨询问题使用 govuk-heading-l，辅助文案使用 govuk-body。小屏幕下，标题为 27/30px；大屏幕下为 36/40px。v6 正文保持 19/25px。小屏幕正文若使用 16px，则会还原旧版表现，而不是本参考中的样式。 比例表同时列出两种字号，因为单一视口的截图无法体现响应式规则。生产环境中的 CSS 使用相对单位。govuk-heading-l 这样的类控制外观，但不决定语义元素应使用 h1 还是 h2。 ``` .app-question-note { @include govuk-font($size: 19); } // Size and line-height only, without changing the font family: .app-existing-font { @include govuk-font-size($size: 19); } ``` 代码参考 阅读配套规范 ## GOV.UK 设计系统 间距与页面宽度 ### 响应式单位不是固定像素 问题组之间使用间距单位 6 很合适：窄屏下为 20px，超过平板断点后为 30px。静态辅助函数 govuk-spacing(6) 在任何屏幕宽度下都返回 30px。因此，选择该辅助函数会改变页面表现，即使桌面端看起来相同。 ``` .app-question-group { @include govuk-responsive-margin(6, "bottom"); } .app-fixed-inset { padding: govuk-spacing(3); } ``` 代码参考 阅读配套规范 ### 在容器内设置阅读栏 标准宽度容器的最大宽度为 1020px。在其中使用三分之二宽度的网格列，可限制问题内容的宽度，同时让页面整体结构保持对齐。小屏幕布局会自然改为堆叠。我们的预览保留了这种阅读层级，而不是把每个字段都铺在仪表板卡片中。 ```

Tell us about the event

``` 代码参考 阅读配套规范 ## GOV.UK 设计系统 色彩与焦点 ### 使用功能角色，而不是对照旧截图 v6 的功能性链接色为 #1a65a6，错误色为 #ca3535。在实际 Sass 构建中使用 govuk-functional-colour("link") 和 govuk-functional-colour("error")，这样升级时即可沿用上游调色板。这些功能性色彩角色不同于一般插图中使用的红色或蓝色。 焦点黄色仅用于焦点状态，不应作为默认选中状态或促销强调色。预览中，黄色搭配深色文字和清晰的深色边缘；错误信息则通过文字和位置来识别，而不只依靠红色。 ``` .app-supporting-text { color: govuk-functional-colour("secondary-text"); } .app-custom-error { color: govuk-functional-colour("error"); } ``` 代码参考 阅读配套规范 ## GOV.UK 设计系统 问题组件 ### 字段由相互关联的结构组成 输入框示例组合使用 govuk-form-group、govuk-label、govuk-hint 和 govuk-input。标签通过输入框 ID 与其关联；aria-describedby 指向提示信息。字段无效时，除错误类外，还要加入错误消息 ID。只有红色边框而没有这些关联，并不是完整的复现。 此咨询表单将活动名称和联系邮箱放在一起。它们是在一项简短任务中分别标注的两个值，并不意味着每个字段都必须单独放在一页。预览要求填写这两项仅为演示验证，并不代表任何实际许可要求。 - 持久标签：活动名称。 - 持久提示：请使用活动信息中显示的名称。 - 可恢复的错误提示：请输入活动名称。 阅读配套规范 ### 原生标记与应用行为各司其职 GOV.UK Frontend 为组件提供样式并增强其功能。它不会决定哪些邮箱地址适用于此服务，不会保存草稿，也不会接收咨询。预览中，JavaScript 会验证这两个字段，并且只在当前页面存储其值。重新加载页面后，本次填写内容会清空。 阅读配套规范 ## GOV.UK 设计系统 关联错误并引导修正 ### 让错误摘要成为修正问题的入口 点击“继续”后若验证失败，应在表单前显示错误摘要，并将焦点移至摘要。每个列表链接都指向相应答案。单个文本字段的链接应指向其输入框 ID；分组选择则应按官方指南指向适当的第一个控件。 原生错误摘要使用 data-module="govuk-error-summary" 进行增强。预览仅在验证失败时插入摘要，然后从本地的 6.5.1 模块创建 ErrorSummary。该库负责焦点管理和链接导航；应用负责提供提示信息、保留填写值并移除过时错误。 阅读配套规范 ### 体验实际的错误修正流程 两项都留空并点击“继续”。点击活动名称错误提示，输入一个虚构的名称，然后输入无效邮箱。再次点击“继续”：此时只应显示尚未解决的错误，且活动名称应保留。修正邮箱地址后即可进入查看页。这样可以展示实际状态变化，而不是永久显示一条示例错误。 阅读配套规范 ## GOV.UK 设计系统 查看答案并进行更改 ### 使用定义列表，而非数据表格 答案核对页包含一个 govuk-summary-list。每一行都由 dt 键、dd 值和 dd 操作区域组成。“更改”后面的隐藏标签用于标明具体答案。较长的活动名称会在值区域内换行，不会遮挡编辑入口。 更改操作会恢复表单，并将焦点移至所选字段。点击“继续”后会重新验证，并返回更新后的查看页。返回路径由应用代码实现；设计系统提供的是呈现结构。 阅读配套规范 ### 明确展示真实能力的边界 本示例在查看页结束，因为没有服务接收数据。实际服务的答案核对页应位于真正的提交操作之前，并显示将要提交的信息。包含声明或后端确认的应用需要额外的服务逻辑；绿色提示面板本身无法实现这些结果。 1. 完成两个虚构答案，然后继续查看。 2. 选择“更改活动名称”，只编辑这项答案。 3. 点击“继续”，确认修正后的活动名称和保留的邮箱都显示正确。 阅读配套规范 ## GOV.UK 设计系统 Frontend 集成 ### 编译未使用品牌样式的 Sass 入口文件 以下设置使用 govuk-frontend@6、Dart Sass 和 Node 包导入器。它会编译文档中所述的未使用品牌样式的字体配置，并复制浏览器端的 JavaScript 发行文件。请提交解析后的锁定文件，以便项目准确记录所用版本。 此示例不会加载 Transport 或使用政府图像资源。符合条件且使用品牌样式的服务还必须通过文档规定的资源路径提供官方资源。使用其他构建工具的应用可以保留相同的 Sass 模块和 initAll 入口，并相应调整打包方式。 阅读配套规范 ### 在组件标记就绪后初始化 对于静态页面，加载复制的模块并调用 initAll。在客户端渲染的应用中，插入新的区域后，使用 initAll({ scope: element }) 初始化该区域。启动时不要初始化隐藏的错误示例，以免误将其当作实时验证流程。 独立预览使用本地复制的官方 CSS 和 JavaScript，版本为 6.5.1。此示例通过范围明确的字体覆盖，在整个页面中替换 Transport。表单验证和答案查看页由应用代码实现，而 Button 和 ErrorSummary 的增强功能来自该库。另附的 Sass 构建配方介绍了推荐的可配置设置；此处并未实际执行编译。 阅读配套规范 ## GOV.UK 设计系统组件示例 ### 文本输入：标签、提示和行内错误 此示例状态为字段组和输入框添加了错误修饰类。输入框的描述通过 ID 关联持久提示和当前错误。 ```
Use the name shown on your event information.

Error: Enter an event name

``` 代码参考 - 在有效状态下，移除错误段落、错误修饰类，并从 aria-describedby 中移除错误 ID。 - 验证失败时保留实际填写值；输出服务器内容时应进行转义，或使用 DOM 的 text/value 赋值。 ### 错误摘要：跳转至对应答案 将摘要放在问题内容之前。摘要中的提示应与行内错误一致，链接应指向输入框，而不是无关的外层容器。 ```

There is a problem

``` 代码参考 - 在原生实现中，Frontend 初始化会提供错误摘要的焦点行为。 - 此示例每次插入验证失败的摘要后，都会创建一个新的 ErrorSummary；应用验证逻辑仍是独立的。 ### 答案核对：语义化摘要列表 定义列表将答案标签与对应值以及定向编辑入口配对。隐藏后缀可区分重复出现的“更改”链接。 ```
Event name
Riverside community picnic
Change event name
``` 代码参考 - 此处使用的 returnTo 参数是应用层约定，并非 Frontend API。 - 编辑后返回查看页，同时保留所有未更改的答案。 ### 完整的独立示例 完整文档包含其布局、控件与初始化。解压所链接的示例归档，即可获得完全一致的相对 vendor 资源，然后通过 HTTP 提供服务。 ``` Event enquiry — OpenDesign component study Skip to main content

OpenDesign · Component studyGOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.

Tell us about the event

Enter fictional details to try linked validation and the check-answers pattern.

Use the name shown on your event information.
For example, organiser@example.com. Use a fictional address.
``` 代码参考 - 从“来源”一节下载完整示例。其 README 给出了确切的本地启动命令。 - 保持 vendor 路径相对于本文档；该归档包含此预览所使用的全部资源。 ## GOV.UK 设计系统 Agent 设置 ### 实现起点 将 shell 命令、app.scss 内容和 HTML 代码片段分别放到指定位置。预览使用本地复制的官方 6.5.1 资源，并覆盖字体设置；此处记录了 Sass 构建配方，但尚未在此工作区编译。Sources 中的完整可运行示例 ZIP 还包含准确的预览依赖项和完整文档。将其解压，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/gov-uk.html。请勿通过 file:// 打开基于模块的示例。 ``` # Run in a project directory npm install govuk-frontend@6.5.1 npm install --save-dev sass mkdir -p public/assets # Save the following as app.scss @use "pkg:govuk-frontend" as * with ( $govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif) ); # Compile, then copy the browser module npx sass --pkg-importer=node app.scss public/assets/app.css cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/ ``` ### 适用于你项目的提示词 ``` 按照本指南，使用 GOV.UK Frontend v6 和未品牌化的 Helvetica 字体配置，实现包含两个字段的活动咨询表单。使用实际的 form-group/input/error-summary 和 summary-list 结构、带链接的行内错误、保留已填写的答案、指向对应字段的“更改”链接，以及仅供查看的完成状态。通过 Frontend 类应用文档规定的响应式字号和间距。保留真实项目身份，不要创建官方提交流程，也不要虚构后端结果。验证空白、邮箱无效、修正、查看和更改答案等状态。 ``` ## GOV.UK 设计系统 来源与范围 OpenDesign 独立应用研究，使用 GOV.UK Frontend 6.5.1 组件 CSS 和 JavaScript。此示例不代表使用政府标志、Transport 字体或官方服务，也不涉及真实提交或合规认证。表单规则和查看页导航均为原创应用代码。 - v6 字号比例 小屏幕和大屏幕的字号/行高组合。 - 响应式间距 固定和响应式单位及 Sass 辅助函数。 - 功能性色彩 当前用途及 Sass 访问器。 - 布局 容器与网格构成。 - 文本输入框 标签、提示和错误结构。 - 错误摘要 关联的更正链接与焦点行为。 - 摘要列表 键、值及相关更改操作。 - 不使用 GOV.UK 品牌标识 字体、身份标识和 Sass 配置。 - 引入 CSS Dart Sass 和程序包集成。 - 导入 JavaScript 浏览器模块和 initAll。 - 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。 ## GOV.UK 设计系统 相关资源 ### HarvardSites 设计系统 了解 HarvardSites 如何作为编辑出版平台使用：比较不同的网站风格，选择有文档说明的字体组合，并通过专为特定用途设计的内容组件构建大学页面。 ### Helsinki 组合使用原生 HDS 选择组、语义反馈颜色和关联的错误摘要，构建完整的本地审核与修正流程。 ### Rivet 使用 Rivet 实际的设计令牌比例、HTML 组件结构和原生键盘交互，构建大学页面。探索紧凑型工作坊详情页，其中包含便于访问的访客信息标签页。 - [实现参考](https://design-system.service.gov.uk/components/error-summary/) - [来源](https://design-system.service.gov.uk/styles/type-scale/) - [来源](https://design-system.service.gov.uk/styles/typeface/) - [来源](https://design-system.service.gov.uk/styles/spacing/) - [来源](https://design-system.service.gov.uk/styles/colour/) - [来源](https://design-system.service.gov.uk/styles/layout/) - [来源](https://frontend.design-system.service.gov.uk/sass-api-reference/) - [阅读配套规范](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [阅读配套规范](https://design-system.service.gov.uk/styles/typeface/) - [代码参考](https://design-system.service.gov.uk/styles/type-scale/) - [阅读配套规范](https://design-system.service.gov.uk/styles/type-scale/) - [代码参考](https://design-system.service.gov.uk/styles/spacing/) - [阅读配套规范](https://design-system.service.gov.uk/styles/spacing/) - [代码参考](https://design-system.service.gov.uk/styles/layout/) - [阅读配套规范](https://design-system.service.gov.uk/styles/layout/) - [代码参考](https://design-system.service.gov.uk/styles/colour/) - [阅读配套规范](https://design-system.service.gov.uk/styles/colour/) - [阅读配套规范](https://design-system.service.gov.uk/components/text-input/) - [阅读配套规范](https://design-system.service.gov.uk/patterns/question-pages/) - [阅读配套规范](https://design-system.service.gov.uk/components/error-summary/) - [阅读配套规范](https://design-system.service.gov.uk/components/summary-list/) - [阅读配套规范](https://design-system.service.gov.uk/patterns/check-answers/) - [阅读配套规范](https://frontend.design-system.service.gov.uk/include-css/) - [阅读配套规范](https://frontend.design-system.service.gov.uk/import-javascript/) - [代码参考](https://design-system.service.gov.uk/components/text-input/) - [代码参考](https://design-system.service.gov.uk/components/error-summary/) - [代码参考](https://design-system.service.gov.uk/components/summary-list/) - [v6 字号比例 小屏幕和大屏幕的字号/行高组合。](https://design-system.service.gov.uk/styles/type-scale/) - [响应式间距 固定和响应式单位及 Sass 辅助函数。](https://design-system.service.gov.uk/styles/spacing/) - [功能性色彩 当前用途及 Sass 访问器。](https://design-system.service.gov.uk/styles/colour/) - [布局 容器与网格构成。](https://design-system.service.gov.uk/styles/layout/) - [文本输入框 标签、提示和错误结构。](https://design-system.service.gov.uk/components/text-input/) - [错误摘要 关联的更正链接与焦点行为。](https://design-system.service.gov.uk/components/error-summary/) - [摘要列表 键、值及相关更改操作。](https://design-system.service.gov.uk/components/summary-list/) - [不使用 GOV.UK 品牌标识 字体、身份标识和 Sass 配置。](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) - [引入 CSS Dart Sass 和程序包集成。](https://frontend.design-system.service.gov.uk/include-css/) - [导入 JavaScript 浏览器模块和 initAll。](https://frontend.design-system.service.gov.uk/import-javascript/)