# NSW tasarım sistemi ## NSW tasarım sistemi Arayüz Önizlemesi Yerel okuma listenizi korurken sekmeler arasında fareyle veya klavyeyle geçiş yapın. ## NSW tasarım sistemi Tasarım Referansı Yerel Public Sans yazı tipleriyle gerçek nsw-design-system 3.27.0 CSS dışa aktarımları ve Tabs uygulaması. ### Marka ve nötr roller | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --nsw-brand-dark | #002664 | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-brand-light | #cbedfd | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-brand-supplementary | #146cfd | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-brand-accent | #d7153a | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-brand-accent-light | #ffe6ea | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-grey-01 | #22272b | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-grey-02 | #495054 | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-grey-03 | #cdd3d6 | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-grey-04 | #ebebeb | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-off-white | #f2f2f2 | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-text-dark | #22272b | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | | --nsw-text-light | #fff | Gerçek 3.27.0 varsayılan teması. text-light, açık renkli yüzeylerde düşük vurgulu metni değil, koyu yüzeylerde kullanılan açık renkli metni ifade eder. | ### Durum eşleşmeleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --nsw-status-success | #008a07 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-success-bg | #e5f6e6 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-info | #2e5299 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-info-bg | #eaedf4 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-warning | #c95000 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-warning-bg | #fbeee5 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-error | #b81237 | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | | --nsw-status-error-bg | #f7e7eb | Anlamlı durum rengini arka plan rolü ve okunaklı bir metin açıklamasıyla eşleştirin. | ### Tipografi ve köşe yarıçapı | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --nsw-font-family | "Public Sans",sans-serif | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size | 16px | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-normal | 400 | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-bold | 700 | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-md-mobile | 1.125rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-md-desktop | 1.25rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-lg-mobile | 1.375rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-lg-desktop | 1.5rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-xl-mobile | 1.75rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-xl-desktop | 2rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-xxl-mobile | 2.25rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-font-size-xxl-desktop | 3rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | | --nsw-border-radius | 0.25rem | Yayımlanmış duyarlı tipografi referansı ve ortak köşe rolü. Mobil ve masaüstü yazı tipi eşleşmesi, ayrı bir yazı tipi ailesi değildir. | ## NSW 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ı. ## NSW tasarım sistemi Sabitlenmiş Çalışma Zamanı ve Tema ### Yerel sekme uygulamasını kullanın > Örnek, nsw-design-system 3.27.0 sürümünü çalıştırır. Paket CSS ve Tabs sınıfını içe aktarır, ardından işaretlemeyi oluşturduktan sonra tek sekme grubunu başlatır. Bu odaklı başlatma, sayfada bulunmayan ilgisiz bileşenlerin kaydedilmesini önler. Güncel belgeler daha yeni bir sürümü açıklıyor olabilir; buradaki indirilebilir kod ve tasarım belirteci değerleri doğrulanmış pakete bağlı kalır. ### Bileşenleri uygulama durumundan ayırın Yerel Tabs sınıfı sekme seçimini, panel görünürlüğünü ve klavye gezinmesini yönetir. Uygulama ise kaydedilen istemlerden oluşan bir Set'e sahiptir. Bu nedenle aşamalar arasında geçiş yapmak okuma listesini değiştirmez. Kaynak kodunda bu ayrım açıkça görülür: gizli bir genel durum deposu, arka uç isteği veya taklit edilmiş bir devlet hesabı yoktur. ## NSW tasarım sistemi Marka Rolleri ve Okunaklı Yüzeyler ### Koyu ve açık rolleri birlikte kullanın Varsayılan koyu marka rengi #002664, açık yüzey rengi ise #CBEDFD'dir. İstem panelinde açık rol ve koyu renkli bir eylem kullanılır. Etkin sekmede paketin vurgu stili uygulanır. Bunlar, kamu sektörü sitesini çağrıştırması için seçilmiş gelişigüzel bir mavi palet değil, gerçek tema rolleridir. Örnekte resmî bir devlet logosu kullanılmaz. ### Belirteç adlarını dikkatle yorumlayın text-light belirteci beyazdır. Koyu arka planlarda kullanılmalıdır; genel anlamda soluk metnin eş anlamlısı olarak kullanılmamalıdır. Aşama açıklamalarında bunun yerine daha koyu nötr rol kullanılır. Referansta durum ön planı/arka planı eşleşmeleri bulunur; ancak atölye, mevcut tüm renkleri sergilemek uğruna uyarı veya başarı bildirimi uydurmaz. ## NSW tasarım sistemi Public Sans ve Duyarlı Ölçek ### Düzeni incelemeden önce yazı tipini yükleyin Örnekte Public Sans'ın 400 ve 700 ağırlıkları yerel olarak yüklenir. Paket, mobil ve masaüstü boyutlarını ayrı ayrı tanımlar: orta boy metin 1.125rem'den 1.25rem'e, en büyük başlık referansı ise 2.25rem'den 3rem'e çıkar. Bu eşleşmeler, kullanılabilir genişlik değiştikçe okuma hiyerarşisinin korunmasına yardımcı olur. ### İçerik hiyerarşisini sade tutun Kısa bir aşama etiketi; açıklayıcı bir başlık, giriş, açıklama paragrafı ve kaydedilmiş bir istemden önce gelir. Sayfadaki her cümle ayrı bir karta dönüştürülmez. Dar ekranlarda okuma listesi aşama panelinin ardından gelir; kısa, üç etiketli sekme şeridi de metni birden fazla satıra sıkıştırmadan kullanılabilir kalır. ## NSW tasarım sistemi Sekme İşaretlemesi ve Klavye Davranışı ### Bileşenin gerçek bağlantıları geliştirmesine izin verin Başlangıçtaki sekme listesi, benzersiz içerik kimliklerine giden bağlantılar içerir. Başlatma işlemi tablist/tab/tabpanel anlamlarını ekler, seçimi yönetir ve odaklanabilir sekmeyi ayarlar. Bileşenin panelleri bulabilmesi için href hedeflerinin doğru olması gerekir. Bir sayfaya birden fazla sekme grubu eklerken kimlikleri yinelemeyin. - Her sekme bağlantısını tek bir panel kimliğiyle eşleştirin. - Grubu, işaretlemesini ekledikten sonra başlatın. - Seçimi ve klavye odağını yerel bileşenin yönetmesine izin verin. ### Tıklamanın yanı sıra klavyeyle seçimi de denetleyin Yerel uygulama ok tuşlarıyla gezinmeyi destekler. Tarayıcı denetiminde Prepare sekmesine odaklanılır, ArrowRight tuşuna basılır ve Discuss sekmesinin seçildiği doğrulanır. Bu davranış, yalnızca son tıklanan etiketi biçimlendirmekten farklıdır. Okuyucular bu eş düzey aşamalar arasında geçiş yapabildiğinden sekme grubu burada uygundur; sıralı bir gönderimde zorunlu alanları gizlemek için kullanılmaz. ## NSW tasarım sistemi Kaydedilen İstemler ve Gerçekçi Geri Bildirim ### Kaydedilen durumu görünür sekmeden bağımsız tutun Her aşamanın eylemi, ilgili istemi bir Set'te açıp kapatır, aria-pressed değerini günceller ve etiketini Save ile Remove arasında değiştirir. Okuma listesinin sayısı ve öğeleri bu Set'ten türetilir. Kaydedilmiş bir aşamaya dönüldüğünde seçili durumu doğru biçimde gösterilir. Clear reading list, tüm seçimleri kaldırır ve temizlenecek bir şey kalmadığında devre dışı kalır. ### Durum kalıcılığının sınırını açıklayın Okuma listesi sayfanın yerel durumudur ve sayfa yeniden yüklendiğinde kaybolur. Arayüz bunu açıkça belirtir. Gerçekten kalıcı bir liste için açıkça tanımlanmış bir depolama modeli ve geri yükleme davranışı gerekir; burada bunların hiçbiri varsayılmaz. İçerik, özgün bir tasarım tartışması çalışmasıdır; hizmet uygunluk kılavuzu değildir ve resmî bir NSW iş akışının yeniden oluşturulduğunu iddia etmez. ## NSW tasarım sistemi Eksiksiz Uygulama ve İnceleme ### Bağımlılıklarıyla birlikte kaynak kodunu yeniden oluşturun Bir Vite vanilla projesi oluşturun, nsw-design-system 3.27.0 ve Public Sans'ı yükleyin, ardından sağlanan giriş dosyasını ve nsw.css dosyasını kaydedin. Kök bağlama öğesini koruyun. Üç aşamanın tüm içeriği, özgün istemler, yerel Tabs başlatması ve okuma listesi işleyicileri dahildir. Kaydetme/sıfırlama davranışının yerine sözde kod kullanılmamıştır. 1. Sabitlenmiş NSW paketini ve Public Sans yazı tipi dosyalarını yükleyin. 2. Eksiksiz giriş dosyasını ve nsw.css dosyasını kök bağlama öğesiyle birlikte kaydedin. 3. İstemleri iki farklı sekmede kaydedin ve durumun korunduğunu denetleyin. 4. ArrowRight tuşunu kullanın, listeyi temizleyin ve boş durumu inceleyin. ### Sekme gezinmesini kaydedilen içerikten ayrı tutun Yerel Tabs sınıfını, bağlantı hedefleri ve paneller oluşturulduktan sonra başlatın. Eşleşen parça kimlikleri, geliştirme sözleşmesini oluşturur: sekme etiketleri hâlâ doğru görünse bile bir panelin kimliğini href değerini değiştirmeden değiştirmek ilişkiyi bozar. Sayfada birden fazla grup varsa her gruba farklı kimlikler verin. Okuma listesini sekme örneğinin dışındaki uygulama durumu olarak ele alın. Bir istemin kaydedilmiş durumu, panel değişikliklerinde korunmalı ve panel yeniden görüntülendiğinde aria-pressed bu durumu yansıtmalıdır. Okuyucuların yeniden ziyaret edebileceği eş düzey içeriklerde sekmeleri kullanın; tamamlanmış adımlar gerektiren sıralı bir form için farklı bir gezinme modeli gerekir. Kalıcılık için de bu sayfaya özgü örneği sessizce değiştirmek yerine açık bir depolama ve geri yükleme politikası gerekir. ## NSW tasarım sistemi Bileşen Örnekleri ### main.js — eksiksiz yerel sekme ve okuma listesi örneği Özgün aşama içeriklerinin tamamını, sekme başlatmasını ve eksiksiz kaydetme/kaldırma/sıfırlama mantığını içerir. ``` import Tabs from 'nsw-design-system/src/components/tabs/tabs.js'; import 'nsw-design-system/css'; import '@fontsource/public-sans/latin-400.css'; import '@fontsource/public-sans/latin-700.css'; import './nsw.css'; const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']]; document.getElementById('root').innerHTML=`

NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY

Plan a focused discussion

Move between three stages and save useful prompts to a local reading list.

    ${sessions.map(([name],i)=>`
  • ${name}
    • `).join('')}
${sessions.map(([name,title,lead,body],i)=>`

STAGE ${i+1} / 3

${title}

${lead}

${body}

Prompt to keep

${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}
`).join('')}
`; new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()}); ``` Kod referansı - Sekmeleri NSW sınıfı, özgün okuma listesini ise Set yönetir. ### nsw.css — özgün duyarlı düzen Yayımlanmış anlamsal tema rollerini kullanan düzen ve istem yüzeyleri. ``` body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}} ``` Kod referansı - Açıklayıcı aşama etiketinde koyu nötr kullanılır; --nsw-text-light beyazdır. ## NSW tasarım sistemi Ajan Kurulumu ### Uygulamaya Başlangıç Noktası Yerel sekme tıklamaları ve ok tuşları, kaydedilmiş durumun korunması, listeyi temizleme ve duyarlı düzen yerel ortamda test edildi. ``` npm create vite@latest nsw-workshop -- --template vanilla cd nsw-workshop npm install npm install nsw-design-system@3.27.0 @fontsource/public-sans # Replace src/main.js and add src/nsw.css. Keep
. npm run dev ``` ### Projeniz İçin Bir İstem ``` 3.27.0 sürümündeki yerel Tabs, Public Sans ve gerçek anlamsal rollerle NSW atölye kılavuzunu oluşturun. Benzersiz panel kimliklerini, klavye ile seçimi, bağımsız kaydedilmiş istem durumunu ve kullanışlı bir boş okuma listesini koruyun. Kalıcılığın yalnızca yerel olduğunu açıkça belirtin ve resmî hizmet iddialarından kaçının. ``` ## NSW tasarım sistemi Kaynaklar ve Kapsam NSW Design System 3.27.0 kullanan, OpenDesign tarafından hazırlanmış bir atölye çalışması. Yerel sekme davranışı gerçektir; içerik ve kaydedilen istem iş akışı ise özgün yerel uygulama mantığıdır. - Sekmeler Eş düzey içeriklerde gezinme ve yerel davranış. - Geliştirici entegrasyonu Paket, stil sayfası ve JavaScript kurulumu. - Tipografi Public Sans ve tipografi hiyerarşisi. - Sürümlenmiş uygulama Tema dışa aktarımları ve Tabs kaynak kodu. ## NSW tasarım sistemi İlgili Kaynaklar ### ONS tasarım sistemi Birbiriyle çelişemeyen bir anket yanıtı oluşturun: yerel ONS onay kutuları, birbirini dışlayan yanıtlar, kesin tür ve renk referansları ve eksiksiz bir yerel inceleme akışı. ### Ontario tasarım sistemi Gerçek tipografi, yayımlanmış aralık ve renk değerleri, yerel akordeon davranışı ve sürümüyle eşleşen eksiksiz kaynak koduyla Ontario tarzı uzun biçimli bir kılavuz oluşturun. ### Poncho Çalışan bir etkinlik dizini üzerinden Poncho’in Bootstrap 3 ızgarasını, anlamsal eylem renklerini ve tümü tıklanabilir hizmet panellerini inceleyin. - [Uygulama başvurusu](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Kaynak](https://github.com/digitalnsw/nsw-design-system) - [Kod referansı](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Kod referansı](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Sekmeler Eş düzey içeriklerde gezinme ve yerel davranış.](https://designsystem.nsw.gov.au/components/tabs/index.html) - [Geliştirici entegrasyonu Paket, stil sayfası ve JavaScript kurulumu.](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [Tipografi Public Sans ve tipografi hiyerarşisi.](https://designsystem.nsw.gov.au/core/typography/index.html) - [Sürümlenmiş uygulama Tema dışa aktarımları ve Tabs kaynak kodu.](https://github.com/digitalnsw/nsw-design-system)