Дизайн-система 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 Примеры компонентов дизайн-системы

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

npm install --save-exact @cfpb/[email protected]
# 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>

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