Sistema di design Pega Bolt.

Sistema di progettazione sistema di design Pega Bolt: scegli l’implementazione Bolt

Twig e React hanno contratti diversi

Questa guida si concentra sull’implementazione pubblica Bolt Twig / Pattern Lab. L’attuale homepage di Bolt propone anche BoltDS React per applicazioni e portali; le due implementazioni hanno documentazione e versioni separate. L’anteprima è un’interpretazione indipendente di HTML, non un runtime Bolt.

Questo esempio è una risorsa per un workshop, con un riepilogo visibile e domande facoltative. Si adatta bene all’implementazione Twig orientata ai contenuti: la gerarchia editoriale viene prima, mentre l’accordion rende disponibili i contenuti di supporto su richiesta. Un’applicazione basata su BoltDS React dovrebbe fare riferimento alla relativa documentazione invece di copiare i percorsi dei namespace Twig.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: struttura blu navy e tocchi brillanti limitati

Una superficie di lettura con identità visiva

La palette pubblicata include blu navy #001f5f, verde acqua #10a5ac e arancione #f76923. L’esempio usa il blu navy per un’intestazione editoriale marcata e il verde acqua e l’arancione come accenti nell’illustrazione. Queste tonalità sono valori di base, non la garanzia che ogni combinazione sia adatta al testo di piccole dimensioni.

Le informazioni sulla risorsa sono disposte su superfici bianche e blu navy chiaro. Il diagramma ramificato decorativo illustra un workshop dedicato a semplificare il percorso di un servizio; è un’opera originale, non un logo Pega né un diagramma ufficiale.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: tipografia fluida e misure leggibili

I valori in rem non corrispondono a dimensioni fisse in pixel

Bolt definisce le dimensioni regular a 1rem, large a 1.4rem, xxlarge a 2.35rem e display a 3.75rem. La dimensione di base varia in funzione della viewport e della densità, quindi convertire l’intera tabella usando una base fissa di 16 px ne altera il comportamento previsto.

Le specifiche di base indicano Open Sans per il testo del corpo e i titoli. Poiché i file dei font non sono inclusi, l’anteprima autonoma usa un font di sistema locale come ripiego. Mantiene un titolo ben leggibile, un occhiello compatto e paragrafi ariosi, senza dichiarare una corrispondenza tipografica al pixel.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: il ritmo orizzontale e quello verticale sono diversi

Non sostituirli con una scala generica basata su multipli di otto

La spaziatura orizzontale medium è 1.55rem, mentre quella verticale medium è 1.35rem. Anche per large i valori sono distinti: 3.1rem e 2.7rem. Usa la scala x tra oggetti adiacenti e la scala y tra sezioni sovrapposte.

Su uno schermo largo, l’anteprima dispone l’introduzione e l’elenco delle domande in due colonne; a un breakpoint locale di 700 px li impila. Questo breakpoint è una scelta applicativa, non un token Bolt. Le etichette lunghe delle domande vanno a capo accanto all’icona, senza restringere il testo.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: crea l’elenco di domande con Twig

Gli elementi sono contenuti acquisiti, non una proprietà data

Ogni chiamata a accordion-item.twig fornisce trigger e content. Un blocco Twig set acquisisce gli elementi renderizzati; il componente padre riceve il markup tramite content. L’esempio completo qui sopra apre la prima domanda e usa single: true.

spacing controlla i rientri degli elementi e icon_valign l’allineamento dell’icona. Mantieni i separatori se le domande devono avere confini ben visibili. Il flag inactive non disattiva un controllo di un modulo: comprime il contenuto e nasconde l’icona.

• Mantieni date, prerequisiti e disponibilità fuori dalle risposte compresse.
• Usa il trigger per identificare una domanda concreta.
• Evita di inserire un altro accordion all’interno di una risposta.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: espansione senza perdere il punto di lettura

Una risposta alla volta

L’interpretazione di HTML usa pulsanti reali, aria-expanded, aria-controls e pannelli delle risposte nascosti. Facendo clic su una domanda chiusa, questa si apre e la risposta precedente si chiude; facendo clic sulla domanda aperta, questa si comprime. Il focus resta sul pulsante che attiva la domanda.

Riproduce il comportamento selezionato a espansione singola, restando indipendente da Bolt JavaScript. L’anteprima non implementa il deep linking di Bolt e non dichiara di usare il runtime del componente nativo. In Bolt nativo, se è abilitata la modalità singola, un elemento raggiunto tramite deep link ha la precedenza su quello inizialmente aperto.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: la densità riguarda l’intera pagina

Un’impostazione radice, non una proprietà del componente

Bolt riconosce comfortable, regular e compact tramite data-bolt-info-density sull’elemento html. Regular è l’impostazione predefinita. Comfortable aumenta la dimensione del testo e la spaziatura; compact le riduce entrambe.

Non applicare l’attributo radice all’accordion aspettandoti una variazione di densità per componente supportata. Per questa pagina di lettura, l’anteprima mantiene una composizione editoriale confortevole e fissa, anziché fingere di riprodurre il motore di densità nativo.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Pega Bolt: integra il componente reale nel suo contesto

Usa l’ambiente documentato

Il comando di installazione è pertinente all’interno di un’applicazione Bolt Twig che risolve i namespace dei componenti e compila gli asset richiesti. Il repository pubblico offre un ambiente di sviluppo completo tramite yarn setup e yarn start. È un ambiente di riferimento, non una distribuzione di produzione in due righe.

1. Scegli Twig per l’implementazione dei contenuti renderizzata sul server e verifica la versione nell’applicazione.
2. Installa il pacchetto accordion, registra il namespace Twig esistente tramite la configurazione dell’applicazione Bolt e includi gli asset compilati del progetto.
3. Esegui il rendering dell’esempio completo di domande, poi verifica l’espansione singola, i trigger su più righe e l’uso della tastiera nel progetto effettivo.

Leggi la specifica di supporto

Esempi di componenti del sistema di progettazione sistema di design 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 %}