# Scottish Government 设计系统

## Scottish Government 设计系统 界面预览

试着输入一段较长的备注，在字数限制内调整后于本地预览、编辑并重置。

## Scottish Government 设计系统 设计参考

Scottish Government Design System 4.3.0 已发布的 CSS 和 JavaScript，以及最新的官方排版、颜色和网格指南。预览中运行原生 CharacterCount 和样式。独立示例明确使用 Arial 作为回退字体；苏格兰政府各局必须使用 Roboto。当前程序包资源与较早安装示例中的资源不同。

### 响应式字体

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Body | 16/24px small →19/32px large | Regular400；原生大号样式从 48rem 起启用。 |
| H1 | 30/40px →44/56px | Bold700。 |
| H2 / H3 | 22/32 →30/40px;19/24 →22/32px | 使用语义化标题级别；ds_h3 可以改变外观，但不会改变标题级别。 |
| H4 / H5 | 16/24 →19/32px;14/24 →16/24px | Bold700。 |
| Lead | 19/32px →24/40px | Light300；每页使用一段简短的引言。 |
| Font | Roboto | 苏格兰政府各局/政策领域必须使用；独立演示明确使用 Arial。 |
### Sass 颜色角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| $ds_colour__brand / __link | #0065bd | 主蓝色；链接悬停颜色为 #00437e。 |
| $ds_colour__text | #1a1a1a | 次级文本 #5e5e5e。 |
| $ds_colour__focus / --background | #1a1a1a / #fdd522 | 即使采用定制品牌主题，也要保留这些焦点颜色角色。 |
| $ds_colour__state--negative | #d32205 | 超限字段/错误消息。 |
| $ds_colour__state--positive | #1a7032 | 用于正向提示；不表示本地文本已提交。 |
| $ds_colour__border | #b3b3b3 | 强对比色 #1a1a1a 和浅淡色 #ebebeb。 |
### 响应式间距工具类

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| ds_!_margin-bottom--1 / --2 / --3 | 8 /16 /24px | 在 48rem 处切换前保持不变。 |
| ds_!_margin-bottom--4 | 24px →32px | 在 48rem 处由小切换为大。 |
| ds_!_margin-bottom--5 / --6 | 32→40px /40→48px | 采用响应式间距，而非单一固定间距值。 |
| ds_!_margin-bottom--7 / --8 / --9 | 40→56px /48→64px /56→72px | 用于较大的间隔；避免所有地方都采用最大间距。 |
### 网格与可用内容宽度

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Viewport thresholds | 480,768,992,1200px | 列数从 2 增至 6，再增至 12，之后保持 12 列。 |
| Content width at medium/large/xl | 736 /928 /1120px | 已发布的网格内容宽度；与包装器盒宽度不同。 |
| Native ds_wrapper box | 768 /960 /1152px | 在发布版 CSS 中，每侧包含 16px 内边距。 |
| Gutter / side padding | 32px /16px | 小于 768px 时，包装器宽度自适应。 |
| Reading width in specimen | 42rem maximum | 应用在原生包装器内的选择，并非适用于所有场景的官方令牌。 |
### CharacterCount 约定

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Root | data-module="ds-character-count" | 包含原生 input 或 textarea。 |
| Limit | maxlength="200" | 初始化时会读取并移除此属性；超限文本仍可编辑。 |
| Alternative | data-maxlength on root | 如果 JavaScript 不可用，则不会回退使用原生 maxlength。 |
| Threshold | data-threshold="80" | 将限制值乘以 .8 后取整；限制为 200 时，会在 160 个字符处显示。 |
| Error state | ds_input--error;aria-invalid="true" | 计数为负数时应用此样式；需同时显示超出数量。 |
| Announcements | Separate hidden message;1000ms delay | aria-describedby 会保留现有提示，并添加自动生成的消息 ID。 |
| Counting unit | JavaScript value.length | 按 UTF-16 代码单元计数；不要承诺按表情符号字素计数。 |
## Scottish Government 设计系统 完整指南

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

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

## Scottish Government 设计系统 实用文本输入参考

### 确保用户的工作内容可恢复

> 此处的核心交互是提供非破坏性的长度提示。用户可以粘贴较长的无障碍需求说明，查看还需删改多少内容，并在精简时保留全部文本。原生字符计数器负责显示剩余字符数、超限样式，以及延迟发送给辅助技术的提示。应用则单独判断这段说明是否符合预览条件。

这是一个原创的研讨会笔记示例，并非苏格兰政府服务，也不用于收集医疗信息。它不包含身份标识图形、存储或提交功能。字段提示要求填写实际的无障碍需求，并提醒用户避免提供私人信息，让任务清晰易懂，同时不借用任何官方事务办理流程。

阅读配套规范

## Scottish Government 设计系统 Roboto 与响应式层级

### 保留已发布的度量值

苏格兰政府系统要求各政府部门和政策领域使用 Roboto。其他采用该系统的组织可以使用其他易读字体，但应保留字号和行高规则，并对实际效果进行测试。此独立示例明确注明 Arial 是备用字体；它并未声称缺失的网页字体就是 Roboto。

正文从 16/24px 调整为 19/32px，主标题则从 30/40px 调整为 44/56px。这两项调整均由原生的大屏样式表实现。ds_h 3 类可改变视觉字号，而无需使用三级语义标题。当短表单需要较小的分区标题、但不应在文档大纲中人为增加层级时，这一区别尤为重要。

阅读配套规范

## Scottish Government 设计系统 独立的焦点样式

### 区分焦点、错误与完成状态

蓝色用于主品牌和链接，黑色用于文本，黄色用于焦点。这些是命名的 Sass 设置，并非虚构的 CSS 自定义属性。品牌适配应在通过系统的设置模块加载系统之前完成。即使更改其他品牌颜色，官方指南仍要求保留焦点配色。

只有在超过允许长度时，字符计数器才会显示负向红色。第二种由应用层触发的空字段错误也可以使用相同的负向颜色，但错误消息必须说明缺少答案，而不是误报字符数问题。预览不会使用正向绿色暗示远程提交已成功。

- 在文本区域和操作按钮上保留清晰可见的键盘焦点轮廓。

- 用文本说明长度超限，不要只依赖红色边框。

- 让错误摘要和字段提示关联到稳定的字段 ID。

阅读配套规范

## Scottish Government 设计系统 包装器宽度与间距

### 避免混淆外部宽度与内部宽度

官方网格表列出了中、大和超大断点下的内部内容宽度，分别为 736、928 和 1120px。对应的原生包装器框宽度则分别为 768、960 和 1152px，因为每个框都包含两侧各 16px 的内边距。明确这一区别可以避免采用者将两种宽度嵌套使用，导致布局被重复收窄。

预览在原生容器内设置了一个 42rem 宽的阅读栏。这个最大宽度是适合短表单的应用层选择，并非新增的系统设置。宽度低于 768px 时，容器会变为流式布局，左右两侧仍保留 16px 间距，避免文本区域贴近屏幕边缘。

间距工具类支持响应式布局。例如，ds_!_margin-bottom--4 会在 48rem 断点处从 24px 增至 32px；更大的级别也会相应增加。参考资料同时列出了两个数值，避免误将桌面端截图中的间距当作固定不变的通用值。

阅读配套规范

## Scottish Government 设计系统 原生字符计数字段

### 从真正的文本区域开始

ds_question 根元素包含 data-module 和可选的百分比阈值。与之关联的标签和提示是普通的可访问 HTML。带有 maxlength 的 textarea 可提供实用的无 JavaScript 后备方案。增强功能启用后，组件会读取该值并移除硬性长度限制，避免粘贴内容被悄然截断。

对于 200 个字符的字段，若阈值为 80%，计数会在达到 160 个字符时显示。组件公开页面中的示例文案和 250 字符的代码示例使用的数值并不一致，因此此示例统一使用一个限制值。没有 JavaScript 时，可见提示仍会说明限制，并由原生 maxlength 属性生效。

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

代码参考

阅读配套规范

## Scottish Government 设计系统 原生组件负责的内容

### 消息、时序与计数

此版本的实现会创建一条带有 aria-hidden 的可见消息，以及一条供辅助技术使用的独立隐藏消息。它会将相关 ID 添加到现有的 aria-describedby 中，而不会丢弃作者编写的提示。实现会等待 1000ms 再更新隐藏公告，让用户先完成输入反馈。

实际长度取自 JavaScript string.value.length：它统计的是 UTF-16 代码单元。基本多文种平面之外的符号可能占用两个代码单元，组合表情符号则可能占用更多。如果服务需要采用不同的字符计数规则，就必须让计数器与服务器端验证保持一致，而不能指望此组件按用户感知到的字符数进行计数。

组件会监听 input 事件。如果应用以编程方式填入示例内容或清空字段，也必须触发 input 事件。演示中的示例填充和重置操作都会这样做。源码中的一条注释提到语音识别轮询，但检查过的实现并未设置轮询间隔；因此，本指南不会声称组件支持此行为。

阅读配套规范

## Scottish Government 设计系统 使用当前版本的资源路径

### 模块加载与按需初始化

当前软件包为 @scottish-government/design-system。4.3.0 版本将编译后的样式表放在 dist/css/design-system.min.css，而较早的安装说明仍引用 dist/styles/main.css。本方案使用实际发布的资源。其脚本导出了 ES 模块，因此应使用 type="module" 导入，而不是使用普通的经典脚本标签。

为此字段创建一个 CharacterCount 实例并调用 init。对于包含多个组件的页面，也可以使用 DS.initAll，但此示例只初始化所需的计数器。这里未配置额外的分析服务。服务器端验证仍由库之外的应用单独负责：计数器是实用的编辑辅助工具，不是强制执行的边界。

1. 安装固定为 4.3.0 版本的软件包，并将编译后的 CSS 和模块复制到本地资源目录。

2. 在导入模块之前，先将完整的标签、提示和 textarea 结构放入页面。

3. 初始化一次计数器，然后通过常规 input 事件连接应用的预览和重置操作。

阅读配套规范

## Scottish Government 设计系统 测试超限后的恢复

### 不要只测试空字段

先输入少于阈值的内容，再超过 160 个字符，然后粘贴超过 200 个字符的内容。文本区域中必须保留完整内容，同时显示“内容过多”消息并将 aria-invalid 设为 true。将内容减少到限制以下，并确认错误类和无效状态都会恢复。

应用的“预览”操作会通过关联的错误消息拦截空白或超限的备注。有效备注会使用 textContent 显示在本地预览中，因此用户输入的标记会作为文本显示，而不会被解析。点击“编辑备注”会返回同一文本区域，并保留原有内容。“重置”会通过 input 事件清空内容，因此原生计数也会重置。

在 390px 宽度下，检查标题换行、全宽文本域、按钮换行和错误摘要。在更宽的视口中，正文阅读栏也不应变成过宽的段落。这些检查仅用于验证本示例；实际服务仍需在最终使用场景中开展用户研究、字体测试和辅助技术审查。

阅读配套规范

## Scottish Government 设计系统组件示例

### 非破坏性的字符数限制

标签、提示、文本域和 80% 阈值，并采用渐进增强。

```
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div>
```

代码参考

### 当前 4.3.0 编译资源

经版本验证的 CSS 路径和 ES 模块初始化。

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

代码参考

### 完整的独立示例

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

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
  <label class="ds_label" for="access-note">What would help you take part?</label>
  <p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
  <textarea maxlength="200" class="ds_input" rows="5" id="access-note"
    name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
```

代码参考

- 从“来源”一节下载完整示例。其 README 给出了确切的本地启动命令。

- 保持 vendor 路径相对于本文档；该归档包含此预览所使用的全部资源。

## Scottish Government 设计系统 Agent 设置

### 实现起点

本地演示使用真实的 4.3.0 CSS 和 CharacterCount 模块。明确指定了备用字体；未使用安装页面中较旧的 dist/styles 路径。Sources 中的完整可运行示例 ZIP 还提供了准确的预览依赖项和完整文档。解压后，在该目录运行 python3 -m http.server 8080，然后打开 http://localhost:8080/scottish-government.html。请勿通过 file:// 打开基于模块的示例。

```
npm install --save-exact @scottish-government/design-system@4.3.0
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/

<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
  import DS from '/vendor/scot/design-system.js';
  const root = document.querySelector('[data-module="ds-character-count"]');
  new DS.components.CharacterCount(root).init();
  // Or DS.initAll() when the page uses multiple DS components.
</script>
```

### 适用于你项目的提示词

```
在独立的访问需求备注表单中，使用真实的苏格兰政府设计系统 4.3.0 CharacterCount 组件。固定使用经验证的 dist/css/design-system.min.css 和 ES 模块 dist/scripts/design-system.js 路径。提供带有 80% 阈值的 200 字符文本域、关联提示和限定作用域的组件初始化。保留超出限制的粘贴文本，将原生计数和 ARIA 更新交由库处理，并另行添加本地验证以及纯文本安全预览、编辑和重置功能。通过程序填入示例文本或重置时，必须触发 input 事件。使用已发布的响应式字号和间距，明确字体选择，不使用官方标识，也不模拟提交功能。
```

## Scottish Government 设计系统 来源与范围

独立实现参考。苏格兰政府各部门必须使用 Roboto；本示例不带品牌标识，并明确使用 Arial 作为备用字体。文本为原创，不会保存或提交，也不代表官方立场。代码许可与政府图形资产的使用权限需分别处理。

- 类型 排版与字体采用规则。

- 颜色 Sass 调色板角色与主题边界。

- 网格 内部网格宽度、列与间距。

- 字符计数 非破坏性限制与阈值行为。

- JavaScript 初始化 API 与增强功能。

- 安装 软件包安装；对照当前已发布的路径。

- 焦点 键盘可见焦点指南。

- 问题 问题分组结构。

- 错误 恢复操作与错误摘要指南。

- 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。

## Scottish Government 设计系统 相关资源

### Singapore Government 设计系统

使用当前版本的 SGDS Web Components、真实的响应式设计令牌、日间和夜间主题，以及保持本地计划同步的原生范围数量输入控件。

### Decanter

使用 Decanter 的 Tailwind 预设、响应式字号比例和自适应屏幕边缘，构建学术风格的编辑类页面。探索原创活动卡片，体验可用的主题筛选和可展开的摘要。

### Suomi.fi 设计系统

使用 Source Sans 3、明确的间距令牌和可恢复的文档选择模式，构建易读的芬兰公共服务表单。


- [实现参考](https://designsystem.gov.scot/components/character-count)
- [来源](https://designsystem.gov.scot/styles/typography)
- [来源](https://designsystem.gov.scot/styles/colour)
- [来源](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/dist/css/design-system.min.css)
- [来源](https://designsystem.gov.scot/styles/column-grid)
- [来源](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [阅读配套规范](https://designsystem.gov.scot/components/character-count)
- [阅读配套规范](https://designsystem.gov.scot/styles/typography)
- [阅读配套规范](https://designsystem.gov.scot/styles/colour)
- [阅读配套规范](https://designsystem.gov.scot/styles/column-grid)
- [代码参考](https://designsystem.gov.scot/components/character-count)
- [阅读配套规范](https://cdn.jsdelivr.net/npm/@scottish-government/design-system@4.3.0/src/components/character-count/character-count.ts)
- [阅读配套规范](https://designsystem.gov.scot/get-started/javascript)
- [阅读配套规范](https://designsystem.gov.scot/components/error-summary)
- [代码参考](https://designsystem.gov.scot/get-started/javascript)
- [类型 排版与字体采用规则。](https://designsystem.gov.scot/styles/typography)
- [颜色 Sass 调色板角色与主题边界。](https://designsystem.gov.scot/styles/colour)
- [网格 内部网格宽度、列与间距。](https://designsystem.gov.scot/styles/column-grid)
- [字符计数 非破坏性限制与阈值行为。](https://designsystem.gov.scot/components/character-count)
- [JavaScript 初始化 API 与增强功能。](https://designsystem.gov.scot/get-started/javascript)
- [安装 软件包安装；对照当前已发布的路径。](https://designsystem.gov.scot/get-started/installation)
- [焦点 键盘可见焦点指南。](https://designsystem.gov.scot/styles/focus-states)
- [问题 问题分组结构。](https://designsystem.gov.scot/components/question)
- [错误 恢复操作与错误摘要指南。](https://designsystem.gov.scot/components/error-summary)