# Дизайн-система 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 | Адаптивный текст от среднего до очень крупного размера. |
| 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 | Стандартная обводка при фокусе использует семантическую роль фокуса действия. |
| 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; цвет текста на фоне действия — белый. |
| Dark action | darkblue-300 | В тёмной теме цвет текста на фоне действия становится чёрным. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | Явно заданный атрибут имеет приоритет над системными настройками. |
## Полное руководство по дизайн-системе KERN

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

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

## Нативные HTML, CSS и поведение браузера в дизайн-системе KERN

### Что входит в пакет

> В состав KERN native 2.8.2 входят компонент CSS и шрифты. В примере эти файлы импортируются напрямую: кнопка, textarea, Details и Dialog — нативные элементы с классами KERN. Провайдер React и конструктор компонентов JavaScript не нужны. Логику принятия решения при работе с диалогом обеспечивает приложение; одно лишь оформление не очищает поле ввода.

1. Установите пакет native с зафиксированной версией.

2. Скопируйте таблицу стилей и шрифты вместе, сохранив относительные пути к файлам.

3. Сохраните пример целиком и запустите веб-сервер в этой директории.

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

## Fira Sans и адаптивная типографика в дизайн-системе KERN

### Явно подключите шрифты

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; при этом цвет текста на фоне действия меняется с белого на чёрный. В примере атрибут data-kern-theme задаётся элементу html, а кнопка сообщает о состоянии нажатия. Выбор темы действует только для этого документа и не сохраняется. Если удалить явно заданный атрибут, таблица стилей будет следовать настройке prefers-color-scheme.

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

## Редактируемая заметка с меткой в дизайн-системе KERN

### Сохраняйте инструкции доступными

Для textarea используется kern-form-input__input внутри kern-form-input; с полем связана настоящая метка, указывающая на его id. Подсказке присвоен отдельный id, и связь с ней задана через aria-describedby. Заметка необязательна и хранится локально, поэтому пример не создаёт фиктивные ошибки обязательного поля или сохранение на сервере. Кнопка Restore example восстанавливает исходное значение и переводит фокус в редактируемое поле. О результате сообщает область статуса, не заменяя метку и не переводя фокус на текст, который сам по себе не является интерактивным.

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

## Дополнительная информация в элементе Details дизайн-системы KERN

### Поручите управление раскрытием браузеру

Элемент details управляет своим состоянием раскрытия, а summary служит триггером. Для оформления KERN добавляет kern-details__header, небольшой span для заголовка и kern-details__body. В примере здесь размещена информация о сроке хранения, поскольку она является дополнительной. Обязательные инструкции, ошибки и действие удаления остаются видимыми вне раскрывающегося блока. Нативное управление с клавиатуры обеспечивает активацию без дополнительного обработчика клика и дублирования состояния aria-expanded.

- Формулируйте текст summary ясно и кратко.

- Не помещайте в summary другую кнопку или ссылку.

- Для группы связанных раскрывающихся блоков используйте Accordion, а не маскируйте несвязанные действия под Details.

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

## Подтверждение с безопасным выходом в дизайн-системе KERN

### Структура и управление

Диалог имеет метку от h2 и краткое пояснение о последствиях. Для заголовка, основного содержимого и нижней части используются документированные классы KERN. Метод showModal() помещает нативный диалог на верхний слой, а close() завершает взаимодействие. При первом открытии фокус получает кнопка Keep note благодаря атрибуту autofocus. Нажатие Escape закрывает диалог, не меняя текст, а обработчик закрытия возвращает фокус к кнопке Discard note. Значение очищается только при выборе Yes, discard. Щелчок по фону намеренно не закрывает диалог, поскольку здесь подтверждается разрушительное действие. Это соответствует документированным рекомендациям для важных решений, а не бездумно копирует обработчик закрытия по щелчку по фону из общего примера.

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

## Интеграция и применимость дизайн-системы 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>
```

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

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

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

Сборка и UI-фреймворк не требуются. Сохраните каталог шрифтов: в его файле CSS используются относительные пути к файлам WOFF2. ZIP-архив с полным рабочим примером в разделе Sources также содержит точные зависимости для предварительного просмотра и весь документ. Распакуйте архив, запустите в этой директории команду 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. Составьте форму с textarea kern-form-input, связанной с меткой, дополнительным нативным раскрывающимся блоком Details и элементом kern-dialog с размеченными заголовком, основным содержимым и нижней частью. Открывайте диалог методом showModal(), при открытии переводите фокус на Keep note, позволяйте клавише Escape закрыть его без изменения текста, а заметку очищайте только после выбора Yes, discard. При закрытии возвращайте фокус на кнопку открытия и предусмотрите Restore example. Переключайте data-kern-theme между светлой и тёмной темами, не придумывая новые токены палитры. Сохраните исходные решения приложения по ширине и оставьте заметку локальной; загрузка, черновик на сервере или утверждение о государственном сервисе не требуются.
```

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

Оригинальная демонстрация с использованием кода KERN. Она не подразумевает принадлежность к органу власти, постоянное хранение данных или сертификацию доступности.

- Обзор KERN Контекст государственного управления и ссылки на ресурсы.

- Дизайн-система Базовые элементы, компоненты и подход системы.

- Руководство по интеграции Инструкции по подключению нативного пакета и таблицы стилей.

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

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

### Michigan Forty Two

Изучите поддерживаемый процесс WordPress, веб-палитру и шаблоны справочника сотрудников Forty-Two на примере рабочего фильтра по должностям и областям исследований.

### Aksel

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

### 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/)