# Pega Bolt デザインシステム

## Pega Bolt デザインシステム インターフェースプレビュー

イラスト付きの編集者向け概要の横で、同時に開ける質問項目を1つに制限したスタックをお試しください。

## Pega Bolt デザインシステム デザインリファレンス

一般公開されているBolt Twig Pattern Labのリファレンスです。rem値はページのルート要素に応じて変化するため、すべての値を固定の16px単位として扱わないでください。プレビューのレイアウトとイラストは独自制作です。

### ブランドカラーの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bolt-color-navy | #001f5f | ブランドの基調色。 |
| --bolt-color-navy-dark | #081c45 | より深い背景色。 |
| --bolt-color-navy-xlight | #d7e2f2 | 淡いブランドカラーの背景面。 |
| --bolt-color-teal | #10a5ac | イラストのアクセントカラー。小さな本文テキストにそのまま使っても、アクセシビリティが確保されるわけではありません。 |
| --bolt-color-teal-xdark | #005154 | より暗いティールの選択肢。 |
| --bolt-color-orange | #f76923 | 暖色のアクセント。 |
| --bolt-color-yellow | #ffc836 | 強調色。 |
### 2軸のスペーシング

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bolt-spacing-x-xsmall | 0.3875rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-x-small | 0.775rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-x-medium | 1.55rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-x-large | 3.1rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-y-xsmall | 0.3375rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-y-small | 0.675rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-y-medium | 1.35rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
| --bolt-spacing-y-large | 2.7rem | 水平方向の間隔には横軸のスケール、垂直方向の間隔には縦軸のスケールを使用してください。 |
### タイポグラフィの基礎

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --bolt-type-font-size-display | 3.75rem | 流動的なルートサイズを基準にします。見出しタグはセマンティクスに応じて個別に選択してください。 |
| --bolt-type-font-size-xxlarge | 2.35rem | 流動的なルートサイズを基準にします。見出しタグはセマンティクスに応じて個別に選択してください。 |
| --bolt-type-font-size-large | 1.4rem | 流動的なルートサイズを基準にします。見出しタグはセマンティクスに応じて個別に選択してください。 |
| --bolt-type-font-size-regular | 1rem | 流動的なルートサイズを基準にします。見出しタグはセマンティクスに応じて個別に選択してください。 |
| --bolt-type-font-size-small | 0.9rem | 流動的なルートサイズを基準にします。見出しタグはセマンティクスに応じて個別に選択してください。 |
| Font family | Open Sans | 公開されている基礎設定で定義された本文用フォントと見出し用フォント。 |
| Weights | 300 / 400 / 600 / 700 / 800 | LightからExtra Boldまで。ウェイトに対応するフォントファイルを読み込んでください。 |
### ページ密度

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Attribute | data-bolt-info-density | html要素にのみ設定してください。 |
| comfortable | Larger font and spacing | 読みやすさを重視した密度。 |
| regular | Default | 属性は省略できます。 |
| compact | Smaller font and spacing | 個別のカードに適用する修飾子として使わないでください。 |
### アコーディオンの構成

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| single | false by default | trueを設定すると、開いた項目を1つに制限します。 |
| spacing | medium | スキーマで指定できる値はnone、xsmall、small、medium、largeです。 |
| icon_valign | center | topを指定すると、複数行のトリガーに対してアイコンが上揃えになります。 |
| no_separator | false | 質問ごとの区切りを明確にするため、セパレーターを残してください。 |
| box_shadow | false | 外側を囲む影は任意です。 |
| item.open | false | 初期項目を展開する。 |
| item.inactive | false | 開閉アイコンのない折りたたみ項目。 |
| item.trigger | Content | デフォルトのラベルを置き換え、内容が伝わる質問を記入してください。 |
## Pega Bolt デザインシステム 完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Pega Bolt デザインシステム Boltの実装方式を選ぶ

### TwigとReactでは仕様が異なります

> このガイドでは、一般公開されているBolt Twig / Pattern Labの実装を取り上げます。現在のBoltホームページでは、アプリケーションやポータル向けにBoltDSのReactも紹介されています。2つの実装はドキュメントとバージョン管理が別々です。このプレビューは独自のHTMLによる解釈であり、Boltランタイムではありません。

このサンプルは、概要と任意の質問を表示するワークショップ資料です。コンテンツを中心とするTwig実装に適しています。編集上の階層構造を優先し、補足資料はアコーディオンで必要に応じて表示します。BoltDSのReactを使ったアプリケーションでは、Twigの名前空間パスを流用せず、BoltDSのドキュメントを参照してください。

関連する仕様を確認する

## 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 デザインシステムでは横方向と縦方向のリズムが異なります

### 一般的な8ポイントスケールで代用しないでください

横方向の中サイズのスペーシングは1.55rem、縦方向の中サイズは1.35remです。大サイズも同様に、横方向は3.1rem、縦方向は2.7remです。隣り合う要素の間にはxスケールを、縦に積み重なるセクションの間にはyスケールを使います。

プレビューでは、画面幅が広いときは導入部分と質問リストを別々の列に配置し、700 pxの独自ブレークポイントで縦に並べます。このブレークポイントはアプリケーション側の設定であり、Boltのトークンではありません。長い質問ラベルは、テキストを縮小せずにアイコンの横で折り返されます。

関連する仕様を確認する

## Pega Bolt デザインシステムの質問リストをTwigで構築する

### 項目はデータプロパティではなく、直接記述したコンテンツです

accordion-item.twigを呼び出すたびに、triggerとcontentを指定します。Twigのsetブロックで項目をレンダリングしたマークアップを取得し、そのマークアップをcontent経由で親に渡します。上の完全な例では、最初の質問を開いた状態にし、single: trueを指定しています。

spacingは項目の内側の余白を、icon_valignはアイコンの縦方向の配置を制御します。質問の境界を明確にする必要がある場合は、区切り線を残してください。inactiveフラグはフォームコントロールを無効にするものではありません。コンテンツを折りたたみ、アイコンを非表示にします。

- 日付、参加要件、開催状況は、折りたたまれた回答の外に表示してください。

- トリガーには、具体的な質問を示す文言を使います。

- 回答の中に別のアコーディオンを入れないでください。

関連する仕様を確認する

## Pega Bolt デザインシステム 読んでいる位置を保ったまま展開する

### 一度に開く回答は1つ

HTMLの実装では、通常のボタン、aria-expanded、aria-controls、非表示の回答パネルを使用します。閉じている質問をクリックするとその回答が開き、前に開いていた回答は閉じます。開いている質問をクリックすると折りたたまれます。フォーカスはトリガーボタンに残ります。

この動作は、Bolt JavaScriptとは独立したまま、選択した「一度に1つだけ開く」挙動を再現します。プレビューはBoltのディープリンクを実装しておらず、ネイティブコンポーネントのランタイムを動作させるものでもありません。ネイティブのBoltでは、singleモードが有効な場合、ディープリンクで指定された項目が初期状態で開いている項目より優先されます。

関連する仕様を確認する

## Pega Bolt デザインシステムの密度はページ全体で設定します

### コンポーネントのプロパティではなく、ルートの設定です

Boltでは、html要素のdata-bolt-info-densityでcomfortable、regular、compactを指定できます。デフォルトはregularです。comfortableは文字とスペーシングを大きくし、compactはその両方を小さくします。

アコーディオンにルート属性を適用しても、サポートされているコンポーネント単位の密度変更にはなりません。この読みものページのプレビューでは、ネイティブの密度エンジンを再現しているかのように見せるのではなく、ゆとりのある編集記事向けのレイアウトに固定しています。

関連する仕様を確認する

## Pega Bolt デザインシステム 実際のコンポーネントを組み込む

### ドキュメントに記載された環境を使う

インストールコマンドが機能するのは、コンポーネントの名前空間を解決し、必要なアセットをコンパイルするBolt Twigアプリケーション内です。公開リポジトリでは、yarn setupとyarn startで開発環境一式を利用できます。これは本番環境への2行のデプロイ手順ではなく、参照用の環境です。

1. サーバー側でレンダリングするコンテンツの実装にはTwigを選び、使用するリリースをアプリケーションで確認してください。

2. アコーディオンのパッケージをインストールし、Boltアプリケーションの設定で既存のTwig名前空間を登録して、コンパイル済みのプロジェクトアセットを読み込みます。

3. 質問の完全な例をレンダリングし、実際のプロジェクトで単一項目の展開、トリガーの折り返し、キーボード操作を確認します。

関連する仕様を確認する

## Pega Bolt デザインシステムのコンポーネント例

### 完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。Bolt Twigの基礎と、アコーディオンを1つだけ開く挙動を独立してHTML/CSSに実装しています。システムフォントにフォールバックし、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>
```

コードリファレンス

- 一度に質問を1つだけ開くリストは、Boltのディープリンクを実装していません。Twigの例がネイティブな組み込み方法です。ワークショップの重要事項は、折りたたまれた回答の外に表示します。

### 回答を1つずつ開くワークショップの質問

項目テンプレートで各質問をレンダリングし、そのマークアップを取得して、親アコーディオンに渡します。

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

コードリファレンス

- 設定済みのBolt Twigアプリケーション内で使用してください。公式コンポーネントには、単体のHTML用エントリーポイントはありません。

- singleは、同時に展開できる項目を1つに制限します。ディープリンクは、初期状態で開く項目より優先されます。

- スキーマではlargeが最大のスペーシングオプションとして定義されていますが、ドキュメントの例ではxlargeが使われています。この例ではスキーマの範囲内に収めています。

## Pega Bolt デザインシステムのエージェント設定

### 実装の出発点

パッケージコマンドで追加されるのはコンポーネントであり、単体のウェブサイトではありません。プロジェクトに登録済みの@bolt-components-accordion Twig名前空間と、コンパイル済みのBoltアセットを使用してください。リポジトリの開発環境とアプリケーションへの組み込みは別の手順です。どちらも現在の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
```

### あなたのプロジェクト向けプロンプト

```
検証済みのネイビーとティールの配色、流動的な文字階層、異なるx/yスペーシングスケールを使った、Bolt Twigのワークショップ用リソースページを作成してください。重要事項は常に表示します。single trueとmedium spacingを指定し、accordion-item.twigをaccordion.twigの中で組み立てます。TwigのパスをReact APIとして使用しないでください。
```

## Pega Bolt デザインシステムの参照情報と対象範囲

このガイドでは、一般公開されているBolt Twig / Pattern Labの実装を取り上げます。現在のBoltホームページでは、アプリケーションやポータル向けにBoltDSのReactも紹介されています。2つの実装はドキュメントとバージョン管理が別々です。このプレビューは独自のHTMLによる解釈であり、Boltランタイムではありません。

- Boltの実装 ReactとTwigのエントリーポイント。

- ブランドカラーのトークン PegaのカラーパレットとCSS変数。

- スペーシング 独立したx/yスケール。

- タイポグラフィ 流動的なremサイズとフォントファミリー。

- 情報密度 ページ単位の密度設定。

- アコーディオンのスキーマ Twigのプロパティ、項目テンプレート、インタラクションの制約。

## Pega Bolt デザインシステムの関連リソース

### Porsche デザインシステム

流動的なスペーシング、CSSのカラースキーム、Porsche Nextのタイポグラフィ、2択のコンフィギュレーターを通じて、Porsche Design System v4を見てみましょう。実際のトークン式と、最新のセグメントコントロールイベントを使用した完全なViteエントリーを掲載しています。

### Red Hat PatternFly

運用ワークスペースにはPatternFlyを使用してください。セマンティックなトークン参照、選択可能なサービスカード、3状態の一括選択、適用範囲の確認、ネイティブなReactのコード一式を備えています。

### REI Cedar

検証済みのトークン値を使ったCedarの配送方法選択UIを作成してください。Vueのタイルで構成し、キーボードでの完全な操作と、レスポンシブな商品レイアウトを実現します。


- [実装リファレンス](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [ソース](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [ソース](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [ソース](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [ソース](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [ソース](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [関連する仕様を確認する](https://boltdesignsystem.com/)
- [関連する仕様を確認する](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [関連する仕様を確認する](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [関連する仕様を確認する](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [関連する仕様を確認する](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [関連する仕様を確認する](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [コードリファレンス](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)
- [Boltの実装 ReactとTwigのエントリーポイント。](https://boltdesignsystem.com/)
- [ブランドカラーのトークン PegaのカラーパレットとCSS変数。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-00-color/index.html)
- [スペーシング 独立したx/yスケール。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-05-spacing/index.html)
- [タイポグラフィ 流動的なremサイズとフォントファミリー。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-10-typography/index.html)
- [情報密度 ページ単位の密度設定。](https://boltdesignsystem.com/pattern-lab/patterns/10-visual-styles-20-information-density/index.html)
- [アコーディオンのスキーマ Twigのプロパティ、項目テンプレート、インタラクションの制約。](https://boltdesignsystem.com/pattern-lab/patterns/40-components-accordion/index.html)