# Ripple 设计系统

## Ripple 设计系统界面预览

阅读准备说明，标记准备就绪，并直接前往下一个未完成步骤。

## Ripple 设计系统设计参考

本研究核对了已发布的 Ripple 设计文档：默认颜色角色、间距、字号/行高组合和焦点颜色。这些是设计参考，并不表示已随附原生 Ripple 发布版本。

### 已发布的颜色角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rpl-clr-primary | #0052C2 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-primary-alt | #003174 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-accent | #0095EC | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-accent-alt | #E6F5FD | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-neutral-0 | #FFFFFF | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-neutral-100 | #F5F5F5 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-neutral-200 | #E6E6E6 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-neutral-700 | #333333 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-neutral-800 | #1A1A1A | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-type-default | #1A1A1A | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-link | #0052C2 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
| --rpl-clr-link-visited | #9F46B1 | 文档记录的默认 Ripple 调色板；主题值可能不同。应用主题时请保留角色名称。 |
### 已发布的间距比例

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rpl-sp-1 | 4px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-2 | 8px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-3 | 12px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-4 | 16px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-5 | 20px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-6 | 24px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-7 | 28px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-8 | 32px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-9 | 40px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-10 | 48px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-11 | 56px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-12 | 64px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-13 | 80px | 文档记录的间距步长。后续步长并非索引乘以四。 |
| --rpl-sp-14 | 120px | 文档记录的间距步长。后续步长并非索引乘以四。 |
### 字体角色与回退字体

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | 已发布字体角色中的字号/行高组合。独立示例使用文档记录的 Arial 回退字体，而非 VIC 字体。 |
| rpl-type-h1 | 32/36px small · 56/60px large · 700 | 已发布字体角色中的字号/行高组合。独立示例使用文档记录的 Arial 回退字体，而非 VIC 字体。 |
| rpl-type-h2 | 24/32px small · 32/40px large · 700 | 已发布字体角色中的字号/行高组合。独立示例使用文档记录的 Arial 回退字体，而非 VIC 字体。 |
| rpl-type-h3 | 20/28px small · 24/32px large · 700 | 已发布字体角色中的字号/行高组合。独立示例使用文档记录的 Arial 回退字体，而非 VIC 字体。 |
| rpl-type-p | 16/24px | 已发布字体角色中的字号/行高组合。独立示例使用文档记录的 Arial 回退字体，而非 VIC 字体。 |
| rpl-type-p-small | 14/20px | 已发布字体角色中的字号/行高组合。独立示例使用文档记录的 Arial 回退字体，而非 VIC 字体。 |
### 焦点对比度

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --rpl-clr-focus | #FF9E1B | 已发布的焦点颜色。示例实现了自己的焦点 CSS，而非导入 Ripple 工具类。 |
| --rpl-clr-focus-contrast | #1A1A1A | 已发布的焦点颜色。示例实现了自己的焦点 CSS，而非导入 Ripple 工具类。 |
| --rpl-clr-dark | #1A1A1A | 已发布的焦点颜色。示例实现了自己的焦点 CSS，而非导入 Ripple 工具类。 |
## Ripple 设计系统完整指南

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

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

## Ripple 设计系统基础与运行时范围

### 区分设计参考与组件运行时

> 这份参考介绍了已发布的 Ripple 设计系统。此工作坊时间线是原创作品，完整运用了所选值构建 HTML、CSS 和 JavaScript。它不会运行 Ripple Vue 组件，不使用未公开的包镜像，也不声称自己是维多利亚州政府服务。预览中清楚标明了这一界限，可下载的源代码中也保留了相关说明。

### 审慎选择原生集成方式

Ripple 提供面向 Vue 的包路径，以及通过其核心包使用的纯样式路径。官方安装需要访问 GitHub Packages。纯样式方案仍由应用负责标记和行为。集成该发行版时，请参阅链接中的官方访问说明，并固定所选版本；下方的独立研究示例既不需要身份验证，也无需安装软件包。

## Ripple 设计系统颜色角色与键盘焦点

### 保留品牌色与内容色的区别

时间线标题使用较深的主色值，边缘使用强调色，正文使用中性色角色。这些是所提供源代码中的不同 CSS 变量。原创状态面板使用浅色强调背景。参考资料同时列出了角色名称和值，因此今后更换主题时，可以更新预期的色彩关系，而不必逐一替换互不相关的十六进制字面值。

### 让键盘焦点清晰可辨

焦点使用橙色搭配深色内容，与默认蓝色形成区别。原创按钮和摘要的焦点规则会更改其背景，并绘制深色轮廓。复选框焦点则保留为轮廓。此实现采用了已发布的焦点配色方法，但并不表示示例导入了 Ripple 的原生焦点工具，也不意味着它适用于所有可能的主题并能确保无障碍性。

## Ripple 设计系统间距与响应式排版

### 采用实际的间距序列

源代码使用命名为 8、16、24、32 和 48px 的步长来安排阅读节奏。完整参考还记录了更大的步长；该序列后续不再是索引的简单倍数，因此 rpl-sp-9 为 40px，而非 36px。特意让自定义网格间距和区块内边距共用比例中的数值，同时承担不同的布局作用。

### 明确标示字体使用边界

Ripple 将 VIC 字体与 Arial、Helvetica 回退字体一并记录。本研究不提供 VIC 字体文件，并明确使用 Arial。示例中的标题会在 992px 断点处从 32/36px 调整为 56/60px，而正文保持 16/24px。这些字号和行高是文档记录的参考值；时间线布局为原创设计，不应称为与原生组件像素级一致。

## Ripple 设计系统时间线内容与渐进式信息呈现

### 让每个阶段各司其职

第一阶段明确决策，第二阶段筹备参与，第三阶段记录行动。相对时间标签用于表达先后顺序，不会虚构政府截止日期或服务承诺。每个阶段都有一段始终可见的简短摘要，并通过原生 details 元素提供更多筹备说明。即使视觉标记为自定义设计，整个序列仍保留为有序列表。

- 相对时间用于描述工作坊的阶段顺序。

- 可见摘要说明各阶段的目的。

- 可展开的说明补充次要信息。

- 通过明确的复选框操作标记准备就绪。

### 不要把阅读与准备就绪混为一谈

展开筹备说明不会将阶段标记为已完成。准备就绪状态由独立复选框记录，进度计数也只根据已勾选的项目计算。这样可以避免用户只是阅读内容就误将任务标记为完成。源代码包含所有项目和状态逻辑，便于查看和编辑。

## Ripple 设计系统进度、下一步重点与重置

### 根据当前状态确定下一步行动

“前往下一个未完成步骤”会找到首个未勾选的阶段，展开其说明并将焦点移至对应复选框。即使读者之前已打开该阶段，也不会因此跳过。三个复选框全部选中后，“下一步”按钮将被禁用，状态提示所有准备步骤均已就绪。取消勾选后，该操作会再次启用。

### 同步重置所有相关状态

重置会清除三个复选框的勾选，关闭说明，更新进度元素，并将焦点移回第一个复选框。它不会留下已完成提示，也不会假装删除了远程记录。此本地研究中的状态有意仅保存在内存中，页面上也明确说明了这些状态不会保存或发送。

## Ripple 设计系统完整源代码与验证

### 运行独立示例

将提供的完整文档保存为 index.html，并通过服务器提供其所在目录。文档包含自己的设计令牌、标记、可读示例内容和交互代码，因此无需请求外部运行时或字体。构建实际服务前，请通过参考链接核对原生 Ripple API、版本选择和获授权的品牌素材。

1. 将完整的 HTML 示例保存为 index.html。

2. 在本地提供该目录。

3. 使用键盘测试焦点移至下一步、完成和重置功能。

4. 使用官方软件包访问权限和固定版本，单独集成原生 Ripple。

### 验证完整的状态转换

将第一项标记为就绪，使用下一步操作，并确认焦点移至第二个复选框且其备注已展开。完成所有项目，确认下一步操作已禁用；然后取消勾选一项，确认该操作重新可用。重置后检查进度和展开面板。在手机屏幕宽度下，状态面板会移至时间线下方，所有控件仍可使用。

## Ripple 设计系统组件示例

### index.html — 完整的工作坊时间线

所有令牌值、响应式样式、内容、进度和焦点行为都包含在一个可运行的文档中。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop planning timeline</title><style>
:root{--rpl-clr-primary:#0052c2;--rpl-clr-primary-alt:#003174;--rpl-clr-accent:#0095ec;--rpl-clr-accent-alt:#e6f5fd;--rpl-clr-type-default:#1a1a1a;--rpl-clr-neutral-0:#fff;--rpl-clr-neutral-100:#f5f5f5;--rpl-clr-neutral-200:#e6e6e6;--rpl-clr-focus:#ff9e1b;--rpl-clr-focus-contrast:#1a1a1a;--rpl-sp-2:8px;--rpl-sp-4:16px;--rpl-sp-6:24px;--rpl-sp-8:32px;--rpl-sp-10:48px;--rpl-type-font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--rpl-clr-neutral-0);color:var(--rpl-clr-type-default);font:16px/1.5 var(--rpl-type-font-family)}main{max-width:1160px;margin:auto;padding:var(--rpl-sp-8)}header{background:var(--rpl-clr-primary-alt);color:white;padding:var(--rpl-sp-8);border-bottom:8px solid var(--rpl-clr-accent)}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}h1{font-size:32px;line-height:36px;margin:16px 0;max-width:20ch}header p:last-child{max-width:65ch;margin-bottom:0}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:var(--rpl-sp-10);margin-top:var(--rpl-sp-8)}h2{font-size:24px;line-height:32px;margin:0 0 16px}h3{font-size:20px;line-height:28px;margin:0}.timeline{list-style:none;margin:0;padding:0 0 0 24px;border-left:2px solid var(--rpl-clr-primary);}.timeline>li{position:relative;padding:0 0 32px 8px}.timeline>li:before{content:'';position:absolute;width:14px;height:14px;background:var(--rpl-clr-primary);border:3px solid white;outline:2px solid var(--rpl-clr-primary);border-radius:50%;left:-32px;top:6px}.when{font-size:14px;font-weight:700;color:var(--rpl-clr-primary);margin:0 0 8px}.timeline p{margin:8px 0 16px}.timeline label{display:flex;align-items:flex-start;gap:8px;font-weight:700}.timeline input{width:20px;height:20px;flex-shrink:0;margin:2px 0;accent-color:var(--rpl-clr-primary)}details{background:var(--rpl-clr-neutral-100);margin:16px 0;padding:16px}summary{font-weight:700;cursor:pointer}details ul{padding-left:24px}.progress{background:var(--rpl-clr-accent-alt);padding:24px;align-self:start;border-top:4px solid var(--rpl-clr-primary)}progress{width:100%;height:16px;accent-color:var(--rpl-clr-primary)}button{font:700 16px/24px var(--rpl-type-font-family);padding:12px 16px;cursor:pointer;border:2px solid var(--rpl-clr-primary);background:var(--rpl-clr-primary);color:white;text-align:left;max-width:100%}button:hover{background:var(--rpl-clr-primary-alt)}.secondary{color:var(--rpl-clr-primary);background:white;margin-top:16px}button:disabled{cursor:default;opacity:.6}.progress button{width:100%;margin-top:16px}button:focus-visible,summary:focus-visible{outline:3px solid var(--rpl-clr-focus-contrast);outline-offset:2px;background:var(--rpl-clr-focus);color:var(--rpl-clr-focus-contrast);border-radius:0}input:focus-visible{outline:3px solid var(--rpl-clr-focus);outline-offset:3px}.note{font-size:14px;border-top:1px solid var(--rpl-clr-neutral-200);padding-top:24px;margin-top:8px;max-width:80ch}[hidden]{display:none!important}@media(min-width:992px){h1{font-size:56px;line-height:60px}h2{font-size:32px;line-height:40px}}@media(max-width:760px){main{padding:20px}header{padding:24px}.layout{grid-template-columns:1fr;gap:24px}.eyebrow{overflow-wrap:anywhere}}
</style></head><body><main><header><p class="eyebrow">OpenDesign · Workshop practice</p><h1>Make room for a useful conversation</h1><p>A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.</p></header><div class="layout"><section aria-labelledby="plan-heading"><h2 id="plan-heading">Your preparation timeline</h2><ol class="timeline">
<li><p class="when">One week before</p><h3>Define the decision</h3><p>Agree on the question the workshop should answer and the people who need to take part.</p><details><summary>Preparation notes</summary><ul><li>Write a one-sentence outcome.</li><li>Invite people with different perspectives on the decision.</li><li>Explain what is already decided and what is still open.</li></ul></details><label><input type="checkbox" data-step="0">The purpose and invitations are ready</label></li>
<li><p class="when">Two days before</p><h3>Prepare for participation</h3><p>Share a short agenda and offer a way to contribute before the session.</p><details><summary>Preparation notes</summary><ul><li>Send readable material in advance.</li><li>Check access needs and remote participation.</li><li>Choose someone to capture decisions.</li></ul></details><label><input type="checkbox" data-step="1">The agenda and access arrangements are ready</label></li>
<li><p class="when">On the day</p><h3>Leave with a next step</h3><p>Close with a clear decision, an owner and a date to review what happens next.</p><details><summary>Preparation notes</summary><ul><li>Leave time to compare different views.</li><li>Record unanswered questions separately.</li><li>Read back the agreed action before closing.</li></ul></details><label><input type="checkbox" data-step="2">The action and follow-up are recorded</label></li>
</ol></section><aside class="progress" aria-labelledby="progress-heading"><h2 id="progress-heading">Preparation status</h2><p id="count" role="status">0 of 3 steps ready</p><progress max="3" value="0" aria-label="Preparation progress"></progress><p id="next-note">Next: Define the decision</p><button id="next" type="button">Go to next unfinished step</button><button class="secondary" id="reset" type="button">Reset checklist</button></aside></div><p class="note">An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.</p></main><script>
const checks=[...document.querySelectorAll('[data-step]')],names=['Define the decision','Prepare for participation','Leave with a next step'];const next=document.querySelector('#next');
function update(){let count=checks.filter(c=>c.checked).length,first=checks.findIndex(c=>!c.checked);document.querySelector('#count').textContent=`${count} of 3 steps ready`;document.querySelector('progress').value=count;document.querySelector('#next-note').textContent=first<0?'All three preparation steps are ready.':'Next: '+names[first];next.disabled=first<0;}
checks.forEach(c=>c.addEventListener('change',update));next.addEventListener('click',()=>{let check=checks.find(c=>!c.checked);if(check){check.closest('li').querySelector('details').open=true;check.focus();}});document.querySelector('#reset').addEventListener('click',()=>{checks.forEach(c=>c.checked=false);document.querySelectorAll('details').forEach(d=>d.open=false);update();checks[0].focus();});update();
</script></body></html>
```

代码参考

- 这是原创应用代码，并非 Ripple Vue 组件的源代码。

- 无需外部运行时、字体请求、账户或数据提交。

## Ripple 设计系统 Agent 设置

### 实现起点

此命令用于提供自包含版本。若要使用原生 Ripple，请按照“来源”中链接的官方 GitHub Packages 访问说明及 Vue 或纯样式设置指南操作。

```
# Save the complete example as index.html in an empty directory.
python3 -m http.server 8000
# Open http://localhost:8000/
```

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

```
根据提供的文档构建完整的原创工作坊时间线。保留 Ripple 文档中规定的角色值和间距、明确指定的 Arial 后备字体、彼此区分的阅读与就绪状态、聚焦下一个未完成步骤的行为、完成状态和完整重置功能。将结果标注为 HTML/CSS 版本，而非原生 Ripple Vue 实现。
```

## Ripple 设计系统来源与范围

使用已发布的 Ripple 设计值和文档中指定的 Arial 后备字体制作的 OpenDesign HTML/CSS 版本。此预览不会运行 Ripple Vue 组件，也不包含 VIC 字体资源。

- 颜色角色 默认调色板和内容角色。

- 间距 已发布的完整间距序列。

- 排版 VIC、后备字体和响应式字号组合。

- 焦点状态 橙色/深色焦点样式。

- 原生纯样式设置 软件包访问权限和纯样式方案的职责。

- 设计令牌 角色命名和主题关系。

## Ripple 设计系统相关资源

### Scottish Government 设计系统

通过原生字符计数字段应用苏格兰政府的响应式字号、间距和颜色语义；超出限制的文本仍会保留，并支持后续调整。

### Singapore Government 设计系统

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

### Decanter

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


- [实现参考](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)
- [来源](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/)
- [来源](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/)
- [来源](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/)
- [来源](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/)
- [代码参考](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)
- [颜色角色 默认调色板和内容角色。](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/)
- [间距 已发布的完整间距序列。](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/)
- [排版 VIC、后备字体和响应式字号组合。](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/)
- [焦点状态 橙色/深色焦点样式。](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/)
- [原生纯样式设置 软件包访问权限和纯样式方案的职责。](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/)
- [设计令牌 角色命名和主题关系。](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)