Crie um fluxo de revisão bancária com identidade visual usando os módulos Angular da Backbase, a exportação semântica do tema e estados de revisão explícitos. Compare as APIs web com dimensões nativas documentadas separadamente.
Interpretação HTML responsiva e independente, com as cores padrão publicadas dos botões; formulário e layout específicos da aplicação. Não é o runtime do Backbase Angular. · Referência de implementação
02
Sistema de design Backbase Referência de design
Documentação pública mais recente da Backbase. O código Web usa @backbase/ui-ang; os valores nativos são separados explicitamente e não devem ser tratados como variáveis Angular CSS. Temas personalizados dos clientes podem substituir os valores padrão.
Sistema de design Backbase Um sistema bancário com a identidade visual do cliente
Aplique o tema à jornada, não a botões isolados
O Visualizer da Backbase disponibiliza um conjunto compatível de elementos básicos de marca e exporta um tema para Web, iOS e Android. O cliente pode alterar as famílias tipográficas de títulos e corpo do texto e aplicar a identidade visual aos estilos de componentes e da jornada.
O exemplo é uma revisão interna entre contas. Os identificadores de conta e os valores são fictícios. A estrutura visual distingue intencionalmente os campos editáveis do rascunho da revisão local final, sem dar a entender que um clique transferiu dinheiro.
Sistema de design Backbase Os temas do cliente devem ser aplicados corretamente em cada plataforma
Uma exportação do Visualizer vai além de um código hexadecimal da marca
O Visualizer gera arquivos de saída separados para web, iOS e Android. Na versão web, o diretório padrão exportado contém tokens de design Sass, e o diretório logos contém os recursos da marca. Aplique esses arquivos ao projeto por meio da folha de estilos, em vez de copiar dimensões de JSON nativo para substituições no Angular.
As instruções de tematização para web exigem versões claras e escuras dos logotipos, nos tamanhos pequeno e grande. Os arquivos de fonte são fornecidos separadamente, e os nomes de família em @font-face devem corresponder à configuração font-family exportada. Assim, títulos, controles e identidade visual de uma jornada bancária permanecem alinhados ao mesmo tema do cliente.
O exemplo de revisão termina intencionalmente em um rascunho gerenciado pela aplicação: alterar o destino ou o valor limpa o resultado anterior. Esse comportamento é independente da exportação do tema e não implica execução de pagamento nem uma política de validação específica de um banco.
Sistema de design Backbase Siga o tema semântico exportado
Mantenha os valores de cada plataforma em seu próprio contexto
A tabela de referência inclui as cores padrão dos botões e um grupo separado de dimensões do UIKit. Um valor nativo como theme.height.button.md não é uma variável CSS para colar em um aplicativo Angular. As implementações web devem usar os estilos exportados ou o SCSS instalado.
A prévia usa o azul primário padrão documentado e a tonalidade secundária. O preenchimento geral do painel, a ilustração do resumo e o layout responsivo em duas colunas são escolhas da aplicação, claramente separadas dos tokens oficiais.
Sistema de design Backbase Carregue as fontes da marca selecionada
O nome da família não inclui o arquivo da fonte
O guia de tematização para web exige que os arquivos de fonte sejam fornecidos separadamente. A família em @font-face deve corresponder à configuração $font-family exportada. A fonte de exemplo da documentação não é uma tipografia global obrigatória do Backbase.
O tema usa unidades rem e documenta 16 px como tamanho ideal da raiz, com suporte de até 32 px. Teste a revisão completa com tamanhos de texto ampliados. Nossa interpretação independente no navegador usa fontes do sistema e não dá a entender que as fontes do cliente estejam disponíveis.
Sistema de design Backbase Monte o cabeçalho do modo e a barra de botões
Projete ações reais em um cabeçalho contextual
ModeHeaderModule fornece um título contextual, com uma linha secundária e um controle para fechar opcionais. O exemplo define showCloseButton como false porque o exemplo não tem uma rota externa para fechar. O botão de redefinição usa o ponto de projeção mode-header-utility-area.
ButtonModule aprimora um botão nativo por meio de bbButton. Defina color com uma função documentada e use buttonSize sm ou md. Um botão circular é reservado para controles que contêm apenas um ícone; não é adequado para a ação de revisão com texto.
Use primary para a única ação de revisão local.
Use secondary para a ação de redefinição reversível.
Apresente nomes de contas e valores em uma lista de definições, não em rótulos decorativos de botões.
Sistema de design Backbase Um resumo que funciona em telas estreitas
Preserve a ordem de leitura
A ilustração original mostra duas superfícies de conta conectadas por um trajeto direcional. Ela representa a relação entre as transferências sem se tornar uma segunda ação. Em telas pequenas, o diagrama decorativo das contas é ocultado, mas todo o texto das contas permanece visível.
O editor aparece antes do resultado da revisão na ordem do DOM. Rótulos nativos, erros dos campos e uma região de status continuam disponíveis para quem usa teclado ou leitor de tela. Não é necessário passar o cursor sobre elementos para entender o valor ou o destino.
Sistema de design Backbase Conecte-se ao ambiente Angular autorizado
Instale os estilos e módulos juntos
A configuração oficial para web exige acesso ao repositório e a importação separada do SCSS global do Backbase. Importar apenas ButtonModule não fornece o ambiente visual completo. Depois de configurar o pacote e os estilos, o exemplo independente pode ser montado em um aplicativo Angular existente.
Use sua conta autorizada do repo.backbase.com e a combinação de Angular/Node exigida pela versão selecionada.
Instale @backbase/ui-ang e adicione o SCSS global à folha de estilos já configurada em angular.json.
Importe ButtonModule e ModeHeaderModule no componente que os utiliza, monte o exemplo completo e verifique o ciclo de redefinição e revisão.
Sistema de design Backbase Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente e responsiva de HTML, com cores padrão publicadas para os botões; formulário e layout específicos da aplicação. Não é o ambiente de execução do Backbase Angular.
html
<!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>
O valor e o destino são fictícios. Este formulário HTML não se conecta a um banco; o exemplo de Angular com ModeHeader e bbButton exige acesso autorizado ao pacote Backbase.
Cabeçalho de modo com uma ação de revisão local
Um componente Angular independente que usa dois módulos reais do Backbase, projeta uma ação de redefinição e mantém o estado local explícito.
typescript
// 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; }
Requer o pacote Backbase instalado e o SCSS global; o acesso público ao npm, por si só, não é suficiente.
button[bbButton] fornece a diretiva. ModeHeaderModule fornece bb-mode-header-ui.
A sinalização de revisão não gera efeitos colaterais de pagamento. Em um fluxo de transferência real, o envio deve ser uma operação separada da aplicação e exigir confirmação.
04
Sistema de design Backbase Configuração do agente de IA
Ponto de partida para implementação
Use a compatibilidade de versões exigida pelo seu projeto licenciado. Verifique se angular.json inclui a folha de estilos global. As configurações mais antigas com Angular 17 / ui-ang 11 têm uma restrição documentada do esbuild; ui-ang 12+ oferece suporte ao esbuild. Este guia não fornece credenciais de registro.
bash / scss
# 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";
Um prompt para seu projeto
Prompt para agente de IA
Crie uma revisão de transferência em Angular com imports reais de ButtonModule e ModeHeaderModule. Carregue os estilos do pacote autorizado e o tema do cliente. Mantenha separados os tokens específicos de cada plataforma. Valide os dados da aplicação, limpe a revisão desatualizada quando houver alterações e nunca apresente um exemplo local como se fosse um pagamento enviado.
05
Sistema de design Backbase Fontes e escopo
O acesso ao pacote Backbase exige uma conta autorizada no repositório. A prévia no navegador é independente HTML, não usa Backbase Angular. Sua paleta azul segue as cores padrão publicadas para botões; o espaçamento dos painéis e a ilustração são escolhas da aplicação. As dimensões nativas abaixo estão identificadas por plataforma.
