# Backbase Designsystem

## Backbase Designsystem-Vorschau

Ändern Sie Ziel und Betrag, validieren, prüfen und setzen Sie zurück. Es wird kein Geld bewegt.

## Backbase Designsystem-Designreferenz

Öffentliche aktuelle Dokumentation von Backbase. Der Webcode verwendet @backbase/ui-ang; native Werte sind ausdrücklich getrennt und dürfen nicht als Angular-CSS-Variablen behandelt werden. Benutzerdefinierte Kundenthemes können die Standardwerte ersetzen.

### Angular-Eingaben für Schaltflächen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Selector | button[bbButton] | Native Schaltflächen-Semantik mit Backbase-Styling. |
| buttonSize | sm \| md; default md | Eine dokumentierte Größe auswählen. |
| color | primary \| secondary \| tertiary \| link-text \| success \| danger \| neutral \| dark | Visuelle und semantische Varianten. |
| type | button by default | `submit` innerhalb eines Formulars ausdrücklich festlegen. |
| block | false | `true` füllt die gesamte Breite des übergeordneten Elements aus. |
| circle | false | Nur für ein Symbol ohne Text. |
### Aufbau des Modus-Headers

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| title | string | Haupttitel als h2. |
| secondaryTitle | string | Kontextzeile. |
| reverseTitleOrder | true | Legt die Reihenfolge des Titels fest. |
| showCloseButton | true | Auf `false` setzen, damit der Seiten-Header dauerhaft angezeigt wird. |
| closeButtonAriaLabel | string | Die Schließen-Aktion benennen. |
| close | EventEmitter<void> | Mit einem tatsächlichen Behandlungsprogramm zum Beenden verknüpfen. |
| mode-header-utility-area | Projected content | Kontextbezogene Aktionen im Header platzieren. |
### Veröffentlichte Standardfarben für Schaltflächen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| primary / default background | #295eff | Dokumentierte Standardpalette, keine universelle Kundenmarke. |
| primary / hovered background | #2049c6 | Hover-Zustand. |
| primary / pressed background | #152f80 | Gedrückter Zustand. |
| primary / foreground | #ffffff | Text auf der primären Schaltfläche. |
| secondary / default background | transparent | Markenrahmen und Vordergrund. |
| secondary / pressed background | #dee2ff | Dezente Oberfläche. |
| danger / default background | #bf2310 | Zerstörerische Aktion, nicht Prüfung. |
| disabled / background | #ccd5df | Mit deaktiviertem Verhalten kombinieren. |
### UIKit-Abmessungen, keine Webvariablen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| theme.radius.button.default | 99 | Pillenform in der UIKit-Token-Tabelle. |
| theme.height.button.sm | 32 | Native geringe Höhe. |
| theme.height.button.md | 44 | Native mittlere Höhe. |
| theme.padding-x.button.sm | 16 | Natives horizontales Innenabstandsmaß. |
| theme.padding-x.button.md | 24 | Natives horizontales Innenabstandsmaß. |
| theme.border-width.button.default | 1 | Native Rahmenbreite. |
| Button typeface | preferredFont(.body, .semibold) | Verwendet das native Schriftsystem. |
### Web-Theme bereitstellen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Theme source | Visualizer export | web/default in die Projektstyles kopieren. |
| Font family source | styles/default/variables/_font-family.scss | Die Namen der @font-face-Familien müssen übereinstimmen. |
| Root sizing | 16px optimal; supported up to 32px | Theme-Abmessungen in Rem. |
| Logo variants | light/dark × small/big | Jedes erforderliche Asset bereitstellen; ein Logo nicht strecken. |
## Backbase Designsystem Vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

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

### Vollständige, eigenständige interaktive Demo

Das vollständige Dokument als index.html speichern und in einem Browser öffnen. Eigenständige responsive HTML-Interpretation mit veröffentlichten Standard-Buttonfarben; formular- und layoutspezifische Umsetzung der Anwendung. Keine Backbase-Angular-Laufzeitumgebung.

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

Code-Referenz

- Betrag und Zielkonto sind frei erfunden. Dieses HTML-Formular ist nicht mit einem Bankensystem verbunden; das Angular-Beispiel mit ModeHeader und bbButton erfordert autorisierten Zugriff auf Backbase-Pakete.

### Moduskopfzeile mit lokaler Prüfaktion

Eigenständige Angular-Komponente mit zwei echten Backbase-Modulen, projizierter Reset-Aktion und explizitem lokalem Zustand.

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

Code-Referenz

- Erfordert das installierte Backbase-Paket und globales SCSS; öffentlicher npm-Zugriff allein reicht nicht aus.

- button[bbButton] stellt die Direktive bereit. ModeHeaderModule stellt bb-mode-header-ui bereit.

- Die Prüfkennzeichnung löst keine Zahlungsaktion aus. In einem echten Überweisungsablauf muss das Absenden ein separater, von der Anwendung ausgeführter und bestätigter Vorgang sein.

## Backbase Designsystem Agent einrichten

### Ausgangspunkt für die Implementierung

Verwenden Sie die Release-Kompatibilität, die für Ihr lizenziertes Projekt erforderlich ist. Stellen Sie sicher, dass das globale Stylesheet in angular.json eingebunden ist. Für ältere Konfigurationen mit Angular 17 / ui-ang 11 gilt eine dokumentierte esbuild-Einschränkung; ui-ang 12+ unterstützt esbuild. Diese Anleitung enthält keine Zugangsdaten für die Registry.

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

### Ein Prompt für dein Projekt

```
Erstellen Sie eine Backbase-Überweisungsprüfung für Angular mit echten Imports von ButtonModule und ModeHeaderModule. Laden Sie autorisierte Paket-Styles und das Kundentheme. Halten Sie plattformspezifische Tokens getrennt. Validieren Sie die Anwendungsdaten, löschen Sie bei Änderungen die veraltete Prüfung und stellen Sie niemals ein lokales Beispiel als eingereichte Zahlung dar.
```

## Backbase Designsystem Quellen und Umfang

Für den Zugriff auf Backbase-Pakete ist ein autorisiertes Repository-Konto erforderlich. Die Browservorschau ist unabhängig HTML und keine Backbase-Angular-Implementierung. Ihre blaue Farbpalette orientiert sich an den veröffentlichten Standardfarben der Schaltflächen; der Abstand zwischen den Bedienfeldern und die Illustration sind Anwendungsentscheidungen. Die nativen Abmessungen sind unten nach Plattform gekennzeichnet.

- Webinstallation Einrichtung von Registry, Angular und Stylesheet.

- Web-Schaltfläche Direktiveneingaben und Aktionsgruppierung.

- Web-Moduskopfzeile Titel, Schließereignis und Inhaltsprojektion.

- Ein Web-Theme anwenden Exportierte Styles, Schriftdateien und rem-basierte Größen.

- Globales Branding Visualisierer und Kundenbranding.

- UIKit-Schaltfläche Native Token-Aliase und Abmessungen.

- Compose-Schaltfläche Standardfarbpalette für Schaltflächen und Compose-Eigenschaften.

- Websymbole Ersatz für die Material-Symbolschrift.

## Backbase Designsystem Zugehörige Ressourcen

### Dell Designsystem

Erstellen Sie mit DDS v3 eine gezielte Gerätesuche: mit semantischen Farben, einer responsiven Schriftgrößenskala, Token-Abständen und einer InputGroup-Komposition, deren Filterverhalten von der Anwendung gesteuert wird.

### Duet Designsystem

Untersuchen Sie Duets Farb- und Abstandsskalen von LocalTapiola anhand eines Datumsbereichsablaufs mit ISO-Datumswerten, expliziter Bereichsvalidierung, Fokusmethoden der Komponente und klar abgegrenztem Open-Source-Picker.

### Elastic UI

Erstellen Sie einen Elastic UI-Log-Explorer mit geprüften Borealis-Skalen, nativen Tabellen- und Suchsteuerelementen, Schweregradfiltern, lokal gespeicherten Ereignissen und vollständigem React-Quellcode.


- [Implementierungsreferenz](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Quelle](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Quelle](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Quelle](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Quelle](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Quelle](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Unterstützende Spezifikation lesen](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Unterstützende Spezifikation lesen](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Unterstützende Spezifikation lesen](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Unterstützende Spezifikation lesen](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Unterstützende Spezifikation lesen](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)
- [Unterstützende Spezifikation lesen](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Code-Referenz](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Code-Referenz](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Webinstallation Einrichtung von Registry, Angular und Stylesheet.](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Web-Schaltfläche Direktiveneingaben und Aktionsgruppierung.](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Web-Moduskopfzeile Titel, Schließereignis und Inhaltsprojektion.](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Ein Web-Theme anwenden Exportierte Styles, Schriftdateien und rem-basierte Größen.](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Globales Branding Visualisierer und Kundenbranding.](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [UIKit-Schaltfläche Native Token-Aliase und Abmessungen.](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Compose-Schaltfläche Standardfarbpalette für Schaltflächen und Compose-Eigenschaften.](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Websymbole Ersatz für die Material-Symbolschrift.](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)