Système de design Backbase.

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

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

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