101.4K+下载
公共服务与教育 · 新资源

Amsterdam 设计系统.

使用 Amsterdam 真实的开源 Switch 契约，搭配完整的中性主题、无障碍标签和即时的阅读偏好设置。

下载 OpenDesign 下载 DESIGN.md
OpenDesign 指南8 个章节25 条参考条目原始应用指南
01

Amsterdam 设计系统界面预览

切换更大字号、更高对比度与减弱预览动效；恢复默认设置。

调整阅读预览打开完整示例
原生 Amsterdam Switch CSS4.4.0、原创中性主题与应用行为；不含专有资产。 · 实现参考
02

Amsterdam 设计系统设计参考

已检查 CSS 与 React4.4.0 的实现；核实了专有令牌与资产的边界。预览中的所有主题取值均为原创。

开源组件契约

来源
名称 / 规则值 / 配置用途
CSS package@amsterdam/design-system-css 4.4.0原生 Switch 样式表原样使用。
Class anatomyams-switch; ams-switch__input; ams-switch__label输入框紧邻其关联标签之前。
Input semanticstype=checkbox; role=switch原生选中状态表示开与关。
Native behaviorImmediate binary settingReact 源码说明无需提交表单。
React propsInputHTMLAttributes<HTMLInputElement>checked、defaultChecked、onChange、disabled 与 ARIA 属性均会传递到 input。
FocusInput focus styles the following label不要用 display:none 隐藏真正的 input。

完整的原创中性开关主题

来源
名称 / 规则值 / 配置用途
--ams-switch-inline-size50px原创的开关轨道宽度。
--ams-switch-thumb-inline-size / block-size22px / 22px原创的圆形滑块几何尺寸。
--ams-switch-label-border-width3px轨道内边距；选中态的位移使用此值。
--ams-switch-background-color#666原创的关闭态轨道颜色。
--ams-switch-checked-background-color#286044 原创的开启态轨道颜色；并非 Amsterdam 品牌令牌。
--ams-switch-thumb-background-color#fff原创的滑块颜色。
--ams-switch-disabled-background-color#aaa禁用外观；行为由原生 disabled 属性提供。
--ams-switch-outline-offset4px焦点环间距。
--ams-switch-cursor / disabled-cursorpointer / not-allowed显式的交互配置。
--ams-switch-thumb-hover-box-shadow0 0 0 2px #fff原创的悬停效果。

应用的字体排印与布局

来源
名称 / 规则值 / 配置用途
Font / bodyArial / 18px with 1.5 leading原创中性配置；不含 Amsterdam Sans 资产。
Heading36px; 30px below700px应用自行选择，并非 Amsterdam 官方字号阶梯。
Layout900px maximum; two columns with32px gap应用自行选择；700px 以下为单列布局。
Larger reading mode22px article text本地偏好设置，不能替代浏览器全局缩放。
Reduced motionOS preference plus local preview settingCSS 组件已针对自身的过渡效果遵循 prefers-reduced-motion。

复用与品牌标识边界

来源
名称 / 规则值 / 配置用途
Component codeEUPL-1.2 or later保留许可证及适用的声明。
DocumentationCC0-1.0与专有资产分开存放。
Token package4.3.0Proprietary assets其自有的 LICENSE 将其排除在开源许可证之外。
Amsterdam Sans / icons / logoRestricted institutional assets未复制到这份独立示例中。
03

Amsterdam 设计系统完整指南

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

DESIGN-amsterdam.md

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

下载指南

Amsterdam 设计系统 组件与主题分离

坦诚地使用开源层

Amsterdam 将组件 CSS 单独发布，因此它的类名契约可以在 React 之外实现。该样式表依赖 CSS 的自定义属性；若在没有完整主题的情况下引入，重要的尺寸与颜色将无法解析。因此，本示例中的原生 Switch 样式表搭配了一套完整的原创中性配置。

摘自本 OpenDesign 指南

该代码仓库将开源包与专有资产分开存放。经检查的令牌包 4.3.0 带有自己的许可声明，将其排除在开源许可证之外。Amsterdam Sans、图标以及城市徽标同样有各自的限制。本指南仅将它们的存在作为背景说明，既不重新分发这些资产，也不声称通过公开的 npm 下载就能获得不受限制的品牌使用权。

阅读配套规范

Amsterdam 设计系统 完整的中性配置

补齐组件所需的每一项属性

参考表列出了所选 Switch 样式表用到的每一个变量。宽度、滑块尺寸、边框宽度、颜色、轮廓偏移、光标与悬停效果都有明确的取值。这些是本示例的原创取值，并非照搬 Amsterdam 设计令牌。正是这一区分，让读者无需猜测缺失的主题片段就能复现该示例。

轨道宽 50px，滑块 22px，边框 3px。原生选中态的 transform 依据滑块宽度与边框宽度计算位移距离。因此，只改动轨道宽度可能让滑块错位；应一并调整相关几何尺寸，并同时检查两种状态。

css
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}

代码参考

阅读配套规范

Amsterdam 设计系统 原生 Switch 结构解析

标签必须位于输入框之后

React 的实现会渲染一个外层容器、一个 input 以及一个空的关联标签。它的 CSS 使用相邻兄弟选择器，根据 input 的聚焦、选中与禁用状态来为标签设置样式。在纯粹的 HTML 实现中应保持这一顺序；若在 input 与标签之间插入说明文字，这些选择器便会失效。

真正的 input 是一个带有 role="switch" 的复选框。它保留了原生的 checked 属性与键盘行为。由于可见标签没有文字，请通过 aria-label 或 aria-labelledby 提供无障碍名称。本示例引用了一个可见的设置标题，并通过 aria-describedby 关联其说明。

html
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>

代码参考

阅读配套规范

Amsterdam 设计系统 即时生效的设置

开关改变当前的视图

组件源码将 Switch 定义为即时生效的二元设置。预览遵循这一契约：更大字号会改变正文字号，更高对比度会改变文字与轮廓，减弱动效则会去掉徽标短暂的入场效果。这里没有“保存”按钮，去假装这些本地选择会被发送到某个账户服务。

“恢复默认设置”会清除三个原生复选框的选中状态，并重新应用文章的默认类名。状态消息会说明当前启用的设置。离开页面或重新加载后，设置不会保留。生产环境中的偏好设置服务可以添加持久化功能，但应明确说明设置作用于此页面、设备还是账户。

  1. 开启“较大文字”，并查看旁边文章中的段落字号。
  2. 将焦点移至“增强对比度”，然后按空格键切换。
  3. 恢复默认设置，并确认三个开关和文章样式一同恢复。

阅读配套规范

Amsterdam 设计系统：键盘、焦点与动效

保留原生输入控件

样式表会缩小输入控件的视觉宽度，但保留实际控件。焦点选择器会将轮廓显示在后面的标签上。若用装饰性 div 替换输入控件，就会丢失原生表单语义，还需要另行实现键盘交互。不要对输入控件应用 display:none。

原生样式表只会在 prefers-reduced-motion:no-preference 时启用过渡效果。文章动效也会独立于本地开关，遵循操作系统的偏好设置。用户若在系统层面要求减少动效，就不应还得先找到另一个开关，才能让示例以更平和的方式呈现。

  • 以复选框的 checked 属性为唯一状态依据；不要另行虚构无关的视觉开启状态。
  • 为每项设置提供稳定的名称，并确保其说明与输入控件相关联。
  • 更改主题几何样式或颜色后，测试关闭、开启、聚焦和禁用状态。

阅读配套规范

Amsterdam 设计系统：阅读预览布局

在控件旁展示其效果

示例采用双栏布局，让每项设置都能在文章中呈现可见效果。在应用专用的 700px 断点以下，控件会移至预览上方并纵向排列。900px 最大宽度和 32px 间距是原有的布局选择，并不能证明它们是全市通用的网格设计令牌。

中性字体为 Arial。正文为 18px，行高为 1.5；较大文字模式只会将文章字号改为 22px。这只是应用内设置的示例，不能替代浏览器缩放，也不表示 Amsterdam 规定了这些字号。较长的标签会自动换行，同时保持原生开关的宽度。

阅读配套规范

Amsterdam 设计系统：CSS 或 React 集成

选择实现层级

对于现有的 React 应用，经过验证的 Switch 支持标准输入属性，并会将 ref 传递给输入控件。受控用法需提供 checked 和 onChange；非受控用法可提供 defaultChecked。该组件不提供应用存储或账户偏好设置 API。

对于这个独立的 HTML 示例，只需使用开源 Switch CSS。配置步骤和完整代码补足了所需的主题配置与本地状态处理。包管理器安装的依赖项可能会带入专有资源；这些资源即使存在于磁盘上，也不代表你有权导入或随产品发布。此处供应商打包的示例仅包含所选 CSS 及其开源许可证。

阅读配套规范

Amsterdam 设计系统：采用方式与限制

不要将外观相似误认为官方关联

该市设计系统旨在让市政产品保持一致并具备无障碍性。其可复用代码可在许可证允许范围内学习和改编，但徽标、专有字体和图标资源受各自条款约束。预览使用原创品牌标识和中性内容，避免被误认为是 Amsterdam 服务。

经验证的范围仅包括一个原生组件、完整的自定义主题和有实际意义的本地交互行为。这并非对该市主题的完整重现。实际产品若采用更广泛的 CSS 软件包，应针对其他组件定义并测试所需的全部变量，而不要将此 Switch 配置擅自套用于无关控件。

阅读配套规范

Amsterdam 设计系统：组件示例

完整的中性 Switch 主题

原生样式表所需的每个变量都已定义；所有值均为原创。

css
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}

代码参考

无障碍的原生结构

真实的复选框输入控件、switch 角色和相邻的视觉标签。

html
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>

代码参考

完整且即时生效的阅读偏好设置

原生 Switch CSS、自定义主题和可见的本地效果。

html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>

代码参考

04

Amsterdam 设计系统：Agent 设置

实现起点

仅使用开源 CSS；同时提供完整的原创主题和可运行的 HTML 示例。不会随附任何专有令牌或资源包。“来源”部分提供了完整的可运行示例 ZIP，其中包含准确的预览依赖项和完整文档。将其解压缩，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/amsterdam.html。请勿通过 file:// 打开基于模块的示例。

bash
npm install @amsterdam/[email protected]
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.

适用于你项目的提示词

Agent 提示词
使用 Amsterdam 开源 Switch CSS，并配备完整的原创主题。保留 wrapper/input/相邻标签结构、role=switch 和无障碍命名。二元设置应立即生效，并以 checked 作为状态依据。遵循减少动态效果的偏好，并区分本地偏好设置与持久化的账户设置。未经相关授权，不要导入专有令牌、字体、徽标或图标。
05

Amsterdam 设计系统：来源与范围

独立的 OpenDesign 示例，不包含 Amsterdam 品牌令牌、Amsterdam Sans、官方图标或徽标。