# NL 디자인 시스템

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

기존 테마를 전환하고, 컬렉션 위치를 수정한 뒤, 레코드를 변경하지 않고 저장하거나 취소하세요.

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

구체적인 기여자 구성: @utrecht/component-library-css 9.0.15. 공개 토큰 이름과 클래스는 검토한 라이브러리 API입니다. “예시”로 표시된 숫자 값과 색상은 애플리케이션에만 적용되는 설정이며, 범용 NL Design System 사양이 아닙니다.

### 아키텍처

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Component implementation | Utrecht CSS 9.0.15 | 선택한 기여자 구현일 뿐, 유일한 NL Design System 구현은 아닙니다. |
| Theme boundary | Wrapper-scoped CSS custom properties | 동일한 시맨틱 마크업으로 여러 정체성을 표현할 수 있습니다. |
| Source design tokens | Design Tokens JSON standard | 각 조직은 재사용할 수 있도록 자체 브랜드 스타일을 정의합니다. |
### 실제 버튼 토큰 API

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --utrecht-button-min-block-size | 48px in example; 44px library fallback | 명시적인 타깃 크기. |
| --utrecht-button-border-radius | 4px / 8px in example themes | 애플리케이션이 관리하는 크기 설정. |
| --utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | 독자적인 동작 색상, 흰색 전경색. |
| --utrecht-button-font-size | 1rem in example | 컴포넌트 텍스트 역할. |
| --utrecht-focus-outline-width | 3px in example | 공개 포커스 링 설정. |
### 데이터 목록 API

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| .utrecht-data-list + .utrecht-data-list--rows | dl root | 의미가 명확한 이름 지정 값. |
| .utrecht-data-list__item | Key/value wrapper | 반응형 그리드 행. |
| --utrecht-data-list-rows-column-min-inline-size | 12ch in example | 영수증 레이블을 기준으로 정한 최소 열 너비. |
| --utrecht-data-list-rows-column-inline-size | 45% in example | 공간이 충분하면 두 개의 열을 사용합니다. |
| --utrecht-data-list-rows-gap | 24px in example | 키와 값 사이의 간격. |
## NL 디자인 시스템 전체 가이드

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

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

## NL 디자인 시스템 구성 선택

### 하나의 테마가 아닌 생태계

> NL Design System는 여러 조직의 기여 요소를 조합할 수 있도록 명시적으로 지원하며, 디자인 토큰을 통해 각 조직의 브랜드 스타일을 설명합니다. 따라서 실제로 도입할 때 선택하는 단위는 컴포넌트 구현과 테마의 조합입니다. 이 페이지에서는 Utrecht CSS 기여자의 구현과 독자적인 데모 테마를 선택합니다.

그렇다고 Utrecht가 모든 NL Design System 컴포넌트의 표준 구현이라는 뜻은 아닙니다. 이 선택은 국가 공통 글꼴, 파란색 또는 간격 척도를 지어내지 않으면서도 독자가 재현할 수 있는 방법을 제공합니다. 실제 네이티브 CSS 패키지는 @utrecht/component-library-css 9.0.15입니다.

지원 사양 읽기

## NL 디자인 시스템 공개 컴포넌트 토큰

### 애플리케이션 값은 라이브러리 CSS와 분리하세요

제공된 테마는 래퍼에 공개 --utrecht-* 사용자 지정 속성을 설정합니다. 버튼은 이 값을 사용하며, 클래스는 컴포넌트 구성을 결정합니다. --_utrecht-로 시작하는 변수는 검토한 CSS의 내부 계산에 사용됩니다. 이를 직접 변경하면 애플리케이션이 구현 세부사항에 종속될 수 있습니다.

예시의 청록색 #005a5b와 보라색 #57328c는 애플리케이션에만 적용되는 독자적인 색상입니다. 이 색상은 특정 지방자치단체의 정체성을 모방하지 않고도 브랜드를 변경할 수 있음을 보여 줍니다. 두 색상 모두 흰색 동작 텍스트를 사용하며, 호버 색조는 별도로 정의합니다. 어느 색상도 공식 NL Design System 토큰 값으로 설명하지 않습니다.

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

코드 참조

지원 사양 읽기

## NL 디자인 시스템 타이포그래피 및 치수

### 테마에서 빠진 설정을 지정하세요

데모에서는 문서 읽기에 적합하도록 Arial, sans-serif를 18px 크기와 1.6 행간으로 설정합니다. 첫 번째 테마는 32px 제목과 모서리 반경 4px 버튼을 사용하고, 두 번째 테마는 본문 크기는 동일하게 유지하면서 모서리 반경 8px 버튼과 세리프 제목을 사용합니다. 테마가 바뀌는 것을 분명히 확인할 수 있도록 의도적으로 차이를 두었습니다.

토큰이 없을 때 네이티브 버튼은 대체값으로 최소 블록 크기 44px를 사용합니다. 이 테마에서는 48px와 블록/인라인 패딩을 명시적으로 지정합니다. 이는 추정한 생태계 공통 치수가 아니라 애플리케이션에서 선택한 값을 사용하는 실제 CSS API입니다. 레이아웃은 이 예제에서 제공하는 콘텐츠 최대 너비 56rem과 간격 24px를 사용합니다.

지원 사양 읽기

## NL 디자인 시스템 데이터 목록 구성

### 이름이 지정된 값을 위한 정의 목록

접수 확인서에서는 dl에 .utrecht-data-list와 .utrecht-data-list--rows 수정자를 사용합니다. 각 .utrecht-data-list__item은 dt 키와 dd 값을 묶습니다. rows 수정자는 반응형 그리드, 행 간격 및 테두리를 활성화합니다. 이 수정자가 없으면 기본 데이터 목록에는 해당 레이아웃이 적용되지 않습니다. HTML는 테마가 로드되기 전에도 의미가 유지됩니다.

접수 확인서에는 수령 장소, 참조 번호, 선택한 항목이 표시됩니다. 반복되는 레코드를 나열하는 표가 아닙니다. 각 키는 동일한 요청의 서로 다른 속성을 나타냅니다. 좁은 화면에서는 키와 값이 세로로 쌓입니다. 애플리케이션은 긴 장소 이름이 잘리지 않고 표시되도록 행 토큰을 설정합니다.

- 속성 이름에는 dt를, 현재 값에는 dd를 사용합니다.

- 문서화된 항목 래퍼 안에 각 키/값 쌍을 넣습니다.

- 식별자와 긴 장소 이름이 페이지 너비를 늘리는 대신 줄바꿈되도록 합니다.

지원 사양 읽기

## NL 디자인 시스템 액션 의미

### 버튼 클래스만으로 워크플로가 구현되지는 않습니다

.utrecht-button은 기본 컴포넌트를 제공하고, .utrecht-button--primary-action은 기본 액션 스타일 토큰 그룹을 선택합니다. 주변 양식을 제출하지 않는 로컬 액션에는 네이티브 요소에 type=button을 지정해야 합니다. 애플리케이션에서 편집 패널을 열기 전까지 데이터 목록은 읽기 전용으로 유지됩니다.

데모의 ‘수령 장소 변경’ 버튼을 누르면 네이티브 라디오 버튼이 있는 fieldset이 표시됩니다. 저장하면 정의 목록의 값이 업데이트되고, 새로운 장소가 정중한 상태 알림 영역을 통해 안내됩니다. 취소하면 저장된 값을 변경하지 않고 패널을 닫습니다. 이러한 동작은 애플리케이션 코드로 구현해야 합니다. CSS 번들만 설치한다고 해서 구현되는 것은 아닙니다.

지원 사양 읽기

## NL 디자인 시스템 안전하게 테마 전환하기

### 래퍼를 변경하고 레코드는 유지합니다

테마 선택기는 바깥쪽 래퍼의 data-theme을 변경합니다. 컴포넌트 클래스, 레코드 값, 선택된 라디오 버튼은 그대로 유지됩니다. 이를 통해 화이트 라벨 분리의 구체적인 예를 확인할 수 있습니다. 동일한 접수 확인서와 상호작용에 서로 다른 시각적 아이덴티티를 적용할 수 있습니다.

여기서 테마 전환은 개발용 데모일 뿐, 공공 서비스에서 반드시 제공해야 하는 설정은 아닙니다. 실제 다기관 서비스에서는 신뢰할 수 있는 애플리케이션 설정에 따라 테마를 선택하세요. 테마 값으로 자격 요건이나 유효성 검사, 상태의 의미가 달라져서는 안 됩니다.

1. 버전이 지정된 컴포넌트 CSS를 한 번만 로드합니다.

2. 관련 테마 토큰을 컨테이너 요소에 적용합니다.

3. 해당 컨테이너 안에 동일한 시맨틱 컴포넌트 마크업을 렌더링합니다.

4. 지원하는 각 테마에서 포커스, 줄바꿈, 상태 색상을 확인합니다.

지원 사양 읽기

## NL 디자인 시스템 접근성과 성숙도

### 선택한 기여 항목을 평가합니다

NL Design System 릴레이 모델은 기여 항목이 공유 표준을 향해 발전하는 과정을 설명합니다. 커뮤니티 저장소에 컴포넌트가 있다는 사실만으로 모든 구성 방식이 프로덕션에 적합하다고 보장되지는 않습니다. 컴포넌트 문서에서 선택한 구현, 지원 상태, 현재 성숙도를 확인하세요.

미리 보기에는 장소 선택을 위한 범례가 계속 표시되고, 저장된 결과가 안내되며, 편집이 끝나면 처음 실행한 버튼으로 포커스가 돌아갑니다. 테마를 전환해도 포커스는 유지됩니다. 네이티브 라디오 버튼의 키보드 조작과 앱 자체의 포커스 윤곽선으로 화면을 사용할 수 있습니다. 이러한 확인은 기여 컴포넌트의 테스트를 보완할 뿐, 대체하지는 않습니다.

지원 사양 읽기

## NL 디자인 시스템 설치 및 테마 관리

### CSS만 사용하는 통합

검증된 CSS 패키지를 설치하고 CSS를 지원하는 번들러에서 dist/index.css를 가져온 다음, 테마 스타일시트를 불러옵니다. 여기서 사용하는 CSS 전용 데이터 목록과 버튼에는 React 공급자나 JavaScript 컴포넌트 초기화 코드가 필요하지 않습니다. 기존 애플리케이션 스크립트가 편집, 저장, 취소, 테마 전환을 담당합니다.

번들에 포함된 컴포넌트 소스는 EUPL-1.2 라이선스에 따라 제공됩니다. 배포 시 소스 및 라이선스 고지를 유지하고, 코드 라이선스가 지방자치단체 로고 재사용을 허용한다고 간주하지 마세요. 이 예제는 자체 테마를 사용하며 지방자치단체 표장을 포함하지 않습니다.

지원 사양 읽기

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

### 네이티브 버튼이 사용하는 테마 토큰

선택된 버튼 테마 전체입니다. 값은 직접 만들었으며, API 이름은 Utrecht에서 가져왔습니다.

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

코드 참조

### 이름이 지정된 값과 편집 실행 버튼

기여 컴포넌트 클래스를 사용한 시맨틱 dl/dt/dd입니다.

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

코드 참조

### 완전한 독립 실행형 예시

전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.

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

코드 참조

- Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.

- 벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.

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

### 구현 시작점

독립형 미리 보기에서는 동일한 버전의 네이티브 CSS를 로컬에서 불러옵니다. CSS 전용 버튼/데이터 목록 컴포넌트에는 React 공급자가 필요하지 않습니다. 라이브러리와 함께 자체 테마 값을 제공해야 합니다. Sources에 있는 완성된 예제 ZIP에는 미리 보기에 필요한 정확한 의존성과 전체 문서도 포함되어 있습니다. 압축을 푼 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/nl-design-system.html을 여세요. 모듈 기반 예제를 file://로 열지 마세요.

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

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

```
접수 확인용 정의 목록과 기본 버튼에 @utrecht/component-library-css 9.0.15를 사용하세요. 공개 --utrecht-* 토큰으로 자체 래퍼 범위 테마를 제공하고 내부 --_utrecht-* 변수는 수정하지 마세요. 라벨이 있는 라디오 선택 항목, 저장/취소, 정중한 업데이트 안내, 포커스 복귀를 포함해 장소 편집을 구현하세요. 컴포넌트 마크업을 교체하거나 데이터를 잃지 않고 두 번째 자체 테마를 적용해 보세요. 숫자가 포함된 테마 값은 모두 애플리케이션에서 선택한 값임을 명시하세요.
```

## NL 디자인 시스템 자료 및 범위

NL Design System는 특정 브랜드에 종속되지 않는 생태계입니다. 이 교육용 예제는 기여자가 만든 구현 하나와 자체 테마 두 가지를 선택했습니다. 국가 차원의 시각적 스타일을 표방하지 않으며 지방자치단체의 아이덴티티도 사용하지 않습니다.

- 생태계 개요 공공 서비스를 위한 공유 디자인 리소스와 커뮤니티 맥락입니다.

- 개발자 소개 컴포넌트, 조직별 테마, 디자인 토큰 아키텍처입니다.

- 컴포넌트 카탈로그 문서화된 컴포넌트와 관련 참고 자료를 확인합니다.

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

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

### NSW 디자인 시스템

독립적인 로컬 참고 자료 목록과 함께 NSW 디자인 토큰, Public Sans 타이포그래피, 키보드로 접근할 수 있는 네이티브 탭을 살펴보는 전체 워크숍 가이드입니다.

### ONS 디자인 시스템

서로 모순될 수 없는 설문 응답을 만드세요. 네이티브 ONS 체크박스, 상호 배타적인 응답, 정확한 글꼴 및 색상 참조, 완결된 로컬 검토 흐름을 사용합니다.

### Ontario 디자인 시스템

실제 서체, 공개된 간격 및 색상 값, 네이티브 아코디언 동작, 버전이 일치하는 전체 소스를 갖춘 Ontario 스타일의 긴 가이드를 만드세요.


- [구현 레퍼런스](https://github.com/nl-design-system/utrecht)
- [출처](https://www.nldesignsystem.nl/handboek/developer/introductie/)
- [출처](https://github.com/nl-design-system/utrecht/tree/main/packages/button)
- [출처](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list)
- [지원 사양 읽기](https://www.nldesignsystem.nl/handboek/developer/introductie/)
- [코드 참조](https://github.com/nl-design-system/utrecht/tree/main/packages/button)
- [지원 사양 읽기](https://github.com/nl-design-system/utrecht/tree/main/packages/button)
- [지원 사양 읽기](https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-css)
- [지원 사양 읽기](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list)
- [지원 사양 읽기](https://www.nldesignsystem.nl/handboek/estafettemodel/)
- [코드 참조](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list)
- [코드 참조](https://github.com/nl-design-system/utrecht)
- [생태계 개요 공공 서비스를 위한 공유 디자인 리소스와 커뮤니티 맥락입니다.](https://www.nldesignsystem.nl/)
- [개발자 소개 컴포넌트, 조직별 테마, 디자인 토큰 아키텍처입니다.](https://www.nldesignsystem.nl/handboek/developer/introductie/)
- [컴포넌트 카탈로그 문서화된 컴포넌트와 관련 참고 자료를 확인합니다.](https://www.nldesignsystem.nl/componenten/)