Sistema de diseño Backbase.

Sistema de diseño Backbase Un sistema bancario con la marca del cliente

Aplica el tema a todo el recorrido, no solo a botones aislados

Visualizer de Backbase ofrece un conjunto compatible de elementos básicos de marca y exporta un tema para web, iOS y Android. El cliente puede cambiar las familias tipográficas de títulos y texto, y aplicar la marca a los estilos de los componentes y del recorrido.

El ejemplo muestra una revisión interna entre cuentas. Los identificadores de cuenta y los importes son ficticios. La estructura visual distingue deliberadamente los campos editables del borrador de la revisión local final, en lugar de dar a entender que un clic ha movido dinero.

Consulta la especificación complementaria

Sistema de diseño Backbase Los temas de cliente deben aplicarse correctamente en cada plataforma

Una exportación de Visualizer es más que un código hexadecimal de marca

Visualizer genera salidas independientes para web, iOS y Android. En la web, el directorio predeterminado exportado contiene tokens de diseño de Sass, y el directorio de logotipos contiene los recursos de marca. Aplica esa salida web mediante la hoja de estilos del proyecto en lugar de copiar dimensiones JSON nativas en las sobrescrituras de Angular.

Las instrucciones de tematización web requieren logotipos claros y oscuros en variantes pequeñas y grandes. Los archivos de fuentes se proporcionan por separado, y los nombres de familia de @font-face deben coincidir con la configuración de font-family exportada. Así, los encabezados, controles y elementos de marca de una experiencia bancaria mantienen la coherencia con el mismo tema de cliente.

El ejemplo de revisión se limita intencionadamente a un borrador gestionado por la aplicación: cambiar el destino o el importe borra el resultado anterior. Este comportamiento es independiente de la exportación del tema y no implica la ejecución de un pago ni una política de validación específica de un banco.

Consulta la especificación complementaria

Sistema de diseño Backbase Sigue el tema semántico exportado

Mantén los valores de cada plataforma en su propio contexto

La tabla de referencia incluye los colores predeterminados de los botones y un grupo independiente de dimensiones de UIKit. Un valor nativo como theme.height.button.md no es una variable CSS que debas pegar en una aplicación Angular. Las implementaciones web deben utilizar los estilos exportados o el SCSS instalado.

La vista previa utiliza el azul primario y el matiz secundario predeterminados documentados. El relleno general del panel, la ilustración del resumen y la disposición adaptable en dos columnas son decisiones de la aplicación, claramente diferenciadas de los tokens oficiales.

Consulta la especificación complementaria

Sistema de diseño Backbase Carga las fuentes de marca seleccionadas

El nombre de una familia no proporciona el recurso

La guía de tematización web requiere que los archivos de fuentes se proporcionen por separado. La familia de @font-face debe coincidir con la configuración $font-family exportada. La fuente del ejemplo de la documentación no es una tipografía global obligatoria de Backbase.

El tema utiliza unidades rem y documenta 16 px como valor óptimo para la raíz, con compatibilidad de hasta 32 px. Prueba toda la revisión con tamaños de texto ampliados. Nuestra interpretación independiente en el navegador utiliza fuentes del sistema y no da a entender que las fuentes del cliente estén disponibles.

Consulta la especificación complementaria

Sistema de diseño Backbase Compón el encabezado del modo y la barra de botones

Proyecta acciones reales en un encabezado contextual

ModeHeaderModule proporciona un título contextual con una línea secundaria opcional y un control para cerrar. El ejemplo establece showCloseButton en false porque el ejemplo no tiene una ruta externa que cerrar. El botón de restablecimiento utiliza el punto de proyección mode-header-utility-area.

ButtonModule mejora un botón nativo mediante bbButton. Establece color con un rol documentado y usa buttonSize sm o md. El botón circular se reserva para controles que solo muestran un icono; no es apropiado para la acción de revisión con texto.

• Usa primary para la única acción de revisión local.
• Usa secondary para la acción reversible de restablecimiento.
• Presenta los nombres de cuenta y los importes en una lista de definiciones, no en etiquetas decorativas de botones.

Consulta la especificación complementaria

Sistema de diseño Backbase Un resumen que se adapta a pantallas estrechas

Conserva el orden de lectura

La ilustración original muestra las superficies de dos cuentas conectadas por una ruta direccional. Representa la relación entre las transferencias sin convertirse en una segunda acción. En pantallas pequeñas se omite el diagrama decorativo de cuentas, pero todo el texto de las cuentas sigue visible.

El editor aparece antes que el resultado de la revisión en el orden del DOM. Las etiquetas nativas, los errores de los campos y una región de estado siguen estando disponibles para quienes utilizan el teclado o un lector de pantalla. No se necesitan detalles que solo aparezcan al pasar el cursor para entender el importe o el destino.

Consulta la especificación complementaria

Sistema de diseño Backbase Conecta el entorno de Angular autorizado

Instala los estilos y módulos conjuntamente

La configuración web oficial requiere acceso al repositorio e importar por separado el SCSS global de Backbase. Importar solo ButtonModule no proporciona todo el entorno visual. El ejemplo independiente se puede integrar en una aplicación Angular existente una vez configurados el paquete y los estilos.

1. Usa tu cuenta autorizada de repo.backbase.com y la combinación de Angular y Node requerida por la versión seleccionada.
2. Instala @backbase/ui-ang y añade su SCSS global a la hoja de estilos ya configurada en angular.json.
3. Importa ButtonModule y ModeHeaderModule en el componente que los utiliza; después, integra el ejemplo completo y verifica el ciclo de restablecimiento y revisión.

Consulta la especificación complementaria

Sistema de diseño Backbase Ejemplos de componentes del sistema de diseño

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