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

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

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

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

В CMS Core 18.1.0 опубликованы core-theme.css и компонент CSS. Если общие описания документации расходятся с версионированным артефактом, приоритет у артефакта. В предварительном просмотре используется Arial как резервный шрифт и оболочка приложения шириной 48rem.

### Роли цветов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --color-base | #262626 | Текстовое значение из версионированной сборки Core; в старом описании указано #333. |
| --color-primary / primary-darker | #0071bc / #004f84 | Справочные значения для действий и более тёмных состояний взаимодействия. |
| --color-error / success | #e31c3d / #12890e | Всегда сопровождайте цвет состояния текстовым пояснением. |
| --color-border | #d9d9d9 | Также используется в --review__border-color. |
| --color-focus-dark / focus-light | #bd13b8 / #ffffff | Справочные значения для фокуса в теме. |
| --color-background / gray-lightest | #ffffff / #f2f2f2 | Страница и светлые вспомогательные поверхности. |
### Типографика

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --font-family-body / heading | Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif | Точный порядок шрифтов в версии 18.1.0; в предварительном просмотре используется Arial. |
| --font-size-sm / md / lg / xl / 2xl | .875 / 1 / 1.125 / 1.3125 / 1.5rem | 14 / 16 / 18 / 21 / 24px при корневом размере 16px. |
| --font-size-3xl--mobile / 3xl | 1.875 / 2.25rem | 30 / 36px. |
| --font-size-4xl--mobile / 4xl | 2.25 / 3rem | 36 / 48px. |
| --font-size-5xl--mobile / --tablet / 5xl | 2.25 / 3 / 3.75rem | 36 / 48 / 60px. |
| --font-line-height-base / heading | 1.5 / approximately 1.3 | В теме значение для заголовка хранится как 1.2999999523162842. |
### Отступы, сетка и форма

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --spacer-half / 1 / 2 / 3 | 4 / 8 / 16 / 24px | Числовые модификаторы утилит умножаются на 8px. |
| --spacer-4 / 5 / 6 / 7 | 32 / 40 / 48 / 56px | Более крупный ритм компоновки. |
| --grid-columns | 12 | Композиция сетки. |
| --grid-gutter-width / grid-form-gutter-width | 32 / 16px | В актуальной теме общие отступы и отступы полей формы заданы отдельно. |
| --site-max-width | 1104px | Справочное значение контейнера темы. |
| --site-margins / site-margins-mobile | 3rem / 1.5rem | 48 / 24px при стандартном корневом размере. |
| --radius-default / medium / large | 3 / 4 / 8px | Единого универсального значения скругления нет. |
### Границы адаптивных режимов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| sm | 544px | Префикс для малых экранов, применяемый в подходе mobile-first. |
| md | 768px | Префикс для средних экранов. |
| lg | 1024px | Префикс для больших экранов. |
| xl | 1280px | Префикс для очень больших экранов. |
## Полное руководство дизайн-система CMS

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

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

## Выберите Core или дочернюю тему дизайн-система CMS

### Пакет объединяет семейство тем, а не одну фирменную тему оформления

> CMS Core предоставляет общие основы интерфейса, а для Healthcare.gov, Medicare.gov и CMS.gov существуют отдельные дочерние дизайн-системы. В этом справочнике зафиксированы версия @cmsgov/design-system 18.1.0 и её core-theme.css. Наличие цвета, логотипа или компонента в дочерней теме не означает, что это правило Core. В примере намеренно используется нейтральный сценарий настройки уведомлений; официальные правительственные баннеры и элементы фирменного стиля не включены.

Доступны пути интеграции через React, Preact, веб-компоненты и ручной вариант с HTML/CSS. В документации рекомендуется использовать компоненты JavaScript, если полезно их встроенное поведение; набор веб-компонентов — это подмножество. В нашем автономном примере используются настоящие Core CSS и приложение JavaScript для редактирования, сохранения и отмены. Мы не утверждаем, что CSS реализует валидацию, маршрутизацию или сохранение данных.

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

## Дизайн-система CMS Изучите версионированную тему

### Подключите обе таблицы стилей

index.css задаёт правила компонентов, а core-theme.css содержит их переменные. Без темы корректные имена классов могут ссылаться на неопределённые значения. И наоборот, подключение темы Medicare при описании типографики Core создаёт вводящее в заблуждение впечатление, даже если страница отображается. В примере подключены оба ресурса из одного выпуска 18.1.0.

Числовые значения в этом руководстве взяты из версионированной темы. Например, --color-base равен #262626, хотя в общем описании типографики по-прежнему упоминается #333. В теме значение --grid-gutter-width соответствует --spacer-4 (32px), а --grid-form-gutter-width — --spacer-2 (16px). Общее утверждение о полях сетки размером 16px не следует применять ко всем вариантам сетки. Эти различия важны при воспроизведении реального макета.

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

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

### Одно семейство шрифтов, явные размеры для разных ролей

В Core для заголовков и основного текста используется Open Sans. Цепочка резервных шрифтов в теме 18.1.0 включает Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial и sans-serif. В локальном примере явно указан Arial, чтобы не запрашивать внешние файлы шрифтов; поэтому его метрики отличаются от полной официальной типографики.

Базовый размер основного текста — 1rem, межстрочный интервал — 1.5. Переменные размеров включают 14, 16, 18, 21 и 24px при корневом размере 16px, а затем — более крупные адаптивные роли: 3xl — 30px на мобильных устройствах и 36px на остальных; 4xl — 36px на мобильных устройствах и 48px на остальных; 5xl — 36px на мобильных устройствах, 48px на планшетах и 60px для самого крупного варианта. Это значения темы, а не разрешение использовать самый крупный размер для каждого заголовка страницы. Используйте семантические заголовки и соответствующий класс утилиты или сопоставление ds-content.

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

## Дизайн-система CMS Отступы и адаптивный макет

### Шаг 8 пикселей и половинный шаг

Значения --spacer-1 — --spacer-7 соответствуют диапазону 8–56px с шагом 8px. --spacer-half равен 4px, а --spacer-none — нулю. Например, класс ds-u-margin--2 задаёт отступ 16px, а не 2rem. Встроенный CSS строки отзыва задаёт вертикальные отступы 16px и нижнюю границу толщиной 2px; для окружающей формы не нужны дополнительные карточки с отступами вокруг каждого ответа.

Максимальная ширина контейнера сайта Core — 1104px; в версионированной теме внешние отступы сайта составляют 3rem, а на мобильных устройствах — 1.5rem. В примере используется более узкая область для чтения шириной 48rem, подходящая для двух коротких строк отзыва. Это ширина, заданная приложением, а не новый токен CMS.

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

### Используйте префиксы контрольных точек CMS

Документированные границы: sm — 544px, md — 768px, lg — 1024px и xl — 1280px. Такие префиксы поддерживаются макетами и некоторыми группами классов утилит, например ds-u-lg-display--none. Не следует считать, что у каждого класса компонента есть адаптивный вариант. На мобильных устройствах длинное значение в отзыве должно переноситься, не вытесняя кнопку Edit за пределы экрана; если нужно, в предпросмотре также размещается в столбец строка действий приложения.

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

## Дизайн-система CMS Структура строки отзыва и API

### Метка, значение и контекстная ссылка для редактирования

Компонент Review оборачивает один элемент, который можно проверить. По умолчанию для его заголовка используется h3; это можно изменить с помощью headingLevel. Далее следуют дочерние элементы, представляющие текущее значение. Свойство editHref задаёт адрес назначения; без него ссылка для редактирования не отображается. Свойство editAriaLabel задаёт понятное доступное имя повторяющейся ссылки Edit. Объявление типов версии 18.1.0 также содержит editText, onEditClick и editContent; пользовательское содержимое editContent заменяет ссылку по умолчанию.

В примере React используются настоящие свойства, проверенные по опубликованному объявлению типов. Указанные пути — иллюстративные маршруты приложения, которые должна реализовать использующая компонент программа. Альтернативный вариант на нативном CSS показывает структуру ds-c-review, ds-c-review__content и ds-c-review__heading; управление навигацией и обновлениями по-прежнему остаётся задачей приложения.

```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}
```

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

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

## Дизайн-система CMS Редактирование отдельной строки или раздела

### Сделайте переход к исправлению предсказуемым

В шаблоне формы CMS для проверки данных различаются редактирование отдельного ответа и редактирование целого раздела. Форматы уведомлений и языковые предпочтения, которые не зависят друг от друга, удобно редактировать по отдельности. Связанные ответы — например, сведения о членах семьи и их родственных отношениях — может быть лучше редактировать всем разделом, чтобы приложение могло одновременно проверить их согласованность. В официальном руководстве прямо указано, что размещение кнопки Edit для всего раздела рядом с его заголовком не реализовано самим компонентом Review.

В предпросмотре для выбранной строки открывается отдельная группа полей. При нажатии Save обновляется только это значение, а фокус возвращается на кнопку Edit, с которой началось редактирование; Cancel отменяет черновик. Пока редактор открыт, видимый ответ не меняется. Локальное сообщение о состоянии подтверждает фактическое изменение, а не сообщает об успехе только потому, что появилась форма редактирования.

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

- Задайте для каждой строки контекстное доступное имя для редактирования, даже если видимая ссылка называется Edit.

- Если связанные ответы нужно менять одновременно, реализуйте редактирование раздела вне компонента для одной строки.

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

## Дизайн-система CMS Проверка данных, завершение и достоверность

### Экран проверки — не подтверждение отправки

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

В Core используются основной синий #0071bc, красный цвет ошибки #e31c3d, зелёный цвет успеха #12890e и серый цвет границы #d9d9d9. Сохранённое предпочтение обозначается не только цветом, но и текстом. Для фокуса используются светлые и тёмные эталонные цвета темы; не убирайте индикатор, даже если оформляете Edit как минималистичный элемент управления. До итогового сообщения можно добраться с клавиатуры, и оно не скрывает строки отзыва.

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

## Дизайн-система CMS Безопасная установка и расширение

### Полный путь интеграции CSS и путь с настоящим компонентом

Установите закреплённую версию пакета и подключите css/index.css и css/core-theme.css через экспорты пакета. Потребители React импортируют Review из корневого модуля пакета; для Preact доступна точка входа /preact. Для примера компиляция Sass не требуется. При копировании статического CSS сохраните относительные пути к шрифтам и изображениям или, как в этом примере, явно выберите поддерживаемый резервный вариант.

Пространство имён CMS разделяет макеты ds-l-, компоненты ds-c- и утилиты ds-u-. Не следует оформлять классы приложения так, будто это официальные компоненты, не описанные в документации. В предпросмотре область для чтения и встроенный редактор собраны локально, а в строке отзыва и кнопках используются стили из дистрибутива.

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

2. Свяжите каждое действие редактирования с управляемым редактором; после сохранения или отмены возвращайте фокус.

3. Проверьте изменённые значения, отменённые черновики и окончательное локальное завершение на широком и мобильном экранах.

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

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

### Две независимые строки отзыва

Настоящие свойства React версии 18.1.0; маршруты редактирования по ссылкам реализуют использующие компонент приложения.

```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}
```

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

- Для заголовка Review по умолчанию используется h3.

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

### Структура отзыва на нативном CSS

Удобный вариант ручной интеграции HTML, если взаимодействиями управляет приложение.

```
<div class="ds-c-review">
  <div class="ds-c-review__content">
    <h3 class="ds-c-review__heading">Notice format</h3>
    <p>Large print</p>
  </div>
  <a href="/preferences/notice-format" aria-label="Edit notice format">Edit</a>
</div>
```

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

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

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

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</script></body></html>
```

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

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

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

## Настройка агента дизайн-система CMS

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

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

```
// npm install @cmsgov/design-system@18.1.0
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';

export default function ContactReview() {
  return <section aria-labelledby="contact-title">
    <h2 id="contact-title">Contact preferences</h2>
    <Review heading="Notice format" headingLevel="3"
      editHref="/preferences/notice-format"
      editAriaLabel="Edit notice format">
      <p>Large print</p>
    </Review>
    <Review heading="Preferred language" headingLevel="3"
      editHref="/preferences/language"
      editAriaLabel="Edit preferred language">
      <p>English</p>
    </Review>
  </section>;
}
```

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

```
Создайте экран проверки данных на CMS Core 18.1.0. Подключите index.css и core-theme.css вместе. Для каждого независимо редактируемого ответа используйте Review со свойствами heading, children, editHref и editAriaLabel; редактирование всего раздела реализуется отдельно на уровне приложения. Сохраняйте порядок вопросов и видимые сохранённые значения, пока редактируются черновики. После сохранения или отмены возвращайте фокус и сообщайте о фактических изменениях. Используйте токены Core, включая основной цвет текста #262626, шаг отступов 8px с половинным шагом 4px, общий межколоночный интервал сетки 32px и межколоночный интервал формы 16px. Не смешивайте логотипы дочерних тем и не создавайте впечатление, что локальная проверка отправляет заявление.
```

## Дизайн-система CMS Источники и границы охвата

Техническая справка по теме Core. Приведены вымышленные значения предпочтений и изменения, сохраняемые только локально; рекомендации о праве на медицинские услуги, связь с CMS и отправка формы не подразумеваются.

- CMS Design System Официальное введение, основы и каталог компонентов.

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

- Проверка данных формы Шаблон для проверки сведений в форме.

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

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

### Det Fælles Designsystem

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

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

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

### Designsystemet

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


- [Справочник по реализации](https://design.cms.gov/components/review/)
- [Источник](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css)
- [Источник](https://design.cms.gov/foundation/layout-grid/responsive-design/)
- [Прочитать вспомогательную спецификацию](https://design.cms.gov/getting-started/for-developers/)
- [Прочитать вспомогательную спецификацию](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css)
- [Прочитать вспомогательную спецификацию](https://design.cms.gov/foundation/spacing/)
- [Прочитать вспомогательную спецификацию](https://design.cms.gov/foundation/layout-grid/responsive-design/)
- [Справочник по коду](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/react-components/types/Review/Review.d.ts)
- [Прочитать вспомогательную спецификацию](https://design.cms.gov/components/review/)
- [Прочитать вспомогательную спецификацию](https://design.cms.gov/patterns/Forms/form-review/)
- [Справочник по коду](https://design.cms.gov/components/review/)
- [CMS Design System Официальное введение, основы и каталог компонентов.](https://design.cms.gov/)
- [Руководство для разработчиков Официальные варианты интеграции и рекомендации по пакетам.](https://design.cms.gov/getting-started/for-developers/)
- [Проверка данных формы Шаблон для проверки сведений в форме.](https://design.cms.gov/patterns/Forms/form-review/)