# Système de design Backbase

## Aperçu de l’interface système de design Backbase

Modifiez la destination et le montant, validez, vérifiez, puis réinitialisez. Aucun transfert d’argent n’a lieu.

## Référence de design système de design Backbase

Documentation publique la plus récente de Backbase. Le code Web utilise @backbase/ui-ang ; les valeurs natives sont clairement distinctes et ne doivent pas être considérées comme des variables Angular CSS. Les thèmes personnalisés des clients peuvent remplacer les valeurs par défaut.

### Propriétés des boutons Angular

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Selector | button[bbButton] | Sémantique native des boutons avec le style Backbase. |
| buttonSize | sm \| md; default md | Choisissez une taille documentée. |
| color | primary \| secondary \| tertiary \| link-text \| success \| danger \| neutral \| dark | Variantes visuelles et sémantiques. |
| type | button by default | Définissez explicitement le type submit dans un formulaire. |
| block | false | true occupe toute la largeur du parent. |
| circle | false | Uniquement pour une icône sans texte. |
### Anatomie de l’en-tête du mode

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| title | string | Titre principal h2. |
| secondaryTitle | string | Ligne de contexte. |
| reverseTitleOrder | true | Définit l’ordre des titres. |
| showCloseButton | true | Définissez la valeur sur false pour un en-tête de page persistant. |
| closeButtonAriaLabel | string | Nommez l’action de fermeture. |
| close | EventEmitter<void> | Associez-le à un véritable gestionnaire de sortie. |
| mode-header-utility-area | Projected content | Placez les actions contextuelles dans l’en-tête. |
### Couleurs par défaut publiées des boutons

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| primary / default background | #295eff | Palette par défaut documentée, qui ne constitue pas une marque universelle pour les clients. |
| primary / hovered background | #2049c6 | État au survol. |
| primary / pressed background | #152f80 | État actif. |
| primary / foreground | #ffffff | Texte sur la couleur primaire. |
| secondary / default background | transparent | Bordure et premier plan de la marque. |
| secondary / pressed background | #dee2ff | Surface discrète. |
| danger / default background | #bf2310 | Intention destructive, et non de révision. |
| disabled / background | #ccd5df | Associer à un comportement désactivé. |
### Dimensions UIKit, et non variables web

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| theme.radius.button.default | 99 | Forme en pilule dans le tableau des jetons UIKit. |
| theme.height.button.sm | 32 | Hauteur native petite. |
| theme.height.button.md | 44 | Hauteur native moyenne. |
| theme.padding-x.button.sm | 16 | Marge intérieure horizontale native. |
| theme.padding-x.button.md | 24 | Marge intérieure horizontale native. |
| theme.border-width.button.default | 1 | Largeur de bordure native. |
| Button typeface | preferredFont(.body, .semibold) | Utilise le système de polices natif. |
### Intégration du thème web

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| Theme source | Visualizer export | Copiez web/default dans les styles du projet. |
| Font family source | styles/default/variables/_font-family.scss | Faites correspondre les noms de famille dans @font-face. |
| Root sizing | 16px optimal; supported up to 32px | Dimensions du thème en rem. |
| Logo variants | light/dark × small/big | Fournissez chaque ressource requise ; n’étirez pas un logo unique. |
## Système de design Backbase Guide complet

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design Backbase Un système bancaire aux couleurs de la marque du client

### Appliquer le thème au parcours, pas à des boutons isolés

> Le Visualizer de Backbase expose un ensemble pris en charge de primitives de marque et exporte un thème pour le web, iOS et Android. Un client peut modifier les familles de polices des titres et du corps de texte, puis appliquer sa marque aux styles des composants et des parcours.

Cet exemple présente une révision interne d’un virement entre deux comptes. Les identifiants de compte et les montants sont fictifs. La structure visuelle distingue délibérément les champs modifiables du brouillon de la révision locale finale, sans laisser entendre qu’un clic a transféré de l’argent.

Consultez la spécification associée

## Système de design Backbase Les thèmes des clients doivent être correctement appliqués à chaque plateforme

### L’export du Visualizer ne se limite pas à une couleur hexadécimale de marque

Le Visualizer génère des sorties distinctes pour le web, iOS et Android. Pour le web, le répertoire default exporté contient les jetons de design Sass, tandis que le répertoire logos contient les ressources de marque. Appliquez cette sortie web au moyen de la feuille de style du projet, au lieu de copier des dimensions JSON natives dans les surcharges Angular.

Les instructions de thématisation web exigent des logos clairs et foncés, dans des variantes petites et grandes. Les fichiers de police sont fournis séparément, et leurs noms de famille dans @font-face doivent correspondre à la configuration font-family exportée. Ainsi, les titres, les commandes et l’identité de marque du parcours bancaire restent cohérents avec le même thème client.

L’exemple de révision s’arrête volontairement à un brouillon géré par l’application : modifier la destination ou le montant efface le résultat précédent. Ce comportement est distinct de l’export du thème et n’implique ni l’exécution d’un paiement ni une politique de validation propre à une banque.

Consultez la spécification associée

## Système de design Backbase Suivez le thème sémantique exporté

### Conservez les valeurs de chaque plateforme dans leur propre contexte

Le tableau de référence présente les couleurs par défaut des boutons et un groupe distinct de dimensions UIKit. Une valeur native telle que theme.height.button.md n’est pas une variable CSS à coller dans une application Angular. Les implémentations web doivent utiliser les styles exportés ou le fichier SCSS installé.

L’aperçu utilise le bleu primaire et la teinte secondaire par défaut, tels que documentés. Le remplissage global du panneau, l’illustration du récapitulatif et la disposition réactive sur deux colonnes sont des choix propres à l’application, clairement distincts des jetons officiels.

Consultez la spécification associée

## Système de design Backbase Chargez les polices de la marque sélectionnée

### Un nom de famille ne fournit pas le fichier de police

Le guide de thématisation web exige que les fichiers de police soient fournis séparément. La famille dans @font-face doit correspondre à la configuration $font-family exportée. La police utilisée dans la documentation n’est pas une police Backbase globale obligatoire.

Le thème utilise des unités rem et indique que 16 px est la valeur racine optimale, avec une prise en charge jusqu’à 32 px. Testez l’ensemble de la révision avec des tailles de texte agrandies. Notre interprétation autonome dans le navigateur utilise les polices système et ne prétend pas que les polices du client sont disponibles.

Consultez la spécification associée

## Système de design Backbase Composez l’en-tête de mode et la barre de boutons

### Projetez les véritables actions dans un en-tête contextuel

ModeHeaderModule fournit un titre contextuel avec une ligne secondaire et un contrôle de fermeture facultatifs. Dans l’exemple, showCloseButton est défini sur false, car l’exemple ne dispose d’aucune route externe à fermer. Le bouton de réinitialisation utilise le point de projection mode-header-utility-area.

ButtonModule enrichit un bouton natif au moyen de bbButton. Définissez color sur un rôle documenté et utilisez buttonSize sm ou md. Le bouton circulaire est réservé aux commandes constituées d’une icône seule ; il ne convient pas à l’action de révision présentée sous forme de texte.

- Utilisez le rôle primary pour l’unique action de révision locale.

- Utilisez le rôle secondary pour l’action de réinitialisation réversible.

- Présentez les noms des comptes et les montants dans une liste de définitions, et non dans des libellés de boutons décoratifs.

Consultez la spécification associée

## Système de design Backbase Un récapitulatif adapté aux écrans étroits

### Préservez l’ordre de lecture

L’illustration d’origine montre deux surfaces de compte reliées par un tracé directionnel. Elle représente le lien entre les virements sans devenir une seconde action. Sur les petits écrans, le schéma décoratif des comptes est omis, mais tout le texte relatif aux comptes reste visible.

Dans l’ordre du DOM, l’éditeur précède le résultat de la révision. Les libellés natifs, les erreurs de champ et une zone d’état restent accessibles aux personnes utilisant le clavier ou un lecteur d’écran. Aucun détail disponible uniquement au survol n’est nécessaire pour comprendre le montant ou la destination.

Consultez la spécification associée

## Système de design Backbase Connectez-vous à l’environnement Angular autorisé

### Installez les styles et les modules ensemble

La configuration web officielle nécessite un accès au dépôt et l’importation séparée du fichier SCSS global de Backbase. Importer uniquement ButtonModule ne fournit pas l’environnement visuel complet. Une fois le package et les styles configurés, l’exemple autonome peut être intégré à une application Angular existante.

1. Utilisez votre compte autorisé sur repo.backbase.com et la combinaison Angular/Node requise par la version choisie.

2. Installez @backbase/ui-ang et ajoutez son fichier SCSS global à la feuille de style déjà configurée dans angular.json.

3. Importez ButtonModule et ModeHeaderModule dans le composant qui les utilise, puis intégrez l’exemple complet et vérifiez le cycle de réinitialisation et de révision.

Consultez la spécification associée

## Système de design Backbase Exemples de composants du système de design

### Exemple interactif autonome complet

Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation autonome et adaptative HTML utilisant les couleurs par défaut publiées des boutons ; formulaire et mise en page propres à l’application. Ce n’est pas l’environnement d’exécution Angular de Backbase.

```
<!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>
```

Référence du code

- Le montant et le destinataire sont fictifs. Ce formulaire HTML n’est relié à aucun service bancaire ; l’exemple Angular ModeHeader et bbButton nécessite un accès autorisé aux packages Backbase.

### En-tête de mode et action de vérification locale

Un composant Angular autonome utilisant deux modules Backbase réels, une action de réinitialisation projetée et un état local explicite.

```
// 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; }
```

Référence du code

- Nécessite le package Backbase installé et les fichiers SCSS globaux ; l’accès public à npm ne suffit pas.

- button[bbButton] fournit la directive. ModeHeaderModule fournit bb-mode-header-ui.

- L’indicateur de vérification n’a aucun effet sur le paiement. Dans un véritable parcours de virement, l’envoi doit être une opération distincte de l’application, avec confirmation.

## Configuration de l’agent IA système de design Backbase

### Point de départ de l’implémentation

Utilisez la version compatible avec votre projet sous licence. Vérifiez que angular.json inclut la feuille de style globale. Les configurations plus anciennes Angular 17 / ui-ang 11 sont soumises à une restriction esbuild documentée ; ui-ang 12+ prend en charge esbuild. Ce guide ne fournit pas d’identifiants de registre.

```
# 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";
```

### Un prompt pour votre projet

```
Créez une vérification de virement Angular Backbase en important les modules réels ButtonModule et ModeHeaderModule. Chargez les styles du package autorisé et le thème client. Gardez les jetons propres à chaque plateforme séparés. Validez les données de l’application, effacez toute vérification obsolète après modification et ne présentez jamais un exemple local comme un paiement envoyé.
```

## Sources et périmètre système de design Backbase

L’accès aux packages Backbase nécessite un compte autorisé pour le dépôt. L’aperçu dans le navigateur est indépendant HTML et ne correspond pas à Backbase Angular. Sa palette bleue reprend les couleurs par défaut publiées pour les boutons ; l’espacement des panneaux et l’illustration sont des choix propres à l’application. Les dimensions natives ci-dessous sont indiquées par plateforme.

- Installation Web Configuration du registre, d’Angular et des feuilles de style.

- Bouton Web Entrées de directive et regroupement des actions.

- En-tête de mode Web Titre, événement de fermeture et projection de contenu.

- Appliquer un thème Web Styles exportés, fichiers de polices et dimensions en rem.

- Identité visuelle globale Visualiseur et identité visuelle client.

- Bouton UIKit Alias de jetons natifs et dimensions.

- Bouton Compose Palette par défaut des boutons et propriétés Compose.

- Icônes Web Remplacement de la police d’icônes Material.

## Ressources associées système de design Backbase

### Dell système de design

Créez une recherche d’appareils avec filtres contextuels à l’aide de DDS v3 : couleurs sémantiques, échelle typographique adaptative, espacement par jetons et composition InputGroup dont le filtrage relève de l’application.

### Duet système de design

Étudiez les échelles de couleurs et d’espacement de Duet et LocalTapiola à travers un parcours de sélection de dates, avec valeurs de date ISO, validation explicite de la plage, méthodes de focus du composant et distinction claire avec le sélecteur open source.

### Elastic UI

Créez un explorateur de journaux Elastic UI avec les échelles Borealis vérifiées, des commandes natives de tableau et de recherche, un filtre de gravité, des événements enregistrés localement et le code source complet de React.


- [Référence de mise en œuvre](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Source](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Source](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Source](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Source](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Source](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Consultez la spécification associée](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Consultez la spécification associée](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Consultez la spécification associée](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Consultez la spécification associée](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Consultez la spécification associée](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)
- [Consultez la spécification associée](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Référence du code](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Référence du code](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Installation Web Configuration du registre, d’Angular et des feuilles de style.](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Bouton Web Entrées de directive et regroupement des actions.](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [En-tête de mode Web Titre, événement de fermeture et projection de contenu.](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Appliquer un thème Web Styles exportés, fichiers de polices et dimensions en rem.](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Identité visuelle globale Visualiseur et identité visuelle client.](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Bouton UIKit Alias de jetons natifs et dimensions.](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Bouton Compose Palette par défaut des boutons et propriétés Compose.](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Icônes Web Remplacement de la police d’icônes Material.](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)