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

## Предпросмотр интерфейса дизайн-системы USWDS

Ищите и фильтруйте вымышленные записи, восстанавливайтесь после отсутствия результатов и раскрывайте нативные панели требований.

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

Нативный дистрибутив компонентов USWDS 3.14.0. Токены по умолчанию — из официальной документации; замены шрифтов в предпросмотре явно указаны как локальные решения.

### Шаги отступов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| 0.5 / 05 | 4px | Шаг отступа в половину единицы и утилита формы |
| 1 | 8px | Базовая единица отступа |
| 1.5 / 105 | 12px | Промежуточный отступ |
| 2 | 16px | Компактный внутренний отступ |
| 3 | 24px | Интервал между связанными материалами |
| 4 | 32px | Интервал между разделами |
| 5 | 40px | Увеличенный интервал |
| 6 | 48px | Большой отступ |
| tablet | 640px | Именованный токен ширины |
| desktop | 1024px | Именованный токен ширины |
### Сопоставление типов по умолчанию

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| sans | source-sans-pro | Токен семейства шрифтов по типу |
| serif | merriweather | Токен семейства шрифтов по типу |
| body / ui | sans | Сопоставление по ролям |
| heading | serif | Сопоставление по ролям |
| code | mono → roboto-mono | Сопоставление роли кода |
### Цвета темы по умолчанию

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primary | blue-60v / #005ea2 | Основной псевдоним |
| primary-lighter | blue-10 / #d9e8f6 | Дополнительный оттенок основного цвета |
| primary-dark | blue-warm-70v / #1a4480 | Более тёмный псевдоним основного цвета |
| ink | gray-90 / #1b1b1b | Псевдоним основного текста |
### Контракты компонентов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| aria-controls | Panel ID | Связывает каждую кнопку аккордеона с содержимым. |
| aria-expanded | true / false | Встроенный JS управляет состоянием раскрытия. |
| data-allow-multiple | Accordion root attribute | Позволяет независимо раскрывать панели. |
| usa-accordion--bordered | Root modifier | Добавляет вариант с рамкой. |
## USWDS: полное руководство по дизайн-системе

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

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

## USWDS: настраиваемая дизайн-система Foundation

### Токены по умолчанию — отправная точка для настройки

> USWDS разделяет системные токены, настройки темы проекта, классы утилит и компоненты. В приведённой ниже справке указаны настройки темы по умолчанию из текущей документации. Федеральная программа может настроить другие роли шрифтов или псевдонимы цветов, не заменяя при этом все компоненты.

Предварительный просмотр — независимое исследование для сравнения возможностей в сфере исследований с использованием 3.14.0 CSS и аккордеона JavaScript. В нём не используются правительственный баннер и символика. Названия программ и этапы вымышлены, а фильтрация выполняется полностью в браузере.

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

## USWDS: отступы и токены темы дизайн-системы

### Ориентируйтесь на единицу измерения, а не на число

Одна единица отступа USWDS равна 8px: units(2) означает 16px, а units(3) — 24px. Половинные токены позволяют задавать меньшие интервалы, а в записи утилиты для половины единицы используется 05. Утилита margin-2 не задаёт отступ в два пикселя.

В шкалу также входят именованные ширины, например tablet и desktop. Это повторно используемые токены, а не требование перерабатывать каждую страницу для каждого размера. В примере для размещения содержимого используется grid-container, а для таблицы — отдельная прокручиваемая область с фокусом.

```
@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}
```

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

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

## USWDS: шрифты и роли в дизайн-системе

### Роль можно изменить, не переименовывая компоненты

По умолчанию токен sans соответствует Source Sans Pro, а serif — Merriweather. Для ролей body и UI задано семейство sans, для heading — serif. Функция family("body") разрешает эту цепочку. При описании проекта различайте семантическую роль и итоговое семейство шрифтов.

В локальном примере для основного текста явно заданы Helvetica/Arial, а для заголовков — Georgia, поэтому загружать шрифты не требуется. Это переопределение для исследования, а не стандартная типографическая система USWDS. В рабочей сборке эти роли следует настроить через параметры uswds-core или скопировать поставляемые файлы шрифтов.

```
@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);
```

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

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

## USWDS: псевдонимы цветов темы дизайн-системы

### Связывайте псевдонимы с их назначением

По умолчанию псевдоним основного цвета соответствует blue-60v, #005ea2. Псевдоним primary-dark соответствует blue-warm-70v, #1a4480, а ink — gray-90, #1b1b1b. Это значения темы, а не требование использовать один и тот же фирменный цвет на каждом сайте USWDS.

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

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

## USWDS: сопоставление возможностей в дизайн-системе

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

В примере используются подпись таблицы, заголовки столбцов с атрибутом scope="col" и название возможности с атрибутом scope="row". Это таблица, потому что читатели сравнивают одни и те же поля — тематику и этап — в разных записях. Эти связи сохраняются и при прокрутке области.

У прокручиваемой обёртки задан tabindex="0", чтобы пользователь клавиатуры мог перейти к ней. Широкие данные остаются в этой области и не растягивают весь документ. В примере используются обычные текстовые ячейки; для отсутствующих данных программы нужно предусмотреть явное состояние содержимого, а не подставлять выдуманное число.

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

### Сортировка — отдельное улучшение

В USWDS сортируемые заголовки поддерживаются атрибутом data-sortable. Для сортируемой таблицы также нужен usa-table__announcement-region с aria-live="polite". Для числовых данных может потребоваться data-sort-value, чтобы отформатированная сумма сортировалась как значение, а не по алфавиту. В этом сравнении сортировка не включена: демонстрация предназначена для фильтрации по тематике в трёх строках.

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

## USWDS: требования в раскрывающихся блоках дизайн-системы

### Свяжите идентификаторы кнопки и панели

У каждой usa-accordion__button атрибут aria-controls указывает на связанную с ней usa-accordion__content. Встроенный механизм JavaScript обновляет aria-expanded и видимость. Модификатор с рамкой меняет оформление контейнера; data-allow-multiple позволяет одновременно раскрыть несколько разделов.

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

- Заголовок описывает тему панели.

- Кнопка содержит состояние раскрытия и целевой идентификатор.

- Идентификатор панели остаётся неизменным при изменении её видимости.

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

## USWDS: установите всё дерево ресурсов дизайн-системы

### Сохраняйте пути, используемые скомпилированным CSS

Установите @uswds/uswds@3.14.0 и скопируйте каталог dist, сохранив структуру папок css, js, img и fonts. Таблица стилей использует относительные пути к значкам и шрифтам. Иначе страница может выглядеть почти правильно, но на ней не отобразятся символы раскрывающихся блоков или нужные шрифты.

Подключите uswds-init.min.js в секции head, затем таблицу стилей, а uswds.min.js — после разметки body. Библиотека включает поддержку аккордеона. Поле поиска и фильтр по тематике ниже реализованы на уровне приложения и не обращаются к удалённому сервису поиска.

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

## USWDS: фильтрация и восстановление исходного состояния дизайн-системы

### Запрос должен показывать результат

Для элементов управления используются стандартные стили label, input, select и button; приложение сопоставляет запрос и выбранную тематику с тремя вымышленными записями. Количество результатов выводится в области с вежливым оповещением. Если совпадений нет, отображаются пояснение и кнопка сброса; введённый запрос сохраняется.

В демонстрации намеренно разделены поиск возможностей и подача заявки. Раскрытие материалов для подготовки не создаёт черновик и не отмечает требование как выполненное. Для настоящей заявки на финансирование потребуются правила конкретной программы, аутентификация и сохранение состояния транзакции.

1. Выберите категорию «Окружающая среда» и проверьте, какая возможность останется.

2. Введите фразу без совпадений и нажмите «Сбросить фильтры».

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

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

## USWDS: примеры компонентов дизайн-системы

### Дополнительный аккордеон с рекомендациями по подготовке

Раскрывающийся блок USWDS с явной связью между кнопкой и панелью.

```
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>
```

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

### Таблица для сравнения возможностей

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

```
<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>
```

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

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

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

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>
```

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

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

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

## USWDS: настройка AI-агента в дизайн-системе

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

Сохраните структуру каталога dist, чтобы CSS мог находить шрифты и значки. Это способ установки предварительно скомпилированного дистрибутива; для настройки темы нужна сборка Sass. ZIP-архив с полным рабочим примером в разделе «Источники» содержит также точные зависимости примера и весь документ. Распакуйте его, выполните python3 -m http.server 8080 в этом каталоге, затем откройте http://localhost:8080/uswds.html. Не открывайте примеры с модулями через file://.

```
npm install @uswds/uswds@3.14.0
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/

<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
```

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

```
Создайте вымышленную таблицу для сравнения возможностей в сфере исследований с использованием USWDS 3.14.0. Подключите полное дерево ресурсов dist, скрипт инициализации, таблицу стилей компонентов и JavaScript. Представьте сопоставимые записи в семантической таблице с подписью и заголовками столбцов; добавьте поиск с меткой и фильтрацию по категориям, количество результатов, полезное состояние при отсутствии совпадений и сброс фильтров. Используйте стандартные аккордеоны для дополнительных требований, но оставьте важную информацию для сравнения видимой. Сохраните документированные единицы отступов и соответствия ролей темы; обозначьте переопределение системных шрифтов. Не превращайте эту страницу в процесс подачи заявки и не создавайте впечатление, что здесь подтверждаются реальные критерии участия или обязательства по выделению гранта.
```

## USWDS: источники и границы дизайн-системы

Независимое исследование компонентов USWDS 3.14.0. Записи о возможностях вымышлены; официальная символика федеральных органов и точка подачи заявок не используются. Helvetica/Arial и Georgia — локальные замены шрифтов, а не шрифтовые ресурсы по умолчанию USWDS.

- Шаги отступов Числовые единицы и именованные ширины.

- Роли семейств шрифтов Сопоставление токенов шрифтов и ролей.

- Цвета темы Псевдонимы и настройки по умолчанию.

- Таблица Семантическое сравнение и прокрутка.

- Accordion Состояния панелей и разметка.

- Настройка для разработчиков Дистрибутив и пути к ресурсам.

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

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

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

Создавайте понятные сценарии получения услуг с семантическими токенами VA и нативным списком Process List: наглядными пояснениями к этапам, содержательными обозначениями статуса и дополнительными сведениями, не мешающими воспринимать основной маршрут.

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

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

### Codex

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


- [Справочник по реализации](https://designsystem.digital.gov/components/accordion/)
- [Источник](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Источник](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Источник](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Источник](https://designsystem.digital.gov/components/accordion/)
- [Прочитать вспомогательную спецификацию](https://designsystem.digital.gov/documentation/developers/)
- [Справочник по коду](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Прочитать вспомогательную спецификацию](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Справочник по коду](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Прочитать вспомогательную спецификацию](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Прочитать вспомогательную спецификацию](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Прочитать вспомогательную спецификацию](https://designsystem.digital.gov/components/table/)
- [Прочитать вспомогательную спецификацию](https://designsystem.digital.gov/components/accordion/)
- [Справочник по коду](https://designsystem.digital.gov/components/accordion/)
- [Справочник по коду](https://designsystem.digital.gov/components/table/)
- [Шаги отступов Числовые единицы и именованные ширины.](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Роли семейств шрифтов Сопоставление токенов шрифтов и ролей.](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Цвета темы Псевдонимы и настройки по умолчанию.](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Таблица Семантическое сравнение и прокрутка.](https://designsystem.digital.gov/components/table/)
- [Accordion Состояния панелей и разметка.](https://designsystem.digital.gov/components/accordion/)
- [Настройка для разработчиков Дистрибутив и пути к ресурсам.](https://designsystem.digital.gov/documentation/developers/)