01 Backbase デザインシステム インターフェースのプレビュー 振込先と金額を変更し、検証、確認、リセットできます。実際の送金は行われません。
公開されているデフォルトのボタンカラーを用いた、独立したレスポンシブな HTML の解釈です。フォームとレイアウトはアプリケーション固有のものです。Backbase Angular のランタイムではありません。·
実装リファレンス 02
Backbase デザインシステム デザインリファレンス Backbase の最新公開ドキュメント。Web コードは @backbase/ui-ang を対象としています。ネイティブの値は明確に区別しており、Angular の CSS 変数として扱わないでください。カスタム顧客テーマではデフォルト値を置き換えられます。
名前 / ルール 値 / 設定 用途 Selectorbutton[bbButton]Backbase のスタイルを適用した、ネイティブボタンのセマンティクス。 buttonSizesm | md; default mdドキュメントに記載されたサイズを選択します。 colorprimary | secondary | tertiary | link-text | success | danger | neutral | dark外観とセマンティクスのバリエーション。 typebutton by defaultフォーム内では submit を明示的に設定します。 blockfalsetrue にすると親要素の幅いっぱいに広がります。 circlefalseテキストのないアイコンにのみ使用します。
名前 / ルール 値 / 設定 用途 titlestringメインの h2 タイトル。 secondaryTitlestringコンテキストを示す行。 reverseTitleOrdertrueタイトルの順序を制御します。 showCloseButtontrueページヘッダーを固定する場合は false に設定します。 closeButtonAriaLabelstring閉じる操作の名前を指定します。 closeEventEmitter<void>実際の終了処理に接続します。 mode-header-utility-areaProjected contentコンテキストに応じた操作をヘッダーに配置します。
名前 / ルール 値 / 設定 用途 primary / default background#295eff ドキュメントに記載されたデフォルトの配色です。すべての顧客ブランドに共通するものではありません。 primary / hovered background#2049c6 ホバー状態。 primary / pressed background#152f80 押下状態。 primary / foreground#ffffff プライマリカラー上のテキスト。 secondary / default backgroundtransparentブランドの境界線と前景色。 secondary / pressed background#dee2ff 控えめな背景層。 danger / default background#bf2310 破壊的な操作を示します。確認には使用しません。 disabled / background#ccd5df 無効化時の動作と組み合わせます。
UIKit の寸法であり、Web 変数ではありません ソース 名前 / ルール 値 / 設定 用途 theme.radius.button.default99UIKit のトークン表に記載されたピル形状。 theme.height.button.sm32ネイティブの小サイズの高さ。 theme.height.button.md44ネイティブの中サイズの高さ。 theme.padding-x.button.sm16ネイティブの水平方向の内側余白。 theme.padding-x.button.md24ネイティブの水平方向の内側余白。 theme.border-width.button.default1ネイティブの境界線の幅。 Button typefacepreferredFont(.body, .semibold)ネイティブのフォントシステムを使用します。
名前 / ルール 値 / 設定 用途 Theme sourceVisualizer exportweb/default をプロジェクトのスタイルにコピーします。 Font family sourcestyles/default/variables/_font-family.scss@font-face のファミリー名を一致させます。 Root sizing16px optimal; supported up to 32pxrem 単位のテーマ寸法。 Logo variantslight/dark × small/big必要なアセットをそれぞれ用意します。1 つのロゴを引き伸ばして使わないでください。
03 Backbase デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-backbase.md 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロード 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 アプリケーションに組み込めます。
利用するリリースに必要な Angular / Node の組み合わせを確認し、認証済みの repo.backbase.com アカウントを使用します。 @backbase/ui-ang をインストールし、angular.json ですでに設定されているスタイルシートにグローバル SCSS を追加します。 利用するコンポーネントに ButtonModule と ModeHeaderModule をインポートし、例全体を組み込んで、リセットと確認の流れを検証します。 関連する仕様を確認する
Backbase デザインシステムのコンポーネント例 完全なスタンドアロンのインタラクティブ見本 ドキュメント全体を index.html として保存し、ブラウザーで開きます。公開されている既定のボタンカラーを用いた、独立したレスポンシブな HTML の解釈です。フォームとレイアウトはアプリケーション固有のものです。Backbase Angular の実行環境ではありません。
html コードをコピー
<!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 コンポーネントです。
typescript コードをコピー
// 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 を提供します。 確認フラグによる決済への副作用はありません。実際の振込フローでは、送信を独立した確認済みのアプリケーション操作にする必要があります。 04
Backbase デザインシステム エージェントのセットアップ 実装の出発点 ライセンスを取得したプロジェクトに必要なリリース互換性を使用してください。angular.json にグローバルスタイルシートが含まれていることを確認してください。Angular 17 / ui-ang 11 の旧構成では esbuild に関する制約がドキュメントに記載されています。ui-ang 12 以降は esbuild をサポートします。このガイドではレジストリの認証情報を提供しません。
bash / scss サンプルをコピー
# 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"; あなたのプロジェクト向けプロンプト AI エージェント用プロンプト プロンプトをコピー
実際の ButtonModule と ModeHeaderModule のインポートを使用して、Backbase の Angular 振込確認画面を作成します。認証済みのパッケージスタイルと顧客テーマを読み込みます。プラットフォーム固有のトークンは分けて管理します。アプリケーションのデータを検証し、編集時には古い確認状態をクリアしてください。ローカルのサンプルを送信済みの振込として表示しないでください。 05
Backbase デザインシステム 出典と適用範囲 Backbase パッケージへのアクセスには、認証済みのリポジトリアカウントが必要です。ブラウザーのプレビューは独立した HTML であり、Backbase Angular ではありません。青系の配色は公開されている既定のボタンカラーに基づいています。パネルの間隔とイラストはアプリケーション側で選択したものです。以下のネイティブ寸法にはプラットフォーム名を明記しています。
