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

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

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

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

Скомпилированные CSS и ES-модуль пакета CFPB 5.10.2; актуальные общедоступные рекомендации по базовым стилям. В демонстрации используются нативные классы Expandable и JavaScript. Глобальные базовые CSS дословно скопированы из строки базовых стилей опубликованного модуля; предусмотрен системный запасной шрифт. Значения font-size-adjust и межстрочные интервалы заголовков ниже соответствуют версии кода, поскольку таблица в документации отличается. Логотип CFPB не используется, принадлежность к организации не подразумевается.

### Цвета и фактические пользовательские свойства

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --black | #101820 | Основной цвет текста; используйте зелёный как фирменный акцент, а не для основного текста. |
| --green | #20aa3f | Акцент заголовка-слага и пример институциональной палитры. |
| --pacific | #0072ce | Цвета ссылок и интерактивных элементов. |
| --gray-5 / --gray-40 | #f7f8f9 / #b4b5b6 | Фон и граница раскрывающегося элемента в версии 5.10.2. |
| --red / --gold | #d14124 / #ff9e1b | Вспомогательная палитра; статус нельзя обозначать только цветом, без текста. |
### Типографика из базовых стилей этой версии

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Current brand font | Source Sans 3 | В июле 2025 года Avenir Next был заменён; в демонстрации используется системный запасной шрифт system-ui из пакета. |
| Body | 16px / 1.375 | Высота строки 22px при стандартном размере корневого элемента браузера. |
| H1 | 34px / 1.25; weight 600 | 26px при ширине экрана <=600px; высота строки кода на компьютере — 42.5px. |
| H2 | 26px / 1.25; weight 600 | 22px при ширине экрана <=600px. |
| H3 / H4 | 22px weight 400 / 18px weight 500 | 18px / 16px на небольших экранах; высота строки в обоих случаях — 1.25. |
| H5 | 14px / 1.25; weight 600 | Верхний регистр, межбуквенный интервал 1px. |
| Normalization | base .517; step .0054 | Пользовательские свойства этой версии задают постепенно увеличивающиеся корректировки для заголовков; это отличается от упрощённой таблицы базовых стилей. |
### Сетка, вертикальный ритм и адаптивные диапазоны

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Grid | 12 columns; 30px gutters | Модель компоновки из документации; в демонстрации создан редакционный макет с колонками 8/4. |
| Maximum width | 1230px | Используйте адаптивные внешние поля вместо фиксированной ширины содержимого. |
| Edge spacing | 15px mobile; 30px tablet/desktop | Сохраняйте удобное для чтения пространство на узких экранах. |
| Breakpoints | 0–600, 601–900, 901–1020, 1021–1200, 1201+ | Проверенные экспортированные значения varsBreakpoints из модуля 5.10.2. |
| Text rhythm | 15px paragraph gap; 30px stacked headings | Редакционная система отступов, а не утверждение об универсальной шкале токенов с шагом 4px. |
| Measure | 66 characters ideal; 45–90 range | Рекомендации по шрифту для непрерывного чтения; в предпросмотре максимальная ширина составляет 66ch. |
### Анатомия раскрывающегося элемента и его работа

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Root | o-expandable | Модификаторы фона и границы можно выбирать независимо друг от друга. |
| Required descendants | __header, __label, __content | Заголовок — нативная кнопка. Во время выполнения система добавляет хуки поведения и состояние ARIA. |
| Initialization | Expandable.init(container) | Возвращает инициализированные экземпляры для соответствующих корневых элементов. |
| Instance API | expand(), collapse(), isExpanded(), getLabelText() | Проверено для опубликованной версии 5.10.2, а не для более старой документации по toggleTargetState. |
| Initial expanded state | o-expandable--onload-open | Задайте до инициализации; не переопределяйте вручную классы видимости, которыми управляет система выполнения. |
| Group choice | o-expandable-group--accordion | Взаимное исключение включается по желанию. В этом примере панели можно открывать одновременно, чтобы сравнивать их содержимое. |
## Дизайн-система CFPB Полное руководство

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

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

## Дизайн-система CFPB Область применения CFPB

### Информация для потребителей прежде оформления

> CFPB сочетает редакционную информационную архитектуру с компонентами форм и раскрывающихся панелей. Сетка, иерархия шрифтов и небольшие заголовки-рубрики прописными буквами не менее важны, чем узнаваемый зелёный цвет. В примере представлен оригинальный рабочий лист для чтения: важная информация остаётся на виду, а дополнительные пояснения размещаются в нативных Expandables. Это не финансовая рекомендация, не форма подачи жалобы и не государственная услуга.

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

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

## Дизайн-система CFPB Типографика и ритм чтения

### Source Sans 3 и различия между версиями

В актуальных рекомендациях по шрифтам указан Source Sans 3, пришедший на смену Avenir Next в июле 2025 года. В локальном примере нет зависимости от шрифтов, размещённых на внешнем сервере, — намеренно используется резервный системный шрифт, заданный в скомпилированных стилях. Для полноценной реализации фирменного оформления следует подключать разрешённые файлы шрифтов через документированный mixin для лицензированных шрифтов.

Таблица заголовков в общедоступной документации и строка базовых стилей в актуальной версии различаются. В пакете 5.10.2 для H1 задан размер 2.125em и межстрочный интервал 1.25 — при корневом размере 16px это соответствует 34/42.5, а не высоте строки 60px из таблицы. Приведённый выше пример основан на исполняемом исходном коде. Нормализация заголовков также использует поправки для каждого уровня; не превращайте упрощённую таблицу в глобальное переопределение.

Ограничивайте длину строк абзаца примерно 66 символами и оставляйте между абзацами отступ 15px. Заголовки оформляются в обычном регистре, за исключением компактного варианта H5/рубрики. Так статью с рекомендациями удобно просматривать, и при этом не приходится помещать каждый абзац в карточку.

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

## Дизайн-система CFPB Цвет и редакционное оформление

### Используйте цвет по назначению, а не просто выбирайте зелёный

В скомпилированном CSS доступны --black, --green, --pacific и дополнительные палитры оттенков. Для текста используется чёрный цвет; Pacific служит более узнаваемым маркером интерактивных элементов. Светло-серый фон Expandable отделяет область для чтения, а не обозначает отключённое состояние. Нативные заголовки-рубрики сочетают тонкую серую линию на всю ширину с коротким более толстым зелёным сегментом.

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

- Используйте --gray-5 для неброского фона раскрывающейся панели и --gray-40 для её обводки.

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

- Используйте знаки фирменной идентификации только при наличии разрешения; лицензия на палитру не даёт права создавать впечатление официальной связи.

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

## Дизайн-система CFPB Двенадцать колонок и удобная плотность

### Статья с рабочим полем по соседству

В документированной сетке — двенадцать колонок, фиксированные промежутки 30px и максимальная ширина 1230px. На мобильных устройствах внешние отступы составляют 15px, а на более крупных экранах — 30px. В примере эта сетка используется для области чтения шириной в восемь колонок и рабочего списка из четырёх колонок при ширине от 901px; ниже рабочий список располагается под статьёй. Такое разделение — вариант компоновки на основе опубликованной сетки, а не универсальный официальный шаблон страницы.

Максимальная ширина длинного текста остаётся равной 66ch, даже если страница может быть шире. Кнопки переносятся, а у боковой панели нет фиксированной высоты или собственной прокрутки. При раскрытии пояснений увеличивается обычная высота документа, поэтому та же компоновка подходит для встроенного примера на странице ресурсов.

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

## Дизайн-система CFPB Структура нативного Expandable

### Разделяйте элемент управления и дополнительное содержимое

Корневой элемент устаревшей структуры Expandable содержит кнопку __header, элемент __label и область __content. Кнопка получает фокус. В этом примере её подпись задаётся элементом span, а декоративные значки плюса и минуса скрыты от доступного имени. При инициализации библиотека назначает состояние раскрытия и хуки поведения; приложение не дублирует эти изменения.

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

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

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

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

## Дизайн-система CFPB Поведение раскрывающихся панелей и списка заданий

### Два независимых типа состояния

Состоянием раскрывающихся панелей управляет нативная библиотека. Рабочий лист хранит три обычных значения флажков и обновляет счётчик соответственно. Открытие панели не отмечает задание как выполненное, а установка флажка не сворачивает пояснения. Это намеренно разделённые модели: видимость не свидетельствует о понимании.

Экземпляр версии 5.10.2 предоставляет методы expand, collapse и isExpanded. На общедоступной странице Expandables есть устаревшая ссылка на toggleTargetState, поэтому в этом руководстве используется фактический интерфейс версии API. Кнопки «Развернуть всё» и «Свернуть всё» обходят инициализированные экземпляры. Здесь удобнее независимые панели: читатель может сопоставлять два пояснения.

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

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

## Дизайн-система CFPB Скомпилированные ресурсы и базовые стили

### ES-модуль, а не классический скрипт

Установите пакет закреплённой версии, скопируйте два скомпилированных ресурса в каталог статических файлов и импортируйте Expandable через тег скрипта типа module. В опубликованный index.js версии 5.10.2 входят экспорты ES, поэтому тег классического скрипта из старого примера интеграции приведёт к синтаксической ошибке. Кроме того, он не инициализирует корневые элементы устаревшей структуры Expandable автоматически.

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

Если вы собираете исходный SCSS с ссылками на значки, добавьте описанную в документации проекта замену SVG средствами PostCSS. В скомпилированном снимке эти ссылки уже обработаны. Не создавайте самодельную сборку только на Sass, в результате которой останется неопределённым --cfpb-background-icon-svg.

1. Установите версию 5.10.2 и храните TERMS.md рядом с локально обслуживаемыми ресурсами.

2. Подключите таблицу стилей компонента CSS вместе с выбранными глобальными базовыми стилями; отдельно настройте шрифты.

3. Используйте импорт модуля, инициализируйте контейнер после добавления его разметки, а затем привяжите действия приложения к возвращённым экземплярам.

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

## Дизайн-система CFPB Проверьте процесс чтения

### Проверка доступности не ограничивается раскрывающейся панелью

На узком экране размер основного заголовка уменьшается благодаря нативным базовым стилям, а список заданий располагается под статьёй. На настольном экране в двухколоночной компоновке рядом видны дополнительные пояснения и рабочие заметки. Проверьте оба варианта со всеми раскрытыми панелями, а не только со свёрнутыми.

Нажимайте Tab, чтобы перейти к каждой нативной кнопке, а Enter или пробел — чтобы переключить её состояние. Убедитесь, что библиотека обновляет aria-expanded, а скрытое содержимое больше не включается в порядок перехода по Tab. Затем отметьте два задания, разверните и сверните все пояснения и проверьте, что счётчик остаётся равным двум до сброса. Такие проверки позволяют обнаружить конфликты между состояниями приложения и библиотеки, которые не видны на снимке экрана.

В этом локальном примере нет хранилища данных, аналитики, отправки данных по сети или настоящих персональных данных. Само по себе использование нативных компонентов не подтверждает доступность готового сайта: в сервисе, который их применяет, всё равно нужно проверить контрастность, содержимое, поддержку браузерами и работу со вспомогательными технологиями.

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

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

### Нативный Expandable

Обязательная устаревшая структура, декоративные маркеры и дополнительные пояснения.

```
<div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div>
```

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

### Инициализация и управление раскрывающимися панелями

Используйте модуль версии 5.10.2 и возвращённые экземпляры; глобальные базовые стили подключаются отдельно.

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

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

- Опубликованная версия 5.10.2 использует ESM. Не загружайте её как классический скрипт.

- В примере используются дословно извлечённые базовые стили пакета, описанные в SOURCE.md поставщика.

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

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

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>CFPB reading worksheet specimen</title><link rel="stylesheet" href="vendor/cfpb-5.10.2/index.css"><link rel="stylesheet" href="vendor/cfpb-5.10.2/base-extracted.css"><style>*{box-sizing:border-box}body{margin:0;background:#fff}main{max-width:1230px;margin:auto;padding:30px}header{max-width:66ch;margin-bottom:30px}.layout{display:grid;grid-template-columns:2fr 1fr;gap:30px}.article{min-width:0}.o-expandable{margin:15px 0}.toolbar{display:flex;gap:15px;flex-wrap:wrap;margin:15px 0}.notes{border-top:5px solid var(--gray-40);padding-top:15px}.notes label{display:flex;gap:10px;margin:20px 0;align-items:flex-start}.notes input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--pacific)}.o-expandable__content p{max-width:66ch}.eyebrow{color:var(--gray);font-size:14px}.note{font-size:14px;margin-top:30px;color:var(--gray)}button{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--pacific);outline-offset:3px}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){main{padding:20px 15px}}</style><main><header><p class="eyebrow">Independent educational specimen · CFPB components</p><h1>Make your question easier to answer</h1><p>Use this reading worksheet to organize a question about an unfamiliar document. No information is submitted or saved.</p></header><div class="layout"><section class="article" id="guide"><div class="m-slug-header"><h2 class="m-slug-header__heading">Before a conversation</h2></div><p>A useful question identifies the document, quotes the unclear wording, and says what you want explained. Keep account numbers and other private details out of this practice worksheet.</p><div class="toolbar"><button id="open-all" class="a-btn a-btn--secondary">Open all explanations</button><button id="close-all" class="a-btn a-btn--secondary">Close all</button></div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Keep the question specific</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>Describe the document and the words you want explained.</p>
  </div>
</div><div class="o-expandable o-expandable--background o-expandable--border">
  <button class="o-expandable__header" type="button">
    <span class="o-expandable__label">Separate a question from a request</span>
    <span class="o-expandable__cues" aria-hidden="true">
      <span class="o-expandable__cue-open">+</span>
      <span class="o-expandable__cue-close">−</span>
    </span>
  </button>
  <div class="o-expandable__content">
    <p>“What does this label mean?” asks for an explanation. “Please send a copy” asks for an action. Writing them separately makes the desired response easier to identify.</p>
  </div>
</div><p class="note">Original practice content. This example does not provide financial advice or represent a CFPB service.</p></section><aside class="notes"><h2>Your working notes</h2><p>Use the checklist as a local memory aid.</p><label><input type="checkbox">I can name the document I am asking about.</label><label><input type="checkbox">I have identified the wording I want explained.</label><label><input type="checkbox">I know whether I need an explanation or an action.</label><p id="count" role="status" aria-live="polite">0 of 3 notes checked</p><button id="reset" class="a-btn">Reset worksheet</button></aside></div></main><script type="module">import {Expandable} from './vendor/cfpb-5.10.2/index.js';const panels=Expandable.init(document.querySelector('#guide'));document.querySelector('#open-all').onclick=()=>panels.forEach(x=>x.expand());document.querySelector('#close-all').onclick=()=>panels.forEach(x=>x.collapse());const checks=[...document.querySelectorAll('input[type=checkbox]')];const update=()=>document.querySelector('#count').textContent=checks.filter(x=>x.checked).length+' of 3 notes checked';checks.forEach(x=>x.onchange=update);document.querySelector('#reset').onclick=()=>{checks.forEach(x=>x.checked=false);update();panels.forEach(x=>x.collapse())};window.demoReady=true;</script></html>
```

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

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

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

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

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

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

```
npm install --save-exact @cfpb/cfpb-design-system@5.10.2
# Copy the published compiled files as static assets:
mkdir -p public/vendor/cfpb
cp node_modules/@cfpb/cfpb-design-system/dist/index.css public/vendor/cfpb/
cp node_modules/@cfpb/cfpb-design-system/dist/index.js public/vendor/cfpb/

# In the HTML document:
<link rel="stylesheet" href="/vendor/cfpb/index.css">
<!-- Supply project global/base typography separately. -->
<script type="module">
  import { Expandable } from '/vendor/cfpb/index.js';
  const panels = Expandable.init(document.querySelector('#guide'));
  document.querySelector('#open-all').addEventListener('click', () => {
    panels.forEach(panel => panel.expand());
  });
  document.querySelector('#close-all').addEventListener('click', () => {
    panels.forEach(panel => panel.collapse());
  });
</script>
```

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

```
Создайте самостоятельный учебный редакционный лист на основе материалов CFPB, используя настоящий модуль Expandable версии 5.10.2. Добавьте обязательную структуру из заголовка, подписи и содержимого, отдельные действия «Открыть всё» и «Закрыть всё», а также обычный список флажков, значения которого сохраняются при сворачивании и разворачивании разделов. Используйте композицию 8/4 на двенадцатиколоночной сетке, которая перестраивается в одну колонку при ширине менее 901px, поля по краям 15px на мобильных устройствах и ширину текстовой колонки 66ch. Базовую типографику задайте отдельно от компонента CSS. Не добавляйте символику CFPB, финансовые рекомендации, фиктивную отправку данных или импорты классических скриптов для ESM-сборки.
```

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

Справочник для независимой реализации. Нативные компоненты пакета не подтверждают связь с CFPB. Оригинальные учебные материалы; без финансовых рекомендаций и отправки данных. Перед повторным использованием изучите TERMS.md.

- Шрифты Текущий шрифт, нормализация и ритм чтения.

- Заголовки Адаптивная иерархия заголовков; сравните с кодом конкретной версии.

- Цвет Палитра CFPB и рекомендации по её использованию.

- Сетка Двенадцать колонок, промежутки и максимальная ширина.

- Раскрытие Структура и варианты компонента.

- Установка Интеграция пакета и исходной сборки.

- Токены Область действия нового конвейера токенов.

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

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

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

Реализуйте CMS Core с версионированными переменными темы, реальными API компонентов Review и работающим сценарием редактирования и проверки, который сохраняет ответы пользователя и фокус.

### Det Fælles Designsystem

Изучите тему DKFDS для Дании, реальные шкалы Sass и доступные шаблоны таблиц на примере полного сравнения ресурсов с сортировкой по числам, поиском по отправленному запросу и восстановлением после пустого результата.

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

Реализуйте понятную последовательность обслуживания с реальной типографикой Bootstrap Italia, адаптивной структурой Stepper и возможностью восстановить локальное состояние формы.


- [Справочник по реализации](https://cfpb.github.io/design-system/components/expandables)
- [Источник](https://cfpb.github.io/design-system/foundation/color)
- [Источник](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [Источник](https://cfpb.github.io/design-system/foundation/grid)
- [Прочитать вспомогательную спецификацию](https://cfpb.github.io/design-system/)
- [Прочитать вспомогательную спецификацию](https://cfpb.github.io/design-system/foundation/fonts)
- [Прочитать вспомогательную спецификацию](https://cfpb.github.io/design-system/foundation/color)
- [Прочитать вспомогательную спецификацию](https://cfpb.github.io/design-system/foundation/grid)
- [Справочник по коду](https://cfpb.github.io/design-system/components/expandables)
- [Прочитать вспомогательную спецификацию](https://cfpb.github.io/design-system/components/expandables)
- [Прочитать вспомогательную спецификацию](https://cdn.jsdelivr.net/npm/@cfpb/cfpb-design-system@5.10.2/dist/index.js)
- [Прочитать вспомогательную спецификацию](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Справочник по коду](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Шрифты Текущий шрифт, нормализация и ритм чтения.](https://cfpb.github.io/design-system/foundation/fonts)
- [Заголовки Адаптивная иерархия заголовков; сравните с кодом конкретной версии.](https://cfpb.github.io/design-system/foundation/headings)
- [Цвет Палитра CFPB и рекомендации по её использованию.](https://cfpb.github.io/design-system/foundation/color)
- [Сетка Двенадцать колонок, промежутки и максимальная ширина.](https://cfpb.github.io/design-system/foundation/grid)
- [Раскрытие Структура и варианты компонента.](https://cfpb.github.io/design-system/components/expandables)
- [Установка Интеграция пакета и исходной сборки.](https://cfpb.github.io/design-system/development/integrating-the-design-system-into-your-project)
- [Токены Область действия нового конвейера токенов.](https://cfpb.github.io/design-system/development/design-tokens)