# Дизайн-система Backbase

## Предварительный просмотр интерфейса дизайн-система Backbase

Измените получателя и сумму, проверьте данные, просмотрите и сбросьте форму. Денежные средства не перемещаются.

## Справочник по дизайн-системе дизайн-система Backbase

Общедоступная документация Backbase, последняя версия. В веб-коде используется @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, а не веб-переменные

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| 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) | Используется нативная система шрифтов. |
### Подключение веб-темы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| 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 — банковская система с фирменным оформлением клиента

### Оформляйте весь пользовательский путь, а не отдельные кнопки

> Visualizer от Backbase предоставляет поддерживаемый набор базовых элементов фирменного стиля и экспортирует тему для веба, iOS и Android. Клиент может менять шрифты заголовков и основного текста, распространяя фирменное оформление на стили компонентов и пользовательских сценариев.

В этом примере показана проверка внутреннего перевода между счетами. Идентификаторы счетов и суммы вымышлены. Визуальная структура намеренно отделяет редактируемые поля черновика от итоговой локальной проверки, не создавая впечатления, будто нажатие кнопки переместило деньги.

Прочитать вспомогательную спецификацию

## Темы клиентов дизайн-система Backbase необходимо корректно применять на каждой платформе

### Экспорт Visualizer — это не просто шестнадцатеричный код фирменного цвета

Visualizer формирует отдельные выходные файлы для веба, iOS и Android. Для веба экспортируемая папка по умолчанию содержит токены дизайна Sass, а папка logos — фирменные материалы. Подключайте веб-выходные файлы через таблицу стилей проекта, а не копируйте размеры из нативного JSON в переопределения Angular.

Инструкции по темизации веба требуют светлые и тёмные логотипы в двух вариантах размера — малом и большом. Файлы шрифтов предоставляются отдельно; их имена семейств в @font-face должны совпадать с экспортированной конфигурацией font-family. Так заголовки, элементы управления и фирменное оформление банковского сценария будут соответствовать одной теме клиента.

В этом демонстрационном примере намеренно показан только черновик, принадлежащий приложению: при изменении получателя или суммы предыдущий результат сбрасывается. Это поведение не связано с экспортом темы и не означает, что выполняется платёж или применяется политика проверки конкретного банка.

Прочитать вспомогательную спецификацию

## Дизайн-система Backbase Следуйте экспортированной семантической теме

### Храните значения платформ отдельно

В справочной таблице указаны цвета кнопок по умолчанию и отдельная группа размеров UIKit. Нативное значение theme.height.button.md — не переменная CSS, которую нужно вставлять в приложение Angular. В веб-реализациях следует использовать экспортированные стили или установленный SCSS.

В предварительном просмотре используются документированные основной синий цвет и дополнительный оттенок по умолчанию. Общие внутренние отступы панели, иллюстрация сводки и адаптивное расположение в две колонки — решения приложения, явно отделённые от официальных токенов.

Прочитать вспомогательную спецификацию

## Дизайн-система Backbase Подключите шрифты выбранного бренда

### Имя семейства не заменяет файл шрифта

Согласно руководству по темизации веба, файлы шрифтов предоставляются отдельно. Семейство в @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

### Устанавливайте стили и модули вместе

Для официальной настройки веб-версии необходим доступ к репозиторию и отдельное подключение глобального SCSS Backbase. Одного импорта 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 Настройка агента

### Отправная точка для реализации

Используйте совместимые версии, требуемые лицензированным проектом. Убедитесь, что в 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";
```

### Запрос для вашего проекта

```
Создайте форму проверки перевода в Backbase Angular, импортировав настоящие ButtonModule и ModeHeaderModule. Подключите авторизованные стили пакета и тему клиента. Не смешивайте токены разных платформ. Проверяйте данные приложения, сбрасывайте устаревший результат просмотра при изменении полей и не выдавайте локальный пример за отправленный платёж.
```

## Дизайн-система Backbase Источники и область применения

Для доступа к пакетам Backbase требуется авторизованная учётная запись репозитория. Предварительный просмотр в браузере — независимая HTML-интерпретация, а не Backbase Angular. Синяя палитра соответствует опубликованным цветам кнопок по умолчанию; интервалы панели и иллюстрация выбраны для приложения. Размеры ниже приведены с указанием платформы.

- Установка веб-версии Настройка реестра, Angular и таблицы стилей.

- Веб-кнопка Параметры директивы и группировка действий.

- Заголовок веб-режима Заголовок, событие закрытия и проекция содержимого.

- Применение веб-темы Экспортированные стили, файлы шрифтов и размеры rem.

- Глобальное оформление бренда Visualizer и оформление клиента.

- Кнопка UIKit Псевдонимы нативных токенов и размеры.

- Кнопка Compose Палитра кнопок по умолчанию и свойства Compose.

- Веб-иконки Замена шрифта значков 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)
- [Установка веб-версии Настройка реестра, Angular и таблицы стилей.](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)
- [Применение веб-темы Экспортированные стили, файлы шрифтов и размеры rem.](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Глобальное оформление бренда Visualizer и оформление клиента.](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)
- [Веб-иконки Замена шрифта значков Material.](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)