Küresel Kalkınma ve Editoryal Çalışmalar · Yeni Kaynak
UNDP tasarım sistemi.
UNDP’nin yayımladığı renk ve boşluk belirteçlerini, klavyeyle kullanılabilen yerel sekmeleri ve yerel inceleme ilerlemesini içeren eksiksiz bir atölye okuma örneğini keşfedin.
UNDP 2.0.2 yerel sekme CSS ve betik; özgün OpenDesign içeriği ve ilerleme mantığı; Arial yedek yazı tipi. · Uygulama başvurusu
02
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.
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.
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.
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
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.
Klasörü sunun; sekme seçimini fareyle ve klavyeyle test edin.
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
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.
html
<!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>
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ışı.
JavaScript
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();});
Dosya adlarını ve göreli paket yollarını bir arada tutun.
04
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.
sh
npm init -y
npm install @undp/[email protected]
# Save the supplied HTML as index.html alongside undp.css and undp-app.js.
python3 -m http.server 8000
Projeniz İçin Bir İstem
Ajan İstemi
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.
05
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.
