# VA tasarım sistemi

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

Üç örnek süreç durumunu inceleyin ve adım özetini gizlemeden ek açıklamayı açın.

## VA tasarım sistemi Tasarım Referansı

Yayımlanmış css-library 0.36.1 değişkenleri ve component-library 56.14.0 bağımlılığı olan web-components 24.14.0. Yazı tipleri için yerel yedekler açıkça belirtilmiştir. 52rem’lik örnek kabuk, uygulamaya özgü bir tercihtir.

### Anlamsal tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --vads-font-family-heading | Bitter, Georgia, Cambria, Times New Roman, Times, serif | Başlık ailesi; önizlemede Georgia kullanılır. |
| --vads-font-family-sans | Source Sans Pro Web / Source Sans Pro, system sans fallbacks | Gövde ve arayüz ailesi; önizlemede Arial kullanılır. |
| --vads-font-size-body-default | 1.06rem (about 17px) | source-sans-normalized yerine anlamsal rolü tercih edin. |
| --vads-font-size-heading-level-1 / 2 / 3 | 2.5 / 2 / 1.25rem | 16px kök boyutunda 40 / 32 / 20px. |
| --vads-font-size-heading-level-4 / 5 / 6 | 1.063 / .938 / .938rem | Yaklaşık 17 / 15 / 15px. |
| --vads-font-line-height-default / heading / body-lead | 1.5 / 1.2 / 1.75 | Metin rolüyle eşleştirin. |
### Aralık

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --vads-spacing-inset-s / m / l | 1 / 1.5 / 2rem | 16 / 24 / 32px. |
| --vads-spacing-vertical-stack-default | 1rem / 16px | Genel dikey yığın. |
| --vads-forms-spacing-vertical-stack-default | 2rem / 32px | Form alanı yığını. |
| --vads-spacing-0p5 / 1 / 1p5 / 2 / 2p5 / 3 | 4 / 8 / 12 / 16 / 20 / 24px | Standart kök boyutunda temel ölçek. |
| --vads-spacing-4 / 5 / 6 / 7 / 8 | 32 / 40 / 48 / 56 / 64px | Daha büyük temel değerler. |
### Anlamsal renk

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --vads-color-text | #1b1b1b | Varsayılan metin rolünü tercih edin. |
| --vads-color-link / link-active | #005ea2 / #0b4778 | Varsayılan ve etkin bağlantı rolleri. |
| --vads-color-primary-darker | #162e51 | Vurgu düzeyi yüksek birincil yüzey referansı. |
| --vads-color-base-lighter / base-lightest | #dfe1e2 / #f0f0f0 | Nötr ayırıcılar ve arka planlar. |
| --vads-color-error | #d54309 | Kullanımdan kaldırılmış ikincil kırmızı yerine hata anlambilimini kullanın. |
| --vads-color-success-darker | #216e1f | Daha koyu başarı rengi referansı; durum yine de sözcüklerle belirtilmelidir. |
### Duyarlı tasarım sınırları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --vads-breakpoint-mobile / mobile-lg | 320 / 480px | Küçük ekran için referans sınırları. |
| --vads-breakpoint-tablet / tablet-lg | 640 / 880px | Orta boyutlu düzenler. |
| --vads-breakpoint-desktop / desktop-lg | 1024 / 1201px | Masaüstü sınırları. |
| --vads-breakpoint-widescreen | 1400px | Geniş düzen referansı. |
## VA tasarım sistemi Kapsamlı 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ı.

## VA tasarım sistemi Gaziler için bir hizmet sistemi

### Temeller ve bileşenler ayrı paketlerdir

> VA sistemi; hizmet örüntülerini, içerik yönergelerini, tokenları, CSS yardımcı programlarını ve Web Components bileşenlerini bir araya getirir. Belgelenen kurulumda genel temeller için CSS-library paketi, etkileşimli öğeler içinse component-library paketi kullanılır. Bu referansta component-library 56.14.0 ile css-library 0.36.1 birlikte kullanılır; bu paketlerin sürüm numaraları birbirinden bağımsızdır.

Örnek, kayıt talebini açıklayan kurgusal bir senaryodur. Bir süreç listesinin, talebin gönderildiğini veya kişinin bir yardımdan yararlanmaya uygun olduğunu ileri sürmeden ilerlemeyi nasıl gösterebileceğini anlatır. VA logosu, resmî kurum kimliği bandı, kişisel kayıt veya gerçek bir vaka durumu gösterilmez. Üretim ortamında kullanılacak hizmet metinleri, ilgili VA programından sorumlu birimle doğrulanmalıdır.

Destekleyici belirtimi okuyun

## VA tasarım sistemi Anlamsal yazı tipi rolleri

### Gövde ve başlık yazı tipi aileleri bilinçli olarak farklı seçilmiştir

Anlamsal başlık ailesi Bitter’dir; yedek olarak Georgia ve diğer serif yazı tipleri kullanılır. Gövde yazı tipi yığını Source Sans Pro Web ve Source Sans Pro ile başlar, ardından platformun sans-serif yedek yazı tipleri gelir. Varsayılan gövde rolü 1.06rem’dir; 16px kök boyutunda yaklaşık 17px eder. Başlıklarda 1. düzey için 40px, 2. düzey için 32px, 3. düzey için 20px ve 4. düzey için yaklaşık 17px kullanılır.

Eski source-sans-normalized adı yerine --vads-font-size-body-default kullanın. Anlamsal token rolü belirtirken eski normalizasyon adı yazı tipinin uygulama ayrıntısını gösterir. Önizlemede gövde metni için açıkça Arial, başlıklar içinse Georgia kullanılır. Yerel Process List bileşeni CSS kendi iç yapısını ve boyutlarını belirler; yedek yazı tipleri, Source Sans ve Bitter’ın ölçülerini birebir yeniden ürettiği iddiasında değildir.

Destekleyici belirtimi okuyun

### Satır yüksekliği role göre belirlenir

Varsayılan paragraf satır yüksekliği 1.5, başlık satır yüksekliği ise 1.2’dir. Giriş metni rolünde bu değer 1.75’tir. Serif satır yüksekliği tokenı 1.9’dur ve her serif başlık için değil, serif yazı tipiyle dizilen sürekli metinler için tasarlanmıştır. 1.9 değerini kompakt bir süreç başlığına atamak, birbirinden ayrı iki rolü karıştırır. Bu örnekte süreç öğeleri, sayfanın 2. düzey bölüm başlığının altında 3. düzey başlık kullanır.

Destekleyici belirtimi okuyun

## VA tasarım sistemi Anlamsal aralık ve düzen

### Sıradan bir yığınla form yığınını birbirinden ayırın

Genel dikey yığın varsayılanı 1rem/16px, formlar için dikey yığın varsayılanı ise 2rem/32px’tir. Bu fark işlevseldir: iki kısa açıklama öğesinin aralığı, etiketleri, ipuçları, denetimleri ve hata mesajları bulunan ayrı soruların aralığından farklı olmalıdır. s, m ve l iç boşlukları sırasıyla 16, 24 ve 32px değerlerine karşılık gelir.

Temel aralık ailesinde 4, 8, 12, 16, 20 ve 24px değerleri, daha büyük sekiz piksellik artışlar ve ayrıca bir ve iki piksellik özel değerler bulunur. Amaçları düzenle eşleştiğinde anlamsal aralık adlarını tercih edin. Örnekteki 52rem’lik dış kabuk, uygulamaya özgü bir tercihtir; 24px iç boşluk ve 32px bölüm aralığı ise yayımlanmış ölçek değerlerini kullanır. Bu kabuk, tüm VA sayfa şablonlarına dayatılmaz.

Destekleyici belirtimi okuyun

## VA tasarım sistemi Renkler ve duyarlı tasarım tokenları

### Geçmişten kalan bir diğer ad yerine rolü kullanın

Güncel metin tokenı --vads-color-text (#1b1b1b) değerindedir. --vads-color-link #005ea2, etkin bağlantı rolü ise #0b4778 değerindedir; bunlar daha koyu birincil renk ailesindeki tüm değerlerle aynı değildir. Hata rolünün değeri #d54309’dur. İkincil kırmızı ailesi bu amaçla kullanıldığında eski kabul edilir; bu nedenle yeni bir doğrulama stili ikincil renk yerine hata anlambilimine başvurmalıdır.

Temel ve anlamsal tablolar, adı belirtilmiş bir CSS-library sürümünden oluşturulur. Örnekte, eski bir USWDS renk paleti kopyalanıp VA paletiymiş gibi sunulmaz; gerçek değişkenler yüklenir. Yerel bileşenlerin bu değişkenlere ek olarak kendi derlenmiş değerleri de olabilir. Yükseltme yaparken her iki katmanı da doğrulayın.

Destekleyici belirtimi okuyun

### VA sınırları, genel bir çerçeve ölçeği değildir

Token kümesinde mobile 320px, mobile-lg 480px, tablet 640px, tablet-lg 880px, desktop 1024px, desktop-lg 1201px ve widescreen 1400px olarak tanımlanmıştır. Mevcut şablonlarla eşleşirken alışılmadık 1201px eşiği önem taşır. Kesme noktası değişkenleri değerleri belgeler; CSS özel özellikleri yerel bir medya sorgusu koşulunda doğrudan kullanılamaz. Doğrulanmış tokendan türetilmiş derleme zamanı değerini veya sabit bir değeri kullanın.

Destekleyici belirtimi okuyun

## VA tasarım sistemi Process List yapısı

### Anlamlı üç ila on adım

VA’nın Process List bileşeni, metro haritasına da benzetilir. Uzun bir süreci açıklar veya kişinin süreçte hangi noktada olduğunu bildirir. Yönergeler, üç ila on adım kullanılmasını ve sayfada bu türden yalnızca bir liste bulunmasını önerir. Her öğede, fiille başlayan kısa bir başlık ve görünür bir açıklama içeriği bulunmalıdır; bileşen, içi boş bir başlığın yanındaki dekoratif bir sayıdan ibaret değildir.

Yerel etiketler va-process-list ve va-process-list-item şeklindedir. Bir öğe header ve level özelliklerinin yanı sıra active, pending, checkmark ve status-text özelliklerini alır. Yayımlanmış bileşen modülünde öncelik sırası checkmark, active ve ardından pending şeklindedir. Bu durumlardan birini ayarlarken diğer boole durumlarını kapatarak çelişkili birleşimlerden kaçının. Durum stiliyle birlikte açık durum metni kullanın; böylece aşamanın ne olduğu yalnızca renge bakmadan anlaşılır.

```
<va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list>
```

Kod referansı

Destekleyici belirtimi okuyun

## VA tasarım sistemi Ayrıntılar, görünür bir adımı destekler

### Her adımı akordeona dönüştürmeyin

Süreç yönergeleri, akordeon başlığının süreç adımıyla birleştirilmesini uygun bulmaz. Tüm açıklamaları gizlemek, süreci görünür kılma amacını boşa çıkarır. Bununla birlikte, bir adım içinde ek bilgiler için Details bileşeni kullanılabilir. Örnekte kayıt tanımlama açıklaması görünür tutulur; isteğe bağlı ek açıklama ise va-details bileşenine yerleştirilir.

Bileşenin label niteliği, açılır bölümün görünür sorusunu belirler. Kısa bir soru, okuyuculara gizli içeriğin kendileriyle ilgili olup olmadığını söylediğinden More information ifadesinden daha kullanışlıdır. Bu örnekte ayrıntılar, bir kaydı tanımlamaya hangi bilgilerin yardımcı olabileceğini açıklar ve bunların belirli bir VA prosedürüne yönelik talimatlar değil, örnek amaçlı içerik tercihleri olduğu açıkça belirtilir.

- Beklemede olarak işaretlenenler de dahil olmak üzere her aşamanın özetini görünür tutun.

- Bir aşama içindeki ikincil bir açıklama için yalnızca Details açılır bölümünü kullanın.

- Bir sonraki gerçek hizmet eylemini, başlığı denetime dönüştürmek yerine süreç başlığının dışında tutun.

Destekleyici belirtimi okuyun

## VA tasarım sistemi Durum gösterimi ve doğruluk

### Sahte ilerleme yerine senaryo seçici kullanın

Önizlemedeki Example stage seçicisi, bileşen örneğini hazırlık, gönderim ve yanıtı inceleme aşamaları arasında değiştirir. Gerçek bir talebi ilerletmez, resmî işlem süresi tahmininde bulunmaz veya kullanıcının bir düğmeye tıklamasından tamamlanma durumu çıkarmaz. Canlı bir hizmet, doğrulanmış arka uç durumunu bu görsel durumlarla eşleştirmeli ve gecikmelerin anlamını ayrıca açıklamalıdır.

Seçiciyi değiştirdiğinizde önceki aşamalar Complete, seçili aşama Active, sonraki aşamalar ise Pending olur. Canlı bir durum cümlesi, örnek durum değişikliğini duyurur. Üç aşamanın açıklaması da görünür kalır ve isteğe bağlı Details durumu korunur. Sıfırlama, ilk örnek aşamaya döner ve ek açıklama bölümünü kapatır.

Destekleyici belirtimi okuyun

## VA tasarım sistemi Yerel Web Components bileşenlerini yükleyin

### Bir kez kaydedin ve bağımlılıkları koruyun

Belgelenen paketleyici yolu main.css dosyasını içe aktarır ve component-library paketinden defineCustomElements işlevini çağırır. Yazı tipleri CSS-library paketinden gelir ve ayrı olarak sunulur. Simge sprite’ını kullanan bileşenler, varsayılan olarak /img/sprite.svg olan, aynı kaynaklı bir sprite yolu gerektirir. Bunlar isteğe bağlı görsel iyileştirmeler değil, dağıtımdan sonra keşfedilmemesi gereken gerçek entegrasyon gereksinimleridir.

Bağımsız örnek; web-components 24.14.0 paketinin resmî tarayıcı ESM giriş noktasını, component-library 56.14.0 paketinin bildirdiği bağımlılığı ve Process List, Process List Item ve Details bileşenleri için ilgili tembel yükleme modüllerini kullanır. Uygulama betiği yalnızca örnek durumları seçer. Details denetimi de dahil olmak üzere yerel özel öğe davranışını tarayıcı çalışma zamanı sağlar.

1. Eşleşen token CSS dosyasını ve tarayıcı bileşenlerinin giriş noktasını yükleyin; göreli modül konumlarını koruyun.

2. Örnek durum özelliklerini atamadan önce va-process-list-item bileşeninin tanımlanmasını bekleyin.

3. Tüm senaryo durumlarını, Details klavye kontrolünü ve dar ekran genişliklerini açıklayıcı içeriği gizlemeden test edin.

Destekleyici belirtimi okuyun

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

### Yerel üç aşamalı bir açıklama

Gerçek Web Component öznitelikleri ve bir adım içinde kullanılmasına izin verilen Details açılır bölümü.

```
<va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list>
```

Kod referansı

- Sayfada 3–10 adım ve bir Process List kullanın.

- Adım başlıklarını akordeon tetikleyicileriyle değiştirmeyin.

- Her öğede yalnızca tek bir durum işareti ayarlanmalıdır.

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Request journey — VA component specimen</title><link rel="stylesheet" href="vendor/va-56.14.0/variables.css"><style>*{box-sizing:border-box}:root{--font-serif:Georgia,serif;--font-sans:Arial,sans-serif;--vads-font-family-heading:Georgia,serif;--vads-font-family-serif:Georgia,serif;--vads-font-family-sans:Arial,sans-serif}body{margin:0;font:1.06rem/1.5 Arial,sans-serif;color:var(--vads-color-text);border-top:8px solid var(--vads-color-primary-darker)}main{max-width:52rem;margin:auto;padding:32px 24px}h1,h2{font-family:Georgia,serif;line-height:1.2}h1{font-size:40px;margin:16px 0 24px}h2{font-size:32px;margin:32px 0 24px}.controls{padding:24px;background:var(--vads-color-base-lightest);display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:32px 0}label{font-weight:bold}select,button{font:inherit;padding:8px 12px;max-width:100%;background:white;color:var(--vads-color-text);border:1px solid var(--vads-color-base-dark)}button{cursor:pointer;color:var(--vads-color-link)}select:focus-visible,button:focus-visible{outline:3px solid #ffbe2e;outline-offset:3px}va-process-list-item,va-process-list-item *,va-process-list-item::before{font-family:Arial,sans-serif!important}va-process-list-item .usa-process-list__heading{font-family:Georgia,serif!important}va-process-list-item p{margin:8px 0 16px}footer{border-top:1px solid #dfe1e2;padding-top:24px;margin-top:32px}.note{background:#e7f6f8;padding:16px;border-left:4px solid #005ea2}#state{font-weight:bold}@media(max-width:479px){h1{font-size:32px}.controls{padding:16px;align-items:flex-start;flex-direction:column}}</style></head><body><main><p>VA native component example</p><h1>Understand a request journey</h1><p>See how a service can explain preparation, sending a request, and reviewing its response.</p><p class="note">Fictional process for design exploration. These are not VA submission instructions or a real case status.</p><div class="controls"><label for="stage">Example stage</label><select id="stage"><option value="0">Preparing a request</option><option value="1">Sending a request</option><option value="2">Reviewing a response</option></select><button id="reset" type="button">Reset example</button></div><p id="state" role="status">Example: preparing a request.</p><h2>The three stages</h2><va-process-list>
  <va-process-list-item header="Prepare your request" level="3"
      checkmark="true" status-text="Complete">
    <p>Identify the record you need and the office that holds it.</p>
    <va-details label="What information helps identify a record?">
      <p>A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.</p>
    </va-details>
  </va-process-list-item>
  <va-process-list-item header="Send the request" level="3"
      active="true" status-text="Active">
    <p>In this example, a request is ready for the appropriate service. No request is sent from this page.</p>
  </va-process-list-item>
  <va-process-list-item header="Read the response" level="3"
      pending="true" status-text="Pending">
    <p>A real service should explain where a response appears and how to ask about missing information.</p>
  </va-process-list-item>
</va-process-list><footer>Native VA Web Components 24.14.0 · CSS tokens 0.36.1<br>Arial and Georgia fallbacks. No request is sent or stored.</footer></main><script>globalThis.getVaIconSpriteLocation=()=>new URL("vendor/va-web-24.14.0/sprite.svg",document.baseURI).pathname;</script><script type="module" src="vendor/va-web-24.14.0/component-library.esm.js"></script><script type="module">await customElements.whenDefined('va-process-list-item');const items=[...document.querySelectorAll('va-process-list-item')],select=document.querySelector('#stage');function render(){const current=Number(select.value);items.forEach((item,i)=>{for(const [key,on] of Object.entries({active:i===current,pending:i>current,checkmark:i<current})){item[key]=on;if(on)item.setAttribute(key,'true');else item.removeAttribute(key)}item.statusText=i<current?'Complete':i===current?'Active':'Pending';item.setAttribute('status-text',item.statusText)});document.querySelector('#state').textContent='Example: '+select.selectedOptions[0].textContent.toLowerCase()+'.'}select.addEventListener('change',render);document.querySelector('#reset').addEventListener('click',()=>{select.value='0';render();const detail=document.querySelector('va-details');if(detail.shadowRoot){if(detail.shadowRoot.querySelector('details').open)detail.shadowRoot.querySelector('summary').click()}select.focus()});render();</script></body></html>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## VA tasarım sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Paket sürümleri doğrulanmış, belgeye alınmış derleyici başlatma yöntemi. Bağımsız tarayıcı örneğinde, React derlemesi yerine buna karşılık gelen yerel web bileşenleri ESM dağıtımı kullanılır. Kaynaklar bölümündeki çalışır durumdaki örneğin tam ZIP paketi, önizleme için gereken tam bağımlılıkları ve belgeyi de içerir. Paketi çıkarın, bu dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/va.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
// Install in an application with a JavaScript bundler:
// npm install @department-of-veterans-affairs/component-library@56.14.0 \
//   @department-of-veterans-affairs/css-library@0.36.1
import '@department-of-veterans-affairs/component-library/dist/main.css';
import '@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css';
import { defineCustomElements } from '@department-of-veterans-affairs/component-library';
defineCustomElements();
// Render the va-process-list markup in your page after this initialization.
// Deliver the CSS-library fonts separately, or choose an explicit fallback.
// Components that use va-icon also require the same-origin /img/sprite.svg.
```

### Projeniz İçin Bir İstem

```
Üç ila on adet va-process-list-item öğesi içeren bir va-process-list ile VA hizmet sürecine dair bir açıklama oluşturun. Fiille başlayan başlıklar, bir h2 başlığının altında level=3, görünür açıklamalar ve her öğe için açık status-text ile belirtilen tek bir etkin/beklemede/onay işareti durumu kullanın. va-details öğesini yalnızca adım içindeki ek metinler için kullanın; adımın tamamını gizlemek için kullanmayın. Güncel VADS CSS belirteç dosyasını içe aktarın ve yerel bileşenleri kaydedin. 17px gövde metnini, Bitter/Source Sans yazı tipi ailesi rollerini, anlamsal aralıkları ve 320/480/640/880/1024/1201/1400px sınırlarını koruyun. Etkileşimli her örnekte aşamaların açıklama amaçlı olduğu belirtilmeli ve gönderilmiş bir VA başvurusu izlenimi verilmemelidir.
```

## VA tasarım sistemi Kaynaklar ve Kapsam

Kurgusal kayıt talebi aşamalarını gösteren teknik bileşen tanıtımı. Gerçek bir VA talebi, vaka durumu, sosyal yardım kararı veya kurumsal onay söz konusu değildir.

- VA Design System Resmî temeller, içerik, bileşenler ve yönetişim.

- VA tasarım örüntüleri Başvuru görevleri, ön doldurma, imzalar ve kurtarma işlemleri için tasarım örüntüleri.

- VA bileşenleri Bileşen özellikleri, kararlar ve erişilebilirlik materyalleri.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## VA tasarım sistemi İlgili Kaynaklar

### W3C tasarım sistemi

Akışkan tipografi, anlamsal renk rolleri ve JavaScript olmasa da okunaklı kalan yerel, daraltılabilir içerikle dayanıklı okuma arayüzleri oluşturun.

### Codex

Codex’ın gerçek SearchInput anatomisini, eylem hiyerarşisini ve okumaya yönelik belirteçlerini kullanın. Yerel makale dizininde arama yapın, bir sonucu inceleyin ve aynı okuma konumuna geri dönün.

### Agriculture tasarım sistemi

AgDS’nin somut boşluk değerleri, duyarlı özellikleri ve TaskList durum modeliyle daha uzun hizmet işlemleri oluşturun. İnceleme adımının yalnızca ön koşullar tamamlandığında açıldığı bir hazırlık iş akışını deneyin.


- [Uygulama başvurusu](https://design.va.gov/components/process-list)
- [Kaynak](https://design.va.gov/foundation/design-tokens/typography)
- [Kaynak](https://design.va.gov/foundation/design-tokens/spacing)
- [Kaynak](https://design.va.gov/foundation/design-tokens/color)
- [Kaynak](https://design.va.gov/foundation/design-tokens/breakpoints)
- [Destekleyici belirtimi okuyun](https://design.va.gov/about/developers/install)
- [Destekleyici belirtimi okuyun](https://design.va.gov/foundation/design-tokens/typography)
- [Destekleyici belirtimi okuyun](https://design.va.gov/foundation/design-tokens/spacing)
- [Destekleyici belirtimi okuyun](https://design.va.gov/foundation/design-tokens/color)
- [Destekleyici belirtimi okuyun](https://design.va.gov/foundation/design-tokens/breakpoints)
- [Kod referansı](https://design.va.gov/components/process-list)
- [Destekleyici belirtimi okuyun](https://design.va.gov/components/process-list)
- [VA Design System Resmî temeller, içerik, bileşenler ve yönetişim.](https://design.va.gov/)
- [VA tasarım örüntüleri Başvuru görevleri, ön doldurma, imzalar ve kurtarma işlemleri için tasarım örüntüleri.](https://design.va.gov/patterns/)
- [VA bileşenleri Bileşen özellikleri, kararlar ve erişilebilirlik materyalleri.](https://design.va.gov/components/)