# Visa Product tasarım sistemi

## Visa Product tasarım sistemi Arayüz Önizlemesi

Bir biçim ve sıklık seçin, yerel tercihi inceleyin ve sıfırlayın.

## Visa Product tasarım sistemi Tasarım Referansı

Yayımlanmış @visa/nova-styles 1.6.5 stilleri, Visa teması ve örnek meta verileri. Varsayılan/açık değerler, alternatif ve koyu tema geçersiz kılmalarından ayrılmıştır. Önizleme resmî CSS paketini yerel olarak gömer ve uzak font-face kurallarını kaldırarak sistem yedeğini kullanır.

### Varsayılan palet

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --palette-default-active | #1434cb | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-active-hover | #173be8 | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-active-pressed | #0f2595 | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-active-accent | #fcc015 | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-surface-1 | #ffffff | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-surface-2 | #f5f5f5 | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-surface-3 | #f0f0f0 | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-text | #000000 | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-text-subtle | #4a4a4a | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-text-on-active | #ffffff | Visa 1.6.5 varsayılan/açık tema referansı. |
| --palette-default-border | rgba(0, 0, 0, 0.1) | Visa 1.6.5 varsayılan/açık tema referansı. |
### Tema boyutu ve türü

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --theme-font-size | 14px | Visa 1.6.5 varsayılan/açık tema referansı. |
| --theme-border-radius | 6px | Visa 1.6.5 varsayılan/açık tema referansı. |
| --typography-headline-1-font-size | 2.2857142857rem | Visa 1.6.5 varsayılan/açık tema referansı. |
| --typography-headline-2-font-size | 1.7857142857rem | Visa 1.6.5 varsayılan/açık tema referansı. |
| --typography-headline-3-font-size | 1.4285714286rem | Visa 1.6.5 varsayılan/açık tema referansı. |
| --typography-body-1-font-size | 1.1428571429rem | Visa 1.6.5 varsayılan/açık tema referansı. |
| --typography-body-2-font-size | 1rem | Visa 1.6.5 varsayılan/açık tema referansı. |
| --typography-body-3-font-size | 0.8571428571rem | Visa 1.6.5 varsayılan/açık tema referansı. |
### Ölçeklenebilir boyutlar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
| --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
| --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
| --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
| --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
| --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
| --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | Temel ölçeklenebilir boyut; duyarlı bağlamlarda ek bir çarpan uygulanabilir. |
### Yayımlanmış yardımcı ve bileşen sınıfları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| v-flex | Flex layout | Boşluk örnekleri için gerekli üst öğe. |
| v-gap-20 | Gap utility | Resmî varsayılan boşluk örneğinde gösterilmiştir. |
| v-col-gap-20 | Column gap utility | Sütunları birbirinden ayırır. |
| v-button | Primary button | Yerel button öğesi kullanın. |
| v-button-secondary | Secondary modifier | Örnekteki destekleyici Sıfırla işlemi. |
| v-radio | Native radio style | Ortak adı ve birbirinden farklı değerleri koruyun. |
| v-label | Label style | İlişkili bir etiket kullanın veya denetimi etiketle sarın. |
| v-alternate | Alternate palette context | Bir yüzeyde veya düğmede gösterilir. |
| v-typography-headline-1 | Headline visual role | Bu sayfadaki anlamsal h1 öğesine uygulayın. |
### Bileşim sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Radio group | One shared name per question | Biçim ve sıklık birbirinden bağımsız gruplardır. |
| fieldset / legend | Group question | Seçeneklerin hangi soruyu yanıtladığını belirtin. |
| checked | Native selected state | Seçim için tek başına CSS kullanmayın. |
| disabled | Native unavailable state | Kullanılamıyorsa görünür bir açıklama ekleyin. |
| aria-describedby | Optional supporting description | Ek metin etikete dâhil değilse onu ilişkilendirin. |
## Visa Product 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ı.

## Visa Product tasarım sistemi Okunabilir İnceleme Durumuna Sahip Bir Tercih Görevi

### Her soruyu bağımsız tutun

> Örnek, ekstre biçimini ve özet sıklığını sorar. Bunlar ayrı radyo gruplarıdır: sıklığı değiştirmek, biçim seçimini kaldırmaz. Birincil işlemden önce her iki seçeneği de yineleyen özet, kullanıcının sonucu bir simgeyi yorumlamadan veya gizli bir varsayılanı anlamaya çalışmadan incelemesini sağlar.

Tercihi inceleme işlemi yalnızca yerel bir onay kaydeder. Sayfa kart numarası istemez, hesaba erişmez, ekstre oluşturmaz ve finansal hizmet ayarını değiştirmez. Böylece örnek, tasarım sisteminin seçim ve geri bildirim davranışına odaklanır.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi Nova stilleri ve Visa teması ayrı içe aktarımlardır

### Yapı, temanın tamamı değildir

Resmî kurulumda önce styles.css, ardından themes/visa/index.css gösterilir. İlki bileşen ve yardımcı sınıf kurallarını sağlar; ikincisi Visa temasını sunar. Yalnızca birini yüklemek eksik bir entegrasyon oluşturur. Bağımsız örnek ve içe aktarma kod parçacığı da bu sırayı korur.

Kontrol edilen paketin sürümü 1.6.5’tir. Örnek, görüntülenirken üçüncü taraf bir stil sayfası isteğine bağlı olmaması için CSS paketini yerel olarak gömer. Uzak font-face bildirimleri kaldırılır ve uygulama, yedek olarak sistem yazı tipini açıkça kullanır. Bu, yazı tipi değişikliği belirtilmiş yerel Nova CSS kullanımıdır; tescilli yazı tipiyle birebir eşleştiği iddiası değildir.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi Varsayılan ve alternatif paletlerde, her renk için eşleşen bir ön plan rengi bulunur

### Bir dolgu rengini metin rolü olmadan başka yere taşımayın

Varsayılan/açık temadaki etkin renk #1434cb, üzerine gelindiğinde #173be8 ve basıldığında #0f2595 olur. Bu rengin üzerindeki metin rolü beyazdır. Alternatif tema bağlamında rol eşlemesi değişir; bu nedenle örnek, yalnızca arka planı geçersiz kılmak yerine başlık yüzeyinde v-alternate kullanır.

Vurgu rengi #fcc015, tüm düğmeler için kullanılacak evrensel bir dolgu rengi değildir. Vurgu ve etkin rollerinin nasıl kullanılacağını tema bağlamı belirler. Referans tablosunda varsayılan palet açıklanır; aynı stil sayfasında daha sonra tanımlanan koyu ve alternatif renkler, yanıltıcı tek bir değer kümesi oluşturacak şekilde birleştirilmez.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi rem ölçeğini temanın kök boyutuna göre değerlendirin

### Temanın 14 piksellik kök boyutu, alışılmış rem varsayımlarını değiştirir

Visa teması, kök yazı tipi boyutunu 14 piksel olarak tanımlar. Bu nedenle yaklaşık 2.285714rem olan headline-1 değeri, bu kök boyutunda 32 piksele karşılık gelir; 16 piksellik kök varsayılarak elde edilen değere değil. body-1 yaklaşık 1.142857rem, body-2 ise 1rem’dir.

Ölçeklenebilir boyut belirteçleri, bir piksel değerinin tema ölçek faktörüyle çarpımını ifade eder. Duyarlı bağlamlarda ikinci bir faktör de devreye girebilir. Boşlukları uygulamaya uyarlarken bu ifadeyi koruyun; yalnızca varsayılan hesaplanmış sayıyı kopyalamak bu ilişkiyi kaybettirir. Örnekte, sıklık kontrollerinde resmî gap yardımcı sınıfları; genel iki sütunlu düzende ise uygulamaya özgü boyutlar kullanılır.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi Nova sunumunun altında yerel radyo düğmesi anlamı

### Stil verilmiş bir daire, radyo grubu değildir

Herkese açık meta veriler, v-radio sınıfını gerçek bir input type="radio" öğesine uygular ve bunu bir label ile eşleştirir. Önizlemede bu yerel yapı korunur ve her seçeneğin görünür açıklaması kendi label öğesine sarılır. Klavye okları grup içinde seçimler arasında gezinmeyi sağlar; seçili durum tarayıcı ve yardımcı teknolojiler tarafından kullanılabilir olmaya devam eder.

Her sorunun adını bir fieldset ve legend belirtir. Biçim seçenekleri, seçimin sonuçlarını açıklar: PDF indirilebilir bir örnektir; HTML ise yeniden akış sağlayan bir biçim olarak tanımlanır. Ürüne özgü içerik özgündür; denetimlerin yapısı ve sınıfları yerel kitaplıktan alınmıştır.

- İki biçim seçeneği için bir ad, sıklık için başka bir ad kullanın.

- Özetin tutarlı bir etiket kullanabilmesi için radyo düğmesinin value değerini görünür metinden ayrı tutun.

- Durumu yalnızca dekoratif bir sınıfla değil, checked ve disabled öznitelikleriyle belirtin.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi Nova CSS denetimlere stil verir; seçimi yerel HTML yönetir

### Gruplama ve inceleme mantığını stil sayfasının dışında tutun

Örnekte, gerçek radyo girişlerinde Nova’nın v-radio sınıfı kullanılır. Ortak name öznitelikleri biçim seçeneklerini birbirini dışlayacak şekilde gruplarken farklı bir name özniteliği sıklık grubunu ayırır. Fieldset ve legend grup bağlamını sağlar; ilişkilendirilmiş bir label ise seçeneğin tüm metnini denetimin erişilebilir adına dahil eder.

CSS paketi seçenek belirlemez, uygulama kalıcılığını yönetmez veya inceleme kaydı oluşturmaz. Sağlanan betik, iki yerel grubu okuyup yerel bir özet oluşturur. Önceki değerler artık mevcut tercihi yansıtmadığından, seçim değişikliği bu özeti temizler.

Uygulamada hem yapısal stil sayfasını hem de Visa temasını kullanın. Alternatif başlıkta v-alternate kullanılır; form ise varsayılan renk bağlamında kalır. Yalnızca arka planı değiştirip ön plan rollerini çözümsüz bırakarak başlığı taklit etmeyin.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi Her genişlikte tek bir okuma sırası

### Görev sırasını değiştirmeden özeti taşıyın

Geniş ekranlarda seçim grupları ve mevcut seçim özeti yan yana görünür. Dar ekranlarda özet, formun ardından gelir. Belge görseli göreve ilişkin bilgi sağlamadığından gizlenir; tüm etiketler, açıklamalar ve eylemler korunur.

CSS kitaplığı güncel tarayıcıları destekler. Resmî geliştirme yönergeleri eski tarayıcılarla uyumluluk garantisi vermez. Bu nedenle üretim ekipleri, modern bir önizlemenin sorunsuz çalışmasını evrensel destek olarak kabul etmek yerine destekledikleri sürümleri test etmelidir.

1. Sabitlenmiş yapısal CSS ve Visa temasını yükleyin, ardından uygulama düzeni stillerini ekleyin.

2. Erişilebilir HTML ve üç aylık seçeneklerini belirleyin, tercihi gözden geçirin ve ikisinin de özette göründüğünü doğrulayın.

3. Seçeneklerden birini değiştirin, inceleme bildiriminin sıfırlandığını doğrulayın; ardından Sıfırla’yı ve dar ekran düzenini test edin.

Destekleyici belirtimi okuyun

## Visa Product tasarım sistemi Bileşen Örnekleri

### Eksiksiz Nova CSS tercih düzeni

İki yerel radyo grubu özeti anında günceller; birincil eylem ise açık bir yerel inceleme durumu oluşturur.

```
<!-- index.html after installing @visa/nova-styles@1.6.5 in a Vite vanilla project -->
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Statement preference</title>
<link rel="stylesheet" href="/node_modules/@visa/nova-styles/styles.css">
<link rel="stylesheet" href="/node_modules/@visa/nova-styles/themes/visa/index.css">
<style>:root{font-family:Arial,sans-serif}body{font-family:Arial,sans-serif;background:#fff}*{box-sizing:border-box}.app{max-width:1150px;margin:auto;padding:24px}.hero{padding:32px;display:grid;grid-template-columns:1fr 150px;align-items:center;gap:24px;border-radius:6px}.hero h1{font-family:Arial,sans-serif;font-weight:600;line-height:1.2;margin:12px 0 16px}.hero p{font-family:Arial,sans-serif}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:600}.paper{width:120px;height:150px;background:white;border-radius:6px;transform:rotate(8deg);padding:20px;box-shadow:8px 8px 0 #0f2595;position:relative}.paper span{display:block;height:3px;background:#1434cb;margin:10px 0;width:70px}.paper span:nth-child(2){width:45px}.paper b{position:absolute;bottom:10px;right:15px;color:#1434cb;font:600 36px Arial}.workspace{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;margin:32px 0}.workspace h2,.workspace legend{font-family:Arial,sans-serif;font-weight:600}.hint{font-size:14px;color:#4a4a4a;line-height:1.5;margin:12px 0 16px}.option{display:flex;gap:16px;padding:20px 16px;border:1px solid #ddd;border-radius:6px;margin:12px 0;cursor:pointer}.option:has(:checked){border:2px solid #1434cb;padding:19px 15px;background:#f6f9ff}.option b{font-size:16px}.option small{display:block;font-size:14px;color:#4a4a4a;line-height:1.5;margin-top:4px}.option .v-radio{flex-shrink:0}.frequency{margin-top:28px}.frequency legend{margin-bottom:16px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.v-button{font-family:Arial,sans-serif}.summary{background:#f5f5f5;padding:24px;border-radius:6px;align-self:start;min-height:285px}.summary h2{margin:16px 0 8px}.rule{height:1px;background:#ddd;margin-top:20px}.status{padding:16px 0;font-size:14px;line-height:1.5}.confirmed{color:#1434cb;font-weight:600}footer{font-size:12px;color:#4a4a4a;border-top:1px solid #ddd;padding-top:16px;line-height:1.5}@media(max-width:650px){.app{padding:16px}.hero{padding:24px;grid-template-columns:1fr}.paper{display:none}.workspace{grid-template-columns:1fr;gap:24px}.hero h1{font-size:28px}.option{padding:16px 12px}.option:has(:checked){padding:15px 11px}}
</style><main class="app"><header class="v-surface v-alternate hero"><div><p class="eyebrow">ACCOUNT PREFERENCES / SAMPLE</p><h1 class="v-typography-headline-1">Choose how you read<br>your statement.</h1><p class="v-typography-body-1">One clear choice, with the details visible before you confirm.</p></div><div class="paper" aria-hidden="true"><span></span><span></span><span></span><b>01</b></div></header><div class="workspace"><form id="form"><fieldset><legend class="v-typography-headline-3">Statement format</legend><p class="hint">This page stores a demonstration preference only.</p><label class="option"><input class="v-radio" type="radio" name="delivery" value="Digital PDF" checked><span><b>Digital PDF</b><small>A downloadable sample statement for offline reading.</small></span></label><label class="option"><input class="v-radio" type="radio" name="delivery" value="Accessible HTML"><span><b>Accessible HTML</b><small>A reflowable sample statement with structured headings.</small></span></label></fieldset><fieldset class="frequency"><legend class="v-typography-headline-3">Summary frequency</legend><div class="v-flex v-gap-16"><label class="v-flex v-align-items-center v-gap-4"><input class="v-radio" type="radio" name="frequency" value="Monthly" checked>Monthly</label><label class="v-flex v-align-items-center v-gap-4"><input class="v-radio" type="radio" name="frequency" value="Quarterly">Quarterly</label></div></fieldset><div class="actions"><button class="v-button" type="submit">Review preference</button><button class="v-button v-button-secondary" id="reset" type="button">Reset</button></div></form><aside class="summary"><p class="eyebrow">YOUR CURRENT SELECTION</p><h2 class="v-typography-headline-3" id="selection">Digital PDF</h2><p id="period">Monthly summary</p><div class="rule"></div><p class="hint">No account data is used. No statement is generated or delivered.</p><p class="status" id="status" role="status">Review your preference to create a local confirmation.</p></aside></div><footer>Nova styles 1.6.5 and Visa theme. The example application styles use a system-font fallback. Original demonstration, no financial service connection.</footer></main>
<script>const form=document.querySelector('#form'),status=document.querySelector('#status');function update(){document.querySelector('#selection').textContent=form.elements.delivery.value;document.querySelector('#period').textContent=form.elements.frequency.value+' summary';status.textContent='Review your preference to create a local confirmation.';status.classList.remove('confirmed')}form.onchange=update;form.onsubmit=e=>{e.preventDefault();status.textContent='Reviewed locally: '+form.elements.delivery.value+', '+form.elements.frequency.value.toLowerCase()+'. No account setting changed.';status.classList.add('confirmed')};document.querySelector('#reset').onclick=()=>{HTMLFormElement.prototype.reset.call(form);update()};</script>
</html>
```

Kod referansı

- Bileşen sunumunu CSS sağlar; küçük betik uygulama davranışını sağlar.

- Tercih değiştirildiğinde önceki inceleme durumu temizlenir.

- Alternatif başlık gerçek bir tema bağlamıdır; paletin elle boyanmış bir taklidi değildir.

- Eksiksiz HTML dosyasını index.html adıyla kaydedin ve sabitlenmiş herkese açık CSS URL’lerine erişebilen bir tarayıcıda açın. Bu kılavuzdaki gömülü önizleme, stilleri yerel olarak içerir.

### Yapıyı ve temayı birlikte yükleyin

Paketlenmiş bir uygulamada, uygulama stil sayfasından önce her iki katmanı da bir kez içe aktarın.

```
import '@visa/nova-styles/styles.css';
import '@visa/nova-styles/themes/visa/index.css';
import './application.css';
```

Kod referansı

- Tema dosyası eksikse yapısal sınıflar bulunabilir, ancak amaçlanan Visa belirteçleri uygulanmayabilir.

## Visa Product tasarım sistemi aracı kurulumu

### Uygulamaya Başlangıç Noktası

Eksiksiz HTML, doğrulanmış styles.css ve themes/visa/index.css yollarını kullanır. Her ikisi de gereklidir. Bu iframe’de stiller yerel olarak gömülüdür; resmî uzak font-face bildirimleri iframe’den çıkarılmıştır.

```
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/nova-styles@1.6.5
# Replace index.html with the complete example below.
npm run dev
```

### Projeniz İçin Bir İstem

```
Sabitlenmiş yapısal ve tema CSS öğelerini kullanarak Visa Nova hesap özeti tercihi örneğini oluşturun. Yerel radyo gruplarını, açık legend öğelerini ve ilişkilendirilmiş label öğelerini koruyun. Varsayılan ve alternatif tema rollerini birbirinden ayırın; rem değerlerini değerlendirirken 14px kök boyutunu dikkate alın. İncelemeyi yerel tutun, seçimler değiştiğinde eski onay bildirimini temizleyin ve dar ekranlarda özeti formun altına yerleştirin.
```

## Visa Product tasarım sistemi kaynakları ve kapsamı

Yerel Nova CSS bileşenlerini kullanan bağımsız OpenDesign kılavuzu. Bu kurgusal tercih görevi hesap verisi kullanmaz ve herhangi bir finansal hizmette değişiklik yapmaz. Önizlemede, sistem yazı tipi kullanıldığı açıkça belirtilir.

- Nova deposu Resmî kurulum ve tema yükleme bilgileri.

- Styles 1.6.5 Yerel bileşen kuralları ve ölçeklenebilir boyutlar.

- Visa teması 1.6.5 Temanın tam renk paleti ve tipografisi.

- Örnek meta verileri Doğrulanmış HTML sınıf yapısı.

- CSS başlangıç Herkese açık entegrasyon yönergeleri.

- Tarayıcı desteği Güncel tarayıcı desteğinin sınırları.

## Visa Product tasarım sistemi ilgili kaynaklar

### Volvo Cars Web tasarım sistemi

Volvo Cars’ın HTML öncelikli web temelini, gerçek açık tema belirteçlerini ve yerel seçilebilir kart stillerini; bağımsız seçimler, tema değiştirme ve sıfırlama içeren eksiksiz bir paketleme planı örneğinde inceleyin.

### Wonderflow Wanda

Konu filtreleri, genişletilebilir kanıt bağlamı ve kalıcı yerel not defteri içeren eksiksiz bir geri bildirim okuma çalışma alanında Wanda’nın gerçek tema rollerini ve belirteç söz dizimini kullanın.

### Workday Canvas

Canvas Kit’in birleşik FormField bileşeni, denetimli TextInput bileşeni ve PrimaryButton bileşeniyle yerel bir öğrenme planı oluşturun. Güncel anlamsal belirteç kaynaklarıyla eski space.x4 geçiş örneklerinin farkını görün.


- [Uygulama başvurusu](https://github.com/visa/nova-styles)
- [Kaynak](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css)
- [Kaynak](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css)
- [Kaynak](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [Kaynak](https://design.visa.com/components/radio/)
- [Destekleyici belirtimi okuyun](https://design.visa.com/components/radio/)
- [Destekleyici belirtimi okuyun](https://github.com/visa/nova-styles)
- [Destekleyici belirtimi okuyun](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css)
- [Destekleyici belirtimi okuyun](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css)
- [Destekleyici belirtimi okuyun](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [Destekleyici belirtimi okuyun](https://design.visa.com/developing/)
- [Kod referansı](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [Kod referansı](https://github.com/visa/nova-styles)
- [Nova deposu Resmî kurulum ve tema yükleme bilgileri.](https://github.com/visa/nova-styles)
- [Styles 1.6.5 Yerel bileşen kuralları ve ölçeklenebilir boyutlar.](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css)
- [Visa teması 1.6.5 Temanın tam renk paleti ve tipografisi.](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css)
- [Örnek meta verileri Doğrulanmış HTML sınıf yapısı.](https://unpkg.com/@visa/nova-styles@1.6.5/data.json)
- [CSS başlangıç Herkese açık entegrasyon yönergeleri.](https://design.visa.com/developing/styles-css/)
- [Tarayıcı desteği Güncel tarayıcı desteğinin sınırları.](https://design.visa.com/developing/)