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

## Дизайн-система Digital Agency Предпросмотр интерфейса

Введите некорректный номер, затем номер без совпадений, а после этого 123456, чтобы увидеть вымышленную запись о статусе.

## Дизайн-система Digital Agency Справочник по дизайну

Документация DADS beta v2.18.0; нативные стили примера HTML изучены 3 октября 2026 года; design-tokens 2.0.1. У документации, репозитория примеров и пакета токенов разные истории версий. Приведённые ниже решения по компоновке явно отделены от официальных значений компонентов.

### Типографика

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Sans family | Noto Sans JP, system fallbacks | В предпросмотре используется документированный резервный набор шрифтов; шрифт не скачивается. |
| Std-17N-170 | 17px / 1.7; weight 400 | Основной текст для чтения; название токена описывает размер, насыщенность и межстрочный интервал. |
| Body / UI baseline | 16px or greater | Размер 14px предусмотрен для ограниченного числа вспомогательных контекстов. |
| Weight roles | N = 400; B = 700 | Используйте штатные начертания обычной и полужирной гарнитуры. |
### Структура нативного поля ввода

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| data-size sm / md / lg | 2.5rem / 3rem / 3.5rem | Высота элементов управления задана в корневом размере шрифта, а не в трёх разных размерах текста. |
| Input border / radius | 1px / 0.5rem | Для рамки используется neutral-solid-gray-600; радиус задан пользовательским свойством компонента CSS. |
| Input padding | 0.75rem 1rem | Внутренние отступы по вертикали и горизонтали; максимальная ширина — 100%. |
| Focus | 4px black outline, 2px offset, 2px yellow shadow | Нативный стиль focus-visible; не допускайте обрезания у краёв контейнера. |
### Цвета пакета токенов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --color-key-900 | #0017c1 | Псевдоним Default указывает на primitive-blue-900. |
| --color-semantic-error-1 | #ec0000 | Псевдоним указывает на primitive-red-800; используйте его вместе с сообщением об ошибке. |
| --color-neutral-solid-gray-900 | #1a1a1a | Текст поля ввода. |
| --color-neutral-solid-gray-600 | #666666 | Рамка поля ввода по умолчанию. |
| --color-primitive-yellow-300 | #ffd43d | Тень фокуса под чёрной обводкой. |
### Кнопки и интервалы приложения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Large minimum | 136 × 56px | Не мешайте подписям расширяться и переноситься на новую строку. |
| Medium minimum | 96 × 48px | Подходит для вторичного действия. |
| Small / extra-small minimum | 80 × 36px / 72 × 28px | Обеспечьте целевую область размером 44 CSS px, даже если видимый элемент управления меньше. |
| Preview rhythm | 8 / 24 / 64px | Интервалы выбраны для приложения по примерам из рекомендаций; это не обязательная шкала DADS. |
## Дизайн-система 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 Примеры компонентов дизайн-системы

### Поле ввода с подписью

Встроенные классы поля ввода DADS, постоянная подсказка и связанное сообщение об ошибке.

```
<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>
```

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

- Удалите aria-invalid и скройте сообщение об ошибке после исправления значения.

- Проверка номера обращения — логика приложения.

### Основное действие поиска и сброс

Используйте встроенные варианты кнопки и типы действий HTML.

```
<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>
```

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

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

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

```
<!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>
```

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

- Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.

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

## Дизайн-система Digital Agency Настройка агента

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

Рабочий процесс официального репозитория примеров и проверенный путь импорта токенов. В этом предварительном просмотре используются локальные копии CSS; React и серверная часть не требуются. ZIP-архив с полным рабочим примером в разделе Sources содержит точные зависимости для предварительного просмотра и полный документ. Распакуйте архив, в этой папке выполните python3 -m http.server 8080, затем откройте http://localhost:8080/japan-dads.html. Не открывайте примеры с модулями через file://.

```
# Official HTML samples are a source repository, not a published component SDK.
git clone https://github.com/digital-go-jp/design-system-example-components-html.git
cd design-system-example-components-html
npm install
npm run storybook
# For the standalone composition, copy these component styles into your app:
# src/components/input-text/input-text.css
# src/components/button/button.css
# Install the independently versioned token package:
npm install @digital-go-jp/design-tokens@2.0.1
# In a CSS-aware bundler entry:
# import '@digital-go-jp/design-tokens/dist/tokens.css';
# import './input-text.css';
# import './button.css';
```

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

```
Создайте вымышленный сервис проверки квитанции о подаче заявления, используя поле ввода input-text и стили кнопок DADS HTML, а также design-tokens 2.0.1. Сохраните видимую подпись, подсказку о формате, aria-describedby и состояние ошибки. Для основного текста используйте ритм Std-17N-170, а для основного действия — большую кнопку. Показывайте отдельно состояния некорректного формата, отсутствия совпадений и найденной записи. Не удаляйте введённый текст, переводите фокус на новые заголовки статуса, не используйте реальные персональные данные и атрибутику государственных органов. Ширину содержимого 52rem и интервалы 8/24/64px рассматривайте как решения приложения.
```

## Дизайн-система Digital Agency Источники и область применения

Авторская учебная композиция на основе официальных образцов CSS и токенов. Не является одобренной государством разработкой, не выполняет поиск в реальных данных и не копирует атрибутику ведомств. Если локально доступного системного шрифта без засечек нет, используется запасной. Компоновка приложения и данные записей не входят в официальные спецификации DADS.

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

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

- Ресурсы для разработки Официальные данные дизайна, примеры кода и документация в Markdown.

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

## Дизайн-система Digital Agency Связанные ресурсы

### KERN

Создайте нативный интерфейс KERN с проверенной типографикой, семантическими темами, раскрывающимися элементами и обратимым процессом подтверждения.

### Michigan Forty Two

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

### Aksel

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


- [Справочник по реализации](https://github.com/digital-go-jp/design-system-example-components-html)
- [Источник](https://design.digital.go.jp/dads/foundations/typography/)
- [Источник](https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/input-text/input-text.css)
- [Источник](https://github.com/digital-go-jp/design-tokens)
- [Источник](https://design.digital.go.jp/dads/components/button/)
- [Прочитать вспомогательную спецификацию](https://design.digital.go.jp/dads/resources/)
- [Прочитать вспомогательную спецификацию](https://design.digital.go.jp/dads/foundations/typography/)
- [Прочитать вспомогательную спецификацию](https://github.com/digital-go-jp/design-tokens)
- [Справочник по коду](https://design.digital.go.jp/dads/foundations/spacing/)
- [Прочитать вспомогательную спецификацию](https://design.digital.go.jp/dads/foundations/spacing/)
- [Прочитать вспомогательную спецификацию](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text)
- [Прочитать вспомогательную спецификацию](https://design.digital.go.jp/dads/components/button/)
- [Прочитать вспомогательную спецификацию](https://design.digital.go.jp/dads/components/description-list/)
- [Прочитать вспомогательную спецификацию](https://github.com/digital-go-jp/design-system-example-components-html)
- [Справочник по коду](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/input-text)
- [Справочник по коду](https://github.com/digital-go-jp/design-system-example-components-html/tree/main/src/components/button)
- [Справочник по коду](https://github.com/digital-go-jp/design-system-example-components-html)
- [Официальная система Область применения системы, рекомендации и сведения о текущем выпуске.](https://design.digital.go.jp/dads/)
- [Основы Типографика, цвет, компоновка и другие визуальные основы.](https://design.digital.go.jp/dads/foundations/)
- [Ресурсы для разработки Официальные данные дизайна, примеры кода и документация в Markdown.](https://design.digital.go.jp/dads/resources/)