Sistema de Design Pega Bolt.

Sistema de Design Pega Bolt: escolha a implementação do Bolt

Twig e React têm contratos diferentes

Este guia aborda a implementação pública do Bolt Twig / Pattern Lab. A página inicial atual do Bolt também oferece o BoltDS React para aplicações e portais; as duas implementações têm documentação e controle de versões separados. A prévia é uma interpretação independente de HTML, não um runtime do Bolt.

O exemplo é um material de apoio para oficina, com um resumo visível e perguntas opcionais. Ele se encaixa naturalmente na implementação Twig, voltada a conteúdo: a hierarquia editorial vem primeiro, enquanto o acordeão disponibiliza o material complementar sob demanda. Uma aplicação criada com BoltDS React deve seguir a documentação correspondente, em vez de copiar os caminhos de namespace do Twig.

Consulte a especificação de apoio

Sistema de Design Pega Bolt: estrutura azul-marinho, poucos destaques vibrantes

Uma superfície de leitura com a identidade da marca

A paleta publicada inclui azul-marinho #001f5f, teal #10a5ac e laranja #f76923. O exemplo usa o azul-marinho como cabeçalho editorial marcante e o teal e o laranja como destaques da ilustração. Esses tons são valores dos fundamentos, não uma garantia de que toda combinação seja adequada para textos pequenos.

Os dados do recurso aparecem sobre superfícies brancas e em azul-marinho claro. O diagrama ramificado decorativo representa uma oficina sobre como simplificar a jornada de um serviço; é uma ilustração original, não um logotipo da Pega nem um diagrama oficial.

Consulte a especificação de apoio

Sistema de Design Pega Bolt: tipografia fluida e medidas legíveis

Os valores em rem não garantem equivalências fixas em pixels

O Bolt publica o tamanho regular como 1rem, o grande como 1.4rem, o xxlarge como 2.35rem e o display como 3.75rem. A raiz varia conforme a janela de visualização e a densidade; portanto, converter a tabela inteira usando uma base fixa de 16 px elimina o comportamento pretendido.

A base define Open Sans para o texto do corpo e dos títulos. Como os arquivos de fonte não estão incluídos, a prévia independente usa uma fonte alternativa do sistema. Ela mantém um título claro, um antetítulo compacto e parágrafos confortáveis, sem alegar correspondência tipográfica exata em pixels.

Consulte a especificação de apoio

Sistema de design Pega Bolt: ritmos horizontal e vertical diferentes

Evite substituir por uma escala genérica de oito pontos

O espaçamento horizontal médio é de 1.55rem, enquanto o espaçamento vertical médio é de 1.35rem. No nível grande, a mesma distinção aparece em 3.1rem e 2.7rem. Use a escala x entre objetos adjacentes e a escala y entre seções empilhadas.

Em telas largas, a prévia mantém a introdução e a sequência de perguntas em colunas separadas; em seguida, empilha os elementos em um breakpoint local de 700 px. Esse breakpoint é uma escolha da aplicação, não um token do Bolt. Os rótulos longos das perguntas quebram ao lado do ícone sem reduzir o tamanho do texto.

Consulte a especificação de apoio

Pega Bolt Guia do sistema de design: crie a sequência de perguntas com Twig

Os itens são conteúdo capturado, não uma propriedade de dados

Cada chamada de accordion-item.twig fornece um acionador e conteúdo. Um bloco set do Twig captura a marcação renderizada dos itens; o elemento pai recebe essa marcação por meio de content. O exemplo completo acima abre a primeira pergunta e usa single: true.

spacing controla os recuos dos itens, e icon_valign controla o alinhamento do ícone. Mantenha os separadores quando as perguntas precisarem de limites bem definidos. A flag inactive não desativa um controle de formulário: ela recolhe o conteúdo e oculta o ícone.

• Mantenha datas, pré-requisitos e disponibilidade fora das respostas recolhidas.
• Use o acionador para identificar uma pergunta específica.
• Evite incluir outro acordeão dentro de uma resposta.

Consulte a especificação de apoio

Sistema de design Pega Bolt: expanda sem perder a posição de leitura

Uma resposta por vez

A interpretação de HTML usa botões reais, aria-expanded, aria-controls e painéis de resposta ocultos. Ao clicar em uma pergunta fechada, ela abre e a resposta anterior se fecha; ao clicar na pergunta aberta, ela se recolhe. O foco permanece no botão acionado.

Isso reproduz o comportamento selecionado de abertura única sem depender do Bolt JavaScript. A prévia não implementa links diretos do Bolt nem afirma executar o runtime nativo do componente. No Bolt nativo, quando o modo single está ativado, um item indicado por link direto tem prioridade sobre um item inicialmente aberto.

Consulte a especificação de apoio

Sistema de design Pega Bolt: a densidade pertence à página inteira

Uma configuração da raiz, não uma propriedade do componente

O Bolt reconhece comfortable, regular e compact por meio de data-bolt-info-density no elemento html. O padrão é regular. Comfortable aumenta o tamanho do texto e o espaçamento; compact reduz ambos.

Não aplique o atributo da raiz a um acordeão esperando uma alteração de densidade por componente compatível. Nesta página de leitura, a prévia mantém uma composição editorial confortável e fixa, em vez de fingir reproduzir o mecanismo de densidade nativo.

Consulte a especificação de apoio

Sistema de design Pega Bolt: integre o componente real ao contexto

Use o ambiente documentado

O comando de instalação só faz sentido em uma aplicação Bolt com Twig que resolva os namespaces dos componentes e compile os assets necessários. O repositório público oferece um ambiente de desenvolvimento completo por meio de yarn setup e yarn start. É um ambiente de referência, não uma implantação de produção em duas linhas.

1. Escolha Twig para a implementação do conteúdo renderizado no servidor e confirme a versão em uso na sua aplicação.
2. Instale o pacote de acordeão, registre o namespace Twig existente na configuração da aplicação Bolt e inclua os assets compilados do projeto.
3. Renderize o exemplo completo de perguntas e, em seguida, verifique a expansão única, a quebra de linha dos acionadores e a navegação por teclado no projeto real.

Consulte a especificação de apoio

Pega Bolt Exemplos de componentes do sistema de design

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