# Helsinki 设计系统 ## Helsinki 设计系统界面预览 试着少选几个主题，点击错误链接，更正所选内容，然后从检查页面返回。 ## Helsinki 设计系统设计参考 hds-core5.2.2 包 CSS 和官方表单指南。原生样式；Arial 回退字体；原始最少选择规则。 ### 排版令牌 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | --font-default | HelsinkiGroteskPro, Arial, sans-serif | 受版权保护的 Helsinki 字体不包含在 Core 软件包中；演示使用原生 Arial 作为后备字体。 | | --fontsize-body-s/m/l/xl | 14 /16 /18 /20px | 根字号为常规大小；应按用途选择字号，而不是为每个字段随意设定大小。 | | --fontsize-heading-xxl/xl | 64 /48px | 最大号标题。 | | --fontsize-heading-xl-mobile | 40px | 这是明确声明的令牌；预览在576px处切换，这是应用层的选择。 | | --fontsize-heading-l/m/s | 32 /24 /20px | 次级标题。 | | --lineheight-s/m/l/xl | 1 /1.2 /1.5 /1.75 | 这是倍数，而不是像素高度。 | ### 组件与布局间距 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Component scale | 2,4,8,12,16,24,32,40,48,56,64,72px | spacing-4-xs 至 spacing-5-xl。 | | Layout scale | 16,24,32,48,64,96,128px | spacing-layout-2-xs 至 spacing-layout-2-xl。 | | Breakpoints | 320,576,768,992,1248,1440px | xs 至 xxl；声明令牌值本身不会创建媒体查询。 | | Container widths | 288,544,720,944,1200px | xs 至 xl 对应的参考宽度。 | | Checkbox geometry | 24px size;2px border;3px focus outline | 实际使用的是 Core5.2.2 CSS。 | | Button minimum | 56px; square corners | 2px 边框，内边距根据 spacing-s/l 设置。 | ### 语义色与调色板颜色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Bus | #0000bf | 默认复选框选中状态与主按钮主题。 | | Coat of arms / focus | #0072c6 | 独特的城市蓝色与焦点用途。 | | Copper | #00d7a7 | 强调色调色板；用于演示页眉分隔线。 | | Error / light | #b01038 /#f6e2e6 | 用于校验反馈；不可与装饰用途的 Brick 混用。 | | Success / light | #007a64 /#e2f5f3 | 用于表示已确认结果。 | | Info / alert | #0062b9 /#ffda07 | 用于信息提示与引起注意。 | | Text / secondary | #1a1a1a /#595959 | black-90 和 black-60。 | ### 表单结构与错误恢复 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Selection group | fieldset + legend | 图例说明要做出的选择；标签说明各个选项。 | | Vertical items | hds-selection-group__items--vertical | 避免强行将过长的选项排成一行。 | | Error summary | Notification error variant with linked error list | 放在表单标题下方；提交失败后将焦点移至该标题。 | | Inline error | hds-selection-group__error-text | 更正输入时，始终显示辅助说明。 | | Application rule | At least two topics | 这是原始场景中的校验规则，并非 HDS 复选框的默认行为。 | ## Helsinki 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## Helsinki 设计系统：Core 与 React 的边界 ### 选择你实际运行的实现 > HDS 提供 Core CSS、React 组件和设计令牌。本示例固定使用 hds-core5.2.2，即下载并检查过的示例所用软件包版本。仓库的发布版本号可能与单个软件包的版本不同，因此，仓库中较新的标签并不能证明本示例运行的就是该版本。 Core 提供基础变量和各个组件的样式，但不提供此处使用的表单应用状态。选择、验证、审核和更改逻辑均为原创的 JavaScript，基于原生 HTML 输入控件和文档说明的 HDS 表单模式构建。 阅读配套规范 ## Helsinki 设计系统：字体与字体使用边界 ### 如实使用后备字体 字体变量首先指定 HelsinkiGroteskPro，随后是 Arial 和 sans-serif。Core README 明确说明，出于版权原因不提供 Helsinki 字体文件。预览保留后备字体，不下载受限字体，也不暗示呈现效果与品牌字体完全一致。 基础正文令牌为16px，行高为1.5。Heading-xl 为48px，移动端令牌为40px；预览在576px处切换。这些都是已命名的值，但包含断点的 CSS 变量不会自动产生响应式行为。明确的媒体规则属于应用组合层。 阅读配套规范 ## Helsinki 设计系统：两套间距体系 ### 区分组件间距与页面节奏 HDS 将组件间距序列与更大的布局间距序列区分开来。组件间距包含2、4、8、12、16和24px，之后逐步增至72px。布局间距最高可达128px。即使 spacing-layout-xl 是有效变量，将它用作相邻复选框之间的间距也会显得过于宽松。 复选框组件定义了24px 的控件尺寸、2px 边框和3px 焦点轮廓。按钮的最小高度为56px，采用直角。预览保留这些原生形状，表单则放在一个应用容器中，容器最大宽度限制为文档公布的720px 参考宽度。 阅读配套规范 ## Helsinki 设计系统：表单中的颜色用途 ### 不要混淆调色板名称与反馈用途 默认交互主题使用 Bus 蓝色，焦点轮廓使用 Coat of arms 蓝色。错误反馈使用独立的莓果色调和浅色错误背景。Copper 等调色板强调色可用于页眉，但不能仅因其更醒目就取代错误状态色。 选择组的行内错误提示结合了文本、对比明显的左侧边框和图标样式，不会只靠红色来传达错误。错误摘要中的链接使用常见的交互色，便于用户识别返回字段的路径。 阅读配套规范 ## Helsinki 设计系统：复选框组结构 ### 一个组包含一个问题和多个答案 原生结构由 fieldset、legend、选项容器和单个复选框包装器组成。每个输入控件都紧邻其标签之前，因为样式表依靠这种关联来呈现不同的视觉状态。legend 说明选择任务；每个标签则说明一个可选主题。 演示要求至少选择两个主题，这是自定义的业务规则。复选框适用于可同时保留多个选择的场景。单选按钮组表示互斥选择，与此任务不符。校验前后都会显示 fieldset 提示。 ```
Topics for your afternoon

Choose at least two topics.

``` 代码参考 阅读配套规范 ## Helsinki 设计系统：关联错误与恢复 ### 聚焦问题所在，同时保留已填写内容 HDS 建议提交失败后，在表单标题下方显示错误摘要。摘要列表中的链接会指向出错控件，焦点则移至摘要标题。演示遵循这一流程：选择零个或一个主题后提交审核，会显示摘要和行内错误消息；点击链接会将焦点移至第一个复选框。 首次尝试后，每次更改选择都会重新检查最少选择数量。选中两个主题后，两处错误提示都会消失，已选输入内容则保留。再次提交失败时，焦点会返回摘要标题。在审核时会再次检查规则；在真实服务中，客户端反馈不能代替服务器端校验。 1. 不选择任何主题进行审核，并确认摘要获得焦点。 2. 点击其中的链接并选择两个主题；确认错误提示已清除。 3. 打开本地审核页面，返回更改主题，并确认两个选择仍被保留。 阅读配套规范 ## Helsinki 设计系统：资源文件与完整示例 ### 加载基础样式及所选组件 Core 软件包将 base.css 与组件样式分开。仅导入 base 不仅缺少复选框和通知组件结构，也只会提供变量和字体排版样式。配置中列出了本示例实际使用的文件，使资源集比包含所有组件的资源包更精简。 完整示例包含应用验证和重置。最终状态称为本地预览，因为没有任何信息被注册或发送。清除选择是一项有意执行的操作，会重置选项和验证记录，然后将焦点移至第一个输入框；普通字段错误不会触发此操作。 - base.css 提供颜色、间距、字体排印和参考尺寸。 - checkbox 和 selection-group 样式提供分组控件和行内反馈。 - notification 和 button 样式提供错误摘要界面表面和操作按钮。 阅读配套规范 ## Helsinki 设计系统：示例说明 ### 实现细节，不作不实的服务声明 预览在 1440、768 和 390px 宽度下展示真实的 HDS 组件样式、键盘焦点、错误修正和数据保留。它不宣称完成了全面的无障碍审查。真正的多语言城市服务还需要本地化标签、合适的语言元数据、服务端规则，以及服务后端返回的确认结果。 源代码采用 MIT 许可，但定制城市字体有其独立的权利边界。这个独立学习示例使用虚构的项目主题，不使用官方 Helsinki 标识。切勿将其可见外观和本地状态误认为真实的活动报名。 阅读配套规范 ## Helsinki 设计系统组件示例 ### 原生分组复选框结构 fieldset 和 legend 用于说明问题；输入框和标签用于表达多个答案。 ```
Topics for your afternoon

Choose at least two topics.

``` 代码参考 ### 完整的关联错误选择流程 错误摘要焦点、关联的错误修正、查看、修改和清除选择。 ``` Plan a skills afternoon
COMMUNITY SKILLS · LOCAL PLAN

Plan a skills afternoon

Select at least two topics for an example programme. Nothing is registered or sent.

Topics for your afternoon

Choose two or more. You can change your selection before reviewing the plan.

0 topics selected.

``` 代码参考 ## Helsinki 设计系统 Agent 配置 ### 实现起点 Core 资源的准确路径。应用代码负责验证和查看；不包含 HelsinkiGroteskPro。Sources 中的完整可运行示例 ZIP 还提供准确的预览依赖项和完整文档。解压后，在该目录运行 python3 -m http.server 8080，然后打开 http://localhost:8080/helsinki.html。请勿通过 file:// 打开基于模块的示例。 ``` npm install hds-core@5.2.2 # CSS imports in a bundler: # import 'hds-core/lib/base.css'; # import 'hds-core/lib/components/checkbox/checkbox.css'; # import 'hds-core/lib/components/selection-group/selection-group.css'; # import 'hds-core/lib/components/notification/notification.css'; # import 'hds-core/lib/components/button/button.css'; # In plain HTML, copy these files into public assets and link base.css first. # HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial. ``` ### 适用于你项目的提示词 ``` 使用 HDS Core5.2.2 的 base 和选定的组件 CSS。使用 fieldset/legend 对相关复选框分组，保留标签和提示，并使用语义化错误令牌。查看失败时，在表单标题下方显示关联错误，并将焦点移至摘要标题。修正后重新检查，保留已选值，并明确区分本地查看与经服务器确认的提交。 ``` ## Helsinki 设计系统：来源与范围 独立的 OpenDesign 示例。不包含 Helsinki 字体资源或服务标识；不进行注册，也不返回后端结果。 - Core 配置 基础/组件 CSS 分离与字体版权边界。 - 表单构建 分组、控件选择和焦点顺序。 - 验证模式 摘要位置、链接、错误修正和后端边界。 - 设计令牌 字体排印、间距和颜色用途。 - 官方代码仓库 软件包架构和 MIT 许可。 - 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。 ## Helsinki 设计系统相关资源 ### Rivet 使用 Rivet 实际的设计令牌比例、HTML 组件结构和原生键盘交互，构建大学页面。探索紧凑型工作坊详情页，其中包含便于访问的访客信息标签页。 ### Digital Agency 设计系统 使用 DADS 文本角色、语义令牌和原生 HTML 组件结构，构建易读的日语公共服务界面。试用可运行的收据查询功能，体验格式错误、无匹配结果和可供审核的状态记录。 ### KERN 使用经验证的字体排印、语义主题、披露组件和可撤销的确认流程，构建原生 KERN 界面。 - [实现参考](https://hds.hel.fi/patterns/forms/form-validation/) - [来源](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [来源](https://hds.hel.fi/patterns/forms/form-building/) - [阅读配套规范](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md) - [阅读配套规范](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [代码参考](https://hds.hel.fi/patterns/forms/form-building/) - [阅读配套规范](https://hds.hel.fi/patterns/forms/form-building/) - [阅读配套规范](https://hds.hel.fi/patterns/forms/form-validation/) - [阅读配套规范](https://github.com/City-of-Helsinki/helsinki-design-system) - [代码参考](https://hds.hel.fi/patterns/forms/form-validation/) - [Core 配置 基础/组件 CSS 分离与字体版权边界。](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md) - [表单构建 分组、控件选择和焦点顺序。](https://hds.hel.fi/patterns/forms/form-building/) - [验证模式 摘要位置、链接、错误修正和后端边界。](https://hds.hel.fi/patterns/forms/form-validation/) - [设计令牌 字体排印、间距和颜色用途。](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [官方代码仓库 软件包架构和 MIT 许可。](https://github.com/City-of-Helsinki/helsinki-design-system)