# Backbase デザインシステム

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

振込先と金額を変更し、検証、確認、リセットできます。実際の送金は行われません。

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

Backbase の最新公開ドキュメント。Web コードは @backbase/ui-ang を対象としています。ネイティブの値は明確に区別しており、Angular の CSS 変数として扱わないでください。カスタム顧客テーマではデフォルト値を置き換えられます。

### Angular のボタン入力

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Selector | button[bbButton] | Backbase のスタイルを適用した、ネイティブボタンのセマンティクス。 |
| buttonSize | sm \| md; default md | ドキュメントに記載されたサイズを選択します。 |
| color | primary \| secondary \| tertiary \| link-text \| success \| danger \| neutral \| dark | 外観とセマンティクスのバリエーション。 |
| type | button by default | フォーム内では submit を明示的に設定します。 |
| block | false | true にすると親要素の幅いっぱいに広がります。 |
| circle | false | テキストのないアイコンにのみ使用します。 |
### モードヘッダーの構成

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| title | string | メインの h2 タイトル。 |
| secondaryTitle | string | コンテキストを示す行。 |
| reverseTitleOrder | true | タイトルの順序を制御します。 |
| showCloseButton | true | ページヘッダーを固定する場合は false に設定します。 |
| closeButtonAriaLabel | string | 閉じる操作の名前を指定します。 |
| close | EventEmitter<void> | 実際の終了処理に接続します。 |
| mode-header-utility-area | Projected content | コンテキストに応じた操作をヘッダーに配置します。 |
### 公開されているデフォルトのボタンカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| primary / default background | #295eff | ドキュメントに記載されたデフォルトの配色です。すべての顧客ブランドに共通するものではありません。 |
| primary / hovered background | #2049c6 | ホバー状態。 |
| primary / pressed background | #152f80 | 押下状態。 |
| primary / foreground | #ffffff | プライマリカラー上のテキスト。 |
| secondary / default background | transparent | ブランドの境界線と前景色。 |
| secondary / pressed background | #dee2ff | 控えめな背景層。 |
| danger / default background | #bf2310 | 破壊的な操作を示します。確認には使用しません。 |
| disabled / background | #ccd5df | 無効化時の動作と組み合わせます。 |
### UIKit の寸法であり、Web 変数ではありません

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| theme.radius.button.default | 99 | UIKit のトークン表に記載されたピル形状。 |
| theme.height.button.sm | 32 | ネイティブの小サイズの高さ。 |
| theme.height.button.md | 44 | ネイティブの中サイズの高さ。 |
| theme.padding-x.button.sm | 16 | ネイティブの水平方向の内側余白。 |
| theme.padding-x.button.md | 24 | ネイティブの水平方向の内側余白。 |
| theme.border-width.button.default | 1 | ネイティブの境界線の幅。 |
| Button typeface | preferredFont(.body, .semibold) | ネイティブのフォントシステムを使用します。 |
### Web テーマの適用

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Theme source | Visualizer export | web/default をプロジェクトのスタイルにコピーします。 |
| Font family source | styles/default/variables/_font-family.scss | @font-face のファミリー名を一致させます。 |
| Root sizing | 16px optimal; supported up to 32px | rem 単位のテーマ寸法。 |
| Logo variants | light/dark × small/big | 必要なアセットをそれぞれ用意します。1 つのロゴを引き伸ばして使わないでください。 |
## Backbase デザインシステム 完全ガイド

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

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

## Backbase デザインシステム 顧客ブランドを反映した銀行システム

### ボタンだけでなく、ユーザーフロー全体にテーマを適用する

> Backbase の Visualizer では、サポート対象のブランドプリミティブを選択し、Web、iOS、Android 向けのテーマをエクスポートできます。顧客は見出しと本文のフォントファミリーを変更し、コンポーネントやユーザーフローのスタイルにブランドを反映できます。

このサンプルは、口座間振替の確認画面です。口座識別情報と金額は架空のものです。クリックによって送金が行われたと誤解されないよう、編集可能な下書き項目と最終的なローカル確認画面を意図的に区別しています。

関連する仕様を確認する

## Backbase デザインシステム 顧客テーマは各プラットフォームに適切に適用する必要があります

### Visualizer のエクスポートはブランドカラーの HEX 値だけではありません

Visualizer は Web、iOS、Android 向けに個別の出力を生成します。Web では、エクスポートされた default ディレクトリに Sass のデザイントークンが、logos ディレクトリにブランドアセットが含まれます。ネイティブの JSON 寸法を Angular のオーバーライドにコピーするのではなく、プロジェクトのスタイルシートを通じて Web 向けの出力を適用してください。

Web のテーマ設定手順では、小・大サイズそれぞれのライトロゴとダークロゴが必要です。フォントファイルは別途用意し、@font-face のファミリー名をエクスポートされた font-family 設定と一致させる必要があります。これにより、銀行のユーザーフロー全体で、見出し、コントロール、ブランド表現に同じ顧客テーマが適用されます。

確認用のサンプルは、アプリケーション側で管理する下書きの状態で意図的に止めています。振込先や金額を変更すると、前回の結果はクリアされます。この動作はテーマのエクスポートとは別のものであり、決済の実行や銀行固有の検証ポリシーを示すものではありません。

関連する仕様を確認する

## Backbase デザインシステム エクスポートしたセマンティックテーマを使用する

### プラットフォームごとの値は、それぞれのコンテキストで管理する

リファレンス表には、デフォルトのボタンカラーと、UIKit 寸法のグループが別々に記載されています。ネイティブの theme.height.button.md は、Angular アプリに貼り付ける CSS 変数ではありません。Web の実装では、エクスポートされたスタイルまたはインストール済みの SCSS を使用してください。

プレビューでは、ドキュメントに記載されたデフォルトのプライマリブルーとセカンダリの色合いを使用しています。パネル全体のパディング、サマリーのビジュアル、レスポンシブな 2 列レイアウトはアプリケーション側の設計であり、公式トークンとは明確に区別されています。

関連する仕様を確認する

## Backbase デザインシステム 選択したブランドフォントを読み込む

### ファミリー名だけではフォントアセットは提供されません

Web のテーマ設定ガイドでは、フォントファイルを別途用意する必要があります。@font-face のファミリー名は、エクスポートされた $font-family の設定と一致させてください。ドキュメントのフォント例は、Backbase 全体で必須の書体ではありません。

テーマでは rem 単位を使用します。ルートサイズの推奨値は 16 px で、最大 32 px までサポートされています。文字サイズを拡大して、確認画面全体をテストしてください。この独立したブラウザー上の実装ではシステムフォントを使用し、顧客のフォントが利用できるかのように装うことは避けています。

関連する仕様を確認する

## Backbase デザインシステム モードヘッダーとボタンバーを組み立てる

### モードに応じたタイトルをヘッダーに表示

ModeHeaderModule は、必要に応じてサブタイトルと閉じる操作を備えた、状況に応じたタイトルを表示します。この例では、閉じる対象となる外部ルートがないため、showCloseButton を false に設定しています。リセットボタンには mode-header-utility-area の投影スロットを使用します。

ButtonModule は bbButton を通じてネイティブボタンを拡張します。color にはドキュメントに記載されたロールを指定し、buttonSize には sm または md を使用します。円形ボタンはアイコンのみの操作に使用するもので、テキストのある確認操作には適していません。

- ローカルでの確認操作には primary を使用します。

- 取り消し可能なリセット操作には secondary を使用します。

- 口座名や金額は、装飾的なボタンラベルではなく定義リストで表示します。

関連する仕様を確認する

## Backbase デザインシステム 狭い画面でも見やすいサマリー

### 読み上げ順序を保つ

元のイラストでは、2つの口座の画面表面が方向を示す線でつながっています。操作を増やすことなく、振込の関係を伝えます。小さな画面では装飾的な口座図を省略しますが、口座に関するテキストはすべて表示したままにします。

DOM の順序では、確認結果より先に編集フォームを配置します。ネイティブのラベル、フィールドエラー、ステータス領域は、キーボードやスクリーンリーダーでも利用できます。金額や振込先の理解に、ホバー時のみ表示される情報は必要ありません。

関連する仕様を確認する

## Backbase デザインシステム 認証済みの Angular 環境に接続

### スタイルとモジュールをまとめて導入

公式の Web セットアップでは、リポジトリへのアクセスと Backbase のグローバル SCSS の個別インポートが必要です。ButtonModule だけをインポートしても、必要なビジュアル環境はすべて揃いません。パッケージとスタイルを設定すれば、このスタンドアロンの例を既存の Angular アプリケーションに組み込めます。

1. 利用するリリースに必要な Angular / Node の組み合わせを確認し、認証済みの repo.backbase.com アカウントを使用します。

2. @backbase/ui-ang をインストールし、angular.json ですでに設定されているスタイルシートにグローバル SCSS を追加します。

3. 利用するコンポーネントに ButtonModule と ModeHeaderModule をインポートし、例全体を組み込んで、リセットと確認の流れを検証します。

関連する仕様を確認する

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

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

ドキュメント全体を index.html として保存し、ブラウザーで開きます。公開されている既定のボタンカラーを用いた、独立したレスポンシブな HTML の解釈です。フォームとレイアウトはアプリケーション固有のものです。Backbase Angular の実行環境ではありません。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Transfer review</title><style>*{box-sizing:border-box}body{margin:0;color:#172b4d;background:#f3f5fa;font:16px/1.5 system-ui}header{background:white;border-bottom:1px solid #dce2ee;padding:24px 5%;display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:28px;margin:0}small{color:#566781}button{border:0;border-radius:99px;background:#295eff;color:white;min-height:44px;padding:10px 24px;font:600 15px system-ui;cursor:pointer}button:hover{background:#2049c6}button:active{background:#152f80}.secondary{background:white;border:1px solid #295eff;color:#295eff}.secondary:hover{background:#dee2ff}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #152f80;outline-offset:3px}main{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;padding:36px 5%}.panel{background:white;border:1px solid #dce2ee;border-radius:16px;padding:28px}h2{font-size:20px;margin:0 0 20px}label{display:block;font-weight:600;font-size:14px;margin:20px 0 8px}input,select{width:100%;min-height:48px;border:1px solid #8090aa;border-radius:8px;padding:10px 12px;color:inherit;font:16px system-ui;background:white}p{font-size:14px;color:#566781}.from{padding:16px;background:#f3f5fa;border-radius:8px;font-size:14px}.from strong{display:block;font-size:17px}.review{width:100%;margin-top:18px}#error{color:#bf2310;margin:8px 0;min-height:21px}#result{padding:18px;border-left:4px solid #295eff;background:#edf2ff;margin-top:22px}#result:empty{display:none}svg{width:100%;max-height:200px}aside{padding:20px 10px}aside h2{font-size:24px;margin-top:24px}footer{padding:0 5% 22px;font-size:11px;color:#566781}@media(max-width:650px){header{align-items:flex-start;padding:20px;flex-wrap:wrap}h1{font-size:25px}main{grid-template-columns:1fr;padding:20px;gap:0}.panel{padding:20px}aside{padding:24px 0}svg{display:none}}</style><header><div><small>Accounts / Internal transfer</small><h1>Review your transfer</h1></div><button class="secondary" id="reset">Reset draft</button></header><main><section class="panel"><h2>Transfer details</h2><div class="from">From<strong>Everyday account · 2048</strong>Fictional account</div><form novalidate><label for="destination">To account</label><select id="destination"><option>Travel savings · 9012</option><option>Emergency savings · 3046</option></select><label for="amount">Amount in USD</label><input id="amount" value="120.00" inputmode="decimal" aria-describedby="error" autocomplete="off"><div id="error" role="alert"></div><button class="review" type="submit">Review details</button></form><div id="result" role="status"></div></section><aside><svg viewBox="0 0 360 190" aria-hidden="true"><rect x="10" y="15" width="205" height="120" rx="16" fill="#295eff"/><path d="M35 48H80M35 72H145" stroke="white" stroke-width="8" opacity=".7"/><rect x="143" y="76" width="205" height="110" rx="16" fill="#dee2ff" stroke="#295eff"/><path d="M168 106H213M168 130H278" stroke="#295eff" stroke-width="8"/><circle cx="254" cy="40" r="24" fill="white" stroke="#295eff"/><path d="M244 40H264M256 32L264 40L256 48" fill="none" stroke="#295eff" stroke-width="3"/></svg><h2>A clear check before<br>the next step.</h2><p>Review the destination and amount together. Editing either detail clears the previous review.</p><p><strong>Local demonstration.</strong> No account connection, balance check or payment submission takes place.</p></aside></main><footer>Independent Backbase interpretation · default button palette · system font fallback</footer><script>const form=document.querySelector('form'),amount=document.querySelector('#amount'),destination=document.querySelector('#destination'),error=document.querySelector('#error'),result=document.querySelector('#result');function clear(){result.textContent='';error.textContent='';amount.removeAttribute('aria-invalid')}form.oninput=clear;form.onchange=clear;form.onsubmit=e=>{e.preventDefault();clear();const s=amount.value.trim();if(!/^\d+(\.\d{1,2})?$/.test(s)||Number(s)<=0||!Number.isFinite(Number(s))){error.textContent='Enter a positive amount with up to two decimal places.';amount.setAttribute('aria-invalid','true');amount.focus();return}result.textContent='Reviewed locally: '+new Intl.NumberFormat('en-US',{style:'currency',currency:'USD'}).format(Number(s))+' to '+destination.value+'. No transfer submitted.'};document.querySelector('#reset').onclick=()=>{form.reset();clear()};</script></html>
```

コードリファレンス

- 金額と振込先は架空のものです。この HTML フォームは銀行に接続されていません。Angular の ModeHeader と bbButton の例を使うには、認証済みの Backbase パッケージへのアクセスが必要です。

### モードヘッダーとローカルでの確認操作

実際の Backbase モジュールを2つ使用し、リセット操作を投影し、明示的なローカル状態を持つスタンドアロンの Angular コンポーネントです。

```
// transfer-review.component.ts — in an authorized Backbase Angular application
import { Component } from '@angular/core';
import { ButtonModule } from '@backbase/ui-ang/button';
import { ModeHeaderModule } from '@backbase/ui-ang/mode-header';

@Component({
  selector: 'app-transfer-review',
  standalone: true,
  imports: [ButtonModule, ModeHeaderModule],
  template: `
    <bb-mode-header-ui title="Review transfer" secondaryTitle="Local demonstration"
      [showCloseButton]="false">
      <button bbButton color="secondary" mode-header-utility-area
        (click)="reviewed = false">Reset review</button>
    </bb-mode-header-ui>
    <dl><dt>From</dt><dd>Everyday account · 2048</dd>
      <dt>To</dt><dd>Travel savings · 9012</dd>
      <dt>Amount</dt><dd>USD 120.00</dd></dl>
    <p>No money is moved by this example.</p>
    <div class="bb-button-bar">
      <button bbButton class="bb-button-bar__button" [disabled]="reviewed"
        (click)="reviewed = true">Mark as reviewed</button>
    </div>
    <p role="status">{{ reviewed ? 'Reviewed locally. No transfer submitted.' : 'Check the account details.' }}</p>
  `
})
export class TransferReviewComponent { reviewed = false; }
```

コードリファレンス

- Backbase パッケージとグローバル SCSS が必要です。公開 npm へのアクセスだけでは利用できません。

- button[bbButton] がディレクティブを提供し、ModeHeaderModule が bb-mode-header-ui を提供します。

- 確認フラグによる決済への副作用はありません。実際の振込フローでは、送信を独立した確認済みのアプリケーション操作にする必要があります。

## Backbase デザインシステム エージェントのセットアップ

### 実装の出発点

ライセンスを取得したプロジェクトに必要なリリース互換性を使用してください。angular.json にグローバルスタイルシートが含まれていることを確認してください。Angular 17 / ui-ang 11 の旧構成では esbuild に関する制約がドキュメントに記載されています。ui-ang 12 以降は esbuild をサポートします。このガイドではレジストリの認証情報を提供しません。

```
# First obtain authorized npm access to repo.backbase.com.
# The linked installation guide specifies Node 20.11.1 and Angular 18+.
npm install --save @backbase/ui-ang

// At the top of the Angular application global styles.scss:
@import "@backbase/ui-ang/scss/main";
```

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

```
実際の ButtonModule と ModeHeaderModule のインポートを使用して、Backbase の Angular 振込確認画面を作成します。認証済みのパッケージスタイルと顧客テーマを読み込みます。プラットフォーム固有のトークンは分けて管理します。アプリケーションのデータを検証し、編集時には古い確認状態をクリアしてください。ローカルのサンプルを送信済みの振込として表示しないでください。
```

## Backbase デザインシステム 出典と適用範囲

Backbase パッケージへのアクセスには、認証済みのリポジトリアカウントが必要です。ブラウザーのプレビューは独立した HTML であり、Backbase Angular ではありません。青系の配色は公開されている既定のボタンカラーに基づいています。パネルの間隔とイラストはアプリケーション側で選択したものです。以下のネイティブ寸法にはプラットフォーム名を明記しています。

- Web のインストール レジストリ、Angular、スタイルシートの設定。

- Web ボタン ディレクティブの入力値と操作のグループ化。

- Web モードヘッダー タイトル、閉じるイベント、コンテンツ投影。

- Web テーマを適用 エクスポートされるスタイル、フォントアセット、rem 単位でのサイズ指定。

- グローバルなブランディング ビジュアライザーと顧客向けブランディング。

- UIKit ボタン ネイティブのトークンエイリアスと寸法。

- Compose ボタン 既定のボタン配色と Compose のプロパティ。

- Web アイコン Material のアイコンフォントを置き換える。

## Backbase デザインシステム 関連リソース

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

DDS v3 で対象を絞り込んだデバイス検索を構築します。セマンティックカラー、レスポンシブなタイポグラフィのスケール、トークンによるスペーシングを使い、InputGroup を組み合わせます。フィルター動作はアプリケーション側で実装してください。

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

Duet の LocalTapiola のカラーと間隔のスケールを、日付範囲のワークフローを通して確認します。ISO 形式の日付値、明示的な範囲検証、コンポーネントのフォーカスメソッド、オープンソースの日付選択コンポーネントとの明確な境界を扱います。

### Elastic UI

検証済みの Borealis スケール、ネイティブのテーブルと検索コントロール、重大度フィルター、ローカルに保存するイベントを備えた Elastic UI ログエクスプローラーを構築し、完全な React ソースを確認できます。


- [実装リファレンス](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [ソース](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [ソース](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [ソース](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [ソース](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [ソース](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [関連する仕様を確認する](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [関連する仕様を確認する](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [関連する仕様を確認する](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [関連する仕様を確認する](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [関連する仕様を確認する](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)
- [関連する仕様を確認する](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [コードリファレンス](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [コードリファレンス](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Web のインストール レジストリ、Angular、スタイルシートの設定。](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Web ボタン ディレクティブの入力値と操作のグループ化。](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Web モードヘッダー タイトル、閉じるイベント、コンテンツ投影。](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Web テーマを適用 エクスポートされるスタイル、フォントアセット、rem 単位でのサイズ指定。](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [グローバルなブランディング ビジュアライザーと顧客向けブランディング。](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [UIKit ボタン ネイティブのトークンエイリアスと寸法。](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Compose ボタン 既定のボタン配色と Compose のプロパティ。](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Web アイコン Material のアイコンフォントを置き換える。](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)