# Sistema di design Backbase

## Sistema di design Backbase Anteprima dell’interfaccia

Modifica la destinazione e l’importo, convalida, rivedi e reimposta. Non viene trasferito denaro.

## Sistema di design Backbase Riferimento di progettazione

Documentazione pubblica più recente di Backbase. Il codice web usa @backbase/ui-ang; i valori nativi sono separati esplicitamente e non devono essere considerati variabili CSS di Angular. I temi personalizzati dei clienti possono sostituire i valori predefiniti.

### Proprietà degli input dei pulsanti Angular

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Selector | button[bbButton] | Semantica dei pulsanti nativi con stile Backbase. |
| buttonSize | sm \| md; default md | Scegli una dimensione documentata. |
| color | primary \| secondary \| tertiary \| link-text \| success \| danger \| neutral \| dark | Varianti visive e semantiche. |
| type | button by default | Imposta esplicitamente il tipo submit all’interno di un modulo. |
| block | false | true estende il pulsante alla larghezza del contenitore. |
| circle | false | Solo per un’icona senza testo. |
### Struttura dell’intestazione della modalità

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| title | string | Titolo principale h2. |
| secondaryTitle | string | Riga contestuale. |
| reverseTitleOrder | true | Controlla l’ordine del titolo. |
| showCloseButton | true | Imposta su false per mantenere fissa l’intestazione della pagina. |
| closeButtonAriaLabel | string | Assegna un nome all’azione di chiusura. |
| close | EventEmitter<void> | Collega a un gestore di uscita effettivo. |
| mode-header-utility-area | Projected content | Inserisci le azioni contestuali nell’intestazione. |
### Colori predefiniti pubblicati per i pulsanti

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| primary / default background | #295eff | Tavolozza predefinita documentata, non un brand universale per i clienti. |
| primary / hovered background | #2049c6 | Stato al passaggio del puntatore. |
| primary / pressed background | #152f80 | Stato premuto. |
| primary / foreground | #ffffff | Testo sul colore principale. |
| secondary / default background | transparent | Bordo e primo piano del brand. |
| secondary / pressed background | #dee2ff | Superficie discreta. |
| danger / default background | #bf2310 | Intento distruttivo, non di revisione. |
| disabled / background | #ccd5df | Abbina al comportamento disabilitato. |
### Dimensioni UIKit, non variabili web

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| theme.radius.button.default | 99 | Forma a pillola nella tabella dei token UIKit. |
| theme.height.button.sm | 32 | Altezza nativa piccola. |
| theme.height.button.md | 44 | Altezza nativa media. |
| theme.padding-x.button.sm | 16 | Spaziatura interna orizzontale nativa. |
| theme.padding-x.button.md | 24 | Spaziatura interna orizzontale nativa. |
| theme.border-width.button.default | 1 | Larghezza del bordo nativa. |
| Button typeface | preferredFont(.body, .semibold) | Usa il sistema di caratteri nativo. |
### Distribuzione del tema web

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Theme source | Visualizer export | Copia web/default negli stili del progetto. |
| Font family source | styles/default/variables/_font-family.scss | Fai corrispondere i nomi delle famiglie in @font-face. |
| Root sizing | 16px optimal; supported up to 32px | Dimensioni del tema in rem. |
| Logo variants | light/dark × small/big | Fornisci ogni risorsa necessaria; non adattare un unico logo a tutte le esigenze. |
## Sistema di design Backbase Guida completa

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

## Sistema di design Backbase Un sistema bancario con il branding del cliente

### Personalizza il percorso, non singoli pulsanti

> Visualizer di Backbase espone un insieme supportato di primitive del brand ed esporta un tema per web, iOS e Android. Il cliente può modificare le famiglie tipografiche per titoli e testo e applicare il branding agli stili dei componenti e dei percorsi.

L’esempio mostra una revisione interna di un trasferimento tra conti. Gli identificativi dei conti e gli importi sono fittizi. La struttura visiva distingue intenzionalmente i campi modificabili della bozza dalla revisione locale finale, senza suggerire che un clic abbia trasferito denaro.

Leggi la specifica di supporto

## Sistema di design Backbase I temi dei clienti devono essere applicati correttamente su ogni piattaforma

### Un’esportazione di Visualizer è più di un codice esadecimale del brand

Visualizer produce output distinti per web, iOS e Android. Per il web, la directory predefinita esportata contiene i token di design Sass, mentre la directory logos contiene le risorse del brand. Integrare l’output web tramite il foglio di stile del progetto, invece di copiare le dimensioni JSON native nelle personalizzazioni di Angular.

Le istruzioni per applicare il tema web richiedono loghi chiari e scuri in entrambe le varianti, piccola e grande. I file dei font vengono forniti separatamente e i nomi delle famiglie @font-face devono corrispondere alla configurazione font-family esportata. In questo modo, titoli, controlli e brand di un percorso bancario restano coerenti con lo stesso tema cliente.

Il caso di revisione si ferma intenzionalmente a una bozza gestita dall’applicazione: se si modificano la destinazione o l’importo, il risultato precedente viene cancellato. Questo comportamento è indipendente dall’esportazione del tema e non implica l’esecuzione di pagamenti né una politica di convalida specifica della banca.

Leggi la specifica di supporto

## Sistema di design Backbase Seguire il tema semantico esportato

### Mantenere i valori della piattaforma nel loro contesto specifico

La tabella di riferimento include i colori predefiniti dei pulsanti e un gruppo separato di dimensioni UIKit. Un valore nativo theme.height.button.md non è una variabile CSS da incollare in un’app Angular. Le implementazioni web dovrebbero usare gli stili esportati o il pacchetto SCSS installato.

L’anteprima usa il blu primario e la tinta secondaria predefiniti documentati. La spaziatura complessiva del pannello, l’illustrazione del riepilogo e la disposizione responsiva a due colonne sono scelte dell’applicazione, chiaramente distinte dai token ufficiali.

Leggi la specifica di supporto

## Sistema di design Backbase Caricare i font del brand selezionato

### Il nome di una famiglia non fornisce la risorsa

La guida per applicare il tema web richiede che i file dei font vengano forniti separatamente. La famiglia @font-face deve corrispondere alla configurazione $font-family esportata. Il font di esempio presente nella documentazione non è un carattere globale obbligatorio di Backbase.

Il tema usa unità rem e indica 16 px come valore root ottimale, con supporto fino a 32 px. Verificare l’intera revisione con dimensioni del testo ingrandite. La nostra interpretazione autonoma nel browser usa i font di sistema e non presume che i font del cliente siano disponibili.

Leggi la specifica di supporto

## Sistema di design Backbase Comporre l’intestazione della modalità e la barra dei pulsanti

### Proiettare le azioni reali in un’intestazione contestuale

ModeHeaderModule fornisce un titolo contestuale con una riga secondaria facoltativa e un controllo di chiusura. Nell’esempio showCloseButton è impostato su false perché il caso dimostrativo non ha una route esterna da chiudere. Il pulsante di ripristino usa lo slot di proiezione mode-header-utility-area.

ButtonModule arricchisce un pulsante nativo tramite bbButton. Impostare color su un ruolo documentato e usare buttonSize sm o md. Il pulsante circolare è riservato ai controlli con sole icone; non è adatto all’azione di revisione testuale.

- Usare primary per l’unica azione di revisione locale.

- Usare secondary per l’azione reversibile di ripristino.

- Visualizzare i nomi dei conti e gli importi in un elenco di definizioni, non come etichette decorative dei pulsanti.

Leggi la specifica di supporto

## Sistema di design Backbase Un riepilogo che si adatta anche agli schermi stretti

### Mantenere l’ordine di lettura

L’illustrazione originale mostra due superfici di conto collegate da un percorso direzionale. Rende chiara la relazione tra i trasferimenti senza diventare una seconda azione. Sugli schermi piccoli, lo schema decorativo dei conti viene omesso, mentre tutto il testo relativo ai conti resta visibile.

Nel DOM, l’editor precede il risultato della revisione. Le etichette native, gli errori dei campi e una regione di stato restano disponibili per chi usa tastiera e screen reader. Non sono necessari dettagli visibili solo al passaggio del mouse per comprendere l’importo o la destinazione.

Leggi la specifica di supporto

## Sistema di design Backbase Connettere l’ambiente Angular autorizzato

### Installare insieme stili e moduli

La configurazione web ufficiale richiede l’accesso al repository e l’importazione separata dello SCSS globale di Backbase. Importare soltanto ButtonModule non fornisce l’intero ambiente visivo. L’esempio autonomo può essere integrato in un’applicazione Angular esistente una volta configurati il pacchetto e gli stili.

1. Usare il proprio account autorizzato repo.backbase.com e la combinazione Angular/Node richiesta dalla release selezionata.

2. Installare @backbase/ui-ang e aggiungere il relativo SCSS globale al foglio di stile già configurato in angular.json.

3. Importare ButtonModule e ModeHeaderModule nel componente che li utilizza, quindi integrare l’esempio completo e verificare il ciclo di ripristino e revisione.

Leggi la specifica di supporto

## Sistema di design Backbase Esempi di componenti del sistema di design

### Esempio interattivo completo e autonomo

Salvare il documento completo come index.html e aprirlo in un browser. Interpretazione responsiva autonoma di HTML con i colori predefiniti dei pulsanti pubblicati; modulo e layout specifici dell’applicazione. Non è il runtime Angular di 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>
```

Riferimento del codice

- L’importo e la destinazione sono fittizi. Questo modulo HTML non è collegato a una banca; l’esempio Angular con ModeHeader e bbButton richiede l’accesso autorizzato ai pacchetti Backbase.

### Intestazione della modalità e azione di revisione locale

Un componente Angular autonomo che usa due moduli Backbase reali, un’azione di ripristino proiettata e uno stato locale esplicito.

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

Riferimento del codice

- Richiede il pacchetto Backbase installato e lo SCSS globale; il solo accesso a npm pubblico non è sufficiente.

- button[bbButton] fornisce la direttiva. ModeHeaderModule fornisce bb-mode-header-ui.

- Il flag di revisione non comporta effetti sui pagamenti. In un flusso di trasferimento reale, l’invio deve essere un’operazione dell’applicazione separata e confermata.

## Sistema di design Backbase Configurazione dell’agente AI

### Punto di partenza per l’implementazione

Usare la compatibilità della release richiesta dal progetto con licenza. Verificare che angular.json includa il foglio di stile globale. Le configurazioni precedenti con Angular 17 / ui-ang 11 hanno una restrizione documentata relativa a esbuild; ui-ang 12+ supporta esbuild. Questa guida non fornisce credenziali per il 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";
```

### Un prompt per il tuo progetto

```
Creare una revisione di trasferimento Angular di Backbase usando le importazioni reali di ButtonModule e ModeHeaderModule. Caricare gli stili dei pacchetti autorizzati e il tema del cliente. Mantenere distinti i token specifici della piattaforma. Convalidare i dati dell’applicazione, cancellare le revisioni obsolete quando i dati vengono modificati e non presentare mai un caso dimostrativo locale come un pagamento inviato.
```

## Sistema di design Backbase Fonti e ambito

L’accesso ai pacchetti Backbase richiede un account autorizzato per il repository. L’anteprima nel browser è un’interpretazione autonoma di HTML, non Backbase Angular. La palette blu segue i colori predefiniti dei pulsanti pubblicati; spaziatura del pannello e illustrazione sono scelte dell’applicazione. Le dimensioni native riportate di seguito sono indicate per piattaforma.

- Installazione web Configurazione di registry, Angular e foglio di stile.

- Pulsante web Parametri della direttiva e raggruppamento delle azioni.

- Intestazione web Titolo, evento di chiusura e proiezione dei contenuti.

- Applicare un tema web Stili esportati, risorse dei font e unità rem.

- Branding globale Visualizer e branding del cliente.

- Pulsante UIKit Alias dei token nativi e dimensioni.

- Pulsante Compose Palette predefinita dei pulsanti e proprietà Compose.

- Icone web Sostituzione del font delle icone Material.

## Sistema di design Backbase Risorse correlate

### Dell sistema di design

Crea una ricerca circoscritta dei dispositivi con DDS v3: colori semantici, scala tipografica responsive, spaziatura basata sui token e una composizione InputGroup il cui filtraggio è gestito dall’applicazione.

### Duet sistema di design

Esamina le scale cromatiche e di spaziatura di LocalTapiola di Duet attraverso un flusso di selezione di un intervallo di date, con valori ISO, convalida esplicita dell’intervallo, metodi di gestione del focus dei componenti e un confine distinto per il selettore open source.

### Elastic UI

Crea un esploratore di log Elastic UI con le scale Borealis verificate, controlli nativi per tabelle e ricerca, filtri per gravità, eventi salvati in locale e codice sorgente React completo.


- [Riferimento per l’implementazione](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Fonte](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Fonte](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Fonte](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Fonte](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Fonte](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Leggi la specifica di supporto](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Leggi la specifica di supporto](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Leggi la specifica di supporto](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Leggi la specifica di supporto](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Leggi la specifica di supporto](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)
- [Leggi la specifica di supporto](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Riferimento del codice](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Riferimento del codice](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Installazione web Configurazione di registry, Angular e foglio di stile.](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Pulsante web Parametri della direttiva e raggruppamento delle azioni.](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Intestazione web Titolo, evento di chiusura e proiezione dei contenuti.](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Applicare un tema web Stili esportati, risorse dei font e unità rem.](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Branding globale Visualizer e branding del cliente.](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Pulsante UIKit Alias dei token nativi e dimensioni.](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Pulsante Compose Palette predefinita dei pulsanti e proprietà Compose.](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Icone web Sostituzione del font delle icone Material.](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)