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

## Дизайн-система VA Предварительный просмотр интерфейса

Изучите три наглядных состояния процесса и откройте дополнительное пояснение, не скрывая сводку по этапам.

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

Опубликованные переменные css-library 0.36.1 и веб-компоненты-зависимость component-library 56.14.0, версия 24.14.0. Резервные шрифты указаны явно. Оболочка примера шириной 52rem — решение на уровне приложения.

### Семантические роли шрифта

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --vads-font-family-heading | Bitter, Georgia, Cambria, Times New Roman, Times, serif | Семейство шрифтов для заголовков; в примере используется Georgia. |
| --vads-font-family-sans | Source Sans Pro Web / Source Sans Pro, system sans fallbacks | Семейство шрифтов для основного текста и интерфейса; в примере используется Arial. |
| --vads-font-size-body-default | 1.06rem (about 17px) | Предпочтительная семантическая роль вместо устаревшего source-sans-normalized. |
| --vads-font-size-heading-level-1 / 2 / 3 | 2.5 / 2 / 1.25rem | 40 / 32 / 20px при корневом размере 16px. |
| --vads-font-size-heading-level-4 / 5 / 6 | 1.063 / .938 / .938rem | Около 17 / 15 / 15px. |
| --vads-font-line-height-default / heading / body-lead | 1.5 / 1.2 / 1.75 | Соответствие текстовой роли. |
### Интервалы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --vads-spacing-inset-s / m / l | 1 / 1.5 / 2rem | 16 / 24 / 32px. |
| --vads-spacing-vertical-stack-default | 1rem / 16px | Общий вертикальный стек. |
| --vads-forms-spacing-vertical-stack-default | 2rem / 32px | Стек полей формы. |
| --vads-spacing-0p5 / 1 / 1p5 / 2 / 2p5 / 3 | 4 / 8 / 12 / 16 / 20 / 24px | Шкала примитивных значений при стандартном корневом размере. |
| --vads-spacing-4 / 5 / 6 / 7 / 8 | 32 / 40 / 48 / 56 / 64px | Более крупные примитивные значения. |
### Семантический цвет

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --vads-color-text | #1b1b1b | Предпочтительная роль цвета основного текста. |
| --vads-color-link / link-active | #005ea2 / #0b4778 | Роли цвета ссылок по умолчанию и для активного состояния. |
| --vads-color-primary-darker | #162e51 | Эталонный цвет основной поверхности с высокой визуальной выразительностью. |
| --vads-color-base-lighter / base-lightest | #dfe1e2 / #f0f0f0 | Нейтральные разделители и фоны. |
| --vads-color-error | #d54309 | Для ошибок используйте семантику error, а не устаревший secondary red. |
| --vads-color-success-darker | #216e1f | Более тёмный эталонный цвет статуса успеха; сам статус всё равно нужно обозначить словами. |
### Границы адаптивных режимов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --vads-breakpoint-mobile / mobile-lg | 320 / 480px | Ориентиры для границ на небольших экранах. |
| --vads-breakpoint-tablet / tablet-lg | 640 / 880px | Промежуточные макеты. |
| --vads-breakpoint-desktop / desktop-lg | 1024 / 1201px | Границы для настольных экранов. |
| --vads-breakpoint-widescreen | 1400px | Ориентир для широкого макета. |
## Дизайн-система VA Полное руководство

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

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

## Дизайн-система VA Сервисная система для ветеранов

### Фундаментальные стили и компоненты — отдельные пакеты

> Система VA объединяет шаблоны сервисов, рекомендации по контенту, токены, утилиты CSS и веб-компоненты. В документированном сценарии установки для глобальных фундаментальных стилей используется пакет CSS-library, а для интерактивных элементов — пакет component-library. В этом справочнике используются component-library 56.14.0 и css-library 0.36.1; у этих пакетов независимая нумерация версий.

В примере показано вымышленное пояснение процесса запроса записей. Он объясняет, как список этапов отражает ход процесса, и не утверждает, что запрос был отправлен или что человек имеет право на получение пособия. Здесь нет логотипа VA, баннера с символикой правительства, личной записи или реального статуса дела. Перед публикацией тексты сервисов должны быть проверены ответственным подразделением VA.

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

## Дизайн-система VA Семантические роли шрифта

### Для основного текста и заголовков намеренно используются разные семейства шрифтов

Для семантических заголовков используется Bitter с резервными шрифтами Georgia и другими шрифтами с засечками. Стек основного текста начинается с Source Sans Pro Web и Source Sans Pro, за которыми следуют системные шрифты без засечек. Размер по умолчанию для роли основного текста — 1.06rem, то есть примерно 17px при корневом размере 16px; для заголовков используются размеры 40px для уровня 1, 32px для уровня 2, 20px для уровня 3 и примерно 17px для уровня 4.

Используйте --vads-font-size-body-default вместо прежнего имени source-sans-normalized. Семантический токен указывает на роль, а старое имя нормализации раскрывает деталь реализации шрифта. В примере для основного текста явно задан Arial, а для заголовков — Georgia. Нативный компонент Process List CSS по-прежнему самостоятельно управляет своей внутренней структурой и размерами; резервный вариант не претендует на точное воспроизведение метрик Source Sans и Bitter.

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

### Межстрочный интервал зависит от роли

Межстрочный интервал по умолчанию составляет 1.5 для абзацев и 1.2 для заголовков. Для вводного текста предусмотрено значение 1.75; токен межстрочного интервала для шрифтов с засечками — 1.9 — предназначен для обычного текста с засечками, а не для всех заголовков с засечками. Значение 1.9 для компактного заголовка этапа процесса смешало бы две разные роли. Элементы процесса в этом примере используют уровень 3 внутри раздела страницы с заголовком уровня 2.

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

## Дизайн-система VA Семантические интервалы и макет

### Отличайте обычный вертикальный стек от формы

Для общего вертикального стека по умолчанию используется 1rem/16px, а для форм — 2rem/32px. Это различие полезно: два коротких пояснительных пункта требуют другого ритма, чем отдельные вопросы с метками, подсказками, полями и сообщениями об ошибках. Внутренние отступы s, m и l соответствуют 16, 24 и 32px.

Семейство примитивных интервалов включает 4, 8, 12, 16, 20 и 24px, более крупные значения с шагом в восемь пикселей, а также специальные значения в один и два пикселя. Если назначение семантического имени соответствует макету, отдавайте предпочтение ему. Внешняя оболочка примера шириной 52rem — решение на уровне приложения, а внутренний отступ 24px и расстояние между разделами 32px взяты из опубликованной шкалы. Эта оболочка не является обязательной для всех шаблонов страниц VA.

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

## Дизайн-система VA Цвета и адаптивные токены

### Используйте роль вместо исторического псевдонима

Текущий токен цвета текста — --vads-color-text (#1b1b1b). Для --vads-color-link задано значение #005ea2, а для активной ссылки — #0b4778; они не совпадают со всеми более тёмными цветами из основной палитры. Роль error соответствует цвету #d54309. Унаследованное семейство secondary red для этой цели устарело, поэтому для нового оформления проверки следует использовать семантику error, а не secondary.

Таблицы примитивных и семантических токенов созданы на основе указанной версии CSS-library. В примере загружаются настоящие переменные, а не скопированная старая палитра USWDS, выданная за палитру VA. Помимо этих переменных, нативные компоненты могут содержать собственные скомпилированные значения; при обновлении проверяйте оба уровня.

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

### Граничные значения VA не совпадают с универсальной шкалой фреймворков

В наборе токенов заданы следующие ширины: mobile — 320px, mobile-lg — 480px, tablet — 640px, tablet-lg — 880px, desktop — 1024px, desktop-lg — 1201px и widescreen — 1400px. Необычное пороговое значение 1201px важно при работе с существующими шаблонами. Переменные точек перехода документируют значения, но пользовательские свойства CSS нельзя напрямую подставлять в условие нативного медиазапроса. Используйте соответствующее значение на этапе сборки или литерал, полученный из проверенного токена.

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

## Дизайн-система VA Структура Process List

### От трёх до десяти значимых этапов

Process List в системе VA также описывается как схема метро. Он объясняет длительный процесс или показывает, на каком его этапе находится человек. Рекомендации предусматривают от трёх до десяти этапов и только один такой список на странице. Для каждого пункта нужен краткий заголовок, начинающийся с глагола, и видимое пояснение; это не декоративный номер рядом с пустым заголовком.

Используются нативные теги va-process-list и va-process-list-item. Для элемента задаются атрибуты header и level, а также active, pending, checkmark и status-text. В опубликованном модуле компонента приоритеты заданы в следующем порядке: checkmark, затем active, затем pending. Не допускайте противоречивых сочетаний: при установке одного булева состояния сбрасывайте остальные. Стиль статуса должен сопровождаться явно заданным текстом, чтобы этап был понятен и без цвета.

```
<va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list>
```

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

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

## Дизайн-система VA Используйте Details как дополнение к видимому этапу

### Не превращайте каждый этап в аккордеон

Рекомендации по Process List запрещают объединять заголовок аккордеона с этапом процесса. Если скрыть все пояснения, исчезнет смысл отображения процесса. Однако внутри этапа можно использовать компонент Details для дополнительной информации. В примере пояснение об идентификации записи остаётся видимым, а необязательное дополнение размещено в va-details.

Значение атрибута label компонента отображается как видимый вопрос раскрывающегося блока. Краткий вопрос полезнее, чем «Дополнительная информация»: по нему читатели могут понять, относится ли к ним скрытое содержимое. В этом примере блок поясняет, что может помочь определить запись; также прямо указано, что это наглядный текст, а не инструкция для конкретной процедуры VA.

- Держите сводку по каждому этапу на виду, в том числе по этапам со статусом «Ожидает».

- Используйте Details только для дополнительного пояснения внутри этапа.

- Размещайте следующее реальное действие сервиса за пределами заголовка этапа, а не превращайте заголовок в элемент управления.

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

## Дизайн-система VA Демонстрация статусов и достоверность

### Используйте переключатель сценария, а не имитацию прогресса

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

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

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

## Дизайн-система VA Подключение нативных веб-компонентов

### Зарегистрируйте компоненты один раз и сохраните зависимости

В документированном сценарии сборки импортируется main.css, а из пакета component-library вызывается defineCustomElements. Шрифты подключаются из CSS-library и поставляются отдельно. Компонентам, использующим спрайт значков, нужен путь к спрайту с того же источника; по умолчанию это /img/sprite.svg. Это реальные требования к интеграции, а не необязательная полировка, о которой можно вспомнить уже после развертывания.

В отдельном примере используется официальный браузерный ESM-вход из web-components 24.14.0 — зависимости, указанной в component-library 56.14.0, — а также специальные ленивые модули для Process List, Process List Item и Details. Скрипт приложения только переключает состояния примера. Среда выполнения браузера обеспечивает работу нативных пользовательских элементов, в том числе элемента управления Details.

1. Подключите соответствующие токен CSS и браузерную точку входа компонентов, сохранив относительное расположение модулей.

2. Дождитесь определения va-process-list-item, прежде чем назначать примерам свойства состояния.

3. Проверьте все сценарии состояний, клавиатурное управление Details и отображение на узких экранах, не скрывая пояснительный текст.

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

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

### Объяснение из трёх этапов на нативных компонентах

Реальные атрибуты Web Components и допустимое раскрытие Details внутри шага.

```
<va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list>
```

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

- Используйте от 3 до 10 шагов и один Process List на странице.

- Не заменяйте заголовки шагов триггерами аккордеона.

- Для каждого элемента можно установить только один флаг состояния.

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

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

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Request journey — VA component specimen</title><link rel="stylesheet" href="vendor/va-56.14.0/variables.css"><style>*{box-sizing:border-box}:root{--font-serif:Georgia,serif;--font-sans:Arial,sans-serif;--vads-font-family-heading:Georgia,serif;--vads-font-family-serif:Georgia,serif;--vads-font-family-sans:Arial,sans-serif}body{margin:0;font:1.06rem/1.5 Arial,sans-serif;color:var(--vads-color-text);border-top:8px solid var(--vads-color-primary-darker)}main{max-width:52rem;margin:auto;padding:32px 24px}h1,h2{font-family:Georgia,serif;line-height:1.2}h1{font-size:40px;margin:16px 0 24px}h2{font-size:32px;margin:32px 0 24px}.controls{padding:24px;background:var(--vads-color-base-lightest);display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:32px 0}label{font-weight:bold}select,button{font:inherit;padding:8px 12px;max-width:100%;background:white;color:var(--vads-color-text);border:1px solid var(--vads-color-base-dark)}button{cursor:pointer;color:var(--vads-color-link)}select:focus-visible,button:focus-visible{outline:3px solid #ffbe2e;outline-offset:3px}va-process-list-item,va-process-list-item *,va-process-list-item::before{font-family:Arial,sans-serif!important}va-process-list-item .usa-process-list__heading{font-family:Georgia,serif!important}va-process-list-item p{margin:8px 0 16px}footer{border-top:1px solid #dfe1e2;padding-top:24px;margin-top:32px}.note{background:#e7f6f8;padding:16px;border-left:4px solid #005ea2}#state{font-weight:bold}@media(max-width:479px){h1{font-size:32px}.controls{padding:16px;align-items:flex-start;flex-direction:column}}</style></head><body><main><p>VA native component example</p><h1>Understand a request journey</h1><p>See how a service can explain preparation, sending a request, and reviewing its response.</p><p class="note">Fictional process for design exploration. These are not VA submission instructions or a real case status.</p><div class="controls"><label for="stage">Example stage</label><select id="stage"><option value="0">Preparing a request</option><option value="1">Sending a request</option><option value="2">Reviewing a response</option></select><button id="reset" type="button">Reset example</button></div><p id="state" role="status">Example: preparing a request.</p><h2>The three stages</h2><va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list><footer>Native VA Web Components 24.14.0 · CSS tokens 0.36.1<br>Arial and Georgia fallbacks. No request is sent or stored.</footer></main><script>globalThis.getVaIconSpriteLocation=()=>new URL("vendor/va-web-24.14.0/sprite.svg",document.baseURI).pathname;</script><script type="module" src="vendor/va-web-24.14.0/component-library.esm.js"></script><script type="module">await customElements.whenDefined('va-process-list-item');const items=[...document.querySelectorAll('va-process-list-item')],select=document.querySelector('#stage');function render(){const current=Number(select.value);items.forEach((item,i)=>{for(const [key,on] of Object.entries({active:i===current,pending:i>current,checkmark:i<current})){item[key]=on;if(on)item.setAttribute(key,'true');else item.removeAttribute(key)}item.statusText=i<current?'Complete':i===current?'Active':'Pending';item.setAttribute('status-text',item.statusText)});document.querySelector('#state').textContent='Example: '+select.selectedOptions[0].textContent.toLowerCase()+'.'}select.addEventListener('change',render);document.querySelector('#reset').addEventListener('click',()=>{select.value='0';render();const detail=document.querySelector('va-details');if(detail.shadowRoot){if(detail.shadowRoot.querySelector('details').open)detail.shadowRoot.querySelector('summary').click()}select.focus()});render();</script></body></html>
```

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

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

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

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

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

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

```
// Install in an application with a JavaScript bundler:
// npm install @department-of-veterans-affairs/component-library@56.14.0 \
//   @department-of-veterans-affairs/css-library@0.36.1
import '@department-of-veterans-affairs/component-library/dist/main.css';
import '@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css';
import { defineCustomElements } from '@department-of-veterans-affairs/component-library';
defineCustomElements();
// Render the va-process-list markup in your page after this initialization.
// Deliver the CSS-library fonts separately, or choose an explicit fallback.
// Components that use va-icon also require the same-origin /img/sprite.svg.
```

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

```
Создайте объяснение процесса обслуживания VA с одним va-process-list, содержащим от трёх до десяти элементов va-process-list-item. Используйте заголовки, начинающиеся с глагола, уровень level=3 внутри раздела с заголовком h2, видимые описания и только одно состояние для каждого элемента — active, pending или checkmark — с явным указанием status-text. Используйте va-details только для дополнительного текста внутри шага и никогда не скрывайте весь шаг. Импортируйте актуальный файл токенов VADS CSS и зарегистрируйте нативные компоненты. Сохраните основной текст размером 17px, роли шрифтов Bitter/Source Sans, семантические отступы и контрольные точки 320/480/640/880/1024/1201/1400px. В каждом интерактивном примере укажите, что этапы иллюстративные, и не создавайте впечатление, будто это отправленная заявка в VA.
```

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

Техническая демонстрация компонентов с вымышленными этапами запроса записей. Здесь не показаны реальный запрос в VA, статус дела, решение о назначении пособия или одобрение со стороны учреждения.

- VA Design System Официальные основы, контент, компоненты и принципы управления.

- Паттерны VA Паттерны для задач в заявках, предварительного заполнения, подписей и восстановления.

- Компоненты VA Спецификации компонентов, решения и материалы по доступности.

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

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

### W3C дизайн-система

Создавайте удобные для чтения интерфейсы с гибкой типографикой, семантическими цветовыми ролями и нативным сворачиваемым содержимым, которое остаётся читаемым без JavaScript.

### Codex

Используйте настоящую структуру SearchInput, иерархию действий и токены для чтения из Codex. Выполните поиск в локальном указателе статей, изучите результат и вернитесь к прежнему месту чтения.

### Agriculture дизайн-система

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


- [Справочник по реализации](https://design.va.gov/components/process-list)
- [Источник](https://design.va.gov/foundation/design-tokens/typography)
- [Источник](https://design.va.gov/foundation/design-tokens/spacing)
- [Источник](https://design.va.gov/foundation/design-tokens/color)
- [Источник](https://design.va.gov/foundation/design-tokens/breakpoints)
- [Прочитать вспомогательную спецификацию](https://design.va.gov/about/developers/install)
- [Прочитать вспомогательную спецификацию](https://design.va.gov/foundation/design-tokens/typography)
- [Прочитать вспомогательную спецификацию](https://design.va.gov/foundation/design-tokens/spacing)
- [Прочитать вспомогательную спецификацию](https://design.va.gov/foundation/design-tokens/color)
- [Прочитать вспомогательную спецификацию](https://design.va.gov/foundation/design-tokens/breakpoints)
- [Справочник по коду](https://design.va.gov/components/process-list)
- [Прочитать вспомогательную спецификацию](https://design.va.gov/components/process-list)
- [VA Design System Официальные основы, контент, компоненты и принципы управления.](https://design.va.gov/)
- [Паттерны VA Паттерны для задач в заявках, предварительного заполнения, подписей и восстановления.](https://design.va.gov/patterns/)
- [Компоненты VA Спецификации компонентов, решения и материалы по доступности.](https://design.va.gov/components/)