# KERN 设计系统

## KERN 设计系统界面预览

编辑备注、取消或确认放弃更改、恢复备注，并切换外观。

## KERN 设计系统设计参考

内容摘自 @kern-ux/native 2.8.2；应用布局选项另行标注。

### 排版与几何尺寸

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Default font | Fira Sans | 加载打包的字体文件；仅加载 CSS 不会加载字体文件。 |
| Static sizes | 16 / 18 / 21px | 小、中、大号静态文本。 |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | 中号至 2x-large 的自适应字体。 |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | 软件包会在此媒体查询断点处调整自适应令牌。 |
| Font weights | 400 / 500 / 600 | 常规、中等与半粗体。 |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | 命名间距令牌，而非均匀递增的刻度。 |
| Border widths | 0 / 1 / 2 / 4 / 8px | 默认边框为 2px。 |
| Radii | 0 / 2 / 4 / 8px / 50% | 无、小、默认、大与圆形。 |
| Focus outline | 4px | 默认的 focus-visible 轮廓使用上下文操作的焦点角色。 |
| Specimen width | 800px | 这是应用自身的布局选择，并非 KERN 容器令牌。 |
### 语义颜色映射

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | 相同的语义角色会随主题改变。 |
| Light action | darkblue-700 | --kern-color-action-default；on-action 为白色。 |
| Dark action | darkblue-300 | On-action 会变为黑色。 |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | 显式设置的属性优先于系统偏好。 |
## KERN 设计系统完整指南

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

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

## KERN 设计系统：原生 HTML、CSS 与浏览器行为

### 软件包提供的内容

> KERN native 2.8.2 包含组件 CSS 和字体。示例直接导入这些文件：按钮、文本区域、Details 和 Dialog 均为带有 KERN 类名的原生元素。无需使用 React provider 或 JavaScript 组件构造器。应用负责实现对话框周围的判断逻辑；仅靠样式不会清空输入内容。

1. 安装固定版本的原生软件包。

2. 复制样式表和字体文件，并保留它们之间的相对路径。

3. 保存下面的完整示例，并通过 HTTP 提供该目录。

阅读配套规范

## KERN 设计系统：Fira Sans 与自适应字体排版

### 显式加载字体

kern.min.css 声明使用 Fira Sans；fonts/fira-sans.css 则声明实际字体，并引用相对路径下的 WOFF2 资源。保持字体目录完整，才能避免样式表看似正确、实际却悄然回退到其他字体。静态文本字号保持为 16、18 和 21px；自适应标题和标题令牌则会在 768px 断点处变化。使用标题元素建立层级，并通过相应的 KERN 类设置视觉样式。示例仅保留一个 h1，并为对话框使用独立的 h2。

阅读配套规范

## KERN 设计系统：间距、宽度与响应式布局

### 区分令牌与布局组合

KERN 提供从 0 到 192px 的命名间距令牌，较小间距中还包含 2px 和 4px 的增量。边框与圆角令牌采用独立的刻度。示例采用 24px 的垂直节奏，并使用可换行的操作行。800px 的内容最大宽度和 560px 的对话框最大宽度均为明确的应用布局选择；它们都不代表通用的 KERN 容器尺寸。在窄屏上，页面内边距调整为 16px，对话框宽度则限制在视口范围内。文档不会设置最小视口高度，因此嵌入时不会产生尺寸调整反馈循环。

阅读配套规范

## KERN 设计系统：语义颜色与外观

### 切换语义角色，而不是单独替换十六进制颜色值

该软件包使用语义化的 CSS 属性来设置文本、操作、背景和焦点。浅色和深色调色板会一并切换这些角色。例如，浅色模式下，action-default 映射到 darkblue-700，深色模式下则映射到 darkblue-300；其前景色也会从白色变为黑色。示例在 html 上设置 data-kern-theme，并展示了一个按下状态的按钮。此偏好仅在当前文档中有效，不会保存。移除显式属性后，样式表会根据 prefers-color-scheme 设置主题。

阅读配套规范

## KERN 设计系统：带标签的可编辑备注

### 让说明始终可见

文本区域使用 kern-form-input 中的 kern-form-input__input，并通过指向输入框 id 的真实标签关联。提示文字有自己的 id，并通过 aria-describedby 与输入框保持关联。这是可选的本地备注，因此示例不会凭空添加必填字段错误或服务器保存功能。恢复示例会设置初始值，并将焦点移至可编辑字段。状态区域会播报操作结果，不会替换标签，也不会将焦点移至非交互文本。

阅读配套规范

## KERN 设计系统：使用 Details 展示补充信息

### 让浏览器管理展开状态

details 元素负责管理展开状态；summary 是触发控件。KERN 添加了 kern-details__header、小标题 span 和用于呈现内容的 kern-details__body。示例将保留期限信息放在这里，因为它属于补充内容。必需说明、错误信息和放弃操作始终显示在折叠区域之外。原生键盘行为即可触发展开，无需额外添加点击处理程序或重复维护 aria-expanded 状态。

- summary 文案应简洁明确。

- 不要在 summary 中嵌套其他按钮或链接。

- 一组相关内容需要折叠面板时，请使用 Accordion，不要把无关操作伪装成 Details。

阅读配套规范

## KERN 设计系统：确认操作并提供安全退出方式

### 结构与控制

对话框通过 h2 设置标签，并用简短的后果说明进行描述。页眉、正文和页脚使用 KERN 文档中定义的类。showModal() 会将原生对话框置于顶层；close() 会结束交互。通过 autofocus 将初始焦点设在“保留备注”上。按 Escape 会关闭对话框，但不更改文本；关闭事件监听器会将焦点返回“放弃备注”按钮。只有点击“是，放弃”才会清除内容。这是破坏性确认，因此刻意不响应背景点击。此做法遵循针对关键决策的文档指南，而不是不加区分地照搬通用示例中的点击背景关闭处理程序。

阅读配套规范

## KERN 设计系统：集成与适用范围

### 安装完整依赖链

以下设置会安装一个固定版本的软件包，并复制其 CSS 和字体目录。完整示例包含自己的布局 CSS、根主题属性、DOM 结构和事件处理逻辑。将示例集成到真实表单后，请测试对话框的两种结果、Escape 操作以及窄屏显示效果。KERN 代码采用 EUPL 许可；网站的文字和图形材料则分别遵循 CC BY-NC-SA。此原创示例不会照搬任何机构的身份标识，也不表示某项服务已通过无障碍审查。真实应用仍需实现数据持久化、服务器端验证，并评估完整的用户体验流程。

阅读配套规范

## KERN 设计系统组件示例

### 完整的原生备注与确认示例

包含完整文档标记、布局 CSS 和应用行为；请使用设置代码块安装资源。

```
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
```

代码参考

## KERN 设计系统 Agent 设置

### 实现起点

无需构建步骤或 UI 框架。请保留字体目录，因为其中的 CSS 会解析相对路径下的 WOFF2 文件。Sources 中的完整可运行示例 ZIP 还提供了准确的预览依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/kern.html。不要通过 file:// 打开基于模块的示例。

```
npm install --save-exact @kern-ux/native@2.8.2
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
```

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

```
使用 @kern-ux/native 2.8.2 CSS 和随包提供的 Fira Sans，构建本地工作坊备注示例。组合使用带标签的 kern-form-input 文本区域、用于补充信息的原生 Details 折叠区域，以及带有标签、页眉、正文和页脚的 kern-dialog。使用 showModal() 打开对话框，通过 autofocus 将初始焦点设在“保留备注”上；按 Escape 可取消操作且不更改文本；只有点击“是，放弃”才会清除备注。关闭时将焦点返回触发按钮，并提供“恢复示例”功能。通过切换 data-kern-theme 在浅色和深色主题间切换，不要虚构新的调色板令牌。保留原有的应用宽度选项，并让备注仅保存在本地；无需上传内容、保存服务器草稿或声称这是政府服务。
```

## KERN 设计系统：来源与范围

使用 KERN 代码制作的原创演示。不代表任何政府机构，也不意味着数据会持久保存或已获得无障碍认证。

- KERN 概览 公共行政场景与资源入口。

- 设计系统 基础规范、组件与系统设计理念。

- 集成指南 原生软件包与样式表的文档化配置方法。

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

## KERN 设计系统相关资源

### Michigan Forty Two

通过一个可运行的角色与研究筛选示例，了解 Forty-Two 支持的 WordPress 工作流程、Web 配色方案和人员目录模式。

### Aksel

使用 Aksel v8 的真实 ax 令牌、原生表格密度和语义化表头结构。对虚构的后续记录进行排序和选择，并比较浅色与深色主题。

### NHS 设计系统

运用 NHS.UK 的字体、响应式间距、分组单选项和情境化详情，打造清晰的预约偏好选择流程。


- [实现参考](https://www.kern-ux.de/komponenten/dialog/)
- [来源](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [阅读配套规范](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [阅读配套规范](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [阅读配套规范](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [阅读配套规范](https://www.kern-ux.de/komponenten/form-inputs/)
- [阅读配套规范](https://www.kern-ux.de/komponenten/details/)
- [阅读配套规范](https://www.kern-ux.de/komponenten/dialog/)
- [阅读配套规范](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [代码参考](https://www.kern-ux.de/komponenten/dialog/)
- [KERN 概览 公共行政场景与资源入口。](https://www.kern-ux.de/)
- [设计系统 基础规范、组件与系统设计理念。](https://www.kern-ux.de/design-system/)
- [集成指南 原生软件包与样式表的文档化配置方法。](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)