# Дизайн-система 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 | Актуальный CSS из Core5.2.2. |
| 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

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Границы между Core и React дизайн-системы Helsinki

### Выберите реализацию, которую действительно используете

> HDS предоставляет Core CSS, компоненты React и дизайн-токены. В этом примере используется зафиксированная версия hds-core5.2.2 — именно этот пакет был загружен и изучен. Номер релиза репозитория может отличаться от версии отдельного пакета, поэтому более новый тег репозитория не доказывает, что пример работает на этой версии.

Core предоставляет базовые переменные и стили отдельных компонентов. Логика состояния формы приложения, использованная здесь, в него не входит. Выбор, проверка, просмотр и изменение реализованы отдельно в JavaScript на основе нативных элементов ввода HTML и задокументированного шаблона форм HDS.

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

## Типографика дизайн-системы Helsinki и границы использования шрифтов

### Открыто указывайте резервный шрифт

Переменная шрифта сначала указывает HelsinkiGroteskPro, а затем — Arial и sans-serif. В README для Core прямо сказано, что файлы шрифта 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 blue, а для контура фокуса — Coat of arms blue. Для ошибок предусмотрены отдельный ягодный оттенок и светлая подложка. Акцентный цвет палитры, например Copper, подходит для заголовка, но не должен заменять цветовую роль ошибки лишь потому, что он выглядит выразительнее.

Встроенное сообщение об ошибке для группы выбора сочетает текст, контрастную левую рамку и значок. Оно не полагается только на красный цвет. Ссылки в сводке ошибок используют привычный интерактивный цвет, чтобы пользователи понимали, как вернуться к полю.

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

## Анатомия группы флажков в дизайн-системе Helsinki

### У группы один вопрос и несколько вариантов ответа

Нативная структура включает fieldset с legend, контейнером вариантов и отдельными обёртками для флажков. Каждый input расположен непосредственно перед своей подписью, поскольку таблица стилей использует эту связь для оформления состояний. Легенда объясняет задачу выбора, а каждая подпись называет один из доступных вариантов.

В примере нужно выбрать не менее двух тем — это исходное бизнес-правило. Флажки подходят, поскольку можно оставить выбранными несколько вариантов. Группа переключателей подразумевала бы взаимоисключающий выбор и противоречила бы задаче. Подсказка fieldset остаётся видимой до и после проверки.

```
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
  <legend class="hds-selection-group__legend">Topics for your afternoon</legend>
  <p id="topics-hint">Choose at least two topics.</p>
  <div class="hds-selection-group__items hds-selection-group__items--vertical">
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
      <label class="hds-checkbox__label" for="repair">Repair and reuse</label>
    </div>
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
      <label class="hds-checkbox__label" for="garden">Urban gardening</label>
    </div>
  </div>
</fieldset>
```

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

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

## Связанные ошибки и исправление в дизайн-системе Helsinki

### Сфокусируйте внимание на проблеме, сохранив введённые данные

HDS рекомендует после неудачной отправки размещать сводку ошибок под заголовком формы. Ссылки в списке ведут к полям с ошибками, а фокус перемещается на заголовок сводки. В примере используется та же последовательность: при попытке проверить форму без выбранных тем или с одной темой появляются сводка и встроенное сообщение; ссылка переводит фокус на первый флажок.

После первой попытки каждое изменение выбора приводит к повторной проверке минимального количества. Когда выбраны две темы, оба сообщения об ошибках исчезают, а выбранные значения сохраняются. При следующей неудачной попытке фокус снова перемещается на заголовок сводки. Правило проверяется и при просмотре; обратная связь на стороне клиента не заменяет серверную проверку в реальном сервисе.

1. Попробуйте просмотреть форму без выбранных тем и убедитесь, что фокус перемещается на сводку.

2. Перейдите по ссылке и выберите две темы; убедитесь, что ошибка исчезла.

3. Откройте локальный просмотр, вернитесь к выбору тем и убедитесь, что оба варианта остались выбраны.

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

## Ресурсы и полный пример дизайн-системы Helsinki

### Подключайте базовые стили и нужные компоненты

В пакете Core файл base.css отделён от стилей компонентов. Одного base недостаточно: он предоставляет переменные и типографику, но не структуру флажка или уведомления. В настройке указаны точные файлы, используемые в этом примере, поэтому набор ресурсов меньше, чем пакет со всеми компонентами.

Полный пример включает проверку формы и сброс, реализованные на уровне приложения. В финальном состоянии используется название «локальный просмотр», поскольку данные никуда не регистрируются и не отправляются. Очистка выбора — осознанное действие: оно сбрасывает выбранные пункты и историю проверки, а затем переводит фокус на первый элемент ввода. Обычная ошибка поля не запускает сброс.

- base.css предоставляет цвета, интервалы, типографику и эталонные размеры.

- Стили checkbox и selection-group задают сгруппированные элементы управления и встроенную обратную связь.

- Стили notification и button задают подложку сводки ошибок и действия.

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

## Что демонстрирует пример дизайн-системы Helsinki

### Подробности реализации без неподтверждённых заявлений о сервисе

Предварительный просмотр демонстрирует реальные стили компонентов HDS, фокус при навигации с клавиатуры, исправление ошибок и сохранение данных при ширине экрана 1440, 768 и 390px. Это не заявление о полном аудите доступности. Реальному многоязычному городскому сервису также нужны локализованные подписи, подходящие языковые метаданные, серверные правила и подтверждённый ответ серверной части сервиса.

Исходный код распространяется по лицензии MIT, но на городской шрифт распространяются отдельные ограничения. В этом независимом учебном примере используются вымышленные темы программ, а фирменная айдентика Helsinki отсутствует. Вид примера и локальное состояние нельзя принимать за настоящую регистрацию на мероприятие.

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

## Примеры компонентов дизайн-системы Helsinki

### Нативная структура группы флажков

fieldset и legend задают вопрос; элементы input и их подписи позволяют выбрать несколько ответов.

```
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
  <legend class="hds-selection-group__legend">Topics for your afternoon</legend>
  <p id="topics-hint">Choose at least two topics.</p>
  <div class="hds-selection-group__items hds-selection-group__items--vertical">
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
      <label class="hds-checkbox__label" for="repair">Repair and reuse</label>
    </div>
    <div class="hds-checkbox">
      <input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
      <label class="hds-checkbox__label" for="garden">Urban gardening</label>
    </div>
  </div>
</fieldset>
```

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

### Полный сценарий выбора с переходом к связанным ошибкам

Фокус на сводке ошибок, переход к полю для исправления, просмотр, изменение и очистка выбора.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>
```

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

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

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

Точные пути к ресурсам Core. Проверку и просмотр обрабатывает код приложения; HelsinkiGroteskPro не входит в пакет. В 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.
```

### Запрос для вашего проекта

```
Используйте base и выбранные стили компонентов CSS из HDS Core5.2.2. Объединяйте связанные флажки с помощью fieldset/legend, сохраняйте подписи и подсказки и применяйте семантические токены ошибок. После неудачной проверки показывайте связанные ошибки под заголовком формы и переводите фокус на заголовок сводки. Повторно проверяйте форму после исправлений, сохраняйте выбранные значения и отличайте локальный просмотр от отправки, подтверждённой сервером.
```

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

Независимый пример OpenDesign. Без ресурса шрифта Helsinki и айдентики сервиса; без регистрации и ответа серверной части.

- Настройка Core Разделение базовых и компонентных CSS и граница авторских прав на шрифты.

- Создание форм Группировка, выбор элементов управления и порядок фокуса.

- Шаблон проверки Расположение сводки, ссылки, исправление ошибок и границы серверной части.

- Токены дизайн-системы Типографика, интервалы и цветовые роли.

- Официальный репозиторий Архитектура пакета и лицензия MIT.

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

## Связанные ресурсы дизайн-системы 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)