# Amsterdam Tasarım Sistemi

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

Daha büyük metni, daha yüksek karşıtlığı ve önizlemede azaltılmış hareketi açıp kapatın; varsayılanları geri yükleyin.

## Amsterdam Tasarım Sistemi Tasarım Referansı

CSS ve React4.4.0 uygulaması incelendi; özel token/varlık sınırları kontrol edildi. Önizlemedeki tüm tema değerleri özgündür.

### Açık kaynak bileşen sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| CSS package | @amsterdam/design-system-css 4.4.0 | Yerel Switch stil sayfası değiştirilmeden kullanıldı. |
| Class anatomy | ams-switch; ams-switch__input; ams-switch__label | Girdi, ilişkili etiketin hemen öncesinde yer alır. |
| Input semantics | type=checkbox; role=switch | Yerel checked durumu açık/kapalı durumunu belirtir. |
| Native behavior | Immediate binary setting | React kaynağı, formun gönderilmesinin gerekmediğini belirtir. |
| React props | InputHTMLAttributes<HTMLInputElement> | checked, defaultChecked, onChange, disabled ve ARIA özellikleri input öğesine aktarılır. |
| Focus | Input focus styles the following label | Gerçek input öğesini display:none ile gizlemeyin. |
### Eksiksiz, özgün ve nötr Switch teması

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ams-switch-inline-size | 50px | Özgün switch iz genişliği. |
| --ams-switch-thumb-inline-size / block-size | 22px / 22px | Özgün dairesel düğme geometrisi. |
| --ams-switch-label-border-width | 3px | İz iç boşluğu; checked durumundaki öteleme bu değeri kullanır. |
| --ams-switch-background-color | #666 | Özgün kapalı iz rengi. |
| --ams-switch-checked-background-color | #286044 | Özgün açık iz rengi; bir Amsterdam marka token'ı değildir. |
| --ams-switch-thumb-background-color | #fff | Özgün düğme rengi. |
| --ams-switch-disabled-background-color | #aaa | Devre dışı görünümü; davranışı yerel disabled özelliği sağlar. |
| --ams-switch-outline-offset | 4px | Odak halkasının ayrılması. |
| --ams-switch-cursor / disabled-cursor | pointer / not-allowed | Açık etkileşim yapılandırması. |
| --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | Özgün üzerine gelme görünümü. |
### Uygulama tipografisi ve düzeni

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Font / body | Arial / 18px with 1.5 leading | Özgün nötr yapılandırma; Amsterdam Sans varlığı kullanılmamıştır. |
| Heading | 36px; 30px below700px | Resmî bir Amsterdam ölçeği değil, uygulama tercihidir. |
| Layout | 900px maximum; two columns with32px gap | Uygulama tercihi; 700px altında tek sütun. |
| Larger reading mode | 22px article text | Yerel tercih; genel tarayıcı yakınlaştırmasının yerine geçmez. |
| Reduced motion | OS preference plus local preview setting | CSS bileşeni, geçişlerinde prefers-reduced-motion ayarına zaten uyar. |
### Yeniden kullanım ve kimlik sınırı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Component code | EUPL-1.2 or later | Lisansı ve geçerli bildirimleri koruyun. |
| Documentation | CC0-1.0 | Özel varlıklardan ayrı tutun. |
| Token package4.3.0 | Proprietary assets | Kendi LICENSE dosyası, onu açık kaynak lisansının kapsamı dışında bırakır. |
| Amsterdam Sans / icons / logo | Restricted institutional assets | Bu bağımsız örneğe kopyalanmamıştır. |
## Amsterdam 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ı.

## Amsterdam Tasarım Sistemi Bileşeni ve temayı birbirinden ayırın

### Açık kaynak katmanını doğru biçimde kullanın

> Amsterdam, bileşen CSS'yi ayrı yayımlar; böylece sınıf sözleşmesi React dışında uygulanabilir. Stil sayfası, CSS özel özelliklerine bağlıdır; eksiksiz bir tema olmadan içe aktarılırsa önemli boyutlar ve renkler tanımsız kalır. Bu nedenle bu örnekte yerel Switch stil sayfası, eksiksiz ve özgün bir nötr yapılandırmayla birlikte kullanılmıştır.

Depo, açık kaynak paketlerini özel varlıklardan ayrı tutar. İncelenen 4.3.0 token paketi, onu açık kaynak lisansının kapsamı dışında bırakan kendi lisans bildirimine sahiptir. Amsterdam Sans, simgeler ve şehir logosu da belirli kısıtlamalara tabidir. Bu kılavuz, bunları bağlam olarak anmakla birlikte yeniden dağıtmaz ve herkese açık bir npm indirmesinin sınırsız marka kullanım hakkı verdiğini öne sürmez.

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Eksiksiz, nötr bir yapılandırma

### Komponentin ihtiyaç duyduğu tüm özellikleri sağlayın

Referans tablosu, seçilen Switch stil sayfasında kullanılan tüm değişkenleri listeler. Genişlik, düğme boyutları, kenarlık genişliği, renkler, anahat uzaklığı, imleç ve üzerine gelme görünümü için açık değerler belirtilmiştir. Bunlar bu örnek için belirlenmiş özgün değerlerdir; kopyalanmış Amsterdam tasarım token'ları değildir. Bu ayrım, okuyucuların eksik tema parçalarını tahmin etmek zorunda kalmadan örneği yeniden oluşturmasını sağlar.

İz 50px genişliğinde; düğme 22px, kenarlık ise 3px'tir. Yerel checked durumu dönüşümü, düğmenin hareket mesafesini düğme genişliği ve kenarlık genişliğinden hesaplar. Bu nedenle yalnızca iz genişliğini değiştirmek düğmenin hizasının bozulmasına yol açabilir. İlgili geometri değerlerini birlikte değiştirin ve her iki durumu da inceleyin.

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

Kod referansı

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Yerel Switch bileşeninin yapısı

### Etiket, input öğesinin ardından gelmelidir

React uygulaması bir sarmalayıcı, bir input ve ilişkili, boş bir label oluşturur. CSS, input öğesinin odak, seçili ve devre dışı durumlarına göre etiketi biçimlendirmek için bitişik kardeş seçicileri kullanır. Düz bir HTML uygulamasında bu sıralamayı koruyun; input ile etiket arasına açıklama eklemek bu seçicileri bozar.

Gerçek input, role="switch" olan bir checkbox'tır. Yerel checked özelliğini ve klavye davranışını korur. Görsel etiket metin içermediği için aria-label veya aria-labelledby aracılığıyla erişilebilir bir ad sağlayın. Bu örnek, görünür bir ayar başlığını referans alır ve açıklamasını aria-describedby ile ilişkilendirir.

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

Kod referansı

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Anlık ayarlar

### Bir switch, geçerli görünümü değiştirir

Bileşen kaynağı, Switch bileşenini anında uygulanan ikili bir ayar olarak tanımlar. Önizleme bu sözleşmeye uyar: Daha büyük metin makale boyutunu, daha güçlü kontrast metni ve dış çizgiyi değiştirir; azaltılmış hareket ise rozetin kısa görünme efektini kaldırır. Bu yerel seçimlerin bir hesap hizmetine gönderildiği izlenimini veren bir Kaydet düğmesi yoktur.

Varsayılanları geri yükle seçeneği, yerel üç checked durumunu da temizler ve makalenin varsayılan sınıflarını yeniden uygular. Durum mesajı etkin ayarları açıklar. Sayfadan ayrıldıktan veya sayfayı yeniden yükledikten sonra hiçbir şey saklanmaz. Üretim ortamındaki bir tercih hizmeti kalıcılık sağlayabilir; ancak ayarın bu sayfayı mı, cihazı mı yoksa hesabı mı etkilediğini belirtmelidir.

1. Daha büyük metni aç ve yanındaki makaledeki paragraf boyutunu incele.

2. Daha güçlü kontrast seçeneğine odaklan ve klavyeden açıp kapatmak için Boşluk tuşuna bas.

3. Varsayılanları geri yükle seçeneğini kullan ve üç anahtarın da makaleyle birlikte eski hâline döndüğünü doğrula.

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Klavye, odak ve hareket

### Yerel girdi öğesini kullanılabilir tut

Stil sayfası, gerçek kontrolü korurken görsel girdi genişliğini küçültür. Odak seçicisi, dış çizgiyi sonraki etikete uygular. Girdiyi dekoratif bir div ile değiştirmek, yerel form anlamını ortadan kaldırır ve ayrıca klavye desteği gerektirir. Girdiye display:none uygulama.

Yerel stil sayfası, geçiş efektlerini yalnızca prefers-reduced-motion:no-preference koşulunda uygular. Makale efekti de yerel anahtardan bağımsız olarak işletim sistemi tercihine uyar. Sistem düzeyinde daha az hareket isteyen bir kullanıcının, örneğin sakin davranması için ek bir anahtar keşfetmesi gerekmemelidir.

- Tek doğru kaynak olarak checked özelliğini kullan; bununla ilgisiz bir görsel etkin durumu uydurma.

- Her ayara sabit bir ad ver ve açıklamasını girdiyle ilişkili tut.

- Tema geometrisini veya renklerini değiştirdikten sonra kapalı, açık, odaklı ve devre dışı durumları test et.

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Okuma önizlemesinin düzeni

### Denetimin yanındaki etkiyi göster

Örnek, her ayarın makalede görünür bir sonucu olması için iki sütunlu bir düzen kullanır. Uygulamaya özgü 700px kırılma noktasının altında, denetimler önizlemenin üstüne gelecek şekilde alt alta dizilir. 900px azami genişlik ve 32px boşluk, özgün düzen kararlarıdır; şehir genelinde kullanılan bir ızgara belirtecinin kanıtı değildir.

Nötr yazı tipi Arial'dır. Gövde metni 18px ve satır aralığı 1.5 değerindedir; büyük metin modu yalnızca makaleyi 22px yapar. Bu, uygulamaya özgü bir ayar örneğidir; tarayıcı yakınlaştırmasının yerini tutmaz ve bu boyutların Amsterdam tarafından belirlendiği anlamına gelmez. Uzun etiketler, yerel anahtarın genişliği daraltılmadan satırlara bölünür.

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi CSS veya React entegrasyonu

### Uygulama katmanını seç

Mevcut bir React uygulamasında doğrulanmış Switch, standart girdi özniteliklerini kabul eder ve ref değerini girdiye iletir. Kontrollü kullanımda checked ve onChange sağlanır; kontrolsüz kullanımda defaultChecked sağlanabilir. Bileşen, uygulama depolama alanı veya hesap tercihleri için bir API sağlamaz.

Bu bağımsız HTML örneği için yalnızca açık kaynaklı Switch CSS gerekir. Kurulum ve eksiksiz kod, eksik tema yapılandırmasını ve yerel durum yönetimini sağlar. Paket yükleyicisi bağımlılık olarak tescilli varlıkları indirebilir; bunların diskte bulunması, içe aktarılmalarına veya dağıtılmalarına izin verildiği anlamına gelmez. Satıcı tarafından pakete eklenen örnek yalnızca seçilen CSS bileşenini ve açık kaynak lisansını içerir.

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Kullanım ve sınırlamalar

### Görsel benzerliği kurumsal bağlılıkla karıştırma

Şehir sistemi, belediye ürünlerinin tutarlı ve erişilebilir olmasını amaçlar. Yeniden kullanılabilir kodu lisansı kapsamında incelenip uyarlanabilir; ancak logosu, tescilli yazı tipi ve simge varlıkları ayrı koşullara tabidir. Önizleme, bir Amsterdam hizmetiyle karıştırılmaması için özgün markalama ve nötr içerik kullanır.

Doğrulanmış kapsam; eksiksiz bir özel tema ve anlamlı yerel davranışa sahip tek bir yerel bileşenden oluşur. Bu, şehir temasının baştan sona yeniden uygulanması değildir. Daha geniş kapsamlı CSS paketini kullanan gerçek bir ürün, bu Switch yapılandırmasını ilgisiz denetimlere genellemek yerine ek bileşenlerin gerektirdiği tüm değişkenleri tanımlamalı ve test etmelidir.

Destekleyici belirtimi okuyun

## Amsterdam Tasarım Sistemi Bileşen örnekleri

### Eksiksiz nötr Switch teması

Yerel stil sayfasının gerektirdiği her değişken tanımlanmıştır; tüm değerler özgündür.

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

Kod referansı

### Erişilebilir yerel yapı

Gerçek checkbox girdisi, switch rolü ve bitişik görsel etiket.

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

Kod referansı

### Eksiksiz ve anında uygulanan okuma tercihleri

Yerel Switch CSS, özel tema ve görünür yerel etkiler.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>
```

Kod referansı

## Amsterdam Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu

### Uygulamaya Başlangıç Noktası

Yalnızca açık kaynaklı CSS; eksiksiz özgün tema ve çalışan HTML örneği dahildir. Tescilli belirteç veya varlık paketi dağıtılmaz. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, tam önizleme bağımlılıklarını ve belgenin tamamını da içerir. Dosyayı çıkarın, o dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/amsterdam.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.

```
npm install @amsterdam/design-system-css@4.4.0
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
```

### Projeniz İçin Bir İstem

```
Amsterdam açık kaynaklı Switch CSS bileşenini eksiksiz ve özgün bir temayla kullan. Sarmalayıcı/girdi/bitişik etiket yapısını, role=switch değerini ve erişilebilir adlandırmayı koru. İkili ayarları anında uygula ve durum bilgisinin kaynağı olarak checked değerini kullan. Azaltılmış hareket tercihine uy ve yerel tercihleri kalıcı hesap ayarlarından ayır. İlgili haklar olmadan tescilli belirteçleri, yazı tiplerini, logoları veya simgeleri içe aktarma.
```

## Amsterdam Tasarım Sistemi Kaynaklar ve kapsam

Bağımsız OpenDesign örneği. Amsterdam marka belirteçleri, Amsterdam Sans, resmî simgeler ve logo dahil değildir.

- Depo ve lisanslar Açık kaynaklı paketler ve tescilli içeriklerin ayrımı.

- CSS sözleşmesi Sınıf mimarisi, CSS kullanımı ve tema bağımlılığı.

- Switch belgeleri Anında uygulanan ikili ayar anlamı.

- Varlık bildirimi Yazı tipi, simge, markalama ve logo kısıtlamaları.

- Belirteç paketinin kapsamı Ayrı tescilli belirteç katmanı.

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

## Amsterdam Tasarım Sistemi İlgili kaynaklar

### B.C. tasarım sistemi

Gerçek anlamsal belirteçler, yerel React Aria kontrolleri, koşullu iletişim alanları ve eksiksiz doğrulama davranışıyla B.C. tarzında bir hatırlatma tercih formu oluşturun.

### Canada.ca tasarım sistemi

Açıklama ve boş durum davranışları içeren eksiksiz, aranabilir bir hazırlık kılavuzu aracılığıyla GC Design System tipografisini, anlamsal belirteçlerini ve yerel web bileşenlerini keşfedin.

### CFPB tasarım sistemi

CFPB’nin editoryal ızgarasını, güncel tipografisini ve yerel Expandables bileşenlerini; çalışan bir okuma çalışma sayfası, doğrulanmış paket API’leri ve açık kimlik sınırlarıyla uygulayın.


- [Uygulama başvurusu](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Kaynak](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Kaynak](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Destekleyici belirtimi okuyun](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Kod referansı](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Destekleyici belirtimi okuyun](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Kod referansı](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Destekleyici belirtimi okuyun](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Depo ve lisanslar Açık kaynaklı paketler ve tescilli içeriklerin ayrımı.](https://github.com/Amsterdam/design-system)
- [CSS sözleşmesi Sınıf mimarisi, CSS kullanımı ve tema bağımlılığı.](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Switch belgeleri Anında uygulanan ikili ayar anlamı.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [Varlık bildirimi Yazı tipi, simge, markalama ve logo kısıtlamaları.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [Belirteç paketinin kapsamı Ayrı tescilli belirteç katmanı.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)