# Sistema de diseño Backbase

## Sistema de diseño Backbase Vista previa de la interfaz

Cambia el destino y el importe, valida, revisa y restablece. No se mueve dinero.

## Sistema de diseño Backbase Referencia de diseño

Documentación pública más reciente de Backbase. El código web usa @backbase/ui-ang; los valores nativos se separan explícitamente y no deben tratarse como variables CSS de Angular. Los temas personalizados del cliente pueden sustituir los valores predeterminados.

### Propiedades de los botones de Angular

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Selector | button[bbButton] | Semántica de botón nativa con el estilo de Backbase. |
| buttonSize | sm \| md; default md | Elige un tamaño documentado. |
| color | primary \| secondary \| tertiary \| link-text \| success \| danger \| neutral \| dark | Variantes visuales y semánticas. |
| type | button by default | Establece explícitamente el tipo de envío dentro de un formulario. |
| block | false | true ocupa todo el ancho del elemento principal. |
| circle | false | Solo para iconos sin texto. |
### Estructura del encabezado del modo

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| title | string | Título principal h2. |
| secondaryTitle | string | Línea contextual. |
| reverseTitleOrder | true | Controla el orden del título. |
| showCloseButton | true | Establece false para que el encabezado de página permanezca fijo. |
| closeButtonAriaLabel | string | Asigna un nombre a la acción de cierre. |
| close | EventEmitter<void> | Conéctalo a un controlador de salida real. |
| mode-header-utility-area | Projected content | Coloca las acciones contextuales en el encabezado. |
### Colores predeterminados publicados para los botones

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| primary / default background | #295eff | Paleta predeterminada documentada, no una marca universal para todos los clientes. |
| primary / hovered background | #2049c6 | Estado al pasar el cursor. |
| primary / pressed background | #152f80 | Estado presionado. |
| primary / foreground | #ffffff | Texto sobre el color principal. |
| secondary / default background | transparent | Borde y primer plano de la marca. |
| secondary / pressed background | #dee2ff | Superficie sutil. |
| danger / default background | #bf2310 | Intención destructiva, no de revisión. |
| disabled / background | #ccd5df | Combínalo con el comportamiento deshabilitado. |
### Dimensiones de UIKit, no variables web

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| theme.radius.button.default | 99 | Forma de píldora en la tabla de tokens de UIKit. |
| theme.height.button.sm | 32 | Altura pequeña nativa. |
| theme.height.button.md | 44 | Altura mediana nativa. |
| theme.padding-x.button.sm | 16 | Margen interior horizontal nativo. |
| theme.padding-x.button.md | 24 | Margen interior horizontal nativo. |
| theme.border-width.button.default | 1 | Ancho de borde nativo. |
| Button typeface | preferredFont(.body, .semibold) | Usa el sistema de fuentes nativo. |
### Entrega del tema web

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| Theme source | Visualizer export | Copia web/default en los estilos del proyecto. |
| Font family source | styles/default/variables/_font-family.scss | Haz coincidir los nombres de familia de @font-face. |
| Root sizing | 16px optimal; supported up to 32px | Dimensiones del tema en rem. |
| Logo variants | light/dark × small/big | Proporciona cada recurso necesario; no estires un solo logotipo. |
## Sistema de diseño Backbase Guía completa

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

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

### Muestra interactiva independiente completa

Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente HTML adaptable con los colores predeterminados publicados para los botones; formulario y diseño específicos de la aplicación. No es el entorno de ejecución de Backbase Angular.

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

Referencia de código

- El importe y el destino son ficticios. Este formulario HTML no está conectado a ningún banco; el ejemplo de Angular con ModeHeader y bbButton requiere acceso autorizado a los paquetes de Backbase.

### Encabezado del modo y acción de revisión local

Componente Angular independiente que utiliza dos módulos reales de Backbase, una acción de restablecimiento proyectada y un estado local explícito.

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

Referencia de código

- Requiere el paquete de Backbase instalado y el SCSS global; el acceso público a npm no es suficiente.

- button[bbButton] proporciona la directiva. ModeHeaderModule proporciona bb-mode-header-ui.

- El indicador de revisión no tiene ningún efecto secundario de pago. En un flujo de transferencia real, el envío debe ser una operación independiente de la aplicación y requerir confirmación.

## Sistema de diseño Backbase Configuración del agente

### Punto de partida para la implementación

Usa la compatibilidad de versiones requerida por tu proyecto con licencia. Comprueba que angular.json incluya la hoja de estilos global. Las configuraciones antiguas de Angular 17 / ui-ang 11 tienen una restricción de esbuild documentada; ui-ang 12+ es compatible con esbuild. Esta guía no proporciona credenciales del registro.

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

### Una instrucción para tu proyecto

```
Crea una revisión de transferencia en Angular con importaciones reales de ButtonModule y ModeHeaderModule. Carga los estilos de los paquetes autorizados y el tema del cliente. Mantén separados los tokens específicos de cada plataforma. Valida los datos de la aplicación, borra las revisiones obsoletas cuando se editen los campos y nunca presentes un ejemplo local como si fuera un pago enviado.
```

## Sistema de diseño Backbase Fuentes y alcance

Para acceder al paquete Backbase se necesita una cuenta autorizada del repositorio. La vista previa en el navegador es independiente HTML, no es Backbase Angular. Su paleta azul sigue los colores predeterminados publicados para los botones; el espaciado de los paneles y la ilustración son decisiones de la aplicación. A continuación, se indican las dimensiones nativas por plataforma.

- Instalación web Configuración del registro, Angular y hojas de estilo.

- Botón web Entradas de directiva y agrupación de acciones.

- Encabezado de modo web Título, evento de cierre y proyección de contenido.

- Aplicar un tema web Estilos exportados, recursos de fuentes y tamaño en rem.

- Marca global Visualizador y marca del cliente.

- Botón de UIKit Alias de tokens nativos y dimensiones.

- Botón de Compose Paleta de botones predeterminada y propiedades de Compose.

- Iconos web Sustitución de la fuente de iconos de Material.

## Sistema de diseño Backbase Recursos relacionados

### Dell sistema de diseño

Crea una búsqueda de dispositivos con ámbito definido mediante DDS v3: colores semánticos, escala tipográfica adaptable, espaciado basado en tokens y una composición InputGroup cuyo filtrado corresponde a la aplicación.

### Duet sistema de diseño

Estudia las escalas de color y espaciado de LocalTapiola en Duet mediante un flujo de trabajo de intervalo de fechas, con valores de fecha ISO, validación explícita del intervalo, métodos de foco de componentes y un límite claramente diferenciado para el selector de código abierto.

### Elastic UI

Crea un explorador de registros de Elastic UI con las escalas verificadas de Borealis, controles nativos de tabla y búsqueda, filtros de gravedad, eventos guardados localmente y el código fuente completo de React.


- [Referencia de implementación](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Fuente](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Fuente](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Fuente](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Fuente](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Fuente](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Consulta la especificación complementaria](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Consulta la especificación complementaria](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Consulta la especificación complementaria](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Consulta la especificación complementaria](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Consulta la especificación complementaria](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)
- [Consulta la especificación complementaria](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Referencia de código](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Referencia de código](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Instalación web Configuración del registro, Angular y hojas de estilo.](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Botón web Entradas de directiva y agrupación de acciones.](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Encabezado de modo web Título, evento de cierre y proyección de contenido.](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Aplicar un tema web Estilos exportados, recursos de fuentes y tamaño en rem.](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Marca global Visualizador y marca del cliente.](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Botón de UIKit Alias de tokens nativos y dimensiones.](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Botón de Compose Paleta de botones predeterminada y propiedades de Compose.](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Iconos web Sustitución de la fuente de iconos de Material.](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)