# Backbase tasarım sistemi

## Backbase tasarım sistemi Arayüz Önizlemesi

Hedefi ve tutarı değiştirin, doğrulayın, inceleyin ve sıfırlayın. Para transferi yapılmaz.

## Backbase tasarım sistemi Tasarım Referansı

Backbase’in herkese açık en güncel belgeleri. Web kodu @backbase/ui-ang hedeflidir; yerel değerler açıkça ayrı tutulmuştur ve Angular CSS değişkenleri olarak değerlendirilmemelidir. Özel müşteri temaları varsayılanların yerine geçebilir.

### Angular düğme girişleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Selector | button[bbButton] | Backbase stilleriyle yerel düğme anlamı. |
| buttonSize | sm \| md; default md | Belgelenmiş bir boyut seçin. |
| color | primary \| secondary \| tertiary \| link-text \| success \| danger \| neutral \| dark | Görsel ve anlamsal varyantlar. |
| type | button by default | Form içinde gönderme türünü açıkça ayarlayın. |
| block | false | true, üst öğenin genişliğinin tamamını kaplar. |
| circle | false | Yalnızca metinsiz bir simge için. |
### Mod başlığı anatomisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| title | string | Ana h2 başlığı. |
| secondaryTitle | string | Bağlam satırı. |
| reverseTitleOrder | true | Başlık sıralamasını denetler. |
| showCloseButton | true | Kalıcı bir sayfa başlığı için false değerini ayarlayın. |
| closeButtonAriaLabel | string | Kapatma eylemini adlandırın. |
| close | EventEmitter<void> | Gerçek bir çıkış işleyicisine bağlayın. |
| mode-header-utility-area | Projected content | Bağlamsal eylemleri başlığa yerleştirin. |
### Yayımlanmış varsayılan düğme renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primary / default background | #295eff | Belgelenmiş varsayılan palet; tüm müşteriler için geçerli bir marka rengi değildir. |
| primary / hovered background | #2049c6 | Üzerine gelme durumu. |
| primary / pressed background | #152f80 | Basılma durumu. |
| primary / foreground | #ffffff | Birincil metin. |
| secondary / default background | transparent | Marka kenarlığı ve ön planı. |
| secondary / pressed background | #dee2ff | İnce yüzey. |
| danger / default background | #bf2310 | Yıkıcı işlem amacı; inceleme için değil. |
| disabled / background | #ccd5df | Devre dışı davranışıyla birlikte kullanın. |
### Web değişkenleri değil, UIKit boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| theme.radius.button.default | 99 | UIKit belirteç tablosundaki kapsül biçimi. |
| theme.height.button.sm | 32 | Yerel küçük yükseklik. |
| theme.height.button.md | 44 | Yerel orta yükseklik. |
| theme.padding-x.button.sm | 16 | Yerel yatay iç boşluk. |
| theme.padding-x.button.md | 24 | Yerel yatay iç boşluk. |
| theme.border-width.button.default | 1 | Yerel kenarlık genişliği. |
| Button typeface | preferredFont(.body, .semibold) | Yerel yazı tipi sistemini kullanır. |
### Web temasının sunulması

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Theme source | Visualizer export | web/default içeriğini proje stillerine kopyalayın. |
| Font family source | styles/default/variables/_font-family.scss | @font-face aile adlarını eşleştirin. |
| Root sizing | 16px optimal; supported up to 32px | Rem tabanlı tema boyutları. |
| Logo variants | light/dark × small/big | Gerekli her varlığı ayrı ayrı sağlayın; tek bir logoyu esnetmeyin. |
## Backbase tasarım sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Backbase tasarım sistemi Müşteri markalamasına sahip bir bankacılık sistemi

### Tek tek düğmeleri değil, kullanıcı yolculuğunu temalandırın

> Backbase Visualizer, desteklenen marka temel öğelerini sunar ve web, iOS ve Android için tema dışa aktarır. Müşteriler başlık ve gövde yazı tipi ailelerini değiştirebilir, markalamayı bileşen ve kullanıcı yolculuğu stillerine yansıtabilir.

Bu örnek, kurum içi bir hesaptan hesaba inceleme akışıdır. Hesap tanımlayıcıları ve tutarlar kurgusaldır. Görsel yapı, bir tıklamayla paranın aktarıldığı izlenimini vermek yerine düzenlenebilir taslak alanlarıyla son yerel incelemeyi özellikle birbirinden ayırır.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Müşteri temaları her platformda doğru şekilde uygulanmalıdır

### Visualizer dışa aktarımı, yalnızca bir marka onaltılık renk kodundan ibaret değildir

Visualizer; web, iOS ve Android için ayrı çıktılar üretir. Web için dışa aktarılan varsayılan dizinde Sass tasarım belirteçleri, logos dizininde ise marka varlıkları bulunur. Bu web çıktısını yerel JSON boyutlarını Angular geçersiz kılmalarına kopyalamak yerine proje stil sayfası üzerinden uygulayın.

Web teması yönergeleri, hem küçük hem büyük boyutlarda açık ve koyu logolar gerektirir. Yazı tipi dosyaları ayrıca sağlanır ve @font-face aile adları, dışa aktarılan font-family yapılandırmasıyla eşleşmelidir. Böylece bankacılık akışındaki başlıklar, denetimler ve markalama aynı müşteri temasıyla uyumlu kalır.

İnceleme örneği, bilinçli olarak uygulamanın yönettiği bir taslakta sona erer: hedef veya tutar değiştirildiğinde önceki sonuç temizlenir. Bu davranış tema dışa aktarımından ayrıdır; ödeme gerçekleştirildiği veya bankaya özgü bir doğrulama politikası bulunduğu anlamına gelmez.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Dışa aktarılan anlamsal temayı izleyin

### Platform değerlerini kendi bağlamlarında tutun

Referans tablosunda varsayılan düğme renkleri ile ayrı bir UIKit boyutları grubu yer alır. Yerel bir theme.height.button.md değeri, Angular uygulamasına kopyalanacak bir CSS değişkeni değildir. Web uygulamaları dışa aktarılan stilleri veya yüklenmiş SCSS'i kullanmalıdır.

Önizlemede belgelenen varsayılan birincil mavi ve ikincil renk tonu kullanılır. Genel panel iç boşluğu, özet görseli ve duyarlı iki sütunlu düzen uygulamaya özgü tercihlerdir ve resmî belirteçlerden açıkça ayrılmıştır.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Seçilen marka yazı tiplerini yükleyin

### Aile adı, yazı tipi dosyasının yerini tutmaz

Web teması kılavuzuna göre yazı tipi dosyaları ayrıca sağlanmalıdır. @font-face ailesi, dışa aktarılan $font-family yapılandırmasıyla aynı olmalıdır. Belgelerdeki örnek yazı tipi, genel Backbase yazı tipi olarak zorunlu değildir.

Tema rem birimlerini kullanır ve en uygun kök boyutunun 16 px olduğunu, 32 px'e kadar desteği belgeler. İncelemenin tamamını büyütülmüş metin boyutlarında test edin. Bağımsız tarayıcı yorumumuz sistem yazı tiplerini kullanır ve müşteri yazı tipleri kullanılabiliyormuş izlenimi vermez.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Mod başlığını ve düğme çubuğunu oluşturun

### Gerçek eylemleri bağlama uygun bir başlığa yerleştirin

ModeHeaderModule, isteğe bağlı ikinci satır ve kapatma denetimiyle bağlama uygun bir başlık sağlar. Örnekte showCloseButton false olarak ayarlanmıştır; çünkü bu örneğin kapatılabileceği harici bir rotası yoktur. Sıfırlama düğmesi, mode-header-utility-area yansıtma alanını kullanır.

ButtonModule, yerel bir düğmeyi bbButton aracılığıyla geliştirir. color değerini belgelenmiş bir role ayarlayın ve buttonSize için sm veya md kullanın. Dairesel düğme yalnızca simge içeren denetimler içindir; metinli inceleme eylemi için uygun değildir.

- Tek yerel inceleme eylemi için primary kullanın.

- Geri alınabilir sıfırlama eylemi için secondary kullanın.

- Hesap adlarını ve tutarları süslü düğme etiketleri yerine açıklama listesinde gösterin.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Dar ekranlarda da okunabilir kalan bir özet

### Okuma sırasını koruyun

Özgün çizimde, yön belirten bir yolla birbirine bağlanan iki hesap yüzeyi gösterilir. İkinci bir eyleme dönüşmeden transfer ilişkisini destekler. Küçük ekranlarda dekoratif hesap diyagramı gizlenirken hesap metinlerinin tamamı görünür kalır.

Düzenleyici, DOM sıralamasında inceleme çıktısından önce gelir. Yerel etiketler, alan hataları ve durum bölgesi klavye ve ekran okuyucu kullanıcılarının erişimine açıktır. Tutarı veya hedefi anlamak için yalnızca üzerine gelindiğinde görünen ayrıntılara ihtiyaç duyulmaz.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Yetkilendirilmiş Angular ortamını bağlayın

### Stilleri ve modülleri birlikte yükleyin

Resmî web kurulumu, depoya erişim ve genel Backbase SCSS'inin ayrıca içe aktarılmasını gerektirir. Yalnızca ButtonModule'ü içe aktarmak görsel ortamın tamamını sağlamaz. Paket ve stiller yapılandırıldıktan sonra bağımsız örnek mevcut bir Angular uygulamasına eklenebilir.

1. Yetkilendirilmiş repo.backbase.com hesabınızı ve seçilen sürümün gerektirdiği Angular/Node eşleşmesini kullanın.

2. @backbase/ui-ang paketini yükleyin ve genel SCSS'ini angular.json içinde zaten yapılandırılmış stil sayfasına ekleyin.

3. Tüketen bileşene ButtonModule ile ModeHeaderModule'ü içe aktarın, ardından örneğin tamamını ekleyip sıfırlama/inceleme akışını doğrulayın.

Destekleyici belirtimi okuyun

## Backbase tasarım sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Yayımlanmış varsayılan düğme renklerini kullanan bağımsız duyarlı HTML yorumu; uygulamaya özgü form ve düzen. Backbase Angular çalışma zamanı değildir.

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

Kod referansı

- Tutar ve hedef kurgusaldır. Bu HTML formunun bankacılık bağlantısı yoktur; Angular ModeHeader ve bbButton örneği için yetkilendirilmiş Backbase paket erişimi gerekir.

### Mod başlığı ve yerel inceleme eylemi

İki gerçek Backbase modülünü, yansıtılan sıfırlama eylemini ve açık yerel durumu kullanan bağımsız bir Angular bileşeni.

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

Kod referansı

- Yalnızca herkese açık npm erişimi değil, yüklenmiş Backbase paketi ve genel SCSS gerekir.

- button[bbButton] yönergeyi sağlar. ModeHeaderModule ise bb-mode-header-ui öğesini sağlar.

- İnceleme işareti ödeme işlemi başlatmaz. Gerçek bir transfer akışında gönderim, onaylanmış ayrı bir uygulama işlemi olmalıdır.

## Backbase tasarım sistemi Yapay Zekâ Aracısı Kurulumu

### Uygulamaya Başlangıç Noktası

Lisanslı projenizin gerektirdiği sürüm uyumluluğunu kullanın. angular.json dosyasının genel stil sayfasını içerdiğinden emin olun. Eski Angular 17 / ui-ang 11 kurulumlarında belgelenmiş bir esbuild kısıtlaması vardır; ui-ang 12 ve üzeri sürümler esbuild'i destekler. Bu kılavuz kayıt defteri kimlik bilgilerini sağlamaz.

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

### Projeniz İçin Bir İstem

```
Gerçek ButtonModule ve ModeHeaderModule içe aktarımlarını kullanarak Backbase Angular transfer incelemesi oluşturun. Yetkilendirilmiş paket stillerini ve müşteri temasını yükleyin. Platforma özgü belirteçleri ayrı tutun. Uygulama verilerini doğrulayın, düzenlemelerde eski inceleme sonucunu temizleyin ve yerel bir örneği asla gönderilmiş bir ödeme gibi sunmayın.
```

## Backbase tasarım sistemi Kaynaklar ve Kapsam

Backbase paketine erişmek için yetkilendirilmiş bir depo hesabı gerekir. Tarayıcı önizlemesi bağımsız bir HTML yorumudur; Backbase Angular değildir. Mavi paleti yayımlanmış varsayılan düğme renklerini izler; panel boşlukları ve çizim uygulamaya özgü tercihlerdir. Aşağıdaki yerel boyutlar platformlarına göre etiketlenmiştir.

- Web kurulumu Kayıt defteri, Angular ve stil sayfası kurulumu.

- Web düğmesi Yönerge girdileri ve eylem gruplandırması.

- Web mod başlığı Başlık, kapatma olayı ve içerik yansıtma.

- Web temasını uygulayın Dışa aktarılan stiller, yazı tipi varlıkları ve rem boyutlandırması.

- Genel markalama Visualizer ve müşteri markalaması.

- UIKit düğmesi Yerel belirteç takma adları ve boyutlar.

- Compose düğmesi Varsayılan düğme paleti ve Compose özellikleri.

- Web simgeleri Material simge yazı tipinin alternatifi.

## Backbase tasarım sistemi İlgili Kaynaklar

### Dell tasarım sistemi

DDS v3 ile kapsamı belirlenmiş bir cihaz araması oluşturun: anlamsal renkler, duyarlı tipografi ölçeği, belirteç tabanlı boşluklar ve filtreleme davranışı uygulamaya ait olan bir InputGroup düzeni.

### Duet tasarım sistemi

ISO tarih değerleri, açık aralık doğrulaması, bileşen odaklama yöntemleri ve ayrı açık kaynak tarih seçici sınırı içeren tarih aralığı iş akışıyla Duet’in LocalTapiola renk ve boşluk ölçeklerini inceleyin.

### Elastic UI

Doğrulanmış Borealis ölçekleri, yerel tablo ve arama kontrolleri, önem derecesine göre filtreleme, yerel olarak kaydedilen olaylar ve eksiksiz React kaynak koduyla bir Elastic UI günlük gezgini oluşturun.


- [Uygulama başvurusu](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Kaynak](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Kaynak](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Kaynak](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Kaynak](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Kaynak](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Destekleyici belirtimi okuyun](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [Destekleyici belirtimi okuyun](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Destekleyici belirtimi okuyun](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Destekleyici belirtimi okuyun](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Destekleyici belirtimi okuyun](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)
- [Destekleyici belirtimi okuyun](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Kod referansı](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Kod referansı](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Web kurulumu Kayıt defteri, Angular ve stil sayfası kurulumu.](https://designsystem.backbase.com/latest/getting-started/installation/web-CUY99MQ3-CUY99MQ3)
- [Web düğmesi Yönerge girdileri ve eylem gruplandırması.](https://designsystem.backbase.com/latest/components/web/button-rc5AvJme)
- [Web mod başlığı Başlık, kapatma olayı ve içerik yansıtma.](https://designsystem.backbase.com/latest/components/web/mode-header-OzvKV5Zj)
- [Web temasını uygulayın Dışa aktarılan stiller, yazı tipi varlıkları ve rem boyutlandırması.](https://designsystem.backbase.com/latest/theming/applying-theme/web-0gWHJbYT)
- [Genel markalama Visualizer ve müşteri markalaması.](https://designsystem.backbase.com/latest/theming/global-branding-QaOcQsRp)
- [UIKit düğmesi Yerel belirteç takma adları ve boyutlar.](https://designsystem.backbase.com/latest/components/i-os/button/ui-kit-KEp4q4lA)
- [Compose düğmesi Varsayılan düğme paleti ve Compose özellikleri.](https://designsystem.backbase.com/latest/components/android/button/jetpack-compose-WIvwEPYT)
- [Web simgeleri Material simge yazı tipinin alternatifi.](https://designsystem.backbase.com/latest/guides/custom-icons-on-web-HM1dEzeo)