# NL tasarım sistemi

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

Özgün temalar arasında geçiş yapın, koleksiyon konumunu düzenleyin, kaydı değiştirmeden kaydedin veya iptal edin.

## NL tasarım sistemi Tasarım Başvurusu

Katkıda bulunan bileşenlerin somut bir birleşimi: @utrecht/component-library-css 9.0.15. Herkese açık belirteç adları ve sınıflar, kütüphanenin incelenmiş API'leridir; “örnek” olarak işaretlenen sayısal değerler ve renkler ise özgün uygulama ayarlarıdır, evrensel bir NL Design System belirtimi değildir.

### Mimari

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Component implementation | Utrecht CSS 9.0.15 | Seçilmiş bir katkı; NL Design System için tek uygulama değildir. |
| Theme boundary | Wrapper-scoped CSS custom properties | Aynı anlamsal işaretleme, birden fazla görsel kimliği destekler. |
| Source design tokens | Design Tokens JSON standard | Kurumlar, yeniden kullanılmak üzere kendi kurum stillerini tanımlar. |
### Gerçek düğme belirteci API

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --utrecht-button-min-block-size | 48px in example; 44px library fallback | Açıkça tanımlanmış hedef boyutu. |
| --utrecht-button-border-radius | 4px / 8px in example themes | Uygulamanın yönettiği geometri. |
| --utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | Özgün eylem renkleri; beyaz ön plan rengi. |
| --utrecht-button-font-size | 1rem in example | Bileşen metin rolü. |
| --utrecht-focus-outline-width | 3px in example | Herkese açık odak halkası yapılandırması. |
### Veri listesi API

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| .utrecht-data-list + .utrecht-data-list--rows | dl root | Anlamsal adlandırılmış değerler. |
| .utrecht-data-list__item | Key/value wrapper | Duyarlı ızgara satırı. |
| --utrecht-data-list-rows-column-min-inline-size | 12ch in example | Makbuz etiketleri için seçilmiş minimum sütun genişliği. |
| --utrecht-data-list-rows-column-inline-size | 45% in example | Alan elverdiğinde iki sütun. |
| --utrecht-data-list-rows-gap | 24px in example | Anahtar ile değer arasındaki boşluk. |
## NL 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ı.

## NL tasarım sistemi Birleşim Seçin

### Tek bir tema değil, bir ekosistem

> NL Design System, birden fazla kuruluştan gelen katkıların birleştirilmesini açıkça desteklerken her kuruluşun kurumsal stilini tasarım belirteçleriyle tanımlar. Bu nedenle benimsemenin pratik birimi, seçilen bileşen uygulamasıyla seçilen temanın birleşimidir. Bu sayfada Utrecht CSS katkı sağlayıcısının uygulaması ve özgün bir tanıtım teması seçilmiştir.

Bu seçim, Utrecht'in her NL Design System bileşeninin kanonik uygulaması olduğunu ileri sürmez. Ulusal bir yazı tipi, mavi renk veya boşluk ölçeği uydurmadan okuyucuya tekrarlanabilir bir yol sunar. Gerçek yerel CSS paketi @utrecht/component-library-css 9.0.15'tir.

Destekleyici belirtimi okuyun

## NL tasarım sistemi Genel bileşen belirteçleri

### Uygulama değerlerini kütüphane CSS dışında tutun

Sağlanan tema, herkese açık --utrecht-* özel özelliklerini bir kapsayıcı üzerinde ayarlar. Düğme bu değerleri kullanırken sınıfı bileşenin yapısını belirler. --_utrecht- ile başlayan değişkenler, incelenen CSS içindeki dahili hesaplamalardır; bunları doğrudan değiştirmek uygulamayı uygulama ayrıntılarına bağımlı hâle getirir.

Örnekteki turkuaz #005a5b ve mor #57328c, uygulamaya özgü özgün renklerdir. Bu renkler, bir belediyenin kurumsal kimliğini kopyalamadan markalamanın değiştirilebileceğini gösterir. Her ikisinde de düğme metni beyazdır ve üzerine gelme tonu ayrıca tanımlanmıştır. Hiçbir renk, resmî bir NL Design System belirteç değeri olarak sunulmaz.

```
.example-theme {
  /* Original application values, not a national house style. */
  --utrecht-document-font-family: Arial, sans-serif;
  --utrecht-button-font-size: 1rem;
  --utrecht-button-line-height: 1.5;
  --utrecht-button-font-weight: 700;
  --utrecht-button-border-radius: .25rem;
  --utrecht-button-min-block-size: 48px;
  --utrecht-button-padding-block-start: .75rem;
  --utrecht-button-padding-block-end: .75rem;
  --utrecht-button-padding-inline-start: 1.25rem;
  --utrecht-button-padding-inline-end: 1.25rem;
  --utrecht-button-primary-action-background-color: #005a5b;
  --utrecht-button-primary-action-color: #fff;
  --utrecht-button-primary-action-hover-background-color: #003f40;
  --utrecht-button-primary-action-hover-color: #fff;
  --utrecht-focus-outline-color: #111;
  --utrecht-focus-outline-width: 3px;
  --utrecht-focus-outline-offset: 3px;
  --utrecht-focus-outline-style: solid;
}
```

Kod referansı

Destekleyici belirtimi okuyun

## NL tasarım sistemi Tipografi ve boyutlar

### Eksik tema kararlarını belirleyin

Demo, belge okuma için 18px boyutunda Arial, sans-serif yazı tipini ve 1.6 satır yüksekliğini tanımlar. İlk temada 32px başlık ve 4px köşe yarıçaplı bir düğme; ikinci temada aynı okunaklı gövde yazı boyutu, 8px köşe yarıçapı ve serif bir başlık kullanılır. Bunlar temadaki değişiklikleri bilerek görünür kılar.

Yerel düğmede, belirteci yoksa varsayılan olarak 44px minimum blok boyutu kullanılır. Temamız 48px değerini ve blok/iç satır dolgularını açıkça sağlar. Bu, ekosistemin tamamı için tahmin edilmiş bir boyut değil, uygulamanın seçtiği değere sahip gerçek bir CSS API belirtecidir. Düzen, bu örneğin sağladığı en fazla 56rem içerik genişliğini ve 24px boşlukları kullanır.

Destekleyici belirtimi okuyun

## NL tasarım sistemi Veri listesi yapısı

### Adlandırılmış değerler için tanım listesi

Makbuzda .utrecht-data-list sınıfına ve .utrecht-data-list--rows değiştiricisine sahip bir dl kullanılır. Her .utrecht-data-list__item, bir dt anahtarını ve dd değerini bir arada tutar. rows değiştiricisi duyarlı ızgarayı, satır aralıklarını ve kenarlıkları etkinleştirir; bu değiştirici olmadan temel veri listesi bu düzeni etkinleştirmez. Tema yüklenmeden önce de HTML anlamını korur.

Makbuzda teslim alma konumu, referans ve seçilen öğe listelenir. Bu, yinelenen kayıtları içeren bir tablo değildir: her anahtar aynı isteğin farklı bir niteliğini belirtir. Dar ekranlarda anahtar ve değer alt alta gelir. Uygulama, uzun konum etiketlerinin kırpılmadan sığması için satır belirteçlerini ayarlar.

- Nitelik adı için dt, mevcut değeri için dd kullanın.

- Her anahtar/değer çiftini belgelenmiş öğe sarmalayıcısına yerleştirin.

- Sayfanın genişlemesine yol açmamak için tanımlayıcıların ve uzun konum adlarının satır sonlarında bölünmesine izin verin.

Destekleyici belirtimi okuyun

## NL tasarım sistemi Eylem anlamı

### Düğme sınıfı bir iş akışı sağlamaz

.utrecht-button temel bileşeni sağlar; .utrecht-button--primary-action ise birincil görünüm belirteç grubunu seçer. Yerel bir eylem için kullanılan ve çevresindeki formu göndermemesi gereken yerel öğede yine de type=button bulunmalıdır. Uygulama bir düzenleme paneli açana kadar veri listesi salt okunur kalır.

Demodaki Teslim alma konumunu değiştir düğmesi, yerel radyo düğmelerinden oluşan bir fieldset gösterir. Kaydetme işlemi, tanım listesindeki değeri günceller ve yeni konumu kibar bir durum bölgesi aracılığıyla duyurur. İptal etme, kaydedilmiş değeri değiştirmeden paneli kapatır. Bu davranışlar uygulama koduyla sağlanır; yalnızca bir CSS paketi kurmak bunları uygulamaz.

Destekleyici belirtimi okuyun

## NL tasarım sistemi Temaları güvenle değiştirin

### Sarmalayıcıyı değiştirin, kaydı koruyun

Tema seçici, dış sarmalayıcıdaki data-theme değerini değiştirir. Bileşen sınıfları, kayıt değerleri ve seçili radyo düğmesi korunur. Bu, beyaz etiketli ayrımı somut biçimde gösterir: aynı makbuz ve etkileşim farklı görsel kimlikleri destekleyebilir.

Buradaki tema değiştirme özelliği bir geliştirme demosudur; kamu hizmetlerinin sunması gereken bir ayar değildir. Gerçek birden fazla kuruluşun hizmet verdiği sistemde temayı güvenilir uygulama yapılandırmasından seçin. Tema değerleri uygunluğu, doğrulamayı veya bir durumun anlamını değiştirmemelidir.

1. Sürümlenmiş bileşen CSS paketini bir kez yükleyin.

2. İlgili tema belirteçlerini kapsayıcı bir öğeye uygulayın.

3. Aynı anlamsal bileşen işaretlemesini bu kapsayıcı içinde oluşturun.

4. Desteklenen her tema için odaklanma, satır kaydırma ve durum renklerini doğrulayın.

Destekleyici belirtimi okuyun

## NL tasarım sistemi Erişilebilirlik ve olgunluk

### Seçilen katkıyı değerlendirin

NL Design System katkı modeli, katkıların paylaşılan standartlara doğru nasıl ilerlediğini açıklar. Bir bileşenin topluluk deposunda bulunması, her bileşimde üretime hazır olduğunun güvencesi değildir. Seçilen uygulamayı, desteklenen durumları ve güncel olgunluk düzeyini bileşen belgelerinden doğrulayın.

Önizlemede konum seçeneklerinin görünür açıklaması yer alır, kaydedilen sonuç duyurulur ve düzenleme sonrasında odak, işlemi başlatan düğmeye geri döner. Tema değiştirme odağı kaldırmaz. Ekran, yerel radyo düğmelerinin klavye denetimleri ve uygulamanın kendi odak ana hatlarıyla kullanılabilir durumda kalır. Bu kontroller, katkı sağlayıcının bileşen testlerini tamamlar; onların yerini almaz.

Destekleyici belirtimi okuyun

## NL tasarım sistemi Kurulum ve tema sahipliği

### Yalnızca CSS kullanan entegrasyon

Doğrulanmış CSS paketini kurup dist/index.css dosyasını CSS destekli bir paketleyici aracılığıyla içe aktarın, ardından tema stil sayfanızı ekleyin. Burada kullanılan yalnızca CSS veri listesi ve düğme için React sağlayıcısı veya JavaScript bileşen başlatıcısı gerekmez. Özgün uygulama betiği düzenleme, kaydetme, iptal etme ve tema değiştirme işlemlerini yönetir.

Paketlenmiş bileşen kaynağı EUPL-1.2 lisansına sahiptir. Dağıtırken kaynak ve lisans bildirimlerini koruyun; kod lisansının bir belediyenin logosunu yeniden kullanma izni verdiğini varsaymayın. Bu örnekte bilerek özgün temalar kullanılmış ve hiçbir belediye işareti eklenmemiştir.

Destekleyici belirtimi okuyun

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

### Yerel bir düğmenin kullandığı tema belirteçleri

Seçilen düğme teması eksiksizdir. Değerler özgündür; API adları Utrecht'ten alınmıştır.

```
.example-theme {
  /* Original application values, not a national house style. */
  --utrecht-document-font-family: Arial, sans-serif;
  --utrecht-button-font-size: 1rem;
  --utrecht-button-line-height: 1.5;
  --utrecht-button-font-weight: 700;
  --utrecht-button-border-radius: .25rem;
  --utrecht-button-min-block-size: 48px;
  --utrecht-button-padding-block-start: .75rem;
  --utrecht-button-padding-block-end: .75rem;
  --utrecht-button-padding-inline-start: 1.25rem;
  --utrecht-button-padding-inline-end: 1.25rem;
  --utrecht-button-primary-action-background-color: #005a5b;
  --utrecht-button-primary-action-color: #fff;
  --utrecht-button-primary-action-hover-background-color: #003f40;
  --utrecht-button-primary-action-hover-color: #fff;
  --utrecht-focus-outline-color: #111;
  --utrecht-focus-outline-width: 3px;
  --utrecht-focus-outline-offset: 3px;
  --utrecht-focus-outline-style: solid;
}
```

Kod referansı

### Adlandırılmış değerler ve bir düzenleme tetikleyicisi

Katkı sağlayıcının bileşen sınıflarını kullanan anlamsal dl/dt/dd yapısı.

```
<dl class="utrecht-data-list utrecht-data-list--rows">
  <div class="utrecht-data-list__item">
    <dt class="utrecht-data-list__item-key">Collection location</dt>
    <dd class="utrecht-data-list__item-value">North library desk</dd>
  </div>
  <div class="utrecht-data-list__item">
    <dt class="utrecht-data-list__item-key">Reference</dt>
    <dd class="utrecht-data-list__item-value">DEMO-2048</dd>
  </div>
</dl>
<button type="button" class="utrecht-button utrecht-button--primary-action">
  Change collection location
</button>
```

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"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.example-theme {
  /* Original application values, not a national house style. */
  --utrecht-document-font-family: Arial, sans-serif;
  --utrecht-button-font-size: 1rem;
  --utrecht-button-line-height: 1.5;
  --utrecht-button-font-weight: 700;
  --utrecht-button-border-radius: .25rem;
  --utrecht-button-min-block-size: 48px;
  --utrecht-button-padding-block-start: .75rem;
  --utrecht-button-padding-block-end: .75rem;
  --utrecht-button-padding-inline-start: 1.25rem;
  --utrecht-button-padding-inline-end: 1.25rem;
  --utrecht-button-primary-action-background-color: #005a5b;
  --utrecht-button-primary-action-color: #fff;
  --utrecht-button-primary-action-hover-background-color: #003f40;
  --utrecht-button-primary-action-hover-color: #fff;
  --utrecht-focus-outline-color: #111;
  --utrecht-focus-outline-width: 3px;
  --utrecht-focus-outline-offset: 3px;
  --utrecht-focus-outline-style: solid;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></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.

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

### Uygulamaya Başlangıç Noktası

Bağımsız önizleme, aynı sürümlenmiş yerel CSS bileşenini yükler. Yalnızca CSS kullanan düğme/veri listesi bileşenleri için React sağlayıcısı gerekmez. Kütüphaneyle birlikte özgün tema değerleri de sağlanmalıdır. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP'i, önizleme için gereken tam bağımlılıkları ve belgenin tamamını da içerir. ZIP'i çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/nl-design-system.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

```
npm install @utrecht/component-library-css@9.0.15
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
```

### Projeniz İçin Bir İstem

```
Makbuz tanım listesi ve birincil düğme için @utrecht/component-library-css 9.0.15 kullanın. Herkese açık --utrecht-* belirteçleriyle kapsayıcı kapsamlı özgün bir tema sağlayın; dahili --_utrecht-* değişkenlerine dokunmayın. Etiketli radyo seçenekleriyle konum düzenleme, kaydetme/iptal etme, kibar bir güncelleme duyurusu ve odağın geri dönmesini sağlayın. Bileşen işaretlemesini değiştirmeden veya verileri kaybetmeden ikinci bir özgün tema gösterin. Tüm sayısal tema değerlerinin uygulama tercihi olduğunu belirtin.
```

## NL tasarım sistemi Kaynaklar ve Kapsam

NL Design System, markadan bağımsız bir ekosistemdir. Bu eğitim örneğinde tek bir katkı sağlayıcı uygulaması ve iki özgün tema seçilmiştir; ulusal bir görsel stil iddiasında bulunmaz ve herhangi bir belediyenin kimliğini kullanmaz.

- Ekosisteme genel bakış Paylaşılan kamu hizmeti tasarım kaynakları ve topluluk bağlamı.

- Geliştirici tanıtımı Bileşenler, kuruluş temaları ve tasarım belirteci mimarisi.

- Bileşen kataloğu Belgelenmiş bileşenleri ve ilgili başvuru kaynaklarını keşfedin.

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

## NL tasarım sistemi İlgili Kaynaklar

### NSW tasarım sistemi

Bağımsız bir yerel okuma listesi içeren eksiksiz bir atölye kılavuzunda NSW tasarım belirteçlerini, Public Sans tipografisini ve klavyeyle erişilebilen yerel sekmeleri keşfedin.

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


- [Uygulama başvurusu](https://github.com/nl-design-system/utrecht)
- [Kaynak](https://www.nldesignsystem.nl/handboek/developer/introductie/)
- [Kaynak](https://github.com/nl-design-system/utrecht/tree/main/packages/button)
- [Kaynak](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list)
- [Destekleyici belirtimi okuyun](https://www.nldesignsystem.nl/handboek/developer/introductie/)
- [Kod referansı](https://github.com/nl-design-system/utrecht/tree/main/packages/button)
- [Destekleyici belirtimi okuyun](https://github.com/nl-design-system/utrecht/tree/main/packages/button)
- [Destekleyici belirtimi okuyun](https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-css)
- [Destekleyici belirtimi okuyun](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list)
- [Destekleyici belirtimi okuyun](https://www.nldesignsystem.nl/handboek/estafettemodel/)
- [Kod referansı](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list)
- [Kod referansı](https://github.com/nl-design-system/utrecht)
- [Ekosisteme genel bakış Paylaşılan kamu hizmeti tasarım kaynakları ve topluluk bağlamı.](https://www.nldesignsystem.nl/)
- [Geliştirici tanıtımı Bileşenler, kuruluş temaları ve tasarım belirteci mimarisi.](https://www.nldesignsystem.nl/handboek/developer/introductie/)
- [Bileşen kataloğu Belgelenmiş bileşenleri ve ilgili başvuru kaynaklarını keşfedin.](https://www.nldesignsystem.nl/componenten/)