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

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

{% 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 %}