Sistema di design Backbase.

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

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