# NSW 设计系统 ## NSW 设计系统 界面预览 使用鼠标或键盘切换标签页，同时保留本地阅读列表。 ## NSW 设计系统 设计参考 实际的 nsw-design-system 3.27.0 CSS 导出项与 Tabs 实现，搭配本地 Public Sans 字体。 ### 品牌与中性色角色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --nsw-brand-dark | #002664 | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-brand-light | #cbedfd | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-brand-supplementary | #146cfd | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-brand-accent | #d7153a | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-brand-accent-light | #ffe6ea | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-grey-01 | #22272b | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-grey-02 | #495054 | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-grey-03 | #cdd3d6 | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-grey-04 | #ebebeb | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-off-white | #f2f2f2 | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-text-dark | #22272b | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | | --nsw-text-light | #fff | 实际的 3.27.0 默认主题。Text-light 表示用于深色表面的浅色文字，并非白色背景上的弱化文字。 | ### 状态配色组合 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --nsw-status-success | #008a07 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-success-bg | #e5f6e6 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-info | #2e5299 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-info-bg | #eaedf4 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-warning | #c95000 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-warning-bg | #fbeee5 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-error | #b81237 | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | | --nsw-status-error-bg | #f7e7eb | 将有含义的状态颜色与其背景角色搭配，并提供易读的文字说明。 | ### 字体排版与圆角 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --nsw-font-family | "Public Sans",sans-serif | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size | 16px | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-normal | 400 | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-bold | 700 | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-md-mobile | 1.125rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-md-desktop | 1.25rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-lg-mobile | 1.375rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-lg-desktop | 1.5rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-xl-mobile | 1.75rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-xl-desktop | 2rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-xxl-mobile | 2.25rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-font-size-xxl-desktop | 3rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | | --nsw-border-radius | 0.25rem | 已发布的响应式字体参考和通用圆角角色。移动端与桌面端的字体配对并非不同的字体系列。 | ## NSW 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## NSW 设计系统 固定运行时与主题 ### 使用原生标签页实现 > 此示例运行 nsw-design-system 3.27.0。它导入软件包 CSS 和 Tabs 类，并在创建标记后初始化唯一的标签页组。此处采用针对性初始化，避免注册页面上不存在的其他组件。在线文档可能介绍较新的版本；此处可下载的代码和令牌值仍对应经验证的软件包版本。 ### 将组件与应用状态分开 原生 Tabs 类负责标签页选择、面板显示和键盘导航。应用则使用 Set 保存提示。因此，在不同阶段之间切换不会改变阅读列表。源码明确体现了这种职责划分：没有隐藏的全局存储、后端请求，也没有仿造政府账户。 ## NSW 设计系统 品牌角色与易读的界面表面 ### 将深色与浅色角色配对使用 默认的深色品牌颜色为 #002664，浅色表面颜色为 #CBEDFD。提示面板使用浅色角色，操作按钮使用深色。当前标签页采用软件包的强调样式。这些是实际的主题角色，而不是为了营造公共部门网站观感而随意挑选的蓝色配色。此示例不使用官方政府徽标。 ### 仔细理解令牌名称 text-light 令牌为白色。它适用于深色背景，不应被泛化为弱化文字的同义词。辅助阶段文字改用更深的中性色角色。参考资料包含状态前景色与背景色配对，但本指南不会为了展示每种可用颜色而凭空添加错误或成功提示。 ## NSW 设计系统 Public Sans 与响应式比例 ### 检查布局前先加载字体 此示例在本地加载 Public Sans 400 和 700 字重。软件包分别定义了移动端和桌面端字号：中号文字从 1.125rem 增至 1.25rem，最大标题参考字号从 2.25rem 增至 3rem。这些配对有助于在可用宽度变化时保持阅读层级。 ### 保持内容层级简洁 简短的阶段标签之后是描述性标题、简介、说明段落和一条已保存的提示。页面不会把每句话都做成卡片。在窄屏上，阅读列表会排在阶段面板之后；简短的三个标签页组成的导航条仍易于使用，不会挤压文字使其折成多行。 ## NSW 设计系统 标签页标记与键盘操作 ### 让组件增强真实链接 初始标签页列表由指向唯一内容 ID 的链接组成。初始化后，组件会添加 tablist/tab/tabpanel 语义、管理选择状态并设置可聚焦的标签页。必须确保 href 目标正确，以便组件找到对应面板。页面中放置多个标签页组时，请勿重复使用 ID。 - 确保每个标签页链接都对应一个面板 ID。 - 插入标记后再初始化标签页组。 - 由原生组件管理选择状态和键盘焦点。 ### 检查键盘选择操作以及鼠标点击操作 原生实现支持使用方向键导航。浏览器检查会聚焦“准备”标签，按下 ArrowRight，并确认“讨论”标签变为选中状态。这与单纯设置最后点击标签的样式不同。由于这些阶段是同级内容，读者可以在它们之间切换，因此适合使用标签页；标签页不会用于隐藏顺序提交中必填的字段。 ## NSW 设计系统 已保存的提示词与如实反馈 ### 让已保存状态独立于当前可见标签 每个阶段的操作都会在 Set 中切换对应提示词的保存状态、更新 aria-pressed，并将标签从“保存”改为“移除”。阅读列表中的数量和条目均由该 Set 派生。返回已保存的阶段时，其选中状态会正确显示。“清空阅读列表”会移除所有已保存项，并在无内容可清除时禁用。 ### 说明持久化的边界 阅读列表属于页面本地状态，刷新后会消失。界面会明确说明这一点。要实现真正的持久化列表，需要明确的存储模型和恢复行为；本示例并未暗示具备这些能力。内容是原创的设计讨论示例，不是服务资格指南，也不声称复现了新南威尔士州（NSW）的官方工作流程。 ## NSW 设计系统 完整实现与审查 ### 安装依赖并复现源代码 创建一个 Vite 原生项目，安装 nsw-design-system 3.27.0 和 Public Sans，然后保存提供的入口文件和 nsw.css。保留根挂载元素。示例包含完整的三个阶段内容、原创提示词、原生 Tabs 初始化代码和阅读列表事件处理逻辑。保存与重置行为均由完整实现代码完成，不以伪代码代替。 1. 安装固定版本的 NSW 软件包和 Public Sans 字体文件。 2. 保存完整入口文件和 nsw.css，并保留根挂载元素。 3. 在两个不同的标签页保存提示词，并检查状态是否保留。 4. 使用 ArrowRight，清空列表并检查空状态。 ### 将标签页导航与已保存内容分开管理 仅在链接目标和面板都已存在后，才初始化原生 Tabs 类。匹配的片段 ID 构成增强功能的契约：即使标签看起来仍然正常，只要更改面板 ID 而不相应更改 href，两者的关联就会失效。如果页面上有多个标签组，请为每组使用不同的 ID。 将阅读列表作为标签页实例之外的应用状态管理。切换面板后，提示词的已保存状态必须保留；返回该面板时，aria-pressed 也必须反映此状态。对于读者可能反复查看的同级内容，应使用标签页；要求按顺序完成步骤的表单则需要采用其他导航模式。若要实现持久化，还需要明确的存储与恢复策略，而不能悄悄改变这个仅限页面状态的示例。 ## NSW 设计系统组件示例 ### main.js — 完整的原生标签页与阅读列表示例 包含所有原创阶段内容、标签页初始化，以及完整的保存、移除和重置逻辑。 ``` import Tabs from 'nsw-design-system/src/components/tabs/tabs.js'; import 'nsw-design-system/css'; import '@fontsource/public-sans/latin-400.css'; import '@fontsource/public-sans/latin-700.css'; import './nsw.css'; const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']]; document.getElementById('root').innerHTML=`

NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY

Plan a focused discussion

Move between three stages and save useful prompts to a local reading list.

    ${sessions.map(([name],i)=>`
  • ${name}
    • `).join('')}
${sessions.map(([name,title,lead,body],i)=>`

STAGE ${i+1} / 3

${title}

${lead}

${body}

Prompt to keep

${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}
`).join('')}
`; new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()}); ``` 代码参考 - 标签页由 NSW 类管理；原创阅读列表由 Set 管理。 ### nsw.css — 原创响应式布局 使用已发布的语义主题角色设置布局和提示词界面表面。 ``` body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}} ``` 代码参考 - 辅助阶段标签使用深色中性色；--nsw-text-light 为白色。 ## NSW 设计系统 Agent 设置 ### 实现起点 已在本地测试原生标签页点击和方向键操作、已保存状态保留、清空功能及响应式布局。 ``` npm create vite@latest nsw-workshop -- --template vanilla cd nsw-workshop npm install npm install nsw-design-system@3.27.0 @fontsource/public-sans # Replace src/main.js and add src/nsw.css. Keep
. npm run dev ``` ### 适用于你项目的提示词 ``` 使用 3.27.0 版原生 Tabs、Public Sans 和实际语义角色，构建 NSW 工作坊指南。确保面板 ID 唯一、支持键盘选择、独立管理已保存提示词状态，并提供实用的空阅读列表状态。明确说明数据仅在本地保存，避免声称提供官方服务。 ``` ## NSW 设计系统 来源与适用范围 由 OpenDesign 编写、使用 NSW Design System 3.27.0 的工作坊示例。原生标签页行为真实可用；内容和已保存提示词工作流则是原创的本地应用逻辑。 - 标签页 同级内容导航与原生行为。 - 开发者集成 软件包、样式表与 JavaScript 设置。 - 排版 Public Sans 与字体层级。 - 带版本的实现 主题导出与 Tabs 源代码。 ## NSW 设计系统 相关资源 ### ONS 设计系统 构建一个前后不会矛盾的调查问卷：使用 ONS 原生复选框、互斥选项、准确的字体和颜色引用，以及完整的本地回顾流程。 ### Ontario 设计系统 构建一份安大略风格的长篇指南，采用真实的字体排印、已发布的间距和颜色值、原生手风琴交互，以及与版本完全匹配的完整源代码。 ### Poncho 通过可用的活动目录，查看 Poncho 的 Bootstrap 3 网格、语义操作颜色，以及可通过完整面板区域点击的服务入口。 - [实现参考](https://designsystem.nsw.gov.au/components/tabs/index.html) - [来源](https://github.com/digitalnsw/nsw-design-system) - [代码参考](https://designsystem.nsw.gov.au/components/tabs/index.html) - [代码参考](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [标签页 同级内容导航与原生行为。](https://designsystem.nsw.gov.au/components/tabs/index.html) - [开发者集成 软件包、样式表与 JavaScript 设置。](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [排版 Public Sans 与字体层级。](https://designsystem.nsw.gov.au/core/typography/index.html) - [带版本的实现 主题导出与 Tabs 源代码。](https://github.com/digitalnsw/nsw-design-system)