# USWDS Tasarım Sistemi

## USWDS Tasarım Sistemi Arayüz Önizlemesi

Kurgusal kayıtları arayın ve filtreleyin, sonuç bulunamadığında toparlayın ve yerel gereksinim panellerini genişletin.

## USWDS Tasarım Sistemi Tasarım Referansı

USWDS 3.14.0 yerel bileşen dağıtımı. Resmî belgelerdeki varsayılan tasarım tokenları; önizlemede kullanılan yazı tipi değişiklikleri açıkça belirtilmiş yerel tercihlerdir.

### Aralık birimleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| 0.5 / 05 | 4px | Yarım birimlik boşluk ölçeği ve yardımcı sınıf formları |
| 1 | 8px | Temel aralık birimi |
| 1.5 / 105 | 12px | Ara aralık |
| 2 | 16px | Kompakt iç dolgu |
| 3 | 24px | İlgili içerik aralığı |
| 4 | 32px | Bölüm aralığı |
| 5 | 40px | Daha geniş boşluk |
| 6 | 48px | Geniş aralık |
| tablet | 640px | Adlandırılmış genişlik belirteci |
| desktop | 1024px | Adlandırılmış genişlik belirteci |
### Varsayılan yazı tipi eşlemesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| sans | source-sans-pro | Yazı tipi ailesi tabanlı belirteç |
| serif | merriweather | Yazı tipi ailesi tabanlı belirteç |
| body / ui | sans | Role dayalı eşleme |
| heading | serif | Role dayalı eşleme |
| code | mono → roboto-mono | Kod rolü eşlemesi |
### Varsayılan tema renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| primary | blue-60v / #005ea2 | Birincil takma ad |
| primary-lighter | blue-10 / #d9e8f6 | Destekleyici birincil ton |
| primary-dark | blue-warm-70v / #1a4480 | Daha koyu birincil takma ad |
| ink | gray-90 / #1b1b1b | Ana metin takma adı |
### Bileşen sözleşmeleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| aria-controls | Panel ID | Her akordeon düğmesini içeriğe bağlar. |
| aria-expanded | true / false | Yerleşik JS, açık durumunu korur. |
| data-allow-multiple | Accordion root attribute | Panellerin bağımsız olarak açılmasına olanak tanır. |
| usa-accordion--bordered | Root modifier | Kenarlıklı varyantı sağlar. |
## USWDS 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ı.

## USWDS Tasarım Sistemi: Yapılandırılabilir Bir Foundation

### Varsayılan belirteçler başlangıç yapılandırmasıdır

> USWDS; sistem belirteçlerini, proje tema ayarlarını, yardımcı sınıfları ve bileşenleri birbirinden ayırır. Aşağıdaki referans, mevcut belgelerdeki varsayılan tema tercihlerini kaydeder. Bir federal program, her bileşeni değiştirmek zorunda kalmadan farklı yazı tipi rollerini veya renk takma adlarını yapılandırabilir.

Önizleme, 3.14.0 CSS ve accordion JavaScript kullanan bağımsız bir araştırma fırsatları karşılaştırmasıdır. Devlet başlığını ve kurum kimliği işaretlerini içermez. Program adları ve aşamalar kurgusaldır; filtreleme tamamen tarayıcıda gerçekleşir.

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Aralık ve Tema Belirteçleri

### Rakam yerine birimi okuyun

Bir USWDS aralık birimi 8px'tir: units(2), 16px; units(3) ise 24px anlamına gelir. Yarım birim belirteçleri daha küçük boşluklar sağlar; yardımcı sınıf yazımında yarım birim için 05 kullanılır. margin-2 yardımcı sınıfı, iki piksellik kenar boşluğu anlamına gelmez.

Ölçek, tablet ve desktop gibi adlandırılmış genişlikleri de içerir. Bu adlar yeniden kullanılabilir belirteçlerdir; her genişlikte her sayfanın yeniden tasarlanması gerektiği anlamına gelmez. Karşılaştırmada içeriğin çevresinde grid-container, tablo içinse odaklanılabilir ve kaydırılabilir bir alan kullanılır.

```
@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}
```

Kod referansı

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Yazı Tipleri ve Roller

### Bileşenleri yeniden adlandırmadan rol değiştirilebilir

Varsayılan sans belirteci Source Sans Pro'ya, serif belirteci ise Merriweather'a eşlenir. Body ve UI rolleri sans'a, heading rolü serif'e eşlenir. family("body") işlevi bu eşleme zincirini çözümler. Bir projeyi belgelerken anlamsal rolü son yazı tipi ailesinden ayrı ele alın.

Yerel önizlemede yazı tipi indirme gerekmemesi için gövde metninde açıkça Helvetica/Arial, başlıklarda ise Georgia kullanılır. Bu, standart USWDS yazı tipi kimliği değil, bir çalışma amaçlı geçersiz kılmadır. Üretim derlemesinde bu roller uswds-core ayarlarıyla yapılandırılmalı veya dağıtılan yazı tipi dosyaları kopyalanmalıdır.

```
@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);
```

Kod referansı

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Tema Rengi Takma Adları

### Takma adları rollerine bağlı tutun

Varsayılan primary takma adı blue-60v, #005ea2 değerine çözümlenir. Primary-dark, blue-warm-70v ve #1a4480 değerlerine; ink ise gray-90 ve #1b1b1b değerlerine çözümlenir. Bunlar tema değerleridir; her USWDS sitesinin aynı marka rengini kullanması gerektiği anlamına gelmez.

Bir eylem veya başlık görünümü için anlamsal takma adı, yalnızca tasarım kararınız gerçekten buysa sistem renk belirtecini kullanın. Ayarlarda birincil takma adı değiştirmek, derlenmiş CSS içindeki aynı hex değerine sahip tüm dizeleri değiştirmekten daha kontrollü bir yaklaşımdır.

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Karşılaştırılabilir Fırsat Satırları

### Tablonun anlamsal yapısını koruyun

Örnekte bir caption, scope="col" değerine sahip sütun başlıkları ve scope="row" değerine sahip bir fırsat adı bulunur. Okuyucular aynı konu ve aşama alanlarını kayıtlar arasında karşılaştırdığı için bu yapı bir tablodur. Bölge kaydırıldığında da bu ilişkiler korunur.

Kaydırılabilir sarmalayıcıda tabindex="0" bulunur; böylece klavye kullananlar bu bölgeye odaklanabilir. Geniş veriyi tüm belgeyi genişletmek yerine bu bölgede tutar. Önizlemede sıradan metin hücreleri kullanılır; eksik program verisi için sayı uydurmak yerine açık bir içerik durumu gerekir.

Destekleyici belirtimi okuyun

### Sıralama ayrı bir geliştirmedir

USWDS, data-sortable aracılığıyla sıralanabilir başlıkları destekler. Sıralanabilir bir tabloda ayrıca aria-live="polite" değerine sahip usa-table__announcement-region gerekir. Biçimlendirilmiş bir tutarın alfabetik sırayla değil, değer olarak sıralanması için sayısal gösterimlerde data-sort-value gerekebilir. Üç satırlı konu filtresi amaçlanan gösterim olduğundan, mevcut karşılaştırmada sıralama etkinleştirilmemiştir.

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Açılır Bölümler Olarak Gereksinimler

### Düğme ve panel kimliklerini ilişkilendirin

Her usa-accordion__button, ilişkili usa-accordion__content öğesine işaret eden aria-controls değerine sahiptir. Yerleşik JavaScript, aria-expanded değerini ve görünürlüğü günceller. Kenarlıklı değiştirici kapsayıcı görünümünü değiştirir; data-allow-multiple ise birden fazla bölümün açık kalmasına olanak tanır.

İçerik anahattının anlaşılır kalması için düğme bir başlığın içinde yer alır. Bir programın uygun olup olmadığına karar vermek için gereken şartlar, açılır bölümün dışında ve görünür kalmalıdır. Buradaki panellerde tamamlayıcı hazırlık notları ve kurgusal veri kümesine ilişkin açıklamalar bulunur.

- Başlık, panelin konusunu açıklar.

- Düğme, genişletilmiş durumunu ve hedef kimliğini taşır.

- Panelin görünürlüğü değişse de kimliği aynı kalır.

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Tüm Varlık Ağacını Yükleyin

### Derlenmiş CSS tarafından kullanılan dosya yollarını koruyun

@uswds/uswds@3.14.0 paketini yükleyin ve dist dizinini; css, js, img ve fonts klasörlerini tek bir klasörde birleştirmeden kopyalayın. Stil sayfası, simgeler ve yazı tipleri için göreli yollar kullanır. Aksi durumda sayfa kısmen doğru görünürken açılır bölüm simgeleri veya yazı tipleri eksik kalabilir.

Önce head içinde uswds-init.min.js dosyasını, ardından stil sayfasını yükleyin; uswds.min.js dosyasını ise gövde işaretlemesinden sonra yükleyin. Paketlenmiş kütüphane akordeonu geliştirir. Aşağıdaki arama alanı ve konu filtresi özel uygulama mantığı kullanır; uzak bir arama hizmetini çağırmaz.

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Filtreleme ve Kurtarma

### Sorgunun sonucu gösterilmelidir

Yerel label, input, select ve button stilleri denetimleri sağlar; uygulama, sorguyu ve seçilen konuyu üç kurgusal kayıtla karşılaştırır. Sonuç sayısı nazikçe duyurulan bir canlı bölgedir. Eşleşme bulunmadığında, girilen sorgu korunarak açıklama ve filtreleri sıfırlama eylemi gösterilir.

Bu gösterim, bir fırsatı keşfetmekle başvuruda bulunmak arasındaki farkı özellikle vurgular. Hazırlık içeriğini açmak taslak oluşturmaz veya bir gereksinimi tamamlandı olarak işaretlemez. Gerçek bir fon başvurusu için ilgili programın politikası, kimlik doğrulaması ve kalıcı işlem durumu gerekir.

1. Ortam konusuna göre filtreleyin ve kalan fırsatı inceleyin.

2. Eşleşmeyen bir ifade arayın ve Filtreleri temizle seçeneğini kullanın.

3. Her iki hazırlık panelini de açın ve genişletilmiş durumlarının birbirinden bağımsız olduğunu doğrulayın.

Destekleyici belirtimi okuyun

## USWDS Tasarım Sistemi: Bileşen Örnekleri

### Tamamlayıcı hazırlık akordeonu

Düğme ile panel arasında açık bir ilişki kuran yerleşik bir USWDS açılır bölümü.

```
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>
```

Kod referansı

### Fırsat karşılaştırma tablosu

Caption ile satır ve sütun başlıkları karşılaştırma ilişkilerini korur.

```
<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>
```

Kod referansı

### 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>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</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.

## USWDS Tasarım Sistemi: AI Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

CSS yazı tiplerini ve simgeleri doğru çözümleyebilsin diye dist dizin yapısını koruyun. Bu, önceden derlenmiş dağıtım yöntemidir; tema özelleştirmesi için Sass derlemesi gerekir. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizlemenin tam bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/uswds.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install @uswds/uswds@3.14.0
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/

<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
```

### Projeniz İçin Bir İstem

```
USWDS 3.14.0 kullanarak kurgusal bir araştırma fırsatları karşılaştırması oluşturun. Eksiksiz dist varlık ağacını, başlatma betiğini, bileşen stil sayfasını ve JavaScript dosyasını yükleyin. Karşılaştırılabilir kayıtları caption ve sütun başlıkları bulunan anlamsal bir tabloda sunun; etiketli arama ve kategori filtreleme, sonuç sayısı, işe yarar bir eşleşme yok durumu ve sıfırlama olanağı sağlayın. Destekleyici gereksinimler için yerel akordeonları kullanırken temel karşılaştırma bilgilerini görünür tutun. Belgelenmiş aralık birimlerini ve tema rolü eşlemelerini koruyun; sistem yazı tipi geçersiz kılmasını belirtin. Bu dizini bir başvuru iş akışına dönüştürmeyin ve gerçek uygunluk ya da ödül taahhütleri ima etmeyin.
```

## USWDS Tasarım Sistemi: Kaynaklar ve Kapsam

Bağımsız USWDS 3.14.0 bileşen incelemesi. Fırsat kayıtları kurgusaldır; federal kurum kimliği iddiası veya başvuru uç noktası yoktur. Helvetica/Arial ve Georgia, varsayılan USWDS yazı tipi dosyaları değil, yerel yazı tipi ikameleridir.

- Aralık birimleri Sayısal birimler ve adlandırılmış genişlikler.

- Yazı tipi ailesi rolleri Yazı tipi ve rol belirteçlerinin çözümlenmesi.

- Tema renkleri Varsayılan takma adlar ve ayarlar.

- Tablo Anlamsal karşılaştırma ve kaydırma.

- Açılır bölüm Panel durumları ve işaretleme.

- Geliştirici kurulumu Dağıtım ve varlık yolları.

- Ç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.

## USWDS Tasarım Sistemi: İlgili Kaynaklar

### VA tasarım sistemi

VA’nın anlamsal belirteçleri ve yerel Process List bileşeniyle anlaşılır hizmet akışları oluşturun: görünür adım açıklamaları, anlamlı durum etiketleri ve ana akışı okunaklı tutan ek ayrıntılar.

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


- [Uygulama başvurusu](https://designsystem.digital.gov/components/accordion/)
- [Kaynak](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Kaynak](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Kaynak](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Kaynak](https://designsystem.digital.gov/components/accordion/)
- [Destekleyici belirtimi okuyun](https://designsystem.digital.gov/documentation/developers/)
- [Kod referansı](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Destekleyici belirtimi okuyun](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Kod referansı](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Destekleyici belirtimi okuyun](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Destekleyici belirtimi okuyun](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Destekleyici belirtimi okuyun](https://designsystem.digital.gov/components/table/)
- [Destekleyici belirtimi okuyun](https://designsystem.digital.gov/components/accordion/)
- [Kod referansı](https://designsystem.digital.gov/components/accordion/)
- [Kod referansı](https://designsystem.digital.gov/components/table/)
- [Aralık birimleri Sayısal birimler ve adlandırılmış genişlikler.](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Yazı tipi ailesi rolleri Yazı tipi ve rol belirteçlerinin çözümlenmesi.](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Tema renkleri Varsayılan takma adlar ve ayarlar.](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Tablo Anlamsal karşılaştırma ve kaydırma.](https://designsystem.digital.gov/components/table/)
- [Açılır bölüm Panel durumları ve işaretleme.](https://designsystem.digital.gov/components/accordion/)
- [Geliştirici kurulumu Dağıtım ve varlık yolları.](https://designsystem.digital.gov/documentation/developers/)