Дизайн-система UNDP.

Дизайн-система UNDP Среда выполнения и границы ресурсов UNDP

Для статической страницы используйте пакет ресурсов

В предоставленном примере устанавливается @undp/design-system-assets версии 2.0.2. В этот дистрибутив входят базовые CSS, CSS компонентов и скрипты для браузера; это не то же самое, что запуск полного репозитория для разработки Storybook. Для этой композиции нужны только базовая таблица стилей, таблица стилей вкладок и скрипт вкладок. Загрузка all.min.js или таблиц стилей всех компонентов добавит постороннее поведение, но не улучшит рабочее пространство для чтения.

• base-minimal.min.css содержит базовые стили и объявления типографики.
• components/tab.min.css содержит стили встроенных вкладок.
• js/tabs.min.js предоставляет инициализатор tabs().

Не смешивайте айдентику организации с материалами примера

Бриф — это оригинальный практический материал OpenDesign о планировании локальной мастерской. Это не программа UNDP, не заявление о политике и не портал отчётности. В предварительном просмотре нет эмблемы и навигации организации. Встроенные стили и поведение указаны точно, а бриф, прогресс по флажкам и действие сброса явно обозначены как оригинальный код приложения.

Цветовые роли и редакционная иерархия UNDP дизайн-система UNDP

Используйте фактическую шкалу синего

В поставляемом пакете --undpds-color-blue-600 имеет значение #006eb5, а blue-700 — #1f5a95. В примере первый цвет используется как фон вступительного блока, а второй — для действия сброса. Для спокойной вспомогательной карточки применяется gray-200, вкладки разделяет gray-300, а жёлтый акцент на границе задаёт yellow-600. Подчёркивание активной вкладки выполнено тёмно-красным цветом библиотеки. Эти роли можно проверить в предоставленном CSS, а не угадывать по скриншоту.

Не приписывайте цветам ЦУР выдуманные значения статусов

Помимо общих цветовых токенов, базовый пакет содержит отдельную палитру ЦУР. Не следует назначать её цвета произвольным состояниям успеха или ошибки только потому, что они доступны, например, на странице о развитии. В этой композиции завершение обозначается флажком и понятным счётчиком; статус проверки не кодируется одним лишь цветом.

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

Различайте объявления и загруженные шрифты

В пакете объявлены семейства ProximaNova и SohneBreit и содержатся файлы шрифтов, но в этом предварительном просмотре намеренно используется запасной шрифт Arial. Эта подмена указана в примечании к примеру и в CSS. В справочной таблице при этом зафиксированы реальные объявления семейств, чтобы читатель мог понять исходную систему. Если проект использует фирменные шрифты, необходимо позаботиться о соответствующих ресурсах и правах использования: само указание названия семейства не делает шрифты доступными.

Используйте фактические названия интервалов

Текущая шкала в пикселях охватывает значения от spacing-002 до spacing-160, включая 12, 24 и 48 пикселей. В таблице стилей вкладок также используются более старые псевдонимы, например spacing-03 для 8px и spacing-09 для 48px; в этой версии доступны оба варианта. В демонстрации сохраняются правила библиотеки и добавляется двухколоночная редакционная компоновка, которая становится одноколоночной при ширине меньше 720px. Эта точка перелома выбрана для авторской композиции и отличается от контрольной точки 48em в таблице стилей компонента.

Структура встроенных вкладок UNDP дизайн-система UNDP и их инициализация

Синхронизируйте коллекции вкладок и панелей

Корневой элемент содержит data-undpds-component="tabs", список с role="tablist", три элемента .tabs-title с role="tab" и три секции .tabs-panel внутри .tabs-content. Скрипт сопоставляет эти коллекции по порядку. Если панели нет или их количество не совпадает, корректная инициализация невозможна. Поэтому у каждой панели есть стабильный ID и полное содержимое до вызова tabs(). При нативной инициализации создаются связи aria-controls и aria-labelledby, а выбранному элементу присваивается класс is-active.

Заранее определите поведение хеша

Дизайн-система UNDP Навигация с клавиатуры и видимое состояние UNDP

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

Клавиши со стрелками, Home и End переключают активную вкладку и перемещают фокус средствами нативной реализации. Enter и Space также активируют вкладку. Скрипт согласованно обновляет tabindex, aria-selected, hidden и aria-hidden. Если проверить только класс CSS, можно не заметить сбой, при котором видны несколько панелей или фокус попадает на скрытую панель. Проверки в браузере охватывают и выбранный элемент, и отображаемое содержимое.

Свяжите элементы управления проверкой с соответствующим разделом

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

Дизайн-система UNDP Локальный прогресс и его сброс в UNDP

Чётко обозначьте, что именно сбрасывается

Кнопка «Сбросить прогресс чтения» снимает отметки в трёх флажках и пересчитывает значение счётчика. Активная вкладка и содержимое не меняются. Обработчик использует ту же функцию обновления прогресса, что и при изменении флажка, поэтому описание прогресса не дублируется в двух местах. В примере данные не сохраняются за пределами текущего документа, поэтому после полной перезагрузки начинается новый сеанс чтения.

Не превращайте необязательное чтение в обязательное

Счётчик помогает ориентироваться, но не блокирует доступ к следующим разделам. Все три вкладки доступны, даже если не отмечен ни один раздел, и читать их можно в любом порядке. Для обязательного подтверждения в рабочем процессе понадобятся отдельные требования, обработка ошибок и механизм сохранения состояния — локальная модель прогресса для этого не подходит.

Дизайн-система UNDP Адаптивная композиция материалов для чтения UNDP

Перестраивайте содержимое, а не уменьшайте его

На больших экранах вводный блок с синим фоном и каждая панель состоят из двух колонок. При ширине 720px колонки располагаются одна под другой, внешние поля сокращаются до 16px, а крупный заголовок становится меньше. Список вкладок при необходимости переносится, сохраняя все подписи. Панели не имеют фиксированной высоты, поэтому длинный перевод или абзац не обрезается; пояснение остаётся настоящим текстом, а не декоративным изображением.

Проверьте ширину встроенного блока

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

Дизайн-система UNDP Полная статическая интеграция UNDP

Храните предоставленные файлы вместе

Сохраните предоставленные index.html, undp.css и undp-app.js в одной папке, установите пакет ресурсов с закреплённой версией и запустите сервер для этой папки. В HTML подключаются базовый CSS, CSS вкладок и браузерный скрипт вкладок из пакета, после чего загружается небольшой скрипт приложения. Для этого примера не нужны сборщик, jQuery или GSAP. Встроенный локальный предпросмотр включает те же ресурсы компонентов, но без неиспользуемых объявлений font-face.

1. Сохраните все три предоставленных файла в одной папке.
2. Установите @undp/[email protected].
3. Запустите сервер для этой папки и проверьте переключение вкладок указателем и клавиатурой.
4. Просмотрите все разделы, вернитесь к предыдущему и сбросьте локальный счётчик.

Разделяйте поведение компонента и приложения

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

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop reading brief</title><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/base-minimal.min.css"><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/components/tab.min.css"><link rel="stylesheet" href="./undp.css"></head><body><main><header class="intro"><div><p class="eyebrow">Learning brief / original sample</p><h1>Plan a local resilience workshop</h1></div><p>A small reading workspace for exploring how a development brief can separate context, participation and follow-through.</p></header><p class="study-note">Native UNDP 2.0.2 tab styles and keyboard behavior. Original OpenDesign sample content, not a UNDP programme or official policy. This preview uses Arial fallback rather than the distributed brand fonts.</p><div class="tabs" data-undpds-component="tabs"><ul role="tablist" aria-label="Workshop reading sections" data-deep-link="false"><li role="tab" class="tabs-title is-active" tabindex="0">Understand</li><li role="tab" class="tabs-title" tabindex="-1">Include</li><li role="tab" class="tabs-title" tabindex="-1">Follow through</li></ul><div class="tabs-content"><section id="understand" class="tabs-panel is-active"><div class="panel-grid"><div><h2>Start with the local context</h2><p>A useful workshop begins with a question people can answer from experience. Ask which everyday service is hardest to rely on during a disruption. Avoid assuming that a technical solution is already agreed.</p><h3>Prepare the conversation</h3><ol><li>Write one plain-language question.</li><li>Invite examples of what already works.</li><li>Record uncertainty separately from an agreed need.</li></ol></div><aside class="reading-card"><h3>What would change the decision?</h3><p>Collect contrasting experiences, not just the first answer. A disagreement can reveal who is missing from the conversation.</p><label><input type="checkbox" data-read="understand">Mark this section as reviewed</label></aside></div></section><section id="include" class="tabs-panel"><div class="panel-grid"><div><h2>Make participation practical</h2><p>Participation depends on when, where and how a session takes place. Offer more than one way to contribute and explain how notes will be used before the discussion begins.</p><h3>Remove avoidable barriers</h3><ol><li>Offer spoken and written contributions.</li><li>Ask participants about access needs privately.</li><li>Explain how to decline recording or attribution.</li></ol></div><aside class="reading-card"><h3>Who has not been heard?</h3><p>A count of attendees does not prove representative participation. Check whether the invitation, language or format prevented people from joining.</p><label><input type="checkbox" data-read="include">Mark this section as reviewed</label></aside></div></section><section id="follow" class="tabs-panel"><div class="panel-grid"><div><h2>Close the loop with participants</h2><p>End with a short record of decisions, open questions and named next steps. Send a readable summary back through a channel that participants can actually access.</p><h3>Turn discussion into a next step</h3><ol><li>Separate decisions from suggestions.</li><li>Attach an owner and review point to the next action.</li><li>Invite corrections before treating the notes as agreed.</li></ol></div><aside class="reading-card"><h3>What happens after the session?</h3><p>A clear follow-up commitment is more useful than a polished report with no owner. Keep unresolved issues visible in the next conversation.</p><label><input type="checkbox" data-read="follow">Mark this section as reviewed</label></aside></div></section></div></div><div class="bottom"><p id="progress" role="status">0 of 3 sections reviewed in this preview</p><button id="reset" type="button">Reset reading progress</button></div></main><script src="./node_modules/@undp/design-system-assets/js/tabs.min.js"></script><script src="./undp-app.js"></script></body></html>

*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}h1,h2,h3,p,button{font-family:inherit}main{max-width:1100px;margin:auto;padding:40px}.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:32px;background:var(--undpds-color-blue-600);color:white}.intro h1{font-size:40px;line-height:1.1;margin:16px 0}.intro p{font-size:16px;line-height:1.6}.eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.study-note{font-size:13px;line-height:1.6;margin:24px 0}.tabs>ul{display:flex;flex-wrap:wrap;padding-left:0;gap:16px;margin-top:32px}.tabs>ul li{margin-right:0;padding:12px 0;font-size:16px}.tabs-title:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}.tabs-panel{padding-top:24px!important}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}h2{font-size:28px;line-height:1.2;margin:0 0 24px}h3{font-size:20px;line-height:1.3}p,li{font-size:16px;line-height:1.6}li{margin-bottom:12px}.reading-card{background:var(--undpds-color-gray-200);padding:24px;border-left:4px solid var(--undpds-color-yellow-600)}.reading-card p:last-child{margin-bottom:0}label{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:16px;line-height:1.5}input{width:20px;height:20px;accent-color:var(--undpds-color-blue-600);flex-shrink:0}#progress{border-top:2px solid var(--undpds-color-gray-300);padding-top:24px;font-size:14px}button{background:transparent;border:2px solid var(--undpds-color-blue-600);color:var(--undpds-color-blue-700);padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}.bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:32px}button:focus-visible,input:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}[hidden]{display:none!important}@media(max-width:720px){main{padding:16px}.intro,.panel-grid{grid-template-columns:1fr;gap:16px}.intro{padding:24px}.intro h1{font-size:32px}.bottom{flex-wrap:wrap}}

tabs();const boxes=[...document.querySelectorAll('[data-read]')];function progress(){document.querySelector('#progress').textContent=boxes.filter(x=>x.checked).length+' of 3 sections reviewed in this preview';}boxes.forEach(x=>x.addEventListener('change',progress));document.querySelector('#reset').addEventListener('click',()=>{boxes.forEach(x=>x.checked=false);progress();});