# Pega Bolt — дизайн-система

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

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

## Pega Bolt — справочник по дизайну дизайн-системы

Публичный справочник Bolt Twig Pattern Lab. Значения rem адаптируются вместе с корневым размером шрифта страницы; не считайте все значения rem кратными фиксированным 16 px. Компоновка предпросмотра и иллюстрация созданы специально для этого примера.

### Роли фирменных цветов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --bolt-color-navy | #001f5f | Основной фирменный фон. |
| --bolt-color-navy-dark | #081c45 | Более тёмный фон. |
| --bolt-color-navy-xlight | #d7e2f2 | Светлая фирменная поверхность. |
| --bolt-color-teal | #10a5ac | Акцент иллюстрации; не предназначен автоматически для доступного основного текста. |
| --bolt-color-teal-xdark | #005154 | Более тёмный вариант бирюзового. |
| --bolt-color-orange | #f76923 | Тёплый акцент. |
| --bolt-color-yellow | #ffc836 | Акцент для выделения. |
### Двухосевая шкала интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --bolt-spacing-x-xsmall | 0.3875rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-x-small | 0.775rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-x-medium | 1.55rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-x-large | 3.1rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-y-xsmall | 0.3375rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-y-small | 0.675rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-y-medium | 1.35rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
| --bolt-spacing-y-large | 2.7rem | Используйте горизонтальную шкалу для интервалов по оси x, а вертикальную — по оси y. |
### Основа типографики

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --bolt-type-font-size-display | 3.75rem | Относительно адаптивного корневого размера; семантические теги заголовков выбирайте независимо. |
| --bolt-type-font-size-xxlarge | 2.35rem | Относительно адаптивного корневого размера; семантические теги заголовков выбирайте независимо. |
| --bolt-type-font-size-large | 1.4rem | Относительно адаптивного корневого размера; семантические теги заголовков выбирайте независимо. |
| --bolt-type-font-size-regular | 1rem | Относительно адаптивного корневого размера; семантические теги заголовков выбирайте независимо. |
| --bolt-type-font-size-small | 0.9rem | Относительно адаптивного корневого размера; семантические теги заголовков выбирайте независимо. |
| Font family | Open Sans | Семейства шрифтов для основного текста и заголовков в опубликованной основе. |
| Weights | 300 / 400 / 600 / 700 / 800 | Начертания от светлого до особо жирного; загружайте соответствующие файлы шрифтов. |
### Плотность страницы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Attribute | data-bolt-info-density | Задаётся только для элемента html. |
| comfortable | Larger font and spacing | Плотность, удобная для чтения. |
| regular | Default | Атрибут можно не указывать. |
| compact | Smaller font and spacing | Не используйте как локальный модификатор карточки. |
### Структура аккордеона

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| single | false by default | Значение true разрешает раскрыть только один пункт аккордеона. |
| spacing | medium | В схеме перечислены варианты: none, xsmall, small, medium, large. |
| icon_valign | center | Значение top выравнивает иконку по верхнему краю многострочного заголовка. |
| no_separator | false | Оставьте разделители, чтобы обозначить границы между вопросами. |
| box_shadow | false | Необязательная внешняя тень. |
| item.open | false | Раскройте один из пунктов при загрузке. |
| item.inactive | false | Свёрнутый пункт без иконки переключения. |
| item.trigger | Content | Замените стандартную подпись содержательным вопросом. |
## Полное руководство по дизайн-системе Pega Bolt

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

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

## Дизайн-система Pega Bolt: выберите реализацию Bolt

### У Twig и React разные контракты

> Это руководство посвящено общедоступной реализации Bolt на Twig / Pattern Lab. На текущей главной странице Bolt также представлена BoltDS React для приложений и порталов; у этих реализаций отдельная документация и собственные версии. Предварительный просмотр — независимая интерпретация HTML, а не среда выполнения Bolt.

Этот пример — страница мастер-класса с кратким описанием и дополнительными вопросами. Такой формат хорошо подходит для ориентированной на контент реализации на Twig: на первом месте редакционная иерархия, а аккордеон позволяет при необходимости открыть дополнительную информацию. В приложении на BoltDS React следует руководствоваться соответствующей документацией, а не копировать пространства имён Twig.

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

## Дизайн-система Pega Bolt: структура на основе тёмно-синего цвета и умеренные яркие акценты

### Брендированная поверхность для чтения

В опубликованную палитру входят тёмно-синий #001f5f, бирюзовый #10a5ac и оранжевый #f76923. В примере тёмно-синий используется для выразительного редакционного заголовка, а бирюзовый и оранжевый — как акценты иллюстрации. Это базовые цвета, но они не гарантируют, что любое их сочетание подойдёт для мелкого текста.

Факты о мастер-классе размещены на белой и светло-синей поверхностях. Декоративная ветвящаяся схема иллюстрирует мастер-класс по упрощению маршрута обслуживания; это оригинальная иллюстрация, а не логотип Pega и не официальная схема.

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

## Дизайн-система Pega Bolt: гибкая типографика и удобная для чтения ширина строки

### Значения в rem не соответствуют фиксированным значениям в пикселях

В Bolt заданы следующие размеры: обычный — 1rem, крупный — 1.4rem, xxlarge — 2.35rem, display — 3.75rem. Размер корневого шрифта меняется в зависимости от области просмотра и плотности пикселей, поэтому пересчёт всей таблицы по фиксированному основанию в 16 px исказит задуманное поведение.

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

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

## Дизайн-система Pega Bolt: горизонтальный и вертикальный ритм различаются

### Не заменяйте их универсальной шкалой с шагом в восемь пунктов

Средний горизонтальный отступ составляет 1.55rem, а средний вертикальный — 1.35rem. Для крупных отступов различие сохраняется: 3.1rem и 2.7rem соответственно. Используйте шкалу x между соседними элементами, а шкалу y — между вертикально расположенными секциями.

На широком экране в предварительном просмотре вводная часть и список вопросов расположены в отдельных колонках, а при ширине 700 px и меньше — друг под другом. Этот брейкпоинт выбран для приложения и не является токеном Bolt. Длинные формулировки вопросов переносятся рядом с иконкой, не уменьшая размер текста.

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

## Дизайн-система Pega Bolt: соберите список вопросов с помощью Twig

### Элементы задаются как содержимое, а не как свойство data

В каждом вызове accordion-item.twig задаются trigger и content. Блок Twig set захватывает отрендеренные элементы, а родительскому компоненту эта разметка передаётся через content. В полном примере выше первый вопрос раскрыт при загрузке, а для single задано значение true.

Параметр spacing управляет внутренними отступами элементов, а icon_valign — выравниванием иконки. Оставьте разделители, если важно чётко обозначить границы вопросов. Флаг inactive не отключает элемент управления формы: он сворачивает содержимое и скрывает иконку.

- Не скрывайте даты, предварительные требования и сведения о доступности внутри свёрнутых ответов.

- Сформулируйте в заголовке конкретный вопрос.

- Не размещайте внутри ответа ещё один аккордеон.

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

## Дизайн-система Pega Bolt: раскрытие ответа без потери позиции чтения

### Только один ответ за раз

В интерпретации HTML используются настоящие кнопки, aria-expanded, aria-controls и скрытые панели с ответами. Нажатие на свёрнутый вопрос раскрывает его и сворачивает предыдущий ответ; нажатие на раскрытый вопрос сворачивает его. Фокус остаётся на кнопке, по которой нажали.

Такое поведение соответствует выбранному режиму с одним раскрытым пунктом, но не зависит от Bolt JavaScript. В предварительном просмотре не реализована прямая ссылка на пункт аккордеона, и он не заявлен как среда выполнения нативного компонента. В нативном Bolt при включённом режиме single пункт, открытый по прямой ссылке, имеет приоритет над пунктом, раскрытым изначально.

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

## Дизайн-система Pega Bolt: плотность задаётся для всей страницы

### Настройка корневого элемента, а не свойство компонента

В Bolt поддерживаются варианты comfortable, regular и compact, задаваемые атрибутом data-bolt-info-density элемента html. По умолчанию используется regular. Вариант comfortable увеличивает размер шрифта и отступы, а compact — уменьшает их.

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

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

## Дизайн-система Pega Bolt: используйте настоящий компонент в контексте приложения

### Настройте документированное окружение

Команда установки предназначена для приложения Bolt на Twig, которое распознаёт пространства имён компонентов и компилирует необходимые ресурсы. В общедоступном репозитории доступно полноценное окружение для разработки: yarn setup и yarn start. Это эталонное окружение для разработки, а не готовый вариант развёртывания в production из двух команд.

1. Выберите Twig для реализации контента с серверным рендерингом и проверьте версию в своём приложении.

2. Установите пакет аккордеона, зарегистрируйте существующее пространство имён Twig в конфигурации приложения Bolt и подключите скомпилированные ресурсы проекта.

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

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

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

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

Сохраните весь документ как index.html и откройте его в браузере. Независимая интерпретация HTML/CSS основ Bolt на Twig и поведения аккордеона с одним раскрытым пунктом. Системный шрифт в качестве запасного; среда выполнения Bolt не используется.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Service journey workshop</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fb;color:#001f5f;font:16px/1.6 system-ui,sans-serif}header{background:#001f5f;color:white;padding:38px 5%;display:grid;grid-template-columns:1.6fr 1fr;gap:30px}small{letter-spacing:.13em;font-size:11px;text-transform:uppercase}h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:650px;margin:16px 0}header p{max-width:550px;color:#d7e2f2}svg{width:100%;max-width:310px;align-self:center;justify-self:center}main{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:32px 5%}h2{font-size:23px;line-height:1.25}aside p{font-size:14px}dl{font-size:14px}dt{font-weight:700;margin-top:18px}dd{margin:2px 0}section{background:white;border-top:3px solid #10a5ac}article{border-bottom:1px solid #d7e2f2}button{font:600 16px/1.5 system-ui;width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;padding:22px 24px;border:0;background:white;color:#001f5f;cursor:pointer}button:hover{background:#f0f5fc}button:focus-visible{outline:3px solid #005154;outline-offset:-4px}.answer{padding:0 24px 24px;color:#303744;font-size:15px}.answer p{margin:0}footer{padding:0 5% 22px;color:#555;font-size:11px}@media(max-width:700px){header{grid-template-columns:1fr;padding:28px 6%}svg{display:none}main{grid-template-columns:1fr;padding:24px 6%;gap:16px}button{padding:20px}dl{display:flex;flex-wrap:wrap;gap:24px}dt{margin:0}}</style><header><div><small>Field notes · Live workshop</small><h1>Make your service journey simpler.</h1><p>A practical session for turning a complex request into a clear next step.</p></div><svg viewBox="0 0 300 200" aria-hidden="true"><path d="M30 100H115M115 100V40H230M115 100V160H230" fill="none" stroke="#86cac6" stroke-width="4"/><circle cx="30" cy="100" r="22" fill="#f76923"/><rect x="95" y="80" width="40" height="40" rx="5" fill="#10a5ac"/><rect x="210" y="20" width="70" height="40" rx="6" fill="#d7e2f2"/><rect x="210" y="140" width="70" height="40" rx="6" fill="#ffc836"/></svg></header><main><aside><small>Before you join</small><h2>One journey.<br>A clearer direction.</h2><p>Map a request, find a point of friction, and rewrite the next step together.</p><dl><div><dt>Format</dt><dd>Live, small-group exercise</dd></div><div><dt>Length</dt><dd>45 minutes</dd></div><div><dt>Example only</dt><dd>No registration is collected</dd></div></dl></aside><div><h2>Useful to know</h2><section aria-label="Workshop questions"><article><h3 style="margin:0"><button aria-expanded="true" aria-controls="a1" id="q1">What should I bring?<span aria-hidden="true">−</span></button></h3><div class="answer" id="a1"><p>Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a2" id="q2">Will there be a recording?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a2" hidden><p>This workshop is live only. The written exercise is included so you can revisit the method with your team.</p></div></article><article><h3 style="margin:0"><button aria-expanded="false" aria-controls="a3" id="q3">Who is this session for?<span aria-hidden="true">+</span></button></h3><div class="answer" id="a3" hidden><p>Content teams and developers working on service journeys. No prior experience with the workshop format is required.</p></div></article></section></div></main><footer>Independent Bolt Twig interpretation · verified palette and spacing references · system font fallback</footer><script>const qs=[...document.querySelectorAll('button')];qs.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';qs.forEach(x=>{let yes=x===b&&open;x.setAttribute('aria-expanded',yes);x.lastElementChild.textContent=yes?'−':'+';document.getElementById(x.getAttribute('aria-controls')).hidden=!yes})});</script></html>
```

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

- В списке вопросов с одним раскрытым пунктом не реализованы прямые ссылки на пункты Bolt. Пример на Twig показывает нативный способ интеграции; важные сведения о мастер-классе остаются видимыми вне свёрнутых ответов.

### Вопросы о мастер-классе: открыт один ответ

Отобразите каждый вопрос с помощью шаблона элемента, соберите их разметку и передайте её родительскому аккордеону.

```
{% set questions %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'What should I bring?',
    content: '<p>Bring a laptop and one workflow you want to simplify.</p>',
    open: true
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Will there be a recording?',
    content: '<p>This workshop is live only. The written exercise is included.</p>'
  } only %}
  {% include '@bolt-components-accordion/accordion-item.twig' with {
    trigger: 'Who is this session for?',
    content: '<p>Content teams and developers working on service journeys.</p>'
  } only %}
{% endset %}
{% include '@bolt-components-accordion/accordion.twig' with {
  content: questions,
  single: true,
  spacing: 'medium',
  icon_valign: 'top'
} only %}
```

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

- Используйте это в настроенном приложении Bolt на Twig. Официальный компонент не предоставляет готовую точку входа для использования без Twig, в формате HTML.

- Параметр single ограничивает число одновременно раскрытых пунктов. Прямая ссылка на пункт имеет приоритет над изначально раскрытым пунктом.

- В схеме large указан как максимальный вариант отступа, хотя в примере документации используется xlarge; в этом примере соблюдается схема.

## Дизайн-система Pega Bolt: настройка AI-агента

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

Команда установки добавляет компонент, а не автономный сайт. Используйте зарегистрированное в проекте пространство имён Twig @bolt-components-accordion и скомпилированные ресурсы Bolt. Настройка окружения для разработки из репозитория и интеграция приложения — разные варианты; ни один из них не относится к текущей версии BoltDS React API.

```
# In an existing Bolt Twig application with its asset pipeline configured:
npm install @bolt/components-accordion

# To inspect the complete official development environment instead:
git clone https://github.com/boltdesignsystem/bolt.git
cd bolt
yarn setup
yarn start
```

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

```
Создайте страницу ресурса для мастер-класса на Bolt Twig, используя проверенную палитру тёмно-синего и бирюзового цветов, гибкую типографическую иерархию и отдельные горизонтальную и вертикальную шкалы отступов x/y. Оставьте важные сведения видимыми. Соберите аккордеон, поместив accordion-item.twig в accordion.twig, задайте single со значением true и отступ medium. Не используйте пути Twig как API React.
```

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

Это руководство посвящено общедоступной реализации Bolt на Twig / Pattern Lab. На текущей главной странице Bolt также представлена BoltDS React для приложений и порталов; у этих реализаций отдельная документация и собственные версии. Предварительный просмотр — независимая интерпретация HTML, а не среда выполнения Bolt.

- Реализации Bolt Точки входа React и Twig.

- Токены фирменных цветов Палитра Pega и переменные CSS.

- Интервалы Независимые шкалы x и y.

- Типографика Гибкие размеры в rem и семейства шрифтов.

- Плотность информации Настройка плотности на уровне страницы.

- Схема аккордеона Свойства Twig, шаблон элемента и ограничения взаимодействия.

## Связанные ресурсы дизайн-система Pega Bolt

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

Изучите Porsche Design System v4: гибкие отступы, цветовые схемы CSS, типографика Porsche Next и конфигуратор с двумя вариантами. В примере приведены реальные выражения токенов и полный файл входа Vite с актуальными событиями сегментированного элемента управления.

### Red Hat PatternFly

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

### REI Cedar

Создайте конкретный сценарий выбора товаров для комплектации заказов в Cedar: встроенные плитки Vue, реальные значения токенов, полноценная навигация с клавиатуры и адаптивная композиция товаров.


- [Справочник по реализации](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Источник](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [Источник](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [Источник](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [Источник](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [Источник](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Прочитать вспомогательную спецификацию](https://boltdesignsystem.com/)
- [Прочитать вспомогательную спецификацию](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [Прочитать вспомогательную спецификацию](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [Прочитать вспомогательную спецификацию](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [Прочитать вспомогательную спецификацию](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Прочитать вспомогательную спецификацию](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [Справочник по коду](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Реализации Bolt Точки входа React и Twig.](https://boltdesignsystem.com/)
- [Токены фирменных цветов Палитра Pega и переменные CSS.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [Интервалы Независимые шкалы x и y.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [Типографика Гибкие размеры в rem и семейства шрифтов.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [Плотность информации Настройка плотности на уровне страницы.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [Схема аккордеона Свойства Twig, шаблон элемента и ограничения взаимодействия.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)