# Pega Bolt Designsystem ## Pega Bolt Designsystem: Vorschau der Benutzeroberfläche Testen Sie die Fragenliste, in der jeweils nur ein Eintrag geöffnet ist, neben einer illustrierten redaktionellen Zusammenfassung. ## Pega Bolt Designsystem: Designreferenz Öffentliche Referenz für Bolt Twig Pattern Lab. Rem-Werte skalieren relativ zur fließend angepassten Root-Größe der Seite; behandle nicht alle rem-Werte als feste Vielfache von 16 px. Layout und Illustration der Vorschau sind eigenständig gestaltet. ### Markenfarben und ihre Rollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bolt-color-navy | #001f5f | Primäre Markenfläche. | | --bolt-color-navy-dark | #081c45 | Dunklerer Hintergrund. | | --bolt-color-navy-xlight | #d7e2f2 | Helle Markenfläche. | | --bolt-color-teal | #10a5ac | Illustrationsakzent; nicht automatisch als Fließtextfarbe barrierefrei. | | --bolt-color-teal-xdark | #005154 | Dunklere Türkisvariante. | | --bolt-color-orange | #f76923 | Warmer Akzent. | | --bolt-color-yellow | #ffc836 | Hervorhebungsakzent. | ### Abstände auf zwei Achsen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bolt-spacing-x-xsmall | 0.3875rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-x-small | 0.775rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-x-medium | 1.55rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-x-large | 3.1rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-y-xsmall | 0.3375rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-y-small | 0.675rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-y-medium | 1.35rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | | --bolt-spacing-y-large | 2.7rem | Verwende die horizontale Skala für Abstände auf der x-Achse und die vertikale Skala für Abstände auf der y-Achse. | ### Typografische Grundlage | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --bolt-type-font-size-display | 3.75rem | Relativ zur fließend angepassten Root-Größe; wähle semantische Überschriften-Tags unabhängig davon. | | --bolt-type-font-size-xxlarge | 2.35rem | Relativ zur fließend angepassten Root-Größe; wähle semantische Überschriften-Tags unabhängig davon. | | --bolt-type-font-size-large | 1.4rem | Relativ zur fließend angepassten Root-Größe; wähle semantische Überschriften-Tags unabhängig davon. | | --bolt-type-font-size-regular | 1rem | Relativ zur fließend angepassten Root-Größe; wähle semantische Überschriften-Tags unabhängig davon. | | --bolt-type-font-size-small | 0.9rem | Relativ zur fließend angepassten Root-Größe; wähle semantische Überschriften-Tags unabhängig davon. | | Font family | Open Sans | Schriftfamilien für Fließtext und Überschriften in der veröffentlichten Grundlage. | | Weights | 300 / 400 / 600 / 700 / 800 | Von Light bis Extra Bold; lade die passenden Schriftdateien. | ### Seitendichte | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Attribute | data-bolt-info-density | Nur am html-Element festlegen. | | comfortable | Larger font and spacing | Lesefreundliche Dichte. | | regular | Default | Das Attribut kann weggelassen werden. | | compact | Smaller font and spacing | Nicht als lokalen Modifier für Karten verwenden. | ### Akkordeon-Komposition | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | single | false by default | true beschränkt das Akkordeon auf ein geöffnetes Element. | | spacing | medium | Das Schema führt none, xsmall, small, medium und large auf. | | icon_valign | center | top richtet das Symbol an mehrzeiligen Auslösern aus. | | no_separator | false | Behalte Trennlinien bei, damit die einzelnen Fragen klar voneinander abgegrenzt sind. | | box_shadow | false | Optionaler umschließender Schatten. | | item.open | false | Ein Element zunächst ausgeklappt anzeigen. | | item.inactive | false | Eingeklapptes Element ohne Umschaltsymbol. | | item.trigger | Content | Formuliere eine aussagekräftige Frage anstelle der Standardbeschriftung. | ## Pega Bolt-Designsystem: Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Pega Bolt-Designsystem: Die passende Bolt-Implementierung auswählen ### Twig und React haben unterschiedliche Verträge > Dieser Leitfaden konzentriert sich auf die öffentliche Bolt-Twig-/Pattern-Lab-Implementierung. Die aktuelle Bolt-Homepage bietet außerdem BoltDS React für Anwendungen und Portale an; für die beiden Implementierungen gelten separate Dokumentationen und Versionsstände. Die Vorschau ist eine unabhängige Interpretation mit HTML und keine Bolt-Laufzeitumgebung. Dieses Beispiel ist eine Workshop-Ressource mit einer sichtbaren Zusammenfassung und optionalen Fragen. Die inhaltsorientierte Twig-Implementierung eignet sich dafür besonders gut: Die redaktionelle Hierarchie steht im Vordergrund, während das Akkordeon ergänzende Informationen bei Bedarf zugänglich macht. Eine mit BoltDS React erstellte Anwendung sollte dessen Dokumentation verwenden, statt Twig-Namespace-Pfade zu übernehmen. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Marineblaue Struktur mit gezielten, leuchtenden Akzenten ### Eine markengerechte Lesefläche Die veröffentlichte Palette umfasst Marineblau #001f5f, Türkis #10a5ac und Orange #f76923. Im Beispiel dient Marineblau als kräftige redaktionelle Kopffläche, Türkis und Orange setzen Akzente in der Illustration. Diese Farbtöne gehören zur Grundlage, belegen aber nicht, dass sich jede Farbkombination für kleine Texte eignet. Die Fakten zur Ressource stehen auf weißen und hellen marineblauen Flächen. Das dekorative Verzweigungsdiagramm veranschaulicht einen Workshop zur Vereinfachung eines Serviceablaufs. Es handelt sich um eine eigens erstellte Grafik, nicht um ein Pega-Logo oder ein offizielles Diagramm. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Fließende Typografie und gut lesbare Zeilenlängen ### Rem-Werte sind keine festen Pixelangaben Bolt gibt 1rem als reguläre Größe an, 1.4rem als groß, 2.35rem als xxlarge und 3.75rem als display. Die Root-Größe skaliert je nach Viewport und Dichte. Wer die gesamte Tabelle anhand einer festen Basis von 16 px umrechnet, verliert das vorgesehene Verhalten. Die typografische Grundlage sieht Open Sans für Fließtext und Überschriften vor. Die eigenständige Vorschau verwendet eine lokale Systemschrift als Ersatz, da keine Schriftdateien enthalten sind. Sie bietet einen klaren Titel, eine kompakte Dachzeile und angenehm lesbare Absätze, ohne eine typografische Übereinstimmung bis auf den Pixel zu behaupten. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Horizontaler und vertikaler Rhythmus unterscheiden sich ### Ersetze die Skalen nicht durch eine allgemeine 8-Punkt-Skala Der mittlere horizontale Abstand beträgt 1.55rem, der mittlere vertikale Abstand dagegen 1.35rem. Bei großen Abständen gilt dieselbe Unterscheidung: 3.1rem horizontal und 2.7rem vertikal. Verwende die x-Skala zwischen benachbarten Objekten und die y-Skala zwischen übereinander angeordneten Abschnitten. In der Vorschau stehen Einleitung und Fragenliste auf breiten Bildschirmen in getrennten Spalten. An einem lokalen Breakpoint von 700 px werden sie untereinander angeordnet. Dieser Breakpoint ist eine Anwendungsentscheidung und kein Bolt-Token. Lange Fragenbeschriftungen werden neben einem Symbol umgebrochen, ohne dass der Text verkleinert wird. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Fragenliste mit Twig erstellen ### Elemente werden als Inhalt erfasst, nicht als Daten-Prop übergeben Jeder Aufruf von accordion-item.twig übergibt Auslöser und Inhalt. Ein Twig-set-Block erfasst die gerenderten Elemente; der übergeordnete Block erhält dieses Markup über content. Das vollständige Beispiel oben klappt die erste Frage aus und verwendet single: true. spacing steuert die Innenabstände der Elemente und icon_valign die Ausrichtung des Symbols. Behalte Trennlinien bei, wenn die Fragen klar voneinander abgegrenzt werden sollen. Das Flag inactive ist kein deaktiviertes Formularsteuerelement: Es klappt den Inhalt ein und blendet das Symbol aus. - Datumsangaben, Voraussetzungen und Verfügbarkeit gehören außerhalb eingeklappter Antworten. - Formuliere den Auslöser als konkrete Frage. - Füge kein weiteres Akkordeon in eine Antwort ein. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Aufklappen, ohne die Leseposition zu verlieren ### Immer nur eine Antwort gleichzeitig Die Interpretation mit HTML verwendet echte Schaltflächen, aria-expanded, aria-controls und ausgeblendete Antwortbereiche. Beim Klicken auf eine geschlossene Frage wird sie geöffnet und die vorherige Antwort geschlossen. Beim Klicken auf die geöffnete Frage wird sie eingeklappt. Der Fokus bleibt auf der auslösenden Schaltfläche. So wird das ausgewählte Verhalten mit jeweils nur einem geöffneten Element nachgebildet, unabhängig von Bolt JavaScript. Die Vorschau implementiert kein Deep Linking von Bolt und beansprucht nicht, die native Komponentenlaufzeitumgebung auszuführen. In nativem Bolt hat bei aktiviertem Einzelmodus ein per Deep Link aufgerufenes Element Vorrang vor einem zunächst geöffneten Element. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Die Dichte gilt für die ganze Seite ### Einstellung für die Root, kein Komponenten-Prop Bolt erkennt comfortable, regular und compact über data-bolt-info-density am html-Element. Regular ist die Standardeinstellung. Comfortable vergrößert Schrift und Abstände, compact verkleinert beides. Wende das Root-Attribut nicht auf ein Akkordeon an, um eine unterstützte Dichteänderung nur für diese Komponente zu erwarten. Für diese Leseseite behält die Vorschau eine durchgehend komfortable redaktionelle Gestaltung bei, statt die native Dichtesteuerung vorzutäuschen. Unterstützende Spezifikation lesen ## Pega Bolt-Designsystem: Die echte Komponente in den Kontext einbinden ### Die dokumentierte Umgebung verwenden Der Installationsbefehl ist für eine Bolt-Twig-Anwendung gedacht, die Komponentennamespaces auflöst und die erforderlichen Assets kompiliert. Das öffentliche Repository bietet mit yarn setup und yarn start eine vollständige Entwicklungsumgebung. Sie ist als Referenzumgebung gedacht, nicht als Produktionsbereitstellung mit zwei Befehlszeilen. 1. Wähle Twig für die serverseitige Inhaltsimplementierung und bestätige die Version in deiner Anwendung. 2. Installiere das Accordion-Paket, registriere dessen vorhandenen Twig-Namespace über die Bolt-Anwendungskonfiguration und binde die kompilierten Projektressourcen ein. 3. Rendere das vollständige Fragenbeispiel und prüfe anschließend im tatsächlichen Projekt, ob nur ein Element gleichzeitig geöffnet ist, die Bedienelemente umbrechen und die Bedienung per Tastatur funktioniert. Unterstützende Spezifikation lesen ## Beispiele für Komponenten des Pega Bolt-Designsystems ### Vollständige, eigenständige interaktive Demo Speichere das vollständige Dokument als index.html und öffne es in einem Browser. Unabhängige HTML/CSS-Interpretation der Bolt-Twig-Grundlagen und des Verhaltens mit jeweils nur einem geöffneten Accordion. Systemschrift als Rückfalloption; keine Bolt-Laufzeitumgebung. ``` 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.

``` Code-Referenz - Der Fragenstapel mit jeweils einer geöffneten Antwort unterstützt keine Bolt-Deep-Links. Das Twig-Beispiel ist der native Integrationsweg; wichtige Workshop-Informationen bleiben auch außerhalb eingeklappter Antworten sichtbar. ### Workshopfragen mit jeweils einer geöffneten Antwort Rendere jede Frage mit dem Item-Template, erfasse das Markup und übergib es an das übergeordnete Accordion. ``` {% 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 %} ``` Code-Referenz - Verwende dies innerhalb einer konfigurierten Bolt-Twig-Anwendung. Die offizielle Komponente bietet keinen eigenständigen Nutzungseinstieg für einfaches HTML. - single beschränkt das gleichzeitige Öffnen auf ein Element. Deep-Links haben Vorrang vor einem anfangs geöffneten Element. - Das Schema führt large als größte Abstandsoption auf, obwohl ein Dokumentationsbeispiel xlarge verwendet. Dieses Beispiel hält sich an das Schema. ## Einrichtung des Pega Bolt-Designsystem-Agenten ### Ausgangspunkt für die Implementierung Der Paketbefehl fügt die Komponente hinzu, nicht eine eigenständige Website. Verwende den im Projekt registrierten Twig-Namespace @bolt-components-accordion und die kompilierten Bolt-Ressourcen. Die Entwicklungsumgebung des Repositorys und die Integration in eine Anwendung sind unterschiedliche Wege; keiner davon ist das aktuelle 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 ``` ### Ein Prompt für dein Projekt ``` Erstelle eine Bolt-Twig-Ressourcenseite für einen Workshop mit der verifizierten Marineblau-/Türkis-Palette, einer fließenden typografischen Hierarchie und getrennten x-/y-Abstandsskalen. Wichtige Informationen müssen sichtbar bleiben. Setze accordion-item.twig innerhalb von accordion.twig ein und verwende single true sowie medium spacing. Verwende Twig-Pfade nicht als React-APIs. ``` ## Quellen und Umfang des Pega Bolt-Designsystems Dieser Leitfaden konzentriert sich auf die öffentliche Bolt-Twig-/Pattern-Lab-Implementierung. Die aktuelle Bolt-Homepage bietet außerdem BoltDS React für Anwendungen und Portale an; für die beiden Implementierungen gelten separate Dokumentationen und Versionsstände. Die Vorschau ist eine unabhängige Interpretation mit HTML und keine Bolt-Laufzeitumgebung. - Bolt-Implementierungen React- und Twig-Einstiegspunkte. - Markenfarb-Design-Tokens Pega-Farbpalette und CSS-Variablen. - Abstände Unabhängige x- und y-Skalen. - Typografie Fließende rem-Größen und Schriftfamilien. - Informationsdichte Dichteeinstellung auf Seitenebene. - Accordion-Schema Twig-Eigenschaften, Item-Template und Interaktionsvorgaben. ## Weitere Ressourcen zum Pega Bolt-Designsystem ### Porsche Designsystem Entdecken Sie Porsche Design System v4 mit fließenden Abständen, CSS-Farbschemata, Porsche-Next-Typografie und einem Konfigurator mit zwei Auswahlmöglichkeiten. Die Referenz enthält echte Token-Ausdrücke und einen vollständigen Vite-Einstiegspunkt, der aktuelle Ereignisse des Segmented Controls verwendet. ### Red Hat PatternFly Verwenden Sie PatternFly für einen Arbeitsbereich für Betriebsabläufe: semantische Token-Referenzen, auswählbare Servicekarten, dreistufige Sammelauswahl, Prüfung des Geltungsbereichs und vollständiger nativer React-Code. ### REI Cedar Erstelle einen konkreten Auswahlbereich für Cedar-Lieferoptionen mit nativen Vue-Kacheln, echten Token-Werten, vollständiger Tastaturnavigation und einem responsiven Produktlayout. - [Implementierungsreferenz](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Quelle](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Quelle](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Quelle](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Quelle](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Quelle](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Unterstützende Spezifikation lesen](https://boltdesignsystem.com/) - [Unterstützende Spezifikation lesen](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Unterstützende Spezifikation lesen](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Unterstützende Spezifikation lesen](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Unterstützende Spezifikation lesen](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Unterstützende Spezifikation lesen](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Code-Referenz](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html) - [Bolt-Implementierungen React- und Twig-Einstiegspunkte.](https://boltdesignsystem.com/) - [Markenfarb-Design-Tokens Pega-Farbpalette und CSS-Variablen.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html) - [Abstände Unabhängige x- und y-Skalen.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html) - [Typografie Fließende rem-Größen und Schriftfamilien.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html) - [Informationsdichte Dichteeinstellung auf Seitenebene.](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html) - [Accordion-Schema Twig-Eigenschaften, Item-Template und Interaktionsvorgaben.](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)