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

Дизайн-система Digital Agency Ресурсы и область применения

Выберите исходный путь HTML

В официальном указателе ресурсов доступны примеры HTML/CSS/JavaScript, примеры React/Tailwind, плагин Tailwind и данные дизайна Figma. В этом примере выбран вариант с обычным HTML: поля ввода и кнопки CSS скопированы без изменений, а поиск статуса и проверка данных на стороне клиента реализованы как код приложения. Несуществующий универсальный пакет компонентов DADS здесь не заявляется.

Предпросмотр — самостоятельный вымышленный сервис для проверки муниципальных процедур. Он не воспроизводит шапку государственного сайта, не обращается к публичной базе данных и не выдаёт себя за официальный сервис. Формат квитанции и записи о статусах приведены в качестве примеров.

1. Сначала подключите design-tokens, затем две таблицы стилей компонентов.
2. Сохраняйте документированные классы и атрибуты данных на нативных элементах управления HTML.
3. Добавьте специфичную для сервиса проверку, содержимое статуса и перевод фокуса средствами кода приложения.

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

Дизайн-система Digital Agency Типографика и язык

Прочитайте название текстового стиля

Std-17N-170 задаёт обычное начертание размером 17px с межстрочным интервалом 1.7 без единиц измерения. В примере для основного текста используется такой ритм, а для заголовка — полужирное начертание размером 32px с межстрочным интервалом 1.5. В документации в качестве шрифта без засечек указан Noto Sans JP; если веб-шрифт не загружен, используются системные запасные шрифты. В этом локальном примере намеренно используются запасные шрифты.

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

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

Дизайн-система Digital Agency Семантический цвет и фокус

Используйте псевдонимы, которые действительно применяет CSS

В образце кнопки для цвета по умолчанию задано значение --color-key-900. В распространяемой таблице стилей токенов этому псевдониму соответствует blue-900, #0017c1. В состояниях при наведении и нажатии используются key-1000 и key-1200 вместо произвольной прозрачности. Для рамки ошибки поля ввода используется --color-semantic-error-1.

Чёрная обводка и жёлтая тень хорошо видны, когда элемент управления получает фокус с клавиатуры. Размещайте элемент вдали от контейнеров, обрезающих содержимое: карточка с overflow-hidden может обрезать индикатор фокуса, даже если компонент CSS настроен правильно. Сообщение об ошибке и aria-invalid дополняют красную рамку.

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

Дизайн-система Digital Agency Интервалы и адаптивная компоновка

Выберите удобный ритм для приложения

Рекомендации DADS по интервалам приводят примеры, а не требуют использовать одну обязательную последовательность во всех интерфейсах. В этой компоновке между связанными элементами оставлено 8px, между разделами формы — 24px, а на широких экранах задан увеличенный отступ от края страницы — 64px. Максимальная ширина содержимого 52rem — решение для приложения, а не токен DADS.

На узких экранах результаты выстраиваются в столбец, а элементы управления занимают доступную ширину. Медиазапрос 768px используется только в этом примере. Это не универсальная контрольная точка DADS: изменение продиктовано переносом содержимого и минимальным размером кнопки.

.lookup { max-width:52rem; margin-inline:auto; padding:64px 24px; }
@media(max-width:767px) { .lookup { padding:24px; } .actions { align-items:stretch; } }

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

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

Дизайн-система Digital Agency Структура поля ввода и ошибки

Разделяйте подпись, подсказку и ошибку

В обёртке .dads-input-text заданы стандартные параметры текста. Вложенный элемент .dads-input-text__input отвечает за размер, рамку, внутренние отступы, скругление и состояния фокуса. Связанная подпись явно подключена через for/id. Подсказка остаётся видимой и после появления ошибки, чтобы пользователь не потерял сведения о допустимом формате.

В примере допускаются ровно шесть цифр ASCII. При вводе некорректного значения устанавливается aria-invalid=true, появляется связанное сообщение об ошибке, а фокус возвращается в поле ввода. Если значение соответствует формату, но не равно 123456, показывается отдельное сообщение о том, что совпадений нет; оно не обозначается как ошибка формата. Оба сценария заданы правилами локальной демонстрации.

• Оставьте тип поля текстовым: номер обращения — это идентификатор, а не количество.
• Используйте inputmode=numeric как подсказку для клавиатуры, чтобы не показывать элементы управления для изменения числового значения.
• Сохраняйте введённое значение и подскажите, что исправить дальше.

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

Дизайн-система Digital Agency Иерархия кнопок и состояния

Одно основное действие для этого поиска

Большая залитая кнопка запускает поиск, а текстовая кнопка очищает пример. Для data-type используются встроенные значения solid-fill, outline и text; data-size задаёт lg, md, sm или xs. Это атрибуты HTML из примера, а не пропсы React.

Ширина большой кнопки — не менее 136px, высота — 56px. При необходимости она может расшириться, чтобы вместить подпись. Для вариантов small и extra-small в предоставленном CSS предусмотрена увеличенная область нажатия; не размещайте в ней вплотную соседние элементы. В демонстрации используются более крупные варианты, чтобы избежать этой проблемы.

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

Дизайн-система Digital Agency Полезный результат с описанием статуса

Сделайте локальное состояние наглядным

При вводе 123456 отображается вымышленная квитанция со списком параметров: номер обращения, дата подачи и следующее действие. После поиска фокус перемещается на заголовок, чтобы пользователь клавиатуры сразу перешёл к новому результату. Фокус также перемещается на состояние «Совпадений нет», в котором есть возможность повторить попытку.

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

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

Дизайн-система Digital Agency Подключение примера

Разделяйте токены, стили и поведение

Пакет токенов предоставляет dist/tokens.css. Образцы HTML находятся в репозитории исходного кода со скриптами Storybook; его клонирование позволяет изучить примеры. Скопируйте необходимые стили компонентов вместе с лицензией и зафиксируйте ревизию исходного кода, прежде чем адаптировать их для рабочей среды.

Для этой страницы используется пакет токенов версии 2.0.1 и датированный снимок стилей HTML. Автономная демонстрация загружает локальные файлы, поэтому проверенное отображение не зависит от действующего CDN. Команда запуска Storybook приведена как официальный способ начать работу с репозиторием; для этого предварительного просмотра не устанавливали зависимости заново.

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

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

<div class="dads-input-text">
  <label for="reference">Reference number (required)</label>
  <p id="reference-hint">Use the 6 digits on your example receipt.</p>
  <input class="dads-input-text__input" data-size="lg"
    id="reference" inputmode="numeric" autocomplete="off"
    aria-describedby="reference-hint reference-error" aria-invalid="true">
  <span class="dads-input-text__error-text" id="reference-error">
    Enter 6 digits, for example 123456.
  </span>
</div>

<button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">
  Show example status
</button>
<button class="dads-button" data-type="text" data-size="md" type="reset">
  Clear reference
</button>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>DADS procedure receipt example</title><link rel="stylesheet" href="vendor/dads-2026-10-03/tokens.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/input-text.css"><link rel="stylesheet" href="vendor/dads-2026-10-03/button.css"><style>
*{box-sizing:border-box}body{margin:0;color:var(--color-neutral-solid-gray-900);font:400 17px/1.7 var(--font-family-sans);background:#fff}.lookup{max-width:52rem;padding:64px 24px;margin:auto}.eyebrow{font-size:14px;letter-spacing:.08em;border-bottom:1px solid #b3b3b3;padding-bottom:16px}h1{font-size:32px;line-height:1.5;margin:24px 0}h2{font-size:24px;line-height:1.5}p{margin:8px 0 24px}.field{margin:32px 0}label{font-weight:700;display:block}.dads-input-text__input{width:22rem}#reference-hint{margin:8px 0}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin:24px 0}.result{border-top:4px solid var(--color-key-900);background:#f5f5f5;padding:24px;margin-top:32px}.result:focus{outline:3px solid #111;outline-offset:4px}dl{display:grid;grid-template-columns:10rem 1fr;gap:16px}dt{font-weight:700}dd{margin:0;overflow-wrap:anywhere}ol{padding-left:24px}li{padding:8px}li.current{font-weight:700;color:var(--color-key-900)}small{display:block;font-size:14px;margin-top:32px;color:#555}[hidden]{display:none!important}@media(max-width:767px){.lookup{padding:24px}h1{font-size:28px}.actions{align-items:stretch;flex-direction:column}.actions button{width:100%}dl{grid-template-columns:1fr;gap:4px}dd{margin-bottom:16px}}
</style><main class="lookup"><div class="eyebrow">SERVICE PATTERN · DADS HTML</div><h1>Check a procedure receipt</h1><p>Use the reference from your receipt to view the next step. This is a fictional local example.</p><form id="lookup-form" novalidate><div class="dads-input-text field"><label for="reference">Reference number (required)</label><p id="reference-hint">Enter 6 digits. Try <strong>123456</strong> for the example record.</p><input id="reference" class="dads-input-text__input" data-size="lg" inputmode="numeric" autocomplete="off" aria-describedby="reference-hint reference-error"><span id="reference-error" class="dads-input-text__error-text" hidden>Enter 6 digits, for example 123456.</span></div><div class="actions"><button class="dads-button" data-type="solid-fill" data-size="lg" type="submit">Show example status</button><button class="dads-button" data-type="text" data-size="md" type="reset">Clear reference</button></div></form><section class="result" id="missing" tabindex="-1" hidden><h2>No matching example</h2><p>This reference has the correct format, but is not in the local example data. Try 123456.</p></section><section class="result" id="found" tabindex="-1" hidden><h2>Receipt 123456</h2><dl><dt>Procedure</dt><dd>Community room request</dd><dt>Submitted</dt><dd>1 October 2026 — fictional date</dd><dt>Next action</dt><dd>Wait for the example review. No documents are currently requested.</dd></dl><ol aria-label="Procedure progress"><li>Received</li><li class="current" aria-current="step">Checking the request — current step</li><li>Decision — not started</li></ol></section><small>Independent OpenDesign demonstration. Native DADS component CSS; system font fallback. No information is sent or stored.</small></main><script>
const f=document.querySelector('form'),i=document.querySelector('input'),e=document.querySelector('#reference-error'),found=document.querySelector('#found'),missing=document.querySelector('#missing');f.addEventListener('submit',ev=>{ev.preventDefault();found.hidden=missing.hidden=true;const valid=/^[0-9]{6}$/.test(i.value.trim());e.hidden=valid;i.setAttribute('aria-invalid',String(!valid));if(!valid){i.focus();return}const target=i.value.trim()==='123456'?found:missing;target.hidden=false;target.focus()});f.addEventListener('reset',()=>{found.hidden=missing.hidden=e.hidden=true;i.removeAttribute('aria-invalid');i.focus()});
</script></html>