# 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 | 在表单中明确设置提交按钮类型。 |
| 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 | 为每种必需的资源分别提供文件；不要拉伸同一个徽标来代替。 |
## Backbase 设计系统 完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Backbase 设计系统 具有客户品牌特色的银行系统

### 为完整流程设置主题，而不是只为单个按钮设置主题

> Backbase Visualizer 提供一组受支持的品牌基础元素，并可导出适用于 Web、iOS 和 Android 的主题。客户可以更改标题和正文的字体系列，并将品牌样式应用到组件和流程样式中。

此示例展示的是内部账户间转账审核。账户标识和金额均为虚构。视觉结构有意区分可编辑的草稿字段与最终的本地审核状态，而不会让人误以为点击后资金已转移。

阅读配套规范

## Backbase 设计系统 客户主题必须在各个平台上正确应用

### Visualizer 导出的内容不只有品牌色值

Visualizer 会分别生成 Web、iOS 和 Android 输出。对于 Web，导出的默认目录包含 Sass 设计令牌，logos 目录则包含品牌资源。应通过项目样式表应用 Web 输出，而不是将原生 JSON 尺寸复制到 Angular 覆盖样式中。

Web 主题说明要求提供浅色和深色徽标，并且每种颜色均需有小号和大号版本。字体文件需单独提供，其 @font-face 字体系列名称必须与导出的 font-family 配置一致。这样，银行流程中的标题、控件和品牌样式就能统一遵循同一客户主题。

审核示例有意止于由应用管理的草稿状态：更改收款账户或金额会清除之前的结果。此行为与主题导出无关，也不代表已执行付款或采用了特定银行的验证规则。

阅读配套规范

## Backbase 设计系统 遵循导出的语义主题

### 将各平台的值保留在各自的上下文中

参考表包含默认按钮颜色和单独的 UIKit 尺寸分组。原生主题值 theme.height.button.md 并非可以粘贴到 Angular 应用中的 CSS 变量。Web 实现应使用导出的样式或已安装的 SCSS。

预览采用文档中说明的默认主蓝色和次级色调。整体面板内边距、摘要插图和响应式双栏布局均为应用层面的选择，与官方令牌明确区分。

阅读配套规范

## 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 设计系统 在窄屏上也清晰易读的摘要

### 保持阅读顺序

原始插图展示了由方向路径连接的两个账户界面表面，体现转账关系，而不会变成第二个操作。在小屏幕上会省略装饰性的账户示意图，但所有账户文字仍清晰可见。

在 DOM 顺序中，编辑器位于审阅结果之前。原生标签、字段错误和状态区域仍可供键盘及屏幕阅读器用户使用。理解金额或收款方无需依赖仅在悬停时显示的详情。

阅读配套规范

## Backbase 设计系统 连接已获授权的 Angular 环境

### 同时安装样式和模块

官方 Web 安装指南要求具有代码仓库访问权限，并单独导入全局 Backbase SCSS。只导入 ButtonModule 并不能提供完整的视觉环境。配置好所需软件包和样式后，可将独立示例挂载到现有 Angular 应用中。

1. 使用已获授权的 repo.backbase.com 账户，以及所选版本要求的 Angular/Node 组合。

2. 安装 @backbase/ui-ang，并将其全局 SCSS 添加到 angular.json 中已配置的样式表。

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 软件包访问权限。

### 模式标题栏与本地审阅操作

一个独立的 Angular 组件，使用两个真实的 Backbase 模块、投影式重置操作和明确的本地状态。

```
// 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 设计系统 Agent 设置

### 实现起点

请使用许可项目要求的版本兼容配置。确保 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

构建一个 Elastic UI 日志浏览器，采用经过验证的 Borealis 尺度、原生表格和搜索控件、严重程度筛选、本地保存的事件，以及完整的 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)