# Sistema di design Pega Bolt ## Anteprima dell’interfaccia del sistema di design Pega Bolt Prova il gruppo di domande a apertura singola accanto a un riepilogo editoriale illustrato. ## Riferimento di design del sistema di design Pega Bolt Riferimento pubblico del Pattern Lab di Bolt Twig. Le dimensioni in rem sono fluide rispetto alla radice della pagina; non considerare tutti i valori rem come multipli fissi di 16 px. Il layout dell’anteprima e l’illustrazione sono originali. ### Ruoli dei colori del brand | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bolt-color-navy | #001f5f | Colore principale del brand. | | --bolt-color-navy-dark | #081c45 | Sfondo più scuro. | | --bolt-color-navy-xlight | #d7e2f2 | Superficie chiara del brand. | | --bolt-color-teal | #10a5ac | Accento dell’illustrazione; non è automaticamente accessibile come testo del corpo. | | --bolt-color-teal-xdark | #005154 | Opzione verde petrolio più scura. | | --bolt-color-orange | #f76923 | Accento caldo. | | --bolt-color-yellow | #ffc836 | Accento di evidenziazione. | ### Spaziatura su due assi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bolt-spacing-x-xsmall | 0.3875rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-x-small | 0.775rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-x-medium | 1.55rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-x-large | 3.1rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-y-xsmall | 0.3375rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-y-small | 0.675rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-y-medium | 1.35rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | | --bolt-spacing-y-large | 2.7rem | Usa la scala orizzontale per la spaziatura sull’asse x e quella verticale per la spaziatura sull’asse y. | ### Fondamenti tipografici | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --bolt-type-font-size-display | 3.75rem | Relativi alla radice fluida; scegli separatamente i tag semantici per le intestazioni. | | --bolt-type-font-size-xxlarge | 2.35rem | Relativi alla radice fluida; scegli separatamente i tag semantici per le intestazioni. | | --bolt-type-font-size-large | 1.4rem | Relativi alla radice fluida; scegli separatamente i tag semantici per le intestazioni. | | --bolt-type-font-size-regular | 1rem | Relativi alla radice fluida; scegli separatamente i tag semantici per le intestazioni. | | --bolt-type-font-size-small | 0.9rem | Relativi alla radice fluida; scegli separatamente i tag semantici per le intestazioni. | | Font family | Open Sans | Famiglie tipografiche per il corpo e i titoli nei fondamenti pubblicati. | | Weights | 300 / 400 / 600 / 700 / 800 | Dal chiaro all’extra-bold; carica i file dei font corrispondenti. | ### Densità della pagina | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Attribute | data-bolt-info-density | Impostala solo sull’elemento html. | | comfortable | Larger font and spacing | Densità pensata per la lettura. | | regular | Default | L’attributo può essere omesso. | | compact | Smaller font and spacing | Non applicare come modifica locale alla scheda. | ### Composizione dell’accordion | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | single | false by default | true limita l’accordion a un solo elemento aperto. | | spacing | medium | Lo schema elenca none, xsmall, small, medium e large. | | icon_valign | center | top allinea l’icona ai trigger su più righe. | | no_separator | false | Mantieni i separatori per distinguere i confini tra le domande. | | box_shadow | false | Ombra esterna facoltativa. | | item.open | false | Espandi un elemento iniziale. | | item.inactive | false | Elemento chiuso senza icona di attivazione. | | item.trigger | Content | Scrivi una domanda significativa al posto dell’etichetta predefinita. | ## Guida completa al sistema di progettazione sistema di design Pega Bolt Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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 ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS delle basi Bolt Twig e del comportamento dell’accordion a espansione singola. Font di sistema di ripiego; nessun runtime Bolt. ``` Service journey workshop
Field notes · Live workshop

Make your service journey simpler.

A practical session for turning a complex request into a clear next step.

Useful to know

Bring a laptop and one workflow you want to simplify. A short description of the request and its current outcome is enough.

``` Riferimento del codice - L’elenco di domande a espansione singola non implementa il deep linking di Bolt. L’esempio Twig è il percorso di integrazione nativo; le informazioni essenziali sul workshop restano fuori dalle risposte compresse. ### Domande sul workshop con una risposta aperta alla volta Esegui il rendering di ogni domanda con il template item, acquisiscine il markup e passalo all’accordion padre. ``` {% set questions %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'What should I bring?', content: '

Bring a laptop and one workflow you want to simplify.

', open: true } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Will there be a recording?', content: '

This workshop is live only. The written exercise is included.

' } only %} {% include '@bolt-components-accordion/accordion-item.twig' with { trigger: 'Who is this session for?', content: '

Content teams and developers working on service journeys.

' } only %} {% endset %} {% include '@bolt-components-accordion/accordion.twig' with { content: questions, single: true, spacing: 'medium', icon_valign: 'top' } only %} ``` Riferimento del codice - Usalo all’interno di un’applicazione Bolt Twig configurata. Il componente ufficiale non offre un punto d’uso HTML semplice. - single limita il numero di elementi espansi contemporaneamente. Il deep linking ha la precedenza su un elemento inizialmente aperto. - Lo schema indica large come opzione di spaziatura massima, anche se un esempio della documentazione usa xlarge; questo esempio rispetta lo schema. ## Configurazione dell’agent per il sistema di progettazione sistema di design Pega Bolt ### Punto di partenza per l’implementazione Il comando del pacchetto aggiunge il componente, non un sito web autonomo. Usa il namespace Twig @bolt-components-accordion registrato nel progetto e gli asset Bolt compilati. La configurazione di sviluppo del repository e l’integrazione nell’applicazione sono percorsi diversi; nessuno dei due corrisponde all’attuale 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 ``` ### Un prompt per il tuo progetto ``` Crea una pagina risorsa per un workshop Bolt Twig usando la palette blu navy/verde acqua verificata, una gerarchia tipografica fluida e scale di spaziatura x/y distinte. Mantieni visibili le informazioni essenziali. Componi accordion-item.twig all’interno di accordion.twig con single true e spacing medium. Non usare i percorsi Twig come API React. ``` ## Sistema di progettazione sistema di design Pega Bolt: fonti e ambito 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. - Implementazioni Bolt Punti di accesso React e Twig. - Token dei colori del brand Palette Pega e variabili CSS. - Spaziatura Scale x e y indipendenti. - Tipografia Dimensioni fluide in rem e famiglie di font. - Densità delle informazioni Impostazione della densità a livello di pagina. - Schema dell’accordion Proprietà Twig, template item e vincoli di interazione. ## Risorse correlate al sistema di progettazione sistema di design Pega Bolt ### Porsche sistema di design Esplora Porsche Design System v4 con spaziature fluide, schemi cromatici CSS, tipografia Porsche Next e un configuratore a due opzioni. Il riferimento include espressioni reali dei token e un entry point Vite completo che usa gli eventi attuali di segmented-control. ### Red Hat PatternFly Usa PatternFly per un’area di lavoro operativa: riferimenti semantici ai token, schede di servizio selezionabili, selezione multipla a tre stati, revisione dell’ambito e codice nativo completo in React. ### REI Cedar Crea un selettore concreto per l’evasione degli ordini Cedar con riquadri Vue nativi, valori reali dei token, navigazione completa da tastiera e composizione responsive dei prodotti. - [Riferimento per l’implementazione](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Fonte](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Leggi la specifica di supporto](https://boltdesignsystem.com/) - [Leggi la specifica di supporto](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Leggi la specifica di supporto](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Leggi la specifica di supporto](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Leggi la specifica di supporto](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Leggi la specifica di supporto](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Riferimento del codice](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Implementazioni Bolt Punti di accesso React e Twig.](https://boltdesignsystem.com/) - [Token dei colori del brand Palette Pega e variabili CSS.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Spaziatura Scale x e y indipendenti.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Tipografia Dimensioni fluide in rem e famiglie di font.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Densità delle informazioni Impostazione della densità a livello di pagina.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Schema dell’accordion Proprietà Twig, template item e vincoli di interazione.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)