# Singapore Government 设计系统

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

增加数量、输入无效数量、验证、重置，并切换原生日间/夜间令牌，同时保留当前数值。

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

新加坡 SGDS Web 组件 3.29.0、已发布的主题文件、响应式令牌和自定义元素清单。预览通过本地主题导入运行原始 index.umd.min.js 包。预览明确回退到 Arial，不编译 Tailwind 工具类，也不使用官方页眉。v3 软件包与基于 v2 Bootstrap 的 SGDS 不同。

### 真实的响应式字体令牌

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --sgds-font-size-heading-xl | 32→36→40px | 基础、1024px 和1440px 范围；对应的 line-height-xl 为40→44→48px。 |
| --sgds-font-size-heading-md | 24→26→28px | 对应的 line-height-md 为28→32→32px。 |
| --sgds-font-size-heading-sm | 20→22→24px | 紧凑的区块标题角色。 |
| --sgds-font-size-body-md | 16px in all three ranges | Body-lg 为18→20→20px；body-sm 为14px。 |
| --sgds-font-family-brand | Inter,system-ui,sans-serif | 字体文件单独加载；预览中覆盖为 Arial。 |
| --sgds-font-weight-* | 300,400,600,700 | Light、regular、semibold、bold。 |
| --sgds-letter-spacing-tight | -0.4px | root.css 中的标题字距。 |
### 基础与语义主题角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --sgds-color-default | Day#1a1a1a;night#f3f3f3 | 映射 gray1000→gray100；不是硬编码的正文颜色。 |
| --sgds-bg-default | Day#ffffff;night#0e0e0e | 根界面表面随 sgds-night-theme 改变。 |
| --sgds-color-subtle | Day#525252;night#a5a5a5 | 辅助文本；在其对应的界面表面上保持足够的对比度。 |
| --sgds-primary-surface-default | #6b4feb | 在当前两个主题文件中均使用 Product-primary600。 |
| --sgds-primary-color-default | Day#6b4feb;night#a999f3 | 文本角色不同于填充界面表面角色。 |
| --sgds-border-color-default | Day#868686 | 夜间主题的每种边框都不要重复使用同一个基础令牌。 |
### 间距、边框与响应式变化

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | 以16px根字号下的 rem 表示；这些是基础令牌。 |
| --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | 固定的语义间距。 |
| --sgds-layout-gap-md | 16→24→32px | 实际软件包在1024/1440px处采用响应式变化；这些不是512/768网格断点。 |
| --sgds-text-gap-md | 12→16→16px | 文本间距有自己的响应式角色。 |
| --sgds-form-border-radius-md | 8px | border-radius-md 的别名。 |
| --sgds-form-border-width-default | 1px | border-width-1 的别名。 |
### 标准网格参考

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| xs / sm | 320–511 /512–767px | 4/8列；16px沟槽；20/24px固定边距。 |
| md | 768–1023px | 8列；24px沟槽；28px固定边距。 |
| lg | 1024–1279px | 12列；888px容器；24px沟槽。 |
| xl | 1280–1439px | 12列；1168px容器；32px沟槽。 |
| 2xl | 1440px+ | 12列；1312px容器；32px沟槽。 |
| Preview composition | 888px maximum;two columns→one below768px | 有意采用紧凑的规划器布局，并未完整实现所有标准网格预设。 |
### QuantityToggle 公共 API

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| value / step | Number;defaults0 /1 | 原生事件触发后读取元素值。 |
| min / max | Number constraints | 通过 hintText 说明所选服务限制。 |
| label / hintText | String properties/attributes | 提供无障碍字段名称和可见的范围说明。 |
| hasFeedback | style \| text \| both | 值为字符串的反馈模式，而非单独的 Boolean 属性。 |
| invalidFeedback / invalid | Message /Boolean state | 使用组件反馈，而不是无关的红色边框。 |
| Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | 同时监听 input 和 change 事件，以便摘要支持手动输入和按钮操作。 |
| Validation methods | checkValidity();reportValidity() | 返回布尔值形式的约束检查结果；reportValidity 会显示反馈。 |
| readonly versus disabled | Visible fixed value versus unavailable control | 禁用的字段不会参与提交；只读字段会保留其值。 |
## Singapore Government 设计系统完整指南

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

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

## Singapore Government 设计系统 选择当前的 SGDS 系列

### Web 组件与较旧的 Bootstrap 页面

> SGDS v 3 使用 @govtechsg/sgds-web-component。它的自定义元素、主题令牌和当前的工具类集成，与较旧的 @govtechsg/sgds Bootstrap 样式表属于不同的实现路径。不要混用 v 2 JavaScript 的说明和 v 3 标签，并期待新控件能够正常初始化。

示例使用实际的 3.29.0 浏览器包来注册数量调节器和按钮。它展示了一个原创的社区工作坊规划工具，不含新加坡政府的页眉，也不声称与政府有关联。这些控件只会更改本地值；没有预订或付款流程。

阅读配套规范

## Singapore Government 设计系统 主题令牌采用分层结构

### 原始颜色与语义用途

根文件定义了原始灰色、产品主色紫色和其他色系。日间和夜间主题文件会将这些原始颜色映射到默认文本、辅助文本、填充表面和边框等角色。夜间模式下，主色文本角色可以更改，而主色填充表面角色仍使用同一个原始颜色。

预览使用语义属性设置文档背景、文本、边框和弱化面板。因此，在根元素上切换 sgds-night-theme，会同时更新自定义元素及其周围的页面布局。即使控件本身仍能正确切换，硬编码为黑色的段落也会破坏这种联动。

紫色色板是已发布产品的默认配色，并不意味着可以冒充政府机构。机构身份标识和经批准的页眉用法需要另行授权。

阅读配套规范

## Singapore Government 设计系统 使用实际值设置响应式字体

### 查阅已发布的令牌，而非简写比例

当前的 responsive.css 将 heading-xl 映射为 32、36 和 40px，分别对应三个区间，并配以 40、44 和 48px 的行高。断点位于 1024 和 1440px。这些断点独立于网格较小的 512 和 768px 布局边界。Body-md 始终为 16px。

公开的排版概览介绍了通用比例和字体搭配原则，而已发布的令牌表为每个角色提供了精确的像素别名。本参考在说明实现数值时采用这些可执行的别名。在 HTML 中保留标题语义，并应用合适的视觉令牌；较小的分节标题不必人为降低标题级别。

Inter 是指定的品牌字体，设置文档中列出了 300、400、600 和 700 字重。本地示例明确使用 Arial 替代，不会加载远程字体。在采用该设计系统的服务中，应加载并测试选定的字体，而不能只依赖 CSS 字体系列名称。

阅读配套规范

## Singapore Government 设计系统 不同用途的间距

### 不要将所有间距都归并为同一尺度

原始间距尺度既包含 2px，也包含 4、8、12、16px 及更大的值。固定间距别名以及响应式布局、组件和文本间距都建立在这些原始值之上。基础布局间距 layout-gap-md 会从 16px 变为 24px，再变为 32px；文本间距 text-gap-md 则从 12px 变为 16px，并保持 16px。因此，“中”等描述并不代表每种用途都对应相同数值。

规划工具将最大宽度设为 888px，使两个适度大小的内容区域——数量控件和当前计划——保持并列。低于 768px 时，它们会改为上下排列。这只是应用自身的布局，并不表示 SGDS 标准网格整体总是以 888px 为界。参考资料会另外列出更完整的标准容器规则。

阅读配套规范

## Singapore Government 设计系统 有范围限制的计数控件

### 数量用于表示计数，不用于标识符

对于适合逐个增减的小计数，数量调节器是合适的选择。示例让用户选择 1–5 名参与者和 0–3 个共享工具包。这些只是演示用的约束；实际服务必须依据真实的可用数量或政策设定范围，并在提示文本中说明。邮政编码、标识符和精确的货币金额应使用其他类型的输入控件。

原生组件将减少和增加图标按钮组合在数字输入框两侧。它的 min、max 和 step 属性为数值，value 反映当前计数，label/hintText 用于提供上下文。达到边界时，相应按钮会变为不可用；直接输入的值仍需经过约束验证。

hasFeedback 接受字符串值 style、text 或 both。示例同时使用两者，并指定了 invalidFeedback 消息。若像 API 那样照搬其他组件的布尔值 hasFeedback，就会丢失这项具体配置。

```
<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>
```

代码参考

阅读配套规范

## Singapore Government 设计系统 保持摘要同步

### 两条事件路径，一个数据源

摘要会读取每个宿主元素的 value。它会同时监听 sgds-input 和 sgds-change，因为键入编辑和通过按钮确认的更改不一定经过同一条事件路径。在第一个本地示例中，只测试键入输入会漏掉递增按钮触发的更新；最终示例会处理这两种事件。

Check plan 会对两个原生元素调用 reportValidity，并显示本地状态消息。它不会把无效数字强行转换成看似合理的总数。Reset 会恢复宿主元素的初始值，通过 setInvalid(false) 清除应用可见的无效状态，然后在 updateComplete 后刷新摘要。

禁用字段不等同于只读字段：前者不会随表单提交，后者会保留其值。如果实际服务需要冻结已确认的数量以供审核，应使用恰当的状态，而不是仅仅为了呈现灰色外观而禁用字段。

- 如果摘要需要同时支持键入和递增按钮，请使用 sgds-input 和 sgds-change。

- 从自定义元素宿主读取 value，不要深入其 shadow DOM。

- 将本地有效性反馈与预订或提交成功的状态区分开。

阅读配套规范

## Singapore Government 设计系统 先加载样式，再注册组件

### 加载主题依赖链

在打包应用中，按顺序导入 day.css、night.css 和 css/sgds.css，然后只导入一次组件库。day/night 文件会导入 root.css，而 root.css 又会导入 responsive.css。基础样式文件会导入 reboot.css 和 grid.css。静态副本必须保留这些相对依赖，不能只复制最前面的三个文件。

官方 utility.css 是 Tailwind CSS v 4 的配置入口。它必须经过已配置的 Tailwind 构建流程；将它作为普通浏览器样式表添加，并不会生成所有 sgds: 工具类。本示例使用常规布局 CSS 和语义化自定义属性，因此不代表需要构建工具类。

对于独立浏览器示例，已发布的文件是 index.umd.min.js。软件包元数据仍提及 index.umd.js，但在检查过的发行包中并不存在该文件。本地预览使用实际存在的压缩版 bundle；npm 配置则使用文档中说明的、适用于打包工具的导入方式。

1. 锁定 3.29.0，并在基础样式规则之前导入主题令牌。

2. 请提供 Inter 字体，或谨慎选择并测试回退字体。

3. 只注册一次自定义元素；必要时等待定义完成，然后再添加应用监听器。

阅读配套规范

## Singapore Government 设计系统 同时测试数值边界和主题

### 边界条件有助于发现集成错误

将 Participants 递增两次，并检查控件和摘要是否都显示 3。直接输入 9 并运行 Check plan：组件应显示范围反馈，状态消息应提示需要更正。将值改为 5，并确认递增控件已禁用且数值仍然有效。

输入数量后切换到夜间主题，确认数值得到保留、摘要仍清晰易读，且边界行为正常。重置后再用键盘重复测试：按 Tab 应能按合理顺序聚焦输入框和按钮，按 Enter 或空格键应能触发当前聚焦的按钮。

本地测试会在 1440、768 和 390px 视口下验证组件行为，并检查主题依赖是否从本地加载。它不能证明未来政府服务的浏览器支持情况，也不能作为无障碍认证。该服务必须针对完整流程、文案、主题定制和数据处理进行测试。

阅读配套规范

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

### 有界数量与两条事件路径

完整的原生控件与同步输出。

```
<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>
```

代码参考

### v3 打包配置

正确的主题顺序、库注册方式，以及明确的 Tailwind 工具类使用范围。

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```

代码参考

### 完整的独立示例

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

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SGDS quantity specimen</title><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/day.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/night.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/css/sgds.css"><style>:root{--sgds-font-family-brand:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sgds-bg-default);color:var(--sgds-color-default);font-family:var(--sgds-font-family-brand)}main{max-width:888px;margin:auto;padding:32px 20px}h1{font-size:var(--sgds-font-size-heading-xl);line-height:var(--sgds-line-height-xl);letter-spacing:var(--sgds-letter-spacing-tight)}h2{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm)}p{max-width:60ch;line-height:1.5}.eyebrow{color:var(--sgds-color-subtle);font-size:14px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sgds-layout-gap-md);margin:32px 0}.control{border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);padding:24px;background:var(--sgds-bg-alternate)}sgds-quantity-toggle{display:block;max-width:100%}dl{margin:24px 0}dt{color:var(--sgds-color-subtle)}dd{margin:0 0 16px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:16px}#status{min-height:24px}button.native{font:inherit;background:transparent;border:1px solid var(--sgds-border-color-default);color:inherit;padding:8px 12px;border-radius:8px}button.native:focus-visible{outline:3px solid var(--sgds-primary-border-color-default);outline-offset:3px}@media(max-width:767px){.layout{grid-template-columns:1fr}.control{padding:20px}}</style><main><p class="eyebrow">Independent specimen · Community workshop planning</p><h1>Plan a small workshop group</h1><p>Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.</p><button class="native" id="theme" aria-pressed="false">Night theme</button><div class="layout"><section class="control"><h2>People and materials</h2><form id="planner"><sgds-quantity-toggle id="people" name="people" label="Participants" hintText="Choose 1 to 5 participants" min="1" max="5" step="1" value="1" hasFeedback="both" invalidFeedback="Enter a whole number from 1 to 5"></sgds-quantity-toggle><div style="height:24px"></div><sgds-quantity-toggle id="kits" name="kits" label="Shared material kits" hintText="Choose 0 to 3 kits" min="0" max="3" step="1" value="0" hasFeedback="both" invalidFeedback="Enter a whole number from 0 to 3"></sgds-quantity-toggle></form></section><section><h2>Current plan</h2><dl><dt>Participants</dt><dd id="p-value">1</dd><dt>Material kits</dt><dd id="k-value">0</dd></dl><p>These are demonstration limits. A real service should explain its own availability and eligibility rules.</p><div class="actions"><sgds-button id="review">Check plan</sgds-button><sgds-button id="reset" variant="outline">Reset</sgds-button></div><p id="status" role="status" aria-live="polite"></p></section></div></main><script src="vendor/sgds-3.29.0/index.umd.min.js"></script><script type="module">await Promise.all(['sgds-quantity-toggle','sgds-button'].map(x=>customElements.whenDefined(x)));const p=document.querySelector('#people'),k=document.querySelector('#kits'),status=document.querySelector('#status');await Promise.all([p.updateComplete,k.updateComplete]);const update=()=>{document.querySelector('#p-value').textContent=String(p.value);document.querySelector('#k-value').textContent=String(k.value);status.textContent=''};[p,k].forEach(x=>['sgds-input','sgds-change'].forEach(name=>x.addEventListener(name,update)));document.querySelector('#review').onclick=()=>{const validP=p.reportValidity(),validK=k.reportValidity();status.textContent=validP&&validK?'The quantities are within the demo limits. Nothing has been reserved.':'Correct the highlighted quantity before continuing.'};document.querySelector('#reset').onclick=async()=>{p.value=1;k.value=0;p.setInvalid(false);k.setInvalid(false);await Promise.all([p.updateComplete,k.updateComplete]);update()};document.querySelector('#theme').onclick=e=>{const night=document.documentElement.classList.toggle('sgds-night-theme');e.currentTarget.setAttribute('aria-pressed',String(night));e.currentTarget.textContent=night?'Day theme':'Night theme'};window.demoReady=true;</script></html>
```

代码参考

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

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

## Singapore Government 设计系统 AI Agent 设置

### 实现起点

独立预览使用经验证的原始 index.umd.min.js 包及本地 CSS 依赖链。npm 配置适用于打包工具；utility.css 需要 Tailwind v4，因此此静态预览会有意省略它。Sources 中提供了完整可运行示例 ZIP，其中包含准确的预览依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/singapore-sgds.html。请勿通过 file:// 打开基于模块的示例。

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```

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

```
构建一个新加坡 SGDS v3 规划工具，使用实际的 3.29.0 sgds-quantity-toggle 和 sgds-button 元素。导入完整的 day/night/root/responsive 令牌链和基础样式，然后注册原生组件。设置参与人数和材料套件数量的上下限、hasFeedback="both"、准确的标签和提示、带类型的验证，以及同时监听 sgds-input 和 sgds-change 的同步摘要。主题切换必须在根元素上切换 sgds-night-theme，且不重置数值。明确区分本地有效性与预约。不要加载 v2 Bootstrap 代码，也不要声称原始 utility.css 会生成 Tailwind 类。
```

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

独立实现示例，使用 MIT 许可代码和原创工作坊内容。不代表政府官方标识、关联关系、预约服务、网络提交功能或官方政策限额。

- 开发 v3 安装与 CSS 导入顺序。

- 数量 用途、限制与控件行为。

- 间距 固定与响应式间距角色。

- Heading 标题角色别名。

- 类型 字体排印用途与字体建议。

- 网格 标准响应式网格预设。

- 断点 网格断点与容器参考。

- 令牌 分层令牌模型。

- 语义 语义颜色角色。

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

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

### Decanter

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

### Suomi.fi 设计系统

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

### UNDP 设计系统

探索 UNDP 已发布的颜色与间距令牌、支持原生键盘操作的标签页，以及完整的工作坊阅读示例，其中包含本地记录的阅读进度。


- [实现参考](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [来源](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [来源](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [来源](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/root.css)
- [来源](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [来源](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [阅读配套规范](https://www.designsystem.tech.gov.sg/get-started/develop)
- [阅读配套规范](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [阅读配套规范](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [阅读配套规范](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [代码参考](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [阅读配套规范](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [阅读配套规范](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [代码参考](https://www.designsystem.tech.gov.sg/get-started/develop)
- [代码参考](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [开发 v3 安装与 CSS 导入顺序。](https://www.designsystem.tech.gov.sg/get-started/develop)
- [数量 用途、限制与控件行为。](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [间距 固定与响应式间距角色。](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Heading 标题角色别名。](https://www.designsystem.tech.gov.sg/foundations/typography/heading)
- [类型 字体排印用途与字体建议。](https://www.designsystem.tech.gov.sg/foundations/typography)
- [网格 标准响应式网格预设。](https://www.designsystem.tech.gov.sg/foundations/layout/responsive-grid)
- [断点 网格断点与容器参考。](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [令牌 分层令牌模型。](https://www.designsystem.tech.gov.sg/foundations/design-tokens)
- [语义 语义颜色角色。](https://www.designsystem.tech.gov.sg/foundations/colour/semantic-colour)