# Дизайн-система 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 при меньших размерах и 24px начиная с LG. По умолчанию в кодовой сетке внутренних отступов нет; это важно учитывать при переносе сетки из Figma в разметку.

Шкала интервалов основана на кратных 4px и включает документированные исключения: −6px, −2px, 2px и 6px. Класс интервала обозначает контролируемую систему, а не разрешение задавать произвольные смещения. В нейтральном предварительном просмотре используется отдельная колонка для чтения; она не претендует на воспроизведение официальной сетки.

Прочитать вспомогательную спецификацию

## Структура аккордеона в дизайн-системе DSFR

### Заголовок, элемент управления и связанная панель

Документированный компонент состоит из section.fr-accordion, заголовка.fr-accordion__title, кнопки.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 и Space. Скрипт меняет и 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();
```

Справочник по коду

### Полный автономный пример

Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через 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.

- Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.

## Настройка агента дизайн-системы DSFR

### Отправная точка для реализации

Проверенная по источнику установка для проекта, отвечающего требованиям; в нейтральном предварительном просмотре не запускалась. Соблюдайте рамки использования для учреждений и актуальные официальные условия. Скопируйте каталог dist, чтобы зависимые ресурсы сохранили относительные пути. В 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, ресурсы core и accordion, а также data-fr-group=false, если при сравнении нужно оставить открытыми несколько разделов. Для независимого учебного примера используйте нейтральное оригинальное оформление и ясно обозначьте, что это интерпретация структуры; не подключайте шрифты государственной айдентики и не заявляйте, что пример является официальным сервисом.
```

## Источники и область применения дизайн-системы DSFR

Для DSFR документально определена область использования учреждениями. Эта страница — технический справочник, а её оригинальный нейтральный пример не является государственным сервисом Франции или реализацией с айдентикой DSFR.

- Обзор DSFR Официальная запись системы и категории ресурсов.

- Область применения Официальные правила, определяющие, каким организациям разрешено использовать DSFR.

- Основы Основные рекомендации по дизайну и айдентике.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Связанные ресурсы дизайн-системы DSFR

### Europa Component Library

Изучите цветовые, типографические и интервальные роли Europa EC на примере полноценного задания с нативным аккордеоном: поддержка клавиатуры, раскрытие всех пунктов и понятный резервный вариант без JavaScript.

### gov.cz дизайн-система

Изучите настоящие цветовые роли, слоты карточек и нативную пагинацию Gov Design System CE на примере полноценного инструментария для чтения шести ресурсов с явным управлением фокусом и состоянием страницы.

### GOV.UK дизайн-система

Создайте путь в стиле GOV.UK: ответьте на вопросы и проверьте ответы. Используйте актуальную типографическую шкалу v6, адаптивные отступы, функциональные цвета, связанную валидацию и конкретный пример интеграции Frontend.


- [Справочник по реализации](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)
- [Основы Основные рекомендации по дизайну и айдентике.](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux)