# DSFR 设计系统

## DSFR 设计系统界面预览

对比关联与独立的内容区段，使用可通过键盘操作的触发器，并提供清晰的展开状态反馈。

## DSFR 设计系统设计参考

DSFR v1.15 官方文档及经核实的 @gouvfr/dsfr 1.15.3 软件包元数据。这些是官方参考值；中性预览展示交互结构，但不使用国家视觉识别。

### 官方排版

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Primary / supplementary families | Marianne / Spectral | 机构字体；须遵守适用的使用条款。 |
| Fallback families | Arial / Georgia | 文档中记录的替代字体。 |
| Standard text | 16px / 24px | fr-text 正文字体样式。 |
| Article text | 18px / 28px | fr-text--lg 编辑文字角色。 |
| H1 mobile → desktop | 32/40px → 40/48px | 字号 / 行高；在 MD 断点处变化。 |
### 官方网格

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| SM / MD / LG / XL | 576 / 768 / 992 / 1248px | 文档中记录的断点阈值。 |
| XL content maximum | 1200px | 网格参考中的容器最大宽度。 |
| Optional gutters | 16px small; 24px LG and above | 代码网格默认不启用间距槽。 |
### 间距

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Base progression | Multiples of 4px | 常用布局节奏。 |
| Documented exceptions | −6, −2, 2, 6px | 具体调整，而非新设任意比例尺。 |
### 手风琴组件规范

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| fr-accordions-group | Linked by default | 打开一个会关闭另一个。 |
| data-fr-group="false" | Multiple panels may stay open | 明确的独立模式。 |
| aria-controls | Matches panel id | 触发器与面板的关联。 |
| fr-collapse--expanded | Runtime expanded class | 由 DSFR JavaScript 管理。 |
## DSFR 设计系统完整指南

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

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

## DSFR 设计系统的机构适用范围

### 国家视觉识别系统

> DSFR 是法国国家设计系统。当前官方条款将 .gouv.fr 服务和国家移动应用列为其适用场景，并区分国家用户和运营方与外部组织。这是一项实质性的采用边界，不是可以通过隐藏标识而删去的脚注。

符合条件的团队应遵循官方项目审批和实施流程。不相关的产品可以借鉴文档中说明的信息架构和无障碍设计思路，但不应使用法国国家视觉识别来呈现自身。本页的预览是原创的中性手风琴示例：不会加载 DSFR 的样式、字体或脚本。

阅读配套规范

## DSFR 设计系统官方字体参考

### Marianne 字体角色与备用字体

排版文档列出了 Marianne 和 Spectral，并分别以 Arial 和 Georgia 作为备用字体。标准正文为 16px/24px；文章正文为 18px/28px。H1 在移动端为 32px/40px，在桌面端为 40px/48px。这些数值描述的是官方系统，示例则采用自身的中性字体样式。

文字尺寸类不会取代语义化标题层级。页面标题应使用 h1，每个手风琴标题则应采用适当的标题层级。不要仅为获得更大的视觉样式而跳过文档大纲层级。

阅读配套规范

## DSFR 设计系统网格与间距

### 明确规定响应式断点

网格参考定义了 SM 576px、MD 768px、LG 992px 和 XL 1248px 断点。最大内容宽度为 1200px。可选间距在较小尺寸下为 16px，从 LG 起为 24px。代码网格默认不设置间距槽；将 Figma 网格转换为标记时，这一点尤为重要。

间距以 4px 的倍数为基础，并记录了 −6px、−2px、2px 和 6px 这几个例外值。因此，间距类代表受控的系统，而不是随意创造偏移量的许可。中性预览采用独立的单列阅读布局，并未声称复现官方网格。

阅读配套规范

## DSFR 设计系统手风琴组件结构

### 标题、触发器与受控面板

文档中的组件包含 section.fr-accordion、标题 heading.fr-accordion__title、按钮 button.fr-accordion__btn，以及其后的 div.fr-collapse。按钮的 aria-controls 必须与面板 id 一致；aria-expanded 用于表示面板的展开状态。标题层级应与所在页面的结构相符。

面板应包含段落和列表等合适的文本元素。原生 DSFR JavaScript 会管理展开类；符合条件的应用不应再添加独立的点击处理程序与组件发生冲突。中性预览则实现了自身明确的展开/收起状态，以供比较学习。

阅读配套规范

## DSFR 设计系统：分组或独立

### 分组设置会改变交互行为

fr-accordions-group 默认采用联动模式：展开一个项目时，其他已展开的项目会关闭。设置 data-fr-group="false" 后，多个面板可以同时保持展开。示例同时展示两种模式，方便读者比较它们对交叉查阅信息的影响。

这一区别会影响准备说明。查阅文件清单的人可能需要同时打开地址面板。一次只展开一项的分组可以节省空间，但也会反复隐藏上下文。应根据任务选择模式，而不要把默认设置当作编辑规则。

无障碍页面的建议比运行时默认设置更进一步：默认推荐使用独立分组，因为联动分组可能带来可用性问题。因此，示例默认采用独立模式。

- 独立模式便于同时比较两个部分。

- 联动模式限制为一次只能展开一个部分。

- 切换模式时，应确保 aria-expanded 状态始终前后一致。

阅读配套规范

## DSFR 设计系统：哪些内容应保持可见

### 不要隐藏关键步骤

组件指南建议，对篇幅较长、非必读或仅与部分用户相关的内容使用手风琴组件。指南不建议隐藏所有用户都必须阅读的信息，不建议将手风琴用于很短的内容、嵌套复杂控件或放入模态框中。

因此，示例将用途说明和控件保持可见。只有可选的房间出入说明、设备清单和到达指引采用折叠形式。每个标题都对应一个明确的问题，展开后的内容使用简短段落和列表，而不是另设一套交互流程。

1. 将主要说明放在手风琴组件之外。

2. 按读者关心的问题划分辅助材料，而不是按任意长度拆分。

3. 如果某个部分只有简短答案，请使用普通段落。

阅读配套规范

## DSFR 设计系统：键盘操作与状态检查

### 先验证结构，再进行装饰

每个中性样式的预览触发控件都是真正的按钮，因此按 Enter 或空格键即可触发浏览器的按钮操作。脚本会同时更新 aria-expanded 和受控面板的 hidden 状态。面板关闭时，触发控件不会被移除，焦点也会留在刚刚激活的按钮上。

模式选择器便于即时比较独立模式和联动模式的行为。示例还会显示一行简短的状态信息，列出当前展开的面板；这是示例中的学习辅助信息，并非官方 DSFR 组件。在窄屏上，标题会自动换行，按钮点击区域仍保持全宽。

官方无障碍页面还记录了深色主题下悬停状态对比度不足的问题，以及屏幕阅读器和浏览器播报方面的具体限制。不要以为原样使用组件就能确保完全无障碍；部署时请针对相应版本和环境检查这些已知限制。

阅读配套规范

## DSFR 设计系统：符合条件的项目集成

### 加载核心依赖和组件依赖

官方代码页面列出了核心和手风琴 CSS 依赖项，以及核心和手风琴模块脚本。加载后，运行时会自动增强文档中规定的标记结构。完成初始化后，可以通过公开的 API 调用 dsfr(element).collapse.disclose() 展开面板。

提供的安装入口适用于符合条件的机构项目。该内容已通过源码核验，但未在此中性预览中执行；此预览有意不依赖 DSFR 运行时。升级时，生产团队应一并维护官方资源目录结构、组件标记和当前使用条件。

阅读配套规范

## DSFR 设计系统组件示例

### 官方手风琴结构

符合条件的项目标记结构，面板可独立展开。

```
<div class="fr-accordions-group" data-fr-group="false">
  <section class="fr-accordion">
    <h2 class="fr-accordion__title">
      <button type="button" class="fr-accordion__btn"
        aria-expanded="false" aria-controls="documents">
        Documents to prepare
      </button>
    </h2>
    <div id="documents" class="fr-collapse">
      <p>Put the actual supporting-document instructions here.</p>
    </div>
  </section>
</div>
```

代码参考

### 通过程序展开

官方运行时完成对目标面板的初始化后再调用。

```
const panel = document.getElementById('documents');
window.dsfr(panel).collapse.disclose();
```

代码参考

### 完整的独立示例

完整文档包含其布局、控件与初始化。解压所链接的示例归档，即可获得完全一致的相对 vendor 资源，然后通过 HTTP 提供服务。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>
```

代码参考

- 从“来源”一节下载完整示例。其 README 给出了确切的本地启动命令。

- 保持 vendor 路径相对于本文档；该归档包含此预览所使用的全部资源。

## DSFR 设计系统 Agent 设置

### 实现起点

已通过源码核验的符合条件项目安装方式；中性预览不会执行该安装。请保留机构项目适用范围，并遵循当前官方条款。复制 dist 目录，以保留依赖资源的相对路径。Sources 中的完整工作示例 ZIP 还提供了预览所需的确切依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/dsfr.html。请勿通过 file:// 打开基于模块的示例。

```
# For a project within the documented DSFR institutional scope:
npm install @gouvfr/dsfr@1.15.3
# Copy node_modules/@gouvfr/dsfr/dist to your public asset directory.
# In <head>:
# <link rel="stylesheet" href="/dsfr/core/core.min.css">
# <link rel="stylesheet" href="/dsfr/component/accordion/accordion.min.css">
# Before </body>:
# <script type="module" src="/dsfr/core/core.module.min.js"></script>
# <script type="module" src="/dsfr/component/accordion/accordion.module.min.js"></script>
```

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

```
说明 DSFR 手风琴的结构和适用范围。符合条件的政府项目应使用 fr-accordion、fr-accordion__title、fr-accordion__btn 和 fr-collapse，并设置相互匹配的 id/aria-controls，加载核心资源和手风琴资源；需要同时展开多个部分进行比较时，设置 data-fr-group=false。若制作独立的教学预览，请使用原创的中性样式，并明确标注其为结构解读；不要加载政府机构标识字体，也不要宣称它是官方服务。
```

## DSFR 设计系统：来源与适用范围

DSFR 有明确规定的机构使用范围。本页面是技术参考资料，其原创中性预览并非法国政府服务，也不是采用 DSFR 品牌标识的实现。

- DSFR 概览 官方系统入口和资源类别。

- 适用范围 官方规则规定哪些机构可以使用 DSFR。

- Foundations 基础设计与标识指南。

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

## DSFR 设计系统：相关资源

### Europa Component Library

通过完整的原生手风琴任务说明，了解 Europa 的 EC 颜色、字体和间距用途，其中包括键盘操作、全部展开行为，以及无 JavaScript 时的易读回退方案。

### gov.cz 设计系统

通过包含六项资源的完整阅读工具包，探索 Gov Design System CE 的实际颜色角色、卡片插槽和原生分页，并明确呈现焦点和页面状态。

### GOV.UK 设计系统

使用当前 v6 字号比例、响应式间距、功能色彩、关联校验和具体的 Frontend 集成，构建 GOV.UK 风格的问题填写与答案检查流程。


- [实现参考](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [来源](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie)
- [来源](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture)
- [来源](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/espacement)
- [来源](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [阅读配套规范](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon)
- [阅读配套规范](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/typographie)
- [阅读配套规范](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/grille-et-points-de-rupture)
- [阅读配套规范](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [阅读配套规范](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/accessibilite-de-l-accordeon)
- [代码参考](https://www.systeme-de-design.gouv.fr/version-courante/fr/composants/accordeon/code-de-l-accordeon)
- [DSFR 概览 官方系统入口和资源类别。](https://www.systeme-de-design.gouv.fr/version-courante/fr)
- [适用范围 官方规则规定哪些机构可以使用 DSFR。](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/perimetre-d-application)
- [Foundations 基础设计与标识指南。](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)