# UNDP tasarım sistemi

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

Ok tuşlarıyla gezinin, bölümleri gözden geçirin ve yerel okuma sayacını sıfırlayın.

## UNDP tasarım sistemi Tasarım Referansı

Herkese açık @undp/design-system-assets 2.0.2 dağıtımındaki somut değerler ve davranışlar. Özgün sayfa düzeni ve ilerleme davranışı ayrıca belirtilmiştir.

### Renk paleti ve anlamsal yüzeyler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --undpds-color-blue-600 | #006eb5 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-blue-700 | #1f5a95 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-gray-200 | #f7f7f7 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-gray-300 | #edeff0 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-gray-700 | #232e3d | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-yellow-600 | #fbc412 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-dark-red | #d12800 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-background-default | #fff | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
| --undpds-color-border-default | #000 | Herkese açık paketteki gerçek değerler. Örnekte editoryal giriş için mavi, destekleyici okuma kartı için sarı kullanılmıştır; bu içerik eşleştirmeleri özgündür. |
### Güncel aralık ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --undpds-spacing-002 | 2px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-004 | 4px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-008 | 8px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-012 | 12px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-016 | 16px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-024 | 24px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-032 | 32px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-040 | 40px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-048 | 48px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-064 | 64px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-080 | 80px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-096 | 96px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
| --undpds-spacing-160 | 160px | Dışa aktarılan adları yazıldığı gibi kullanın. Bileşen CSS, eski sayısal takma adları da içerir; son ekten hareketle değer çıkarsamayın. |
### Tipografi ve kenarlık referansları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --undpds-font-family-proximanova | ProximaNova,sans-serif | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-family-sohnebreit | SohneBreit,ProximaNova,sans-serif | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-size-14 | 0.875rem | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-size-16 | 1rem | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-size-20 | 1.25rem | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-size-24 | 1.5rem | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-size-32 | 2rem | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-size-40 | 2.5rem | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-weight-regular | 400 | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-font-weight-bold | 700 | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
| --undpds-border-default | 2px | Yayımlanmış tanımlar; bu önizlemenin markalı yazı tiplerini yüklediği iddia edilmiyor. Önizlemede bilerek Arial yedek yazı tipi kullanılıyor. |
### Yerel sekme yapısı ve davranışı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| data-undpds-component | tabs | tabs() tarafından taranan kök öğeyi belirtir. |
| Tab collection | .tabs-title[role="tab"] | Örnek, eşleşen panelleri bulunan odaklanılabilir liste öğeleri kullanır; yerel başlatma sırasında kimlikler ve aria-controls değerleri ayarlanır. |
| Panels | .tabs-content > .tabs-panel | Her sekme için, eşleşen sırada bir panel; her panelin sabit ve benzersiz bir kimliği vardır. |
| Deep links | data-deep-link="false" | Bölümler arasında geçiş yaparken gömülü incelemenin URL karmasını değiştirmesini önleyin. |
| Keyboard | Arrow keys, Home, End, Enter, Space | Yerel betik odağı taşır ve eşleşen paneli etkinleştirir. |
| State | aria-selected, tabindex, hidden, aria-hidden | Başlatma ve seçim, anlamsal bilgileri ve panellerin gerçek görünürlüğünü günceller. |
## UNDP tasarım sistemi Tam 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ı.

## UNDP tasarım sistemi UNDP Çalışma Zamanı ve Varlık Sınırları

### Statik bir sayfa için varlıklar paketini seçin

> Sağlanan örnek, @undp/design-system-assets 2.0.2 paketini yükler. Bu dağıtım; temel CSS, bileşen CSS ve tarayıcı betiklerini içerir; Storybook geliştirme havuzunun tamamını başlatmaktan farklıdır. Bu düzen için yalnızca temel stil sayfası, sekme stil sayfası ve sekme betiği gerekir. all.min.js dosyasını veya tüm bileşen stil sayfalarını yüklemek, okuma alanını iyileştirmeden ilgisiz davranışlar ekler.

- base-minimal.min.css, temel stilleri ve tipografi tanımlarını sağlar.

- components/tab.min.css, yerel sekme görünümünü sağlar.

- js/tabs.min.js, tabs() başlatıcısını dışa aktarır.

### Kurumsal kimliği ve örnek içeriği birbirinden ayrı tutun

Brifing, yerel bir atölye planlama üzerine hazırlanmış özgün OpenDesign uygulama içeriğidir. UNDP programı, politika açıklaması veya raporlama portalı değildir. Önizlemede amblem ya da kurumsal gezinme bulunmaz. Yerel stil ve davranışlar açıkça belirtilmiştir; brifing, onay kutusuyla izlenen ilerleme ve sıfırlama işlemi ise özgün uygulama kodu olarak tanımlanır.

## UNDP tasarım sistemi UNDP Renk Rolleri ve Editoryal Hiyerarşi

### Gerçek mavi skalasını temel alın

Dağıtımda yer alan --undpds-color-blue-600 değeri #006eb5, blue-700 değeri ise #1f5a95'tir. Örnekte ilk değer giriş bloğunun arka planı, ikincisi sıfırlama işlemi için kullanılır. Gri-200, destekleyici ve daha geri planda kalan kartı sağlar; gri-300 sekmeleri ayırır, sarı-600 ise kenarlık vurgusu ekler. Geçerli sekmenin alt çizgisi, kitaplıktaki koyu kırmızıyı kullanır. Bu roller, ekran görüntüsünden çıkarılmak yerine sağlanan CSS içinde incelenebilir.

### SDG renklerine uydurma durum anlamları yüklemeyin

Temel paket, genel renk belirteçlerine ek olarak ayrı bir SDG paleti içerir. Kalkınma temalı bir sayfa, yalnızca bu değerler mevcut diye onları gelişigüzel başarı veya hata durumlarına atamamalıdır. Bu düzenlemede tamamlanma, işaretlenmiş bir kontrol ve okunabilir bir sayaçla ifade edilir; inceleme durumu yalnızca renkle belirtilmez.

## UNDP tasarım sistemi UNDP Tipografi, Boşluklar ve Yazı Tipi Kapsamı

### Tanımları yüklenmiş yazı tiplerinden ayırın

Paket, ProximaNova ve SohneBreit ailelerini tanımlar ve yazı tipi dosyaları içerir; ancak bu önizlemede bilerek Arial yedek yazı tipi kullanılır. Bu değişiklik, örnek notunda ve CSS içinde görünür biçimde belirtilmiştir. Okuyucunun özgün sistemi anlayabilmesi için referans tablosunda gerçek aile tanımları yine de kaydedilmiştir. Markalı yazı tiplerini kullanacak bir proje, yalnızca yazı tipi ailesi adını belirterek yazı tiplerinin kullanılabilir olduğunu varsaymak yerine uygun varlıkları ve kullanım haklarını ele almalıdır.

### Gerçek boşluk adlarını kullanın

Geçerli piksel skalası spacing-002 ile spacing-160 arasında uzanır; 12, 24 ve 48 piksel değerlerini de içerir. Sekme stil sayfası ayrıca spacing-03 (8px) ve spacing-09 (48px) gibi eski takma adları da kullanır; bu sürümde her iki ad da bulunur. Demoda bu kitaplık kuralları korunur ve 720px altında tek sütuna dönüşen iki sütunlu bir editoryal düzen eklenir. Bu düzen kesme noktası, bileşen stil sayfasındaki 48em kesme noktasından farklı, özgün bir kompozisyon tercihidir.

## UNDP tasarım sistemi UNDP Yerel Sekme Yapısı ve Başlatma

### Sekme ve panel koleksiyonlarının hizasını koruyun

Kök öğede data-undpds-component="tabs", role="tablist" olan bir liste, role="tab" içeren üç .tabs-title öğesi ve .tabs-content içinde üç .tabs-panel bölümü bulunur. Betik bu koleksiyonları sıralarına göre eşleştirir. Bir panelin eksik olması veya öğe sayılarının farklı olması, düzgün başlatmayı engeller. Bu nedenle tabs() çalışmadan önce her panelin sabit bir kimliği ve eksiksiz içeriği vardır. Yerel başlatma, aria-controls ve aria-labelledby ilişkilerini oluşturur ve seçili öğeye is-active sınıfını ekler.

### Bağlantı özeti davranışını bilinçli seçin

Paket, derin bağlantıyı varsayılan olarak etkinleştirir. Bu gömülü çalışma alanında, sekme listesine eklenen data-deep-link="false" bölümler arasında geçiş yaparken URL özetinin yazılmasını önler. Bölüm paylaşımı yararlı olacaksa bağımsız bir yayında derin bağlantılar etkinleştirilebilir; ancak başlangıçta özet seçimini ve geçmiş değişikliklerini test etmek gerekir. Hangi sayfanın bu gezinmeyi yönettiğine karar vermeden, gömülü önizlemeye bir özet kuralını olduğu gibi taşımayın.

## UNDP tasarım sistemi UNDP Klavye Gezintisi ve Görünür Durum

### Panellerin gerçekten görünür olduğunu doğrulayın

Ok tuşları ve Home veya End tuşları yerel uygulama aracılığıyla etkin sekmeyi ve odağı değiştirir. Enter ve Space tuşları da sekmeyi etkinleştirir. Betik tabindex, aria-selected, hidden ve aria-hidden değerlerini birlikte günceller. Yalnızca etkin öğedeki CSS sınıfını test etmek, birkaç panelin birden görünür kalması veya gizli bir panelin hâlâ odak alması gibi hataları gözden kaçırır. Tarayıcı kontrolleri hem seçili öğeyi hem de gerçekten gösterilen içeriği sınar.

### İnceleme kontrollerini ilgili bölümlerine bağlı tutun

Her panelde, “Bu bölümü incelendi olarak işaretle” etiketli yerel bir onay kutusu bulunur. Öğe yeniden oluşturulmadığı için panel gizlendiğinde durum korunur. İlerleme sayacı, kibar bir durum mesajıdır ve yalnızca bu yerel önizlemeyi tanımlar. Bu bir öğrenme belgesi veya sunucu tarafında tutulan bir tamamlama kaydı değildir. Kullanıcı bölüme dönüp seçimi doğrudan geri alabilir.

## UNDP tasarım sistemi UNDP Yerel İlerleme ve Sıfırlama

### Sıfırlamanın kapsamını açıkça belirtin

Okuma ilerlemesini sıfırla düğmesi üç onay kutusunun seçimini kaldırır ve sayacı yeniden hesaplar. Etkin sekmeyi değiştirmez veya içeriği silmez. İşleyici, tamamlanma durumunun iki ayrı açıklamasını önlemek için onay kutusu değişikliğinde kullanılan ilerleme işlevini kullanır. Örnek, geçerli belgenin dışında hiçbir şey saklamaz; bu nedenle sayfa tamamen yeniden yüklendiğinde yeni bir okuma oturumu başlar.

### İsteğe bağlı okumayı zorunluymuş gibi göstermeyin

Sayaç, yön bulmaya yardımcı olur; sonraki bölümlere erişimi engelleyen bir eşik değildir. İncelenen bölüm sayısı sıfırken de üç sekmenin tümü kullanılabilir ve okuyucular bölümleri istedikleri sırayla ziyaret edebilir. Onay gerektiren bir üretim iş akışı, bu yerel ilerleme modelini ödünç almak yerine kendi gereksinimini, hata işleme yöntemini ve kalıcı kayıt mekanizmasını tanımlamalıdır.

## UNDP tasarım sistemi UNDP Duyarlı Okuma Düzeni

### İçeriği küçültmek yerine yeniden akıtın

Mavi giriş alanı ve her panel, geniş ekranlarda iki sütun kullanır. 720px genişlikte sütunlar alt alta gelir, dış kenar boşluğu 16px'e iner ve büyük başlığın boyutu küçülür. Gerektiğinde sekme listesi satırlara bölünür ve tüm etiketler korunur. Sabit yüksekliğe sahip hiçbir panel uzun çevirileri veya paragrafları kesmez; destekleyici not da dekoratif bir görsel yerine gerçek metin olarak kalır.

### Gömülü genişliği test edin

Ayrıntı sayfasının içerik sütunu, tarayıcı görünüm alanından daha dardır. Bu örnek, bağımsız bir belge olarak 280px genişliğe kadar; ayrıca masaüstü, tablet ve telefon genişliklerinde test edilmiştir. Telefon ekranının tamamına sığan bir bileşen, ayrıntı sayfasının içe çekilmiş çerçevesinde yine de taşabilir. Ortak sayfa kontrolü her iki ölçümü de yapar.

## UNDP tasarım sistemi UNDP Eksiksiz Statik Entegrasyon

### Sağlanan dosyaları bir arada tutun

Sağlanan index.html, undp.css ve undp-app.js dosyalarını aynı dizine kaydedin, sabitlenmiş varlık paketini yükleyin ve bu dizini sunun. HTML, küçük uygulama betiğinden önce paketin temel CSS dosyasını, sekme CSS dosyasını ve sekme tarayıcı betiğini yükler. Bu örnek için derleyici, jQuery veya GSAP gerekmez. Yerel olarak gömülü önizleme, kullanılmayan font-face tanımlarını çıkarırken aynı bileşen varlıklarını satır içine alır.

1. Sağlanan üç dosyanın tümünü aynı dizine kaydedin.

2. @undp/design-system-assets@2.0.2 paketini yükleyin.

3. Klasörü sunun; sekme seçimini fareyle ve klavyeyle test edin.

4. Tüm bölümleri inceleyin, önceki bölüme dönün ve ardından yerel sayacı sıfırlayın.

### Bileşen davranışını uygulama davranışından ayırın

Sekme betiği, panel seçimini ve klavye gezintisini yönetir. Küçük uygulama betiği ise yalnızca inceleme onay kutularını, sayacı ve sıfırlama işlemini yönetir. Bu sınır, yükseltmelerin gözden geçirilmesini kolaylaştırır: önce yerel sekme davranışını ve tasarım tokenlarındaki değişiklikleri karşılaştırın, sonra yerel durumun hâlâ çalıştığını doğrulayın. Tüm bir uygulama çerçevesini kopyalamak, hangi davranışın gerçekten tasarım sisteminden geldiğini belirsizleştirir.

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

### undp-index.html — eksiksiz kaynak

Bunu index.html adıyla kaydedin; üç içerik paneli ve varlık içe aktarımlarının tümü dahildir.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop reading brief</title><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/base-minimal.min.css"><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/components/tab.min.css"><link rel="stylesheet" href="./undp.css"></head><body><main><header class="intro"><div><p class="eyebrow">Learning brief / original sample</p><h1>Plan a local resilience workshop</h1></div><p>A small reading workspace for exploring how a development brief can separate context, participation and follow-through.</p></header><p class="study-note">Native UNDP 2.0.2 tab styles and keyboard behavior. Original OpenDesign sample content, not a UNDP programme or official policy. This preview uses Arial fallback rather than the distributed brand fonts.</p><div class="tabs" data-undpds-component="tabs"><ul role="tablist" aria-label="Workshop reading sections" data-deep-link="false"><li role="tab" class="tabs-title is-active" tabindex="0">Understand</li><li role="tab" class="tabs-title" tabindex="-1">Include</li><li role="tab" class="tabs-title" tabindex="-1">Follow through</li></ul><div class="tabs-content"><section id="understand" class="tabs-panel is-active"><div class="panel-grid"><div><h2>Start with the local context</h2><p>A useful workshop begins with a question people can answer from experience. Ask which everyday service is hardest to rely on during a disruption. Avoid assuming that a technical solution is already agreed.</p><h3>Prepare the conversation</h3><ol><li>Write one plain-language question.</li><li>Invite examples of what already works.</li><li>Record uncertainty separately from an agreed need.</li></ol></div><aside class="reading-card"><h3>What would change the decision?</h3><p>Collect contrasting experiences, not just the first answer. A disagreement can reveal who is missing from the conversation.</p><label><input type="checkbox" data-read="understand">Mark this section as reviewed</label></aside></div></section><section id="include" class="tabs-panel"><div class="panel-grid"><div><h2>Make participation practical</h2><p>Participation depends on when, where and how a session takes place. Offer more than one way to contribute and explain how notes will be used before the discussion begins.</p><h3>Remove avoidable barriers</h3><ol><li>Offer spoken and written contributions.</li><li>Ask participants about access needs privately.</li><li>Explain how to decline recording or attribution.</li></ol></div><aside class="reading-card"><h3>Who has not been heard?</h3><p>A count of attendees does not prove representative participation. Check whether the invitation, language or format prevented people from joining.</p><label><input type="checkbox" data-read="include">Mark this section as reviewed</label></aside></div></section><section id="follow" class="tabs-panel"><div class="panel-grid"><div><h2>Close the loop with participants</h2><p>End with a short record of decisions, open questions and named next steps. Send a readable summary back through a channel that participants can actually access.</p><h3>Turn discussion into a next step</h3><ol><li>Separate decisions from suggestions.</li><li>Attach an owner and review point to the next action.</li><li>Invite corrections before treating the notes as agreed.</li></ol></div><aside class="reading-card"><h3>What happens after the session?</h3><p>A clear follow-up commitment is more useful than a polished report with no owner. Keep unresolved issues visible in the next conversation.</p><label><input type="checkbox" data-read="follow">Mark this section as reviewed</label></aside></div></section></div></div><div class="bottom"><p id="progress" role="status">0 of 3 sections reviewed in this preview</p><button id="reset" type="button">Reset reading progress</button></div></main><script src="./node_modules/@undp/design-system-assets/js/tabs.min.js"></script><script src="./undp-app.js"></script></body></html>
```

Kod referansı

- Dosya adlarını ve göreli paket yollarını bir arada tutun.

### undp.css — eksiksiz kaynak

Özgün duyarlı düzen ve açıkça belirtilmiş Arial yedek yazı tipi.

```
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}h1,h2,h3,p,button{font-family:inherit}main{max-width:1100px;margin:auto;padding:40px}.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:32px;background:var(--undpds-color-blue-600);color:white}.intro h1{font-size:40px;line-height:1.1;margin:16px 0}.intro p{font-size:16px;line-height:1.6}.eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.study-note{font-size:13px;line-height:1.6;margin:24px 0}.tabs>ul{display:flex;flex-wrap:wrap;padding-left:0;gap:16px;margin-top:32px}.tabs>ul li{margin-right:0;padding:12px 0;font-size:16px}.tabs-title:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}.tabs-panel{padding-top:24px!important}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}h2{font-size:28px;line-height:1.2;margin:0 0 24px}h3{font-size:20px;line-height:1.3}p,li{font-size:16px;line-height:1.6}li{margin-bottom:12px}.reading-card{background:var(--undpds-color-gray-200);padding:24px;border-left:4px solid var(--undpds-color-yellow-600)}.reading-card p:last-child{margin-bottom:0}label{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:16px;line-height:1.5}input{width:20px;height:20px;accent-color:var(--undpds-color-blue-600);flex-shrink:0}#progress{border-top:2px solid var(--undpds-color-gray-300);padding-top:24px;font-size:14px}button{background:transparent;border:2px solid var(--undpds-color-blue-600);color:var(--undpds-color-blue-700);padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}.bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:32px}button:focus-visible,input:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}[hidden]{display:none!important}@media(max-width:720px){main{padding:16px}.intro,.panel-grid{grid-template-columns:1fr;gap:16px}.intro{padding:24px}.intro h1{font-size:32px}.bottom{flex-wrap:wrap}}
```

Kod referansı

- Dosya adlarını ve göreli paket yollarını bir arada tutun.

### undp-app.js — eksiksiz kaynak

Yerel sekme başlatma ve özgün yerel ilerleme/sıfırlama davranışı.

```
tabs();const boxes=[...document.querySelectorAll('[data-read]')];function progress(){document.querySelector('#progress').textContent=boxes.filter(x=>x.checked).length+' of 3 sections reviewed in this preview';}boxes.forEach(x=>x.addEventListener('change',progress));document.querySelector('#reset').addEventListener('click',()=>{boxes.forEach(x=>x.checked=false);progress();});
```

Kod referansı

- Dosya adlarını ve göreli paket yollarını bir arada tutun.

## UNDP tasarım sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

http://localhost:8000/ adresini açın. HTML, gerçek paket varlıklarını içe aktarır; tam bir Storybook projesi gerekmez.

```
npm init -y
npm install @undp/design-system-assets@2.0.2
# Save the supplied HTML as index.html alongside undp.css and undp-app.js.
python3 -m http.server 8000
```

### Projeniz İçin Bir İstem

```
Sağlanan tüm HTML, CSS ve JavaScript öğelerini kullanarak, UNDP 2.0.2 yerel sekmelerini kullanan okuma çalışma alanını uygulayın. Gerçek tasarım tokenı adlarını, eşleşen sekme/panel sayılarını, ok tuşları/Home/End davranışını, açıkça belirtilmiş Arial yedek yazı tipini, yalnızca yerel olarak tutulan inceleme ilerlemesini ve erişimi engellemeyen gezinmeyi koruyun. Özgün atölye metnini kurumsal politikadan ayrı tutun.
```

## UNDP tasarım sistemi Kaynaklar ve Kapsam

UNDP 2.0.2 yerel sekme varlıklarını kullanan bir OpenDesign uygulama kılavuzu ve özgün içerik. Arial yedek yazı tipi açıkça belirtilmiştir; burada herhangi bir UNDP programı veya resmî politikası temsil edilmez.

- Resmî tasarım sistemi Bileşen belgeleri ve güncel tasarım yönergeleri.

- Resmî depo Dağıtım yaklaşımı ve geliştirme bağlamı.

- Sabitlenmiş temel CSS Bu sürümde kullanılan gerçek tasarım tokenı ve tipografi tanımları.

- Sabitlenmiş sekme uygulaması Seçim, odak, derin bağlantılar ve panel görünürlüğü.

## UNDP tasarım sistemi İlgili Kaynaklar

### USWDS

Aranabilir bir fırsat karşılaştırma arayüzünde USWDS boşluk belirteçlerini, tema rollerini, anlamsal tabloları ve yerel akordeonları bir araya getirin.

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


- [Uygulama başvurusu](https://github.com/undp/design-system)
- [Kaynak](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css)
- [Kaynak](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)
- [Kod referansı](https://github.com/undp/design-system)
- [Resmî tasarım sistemi Bileşen belgeleri ve güncel tasarım yönergeleri.](https://design.undp.org/)
- [Resmî depo Dağıtım yaklaşımı ve geliştirme bağlamı.](https://github.com/undp/design-system)
- [Sabitlenmiş temel CSS Bu sürümde kullanılan gerçek tasarım tokenı ve tipografi tanımları.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css)
- [Sabitlenmiş sekme uygulaması Seçim, odak, derin bağlantılar ve panel görünürlüğü.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)