# Amsterdam 디자인 시스템

## Amsterdam 디자인 시스템 인터페이스 미리보기

큰 글씨, 강한 대비, 미리보기 모션 줄이기를 켜거나 끄고 기본값으로 복원하세요.

## Amsterdam 디자인 시스템 디자인 참고 자료

CSS 및 React4.4.0 구현을 검토하고 독점 토큰 및 에셋의 경계를 확인했습니다. 미리보기 테마 값은 모두 독자적으로 구성했습니다.

### 오픈 소스 컴포넌트 계약

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| CSS package | @amsterdam/design-system-css 4.4.0 | 네이티브 스위치 스타일시트를 수정 없이 사용했습니다. |
| Class anatomy | ams-switch; ams-switch__input; ams-switch__label | 입력 요소는 해당 레이블 바로 앞에 배치합니다. |
| Input semantics | type=checkbox; role=switch | 네이티브 checked 상태로 켜짐/꺼짐을 나타냅니다. |
| Native behavior | Immediate binary setting | React 소스에는 양식 제출이 필요하지 않다고 명시되어 있습니다. |
| React props | InputHTMLAttributes<HTMLInputElement> | checked, defaultChecked, onChange, disabled 및 ARIA 속성을 입력 요소에 전달합니다. |
| Focus | Input focus styles the following label | 실제 입력 요소에 display:none을 적용하지 마세요. |
### 독자적으로 구성한 완전한 중립 스위치 테마

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --ams-switch-inline-size | 50px | 독자적으로 설정한 스위치 트랙 너비. |
| --ams-switch-thumb-inline-size / block-size | 22px / 22px | 독자적으로 설정한 원형 썸의 모양. |
| --ams-switch-label-border-width | 3px | 트랙 안쪽 여백. checked 상태의 이동 거리에 이 값을 사용합니다. |
| --ams-switch-background-color | #666 | 독자적으로 설정한 꺼짐 트랙 색상. |
| --ams-switch-checked-background-color | #286044 | 독자적으로 설정한 켜짐 트랙 색상이며, Amsterdam 브랜드 토큰이 아닙니다. |
| --ams-switch-thumb-background-color | #fff | 독자적으로 설정한 썸 색상. |
| --ams-switch-disabled-background-color | #aaa | 비활성화 상태의 모양입니다. 동작은 네이티브 disabled 속성으로 처리합니다. |
| --ams-switch-outline-offset | 4px | 포커스 링 분리. |
| --ams-switch-cursor / disabled-cursor | pointer / not-allowed | 명시적으로 설정한 상호작용 구성. |
| --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | 독자적으로 설정한 호버 효과. |
### 애플리케이션 타이포그래피 및 레이아웃

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Font / body | Arial / 18px with 1.5 leading | 독자적으로 구성한 중립 설정이며, Amsterdam Sans 에셋은 사용하지 않습니다. |
| Heading | 36px; 30px below700px | 공식 Amsterdam 스케일이 아닌 애플리케이션 설정입니다. |
| Layout | 900px maximum; two columns with32px gap | 애플리케이션 설정입니다. 700px 미만에서는 한 열로 표시합니다. |
| Larger reading mode | 22px article text | 전역 브라우저 확대를 대체하지 않는 로컬 설정입니다. |
| Reduced motion | OS preference plus local preview setting | CSS 컴포넌트는 전환 효과에 prefers-reduced-motion을 이미 적용합니다. |
### 재사용 및 정체성의 경계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Component code | EUPL-1.2 or later | 라이선스와 해당 고지 사항을 유지하세요. |
| Documentation | CC0-1.0 | 독점 에셋과 분리하세요. |
| Token package4.3.0 | Proprietary assets | 별도의 LICENSE에 따라 오픈 소스 라이선스에서 제외됩니다. |
| Amsterdam Sans / icons / logo | Restricted institutional assets | 이 독립적인 예시에는 복사하지 않았습니다. |
## Amsterdam 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## Amsterdam 디자인 시스템: 컴포넌트와 테마 분리

### 오픈 소스 계층을 정확하게 사용하세요

> Amsterdam는 컴포넌트 CSS를 별도로 공개하므로, React 외부에서도 해당 클래스 계약을 구현할 수 있습니다. 스타일시트는 CSS 사용자 지정 속성에 의존하므로, 완전한 테마 없이 가져오면 중요한 치수와 색상이 정해지지 않습니다. 따라서 이 예시에서는 네이티브 스위치 스타일시트와 독자적으로 구성한 완전한 중립 설정을 함께 사용합니다.

저장소는 오픈 소스 패키지와 독점 에셋을 분리합니다. 검토한 토큰 패키지 4.3.0에는 오픈 소스 라이선스에서 제외한다는 별도의 라이선스 고지가 있습니다. Amsterdam Sans, 아이콘, 시 로고에도 각각 별도의 제한 사항이 적용됩니다. 이 가이드에서는 해당 자료가 존재한다는 점만 맥락으로 언급하며, 이를 재배포하거나 공개 npm 다운로드만으로 브랜딩 권한을 제한 없이 얻을 수 있다고 주장하지 않습니다.

지원 사양 읽기

## Amsterdam 디자인 시스템: 완전한 중립 구성

### 컴포넌트에 필요한 모든 속성을 제공하세요

참조 표에는 선택한 스위치 스타일시트에서 사용하는 모든 변수가 나와 있습니다. 너비, 썸 치수, 테두리 너비, 색상, 윤곽선 간격, 커서, 호버 효과를 모두 명시적으로 설정했습니다. 이 예시를 위해 독자적으로 정한 값이지, Amsterdam 디자인 토큰을 복사한 것이 아닙니다. 이 구분을 통해 독자는 누락된 테마 요소를 추측하지 않고도 예제를 재현할 수 있습니다.

트랙 너비는 50px, 썸 크기는 22px, 테두리 너비는 3px입니다. 네이티브 checked 상태의 변환은 썸 너비와 테두리 너비를 바탕으로 이동 거리를 계산합니다. 따라서 트랙 너비만 변경하면 썸이 정렬되지 않을 수 있습니다. 관련된 치수를 함께 변경하고 두 상태를 모두 확인하세요.

```
: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;
}
```

코드 참조

지원 사양 읽기

## Amsterdam 디자인 시스템: 네이티브 스위치 구조

### 레이블은 입력 요소 뒤에 배치해야 합니다.

React 구현은 래퍼, 입력 요소, 연결된 빈 레이블을 렌더링합니다. CSS는 인접 형제 선택자를 사용해 입력 요소의 포커스, 체크, 비활성화 상태에 따라 레이블을 스타일링합니다. 일반 HTML 구현에서도 이 순서를 유지하세요. 입력 요소와 레이블 사이에 설명을 넣으면 해당 선택자가 작동하지 않습니다.

실제 입력 요소는 role="switch"가 지정된 체크박스입니다. 기본 checked 속성과 키보드 동작을 그대로 유지합니다. 시각적 레이블에 텍스트가 없으므로 aria-label 또는 aria-labelledby로 접근 가능한 이름을 제공하세요. 예시에서는 화면에 표시된 설정 제목을 참조하고, aria-describedby로 설명을 연결합니다.

```
<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>
```

코드 참조

지원 사양 읽기

## Amsterdam 디자인 시스템 즉시 설정

### 스위치는 현재 보기에 즉시 적용됩니다

컴포넌트 소스에서 Switch는 즉시 적용되는 이진 설정으로 정의되어 있습니다. 미리보기는 이 동작을 따릅니다. 큰 글씨 설정은 문서의 글자 크기를 바꾸고, 대비 강화 설정은 텍스트와 윤곽선을 바꾸며, 동작 줄이기 설정은 배지가 짧게 나타나는 효과를 없앱니다. 이 페이지의 선택 사항이 계정 서비스에 전송되는 것처럼 보이게 하는 저장 버튼은 없습니다.

기본값 복원은 세 개의 기본 체크 상태를 모두 해제하고 기본 문서 클래스를 다시 적용합니다. 상태 메시지에는 활성화된 설정이 표시됩니다. 페이지를 이동하거나 새로고침해도 설정은 저장되지 않습니다. 실제 서비스에서 설정 저장 기능을 추가할 수 있지만, 설정이 현재 페이지, 기기 또는 계정 중 어디에 적용되는지 명확히 밝혀야 합니다.

1. 큰 글씨를 켜고 옆에 있는 문서의 문단 글자 크기를 확인하세요.

2. 대비 강화를 포커스한 뒤 Space 키를 눌러 키보드로 전환하세요.

3. 기본값을 복원하고 세 스위치와 문서가 함께 원래 상태로 돌아오는지 확인하세요.

지원 사양 읽기

## Amsterdam 디자인 시스템 키보드, 포커스 및 동작

### 기본 입력 요소를 사용할 수 있게 유지하세요

스타일시트는 화면에 보이는 입력 요소의 너비를 줄이지만 실제 컨트롤은 그대로 유지합니다. 포커스 선택자는 뒤따르는 레이블에 윤곽선을 표시합니다. 입력 요소를 장식용 div로 바꾸면 기본 폼 의미와 동작을 잃고 키보드 지원을 별도로 구현해야 합니다. 입력 요소에 display:none을 적용하지 마세요.

기본 스타일시트는 prefers-reduced-motion:no-preference일 때만 전환 효과를 사용합니다. 문서 효과도 로컬 스위치와 별개로 운영체제 설정을 따릅니다. 시스템 수준에서 동작을 줄이도록 설정한 사용자가 예시가 차분하게 작동하기 전에 별도의 스위치를 찾아야 해서는 안 됩니다.

- 확인된 속성을 기준 상태로 사용하고, 관련 없는 시각적 활성 상태를 임의로 만들지 마세요.

- 각 설정에 안정적인 이름을 제공하고 설명을 입력 요소와 연결하세요.

- 테마의 형태나 색을 바꾼 뒤 꺼짐, 켜짐, 포커스, 비활성화 상태를 테스트하세요.

지원 사양 읽기

## Amsterdam 디자인 시스템 읽기 미리보기 구성

### 컨트롤 옆에서 효과를 보여주세요

각 설정이 문서에 미치는 영향을 보여주도록 2열 레이아웃으로 구성합니다. 애플리케이션별로 설정한 700px 중단점 아래에서는 컨트롤이 미리보기 위에 오도록 쌓입니다. 최대 너비 900px과 간격 32px은 개별 레이아웃 결정이며, 도시 전체에 적용되는 그리드 토큰의 근거가 아닙니다.

중립적인 글꼴은 Arial입니다. 본문 글자 크기는 18px이고 줄 간격은 1.5입니다. 큰 글씨 모드는 문서만 22px로 바꿉니다. 이는 애플리케이션 설정의 예시일 뿐, 브라우저 확대 기능을 대체하거나 해당 크기가 Amsterdam에서 정한 값이라는 뜻은 아닙니다. 긴 레이블은 기본 스위치 너비를 줄이지 않고 줄바꿈됩니다.

지원 사양 읽기

## Amsterdam 디자인 시스템 CSS 또는 React 통합

### 구현 계층 선택

기존 React 애플리케이션에서 검증된 Switch는 표준 입력 속성을 받고 ref를 입력 요소로 전달합니다. 제어 방식으로 사용하려면 checked와 onChange를 제공하고, 비제어 방식에서는 defaultChecked를 제공할 수 있습니다. 이 컴포넌트는 애플리케이션 저장 기능이나 계정 설정용 API을 제공하지 않습니다.

독립형 HTML 예시에는 오픈 소스 Switch CSS만 필요합니다. 설정 절차와 전체 코드에 누락된 테마 구성과 로컬 상태 처리 방식이 포함되어 있습니다. 패키지 설치 도구가 종속성으로 독점 에셋을 가져올 수 있지만, 해당 에셋이 디스크에 있다고 해서 가져오거나 배포해도 되는 것은 아닙니다. 함께 제공된 예시에는 선택한 CSS과 해당 오픈 소스 라이선스만 포함됩니다.

지원 사양 읽기

## Amsterdam 디자인 시스템 적용 및 제한 사항

### 시각적 유사성을 제휴 관계로 오해하지 않도록 하세요

도시 디자인 시스템은 지방자치단체 제품의 일관성과 접근성을 높이기 위해 마련되었습니다. 재사용 가능한 코드는 라이선스 범위 안에서 검토하고 수정해 활용할 수 있지만, 로고와 독점 글꼴 및 아이콘 에셋에는 각각 별도의 이용 약관이 적용됩니다. 미리보기에는 독자적인 브랜딩과 중립적인 콘텐츠를 사용해 Amsterdam 서비스로 오인되지 않도록 했습니다.

검증된 범위는 완성된 사용자 지정 테마와 의미 있는 로컬 동작을 갖춘 기본 컴포넌트 하나입니다. 도시 테마 전체를 재구현한 것이 아닙니다. 더 폭넓은 CSS 패키지를 도입하는 실제 제품은 이 Switch 구성을 다른 컨트롤에도 그대로 적용하기보다 추가 컴포넌트에 필요한 모든 변수를 정의하고 테스트해야 합니다.

지원 사양 읽기

## Amsterdam 디자인 시스템 컴포넌트 예시

### 완성된 중립 Switch 테마

기본 스타일시트에 필요한 모든 변수를 정의했으며, 값은 모두 독자적으로 정했습니다.

```
: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;
}
```

코드 참조

### 접근성을 갖춘 기본 구조

실제 체크박스 입력 요소, switch 역할, 인접한 시각적 레이블을 사용합니다.

```
<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>
```

코드 참조

### 완성된 즉시 적용 읽기 설정

기본 Switch CSS, 사용자 지정 테마, 화면에 표시되는 로컬 효과.

```
<!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>
```

코드 참조

## Amsterdam 디자인 시스템 에이전트 설정

### 구현 시작점

오픈 소스 CSS만 사용하며, 완성된 독자 테마와 작동하는 HTML 예시가 제공됩니다. 독점 토큰이나 에셋 묶음은 배포되지 않습니다. Sources에 있는 완성된 작동 예제 ZIP에는 미리보기에 필요한 정확한 종속성과 전체 문서도 포함되어 있습니다. 압축을 푼 뒤 해당 디렉터리에서 python3 -m http.server 8080을 실행하고 http://localhost:8080/amsterdam.html을 여세요. 모듈을 사용하는 예시는 file://로 열지 마세요.

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

### 프로젝트를 위한 프롬프트

```
Amsterdam 오픈 소스 Switch CSS와 완성된 독자 테마를 사용하세요. 래퍼/입력 요소/인접 레이블 구조, role=switch, 접근 가능한 이름을 유지하세요. 이진 설정은 즉시 적용하고 checked를 상태의 기준으로 사용하세요. 동작 줄이기 설정을 따르고 로컬 설정과 저장되는 계정 설정을 구분하세요. 관련 권한 없이 독점 토큰, 글꼴, 로고 또는 아이콘을 가져오지 마세요.
```

## Amsterdam 디자인 시스템 출처 및 범위

독립형 OpenDesign 예시입니다. Amsterdam 브랜드 토큰, Amsterdam Sans, 공식 아이콘과 로고는 포함되지 않습니다.

- 저장소 및 라이선스 오픈 소스 패키지와 독점 요소의 분리.

- CSS 계약 클래스 구조, CSS 사용법 및 테마 종속성.

- Switch 문서 즉시 적용되는 불리언 설정의 의미.

- 에셋 안내 글꼴, 아이콘, 브랜딩 및 로고 사용 제한.

- 토큰 패키지 범위 독점 토큰 계층은 별도로 관리합니다.

- 완전한 작동 예시 다운로드 전체 HTML, 로컬 CSS/JavaScript 종속 항목, 제공된 라이선스와 정확한 실행 지침이 포함된 ZIP 파일입니다. 빌드 단계는 필요하지 않습니다.

## Amsterdam 디자인 시스템 관련 리소스

### B.C. 디자인 시스템

실제 시맨틱 토큰, 네이티브 React Aria 컨트롤, 조건부 연락처 필드, 완전한 유효성 검사 동작을 갖춘 B.C. 스타일의 알림 설정 양식을 만드세요.

### Canada.ca 디자인 시스템

GC 디자인 시스템의 타이포그래피, 시맨틱 토큰, 기본 웹 컴포넌트를 살펴보세요. 공개 및 빈 상태 동작을 포함한 검색 가능한 완성형 준비 가이드입니다.

### CFPB 디자인 시스템

CFPB의 편집용 그리드, 현재 타이포그래피와 기본 Expandables를 구현합니다. 작동하는 읽기 워크시트와 검증된 패키지 API, 명확한 아이덴티티 경계를 제공합니다.


- [구현 레퍼런스](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [출처](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [출처](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [지원 사양 읽기](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [코드 참조](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [지원 사양 읽기](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [코드 참조](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [지원 사양 읽기](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [저장소 및 라이선스 오픈 소스 패키지와 독점 요소의 분리.](https://github.com/Amsterdam/design-system)
- [CSS 계약 클래스 구조, CSS 사용법 및 테마 종속성.](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Switch 문서 즉시 적용되는 불리언 설정의 의미.](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [에셋 안내 글꼴, 아이콘, 브랜딩 및 로고 사용 제한.](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [토큰 패키지 범위 독점 토큰 계층은 별도로 관리합니다.](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)