Backbase Designsystem.

Backbase Designsystem Ein Banking-Designsystem mit Kundenbranding

Den gesamten Ablauf thematisieren, nicht nur einzelne Buttons

Der Visualizer von Backbase stellt eine unterstützte Auswahl an Marken-Grundelementen bereit und exportiert ein Theme für Web, iOS und Android. Kunden können die Schriftfamilien für Überschriften und Fließtext ändern und das Branding auf Komponenten- und Ablaufstile übertragen.

Das Beispiel zeigt eine interne Prüfung einer Überweisung zwischen zwei Konten. Kontokennungen und Beträge sind frei erfunden. Die visuelle Struktur unterscheidet bewusst zwischen bearbeitbaren Entwurfsfeldern und der abschließenden lokalen Prüfung, statt den Eindruck zu erwecken, ein Klick habe Geld bewegt.

Unterstützende Spezifikation lesen

Backbase Designsystem Kundenthemes müssen auf jeder Plattform korrekt angewendet werden

Ein Visualizer-Export umfasst mehr als einen Marken-Hexwert

Der Visualizer erzeugt separate Ausgaben für Web, iOS und Android. Für das Web enthält das exportierte Verzeichnis default die Sass-Design-Tokens und das Verzeichnis logos die Marken-Assets. Binde die Web-Ausgabe über das Projektstylesheet ein, statt native JSON-Abmessungen in Angular-Overrides zu kopieren.

Laut Anleitung für das Web-Theming werden helle und dunkle Logos jeweils in kleiner und großer Variante benötigt. Schriftdateien werden separat bereitgestellt. Ihre @font-face-Familiennamen müssen mit der exportierten font-family-Konfiguration übereinstimmen. So bleiben Überschriften, Steuerelemente und Branding eines Banking-Ablaufs auf dasselbe Kundentheme abgestimmt.

Das Prüfbeispiel endet absichtlich bei einem anwendungseigenen Entwurf: Wenn Zielkonto oder Betrag geändert werden, wird das vorherige Ergebnis gelöscht. Dieses Verhalten ist unabhängig vom Theme-Export und bedeutet weder, dass eine Zahlung ausgeführt wird, noch dass eine bankspezifische Validierungsrichtlinie gilt.

Unterstützende Spezifikation lesen

Backbase Designsystem Dem exportierten semantischen Theme folgen

Plattformwerte nur im jeweiligen Kontext verwenden

Die Referenztabelle enthält Standard-Buttonfarben sowie eine separate Gruppe mit UIKit-Abmessungen. Ein nativer Wert wie theme.height.button.md ist keine CSS-Variable, die in eine Angular-App kopiert werden sollte. Webimplementierungen sollten die exportierten Styles oder das installierte SCSS verwenden.

Die Vorschau verwendet das dokumentierte standardmäßige Primärblau und die sekundäre Tönung. Das Innenabstandsmaß des gesamten Panels, die Illustration in der Zusammenfassung und die responsive zweispaltige Aufteilung sind anwendungsspezifische Entscheidungen und klar von offiziellen Tokens getrennt.

Unterstützende Spezifikation lesen

Backbase Designsystem Ausgewählte Markenschriften laden

Der Familienname stellt das Asset nicht bereit

Laut Anleitung für das Web-Theming müssen Schriftdateien separat bereitgestellt werden. Die @font-face-Familie muss mit der exportierten Konfiguration $font-family übereinstimmen. Die Beispieldarstellung in der Dokumentation bedeutet nicht, dass eine globale Backbase-Schriftfamilie erforderlich ist.

Das Theme verwendet Rem-Einheiten und nennt 16 px als optimalen Root-Wert; unterstützt werden bis zu 32 px. Teste die vollständige Prüfung mit vergrößerter Schrift. Unsere eigenständige Browser-Interpretation verwendet Systemschriften und erweckt nicht den Eindruck, Kundenschriften seien verfügbar.

Unterstützende Spezifikation lesen

Backbase Designsystem Kopfzeile und Buttonleiste des Modus zusammenstellen

Echte Aktionen in eine kontextbezogene Kopfzeile einfügen

ModeHeaderModule stellt einen kontextbezogenen Titel mit optionaler zweiter Zeile und Schließen-Steuerelement bereit. Im Beispiel ist showCloseButton auf false gesetzt, da es keine externe Route gibt, die geschlossen werden könnte. Die Reset-Schaltfläche verwendet den Projektionsslot mode-header-utility-area.

ButtonModule erweitert einen nativen Button mithilfe von bbButton. Lege für color eine dokumentierte Rolle fest und verwende für buttonSize den Wert sm oder md. Ein runder Button ist für ein Steuerelement mit ausschließlich einem Symbol vorgesehen und eignet sich nicht für die beschriftete Prüfaktion.

• Für die einzige lokale Prüfaktion primary verwenden.
• Für die umkehrbare Reset-Aktion secondary verwenden.
• Kontonamen und Beträge in einer Definitionsliste statt in dekorativen Button-Beschriftungen darstellen.

Unterstützende Spezifikation lesen

Backbase Designsystem Eine Zusammenfassung, die auch auf schmalen Bildschirmen funktioniert

Die Lesereihenfolge beibehalten

Die ursprüngliche Illustration zeigt zwei Kontooberflächen, die durch einen gerichteten Pfad verbunden sind. Sie verdeutlicht die Beziehung zwischen den Überweisungskonten, ohne zu einer zweiten Aktion zu werden. Auf kleinen Bildschirmen wird das dekorative Kontodiagramm ausgeblendet; sämtliche Kontotexte bleiben sichtbar.

Der Editor steht in der DOM-Reihenfolge vor der Prüfausgabe. Native Beschriftungen, Feldfehler und ein Statusbereich bleiben für Tastatur- und Screenreader-Nutzende zugänglich. Zum Verständnis von Betrag oder Zielkonto sind keine Informationen erforderlich, die nur beim Überfahren mit dem Mauszeiger erscheinen.

Unterstützende Spezifikation lesen

Backbase Designsystem Autorisierte Angular-Umgebung verbinden

Styles und Module gemeinsam installieren

Die offizielle Web-Einrichtung erfordert Repository-Zugriff und den separaten Import des globalen Backbase-SCSS. Der Import von ButtonModule allein stellt nicht die vollständige visuelle Umgebung bereit. Sobald Paket und Styles konfiguriert sind, lässt sich das eigenständige Beispiel in eine vorhandene Angular-Anwendung einbinden.

1. Ein autorisiertes Konto bei repo.backbase.com sowie die für die ausgewählte Version erforderliche Angular-/Node-Kombination verwenden.
2. @backbase/ui-ang installieren und das globale SCSS zum bereits in angular.json konfigurierten Stylesheet hinzufügen.
3. ButtonModule und ModeHeaderModule in die verwendende Komponente importieren, anschließend das vollständige Beispiel einbinden und den Reset-/Prüfablauf überprüfen.

Unterstützende Spezifikation lesen

Backbase Designsystem Beispiele für Design-System-Komponenten

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