# Duet 디자인 시스템

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

출발일과 귀국일을 설정하고, 잘못된 기간을 확인한 뒤 시작일과 종료일을 포함한 날짜 수를 계산해 보세요.

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

Duet 공개 문서 스냅샷: 기본 시스템 구성 요소, LocalTapiola 기본 토큰, 문서화된 10.7.0/CDN 통합을 담았습니다. 별도 배포되는 @duetds/date-picker 1.x 패키지가 아닙니다. 일부 반경 토큰은 아직 검토 중으로 표시되어 있습니다.

### 기본 테마와 Turva 테마의 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --color-primary | #0077b3 | LocalTapiola 동작 색상. |
| --color-primary-dark | #004b81 | 더 어두운 상호작용 상태. |
| --color-primary-darker | #00619b | 링크 역할. |
| --color-primary-light | #c6e1ee | 기간 강조색. |
| --color-secondary | #082a4d | 본문 텍스트. |
| --color-primary-turva | #e61740 | 별도 테마인 Turva의 동작 색상. |
| --color-danger | #d61c52 | 유효성 검사. |
| --radius-default | 4px | 입력 요소와 컨테이너. |
| --radius-pill | 20rem | 버튼. |
| --radius-medium | 8px; In Review | 프로덕션 사용이 가능하다고 주장하지 마세요. |
### 간격 토큰

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --space-xxx-small | 2px | 좁은 간격. |
| --space-xx-small | 4px | 좁은 간격. |
| --space-x-small | 8px | 좁은 간격. |
| --space-small | 12px | 작은 간격. |
| --space-medium | 16px | 기본 간격. |
| --space-large | 20px | 구성 요소 사이 간격. |
| --space-x-large | 28px | 넓은 간격. |
| --space-xx-large | 36px | 버튼의 가로 안쪽 여백. |
| --space-xxx-large | 48px | 섹션. |
| --size-layout-max-width | 1110px | 문서에 명시된 레이아웃 최대 너비. |
### 글꼴 크기 체계

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| $font-size-medium | 16px / 1rem | 본문 및 H5. |
| $font-size-large | 20px / 1.25rem | H4. |
| $font-size-x-large | 24px / 1.5rem | H3. |
| $font-size-xx-large | 36px / 2.25rem | H2. |
| $font-size-xxx-large | 48px / 3rem | H1. |
| $font-size-xxxx-large | 72px / 4.5rem | H0. |
### 날짜 선택기 계약

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| value / min / max | YYYY-MM-DD strings | 화면 표시 텍스트가 아닌 ISO 값으로 저장합니다. |
| duetChange | detail.value and detail.valueAsDate | 선택한 날짜 이벤트. |
| validity | badInput / valueMissing / rangeOverflow / rangeUnderflow / customError | 확인한 뒤 적용하세요. |
| setFocus() | Promise<void> | 입력 요소에 포커스를 둡니다. 호스트의 focus()는 사용하지 않습니다. |
| show() / hide() | Promise<void> | 달력 및 포커스 관리. |
| language | Deprecated | html lang을 사용합니다. |
| disallow-weekends | Boolean | 구성 요소 단위로 제외합니다. |
### 동작 속성

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| variation="primary" | Main action | 화면마다 주요 동작은 하나만 둡니다. |
| submit | Boolean, default false | 양식 제출을 명시적으로 선택하도록 합니다. |
| url | Anchor destination | 탐색 의미. |
| expand | 100% container | 넓은 동작 영역. |
| theme | default / turva / inherited empty | 브랜드 선택. |
| margin="none" | Remove automatic margin | 간격은 애플리케이션에서 제어합니다. |
## Duet 디자인 시스템 전체 가이드

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

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

## Duet 디자인 시스템 Duet 기본 시스템과 오픈 소스 선택기는 서로 별개입니다

### 예시와 함께 패키지 계약을 명시합니다

> Duet은 테마가 적용된 구성 요소와 기반 요소를 통해 LocalTapiola와 Turva를 지원합니다. 별도로 배포되는 @duetds/date-picker 프로젝트는 범위가 더 좁은 오픈 소스 배포판입니다. 태그 이름이 같더라도 속성, 현지화 설정 또는 CSS 변수를 최신 기본 디자인 시스템과 서로 바꿔 쓸 수 있는 것은 아닙니다.

이 페이지의 통합 코드는 기본 시스템을 대상으로 합니다. 오프라인 미리보기는 기본 날짜 입력과 링크된 Duet 토큰을 바탕으로 한 독자적인 스타일을 사용합니다. 기간 규칙을 보여 주지만 Duet의 달력 팝업이나 키보드 동작 모델을 실행한다고 주장하지 않습니다.

지원 사양 읽기

## Duet 디자인 시스템 브랜드 파랑과 상태 빨강은 용도가 다릅니다

### 강조색 하나를 바꾸는 대신 테마를 사용합니다

기본 LocalTapiola 테마는 파란색 동작 색상과 짙은 파란색 본문 텍스트를 조합합니다. Turva에는 별도의 빨간색 동작 색상과 보조 텍스트 역할이 있습니다. 동작 색상만 바꾸면 나머지 테마 관계가 빠집니다. 현재 표에서는 이전 Turva 색조 중 일부도 더 이상 사용하지 않는 것으로 표시합니다. 과거 팔레트 항목을 모두 복사하면 이미 폐기된 지침이 그대로 남게 됩니다.

자체 제작한 여행 날짜 예시에서는 다음 동작에 파란색을 사용하고, 선택한 기간을 수정해야 할 때만 빨간색을 사용합니다. 이는 일정 계획을 보여 주는 예시이지, 보험 추천이나 견적 또는 구매 안내가 아닙니다.

지원 사양 읽기

## Duet 디자인 시스템 16px 본문 크기를 기준으로 위계를 구성합니다

### 모든 화면에서 제목을 크게 표시할 필요는 없습니다

Duet의 표에는 큰 크기 구간에서 16, 20, 24, 36, 48, 72px 단계가 있습니다. 화면 안에 삽입되는 계획 패널에는 24px 단계를 사용해 동작과 날짜 레이블을 눈에 띄게 합니다. 마케팅용 72px 크기는 소형 양식의 기본값이 아닙니다.

LocalTapiola와 Turva의 글꼴 패키지는 서로 별도의 에셋입니다. 오프라인 해석에서는 시스템 기본 글꼴을 사용하며 브랜드 글꼴 파일을 포함하지 않습니다. 사용 승인을 받은 애플리케이션은 문서에 명시된 글꼴 경로를 통해 적절한 글꼴 모음을 불러온 다음, 이에 맞는 굵기 토큰을 사용해야 합니다.

지원 사양 읽기

## Duet 디자인 시스템 실제 20px 및 28px 단계를 사용합니다

### Duet은 일반적인 8px 간격 체계가 아닙니다

익숙한 2의 거듭제곱 간격 외에도 12, 20, 28, 36px가 포함되어 있습니다. 이러한 중간 간격은 시스템의 형태 리듬을 맞출 때 중요합니다. 가로 레이아웃에서는 두 필드 사이에 20px 간격을 사용하고, 세로로 쌓을 때는 각 레이블이 해당 필드와 함께 이동하도록 하세요. 예시의 중단점은 애플리케이션에서 정하는 값입니다.

기본 컨트롤 모서리에는 4px를 사용하고, 버튼에는 필 모서리 반경을 사용합니다. 토큰 참조에 있는 일부 최신 컨테이너 모서리 반경 값은 명시적으로 검토 중(In Review)입니다. 이 가이드에서는 나열된 토큰을 모두 승인된 것으로 다루지 않고 해당 상태를 그대로 유지합니다.

지원 사양 읽기

## Duet 디자인 시스템 ISO 값을 저장하고 표시 형식을 설명하세요

### 지역화된 표시 문자열을 데이터로 파싱하지 마세요

컴포넌트의 값과 범위에는 YYYY-MM-DD를 사용합니다. 선택한 날짜 이벤트에는 문자열과 Date 객체가 모두 포함됩니다. 비교와 저장에는 문자열을 사용하고, 필드에 지역화된 형식으로 표시하는 것은 프레젠테이션의 문제로 다루세요. 문서 언어가 현재 지역화를 적용하는 진입점이며, 기존 language 속성은 더 이상 사용되지 않습니다.

이 예제에서는 2027년 6월에 해당하는 날짜만 허용합니다. 이렇게 고정된 범위를 사용하면 테스트를 일관성 있게 수행할 수 있으며, 이는 예시에서만 적용되는 제약입니다. 실제 프로덕션 양식에서는 제품 규칙에 따라 허용 범위를 정하고 필드 옆에 해당 규칙을 설명해야 합니다.

지원 사양 읽기

## Duet 디자인 시스템 날짜가 유효해도 범위가 유효한 것은 아닙니다

### 각 필드가 유효한지 확인한 뒤 날짜 간 관계를 검사하세요

컴포넌트의 유효성 객체는 각 필드의 오류를 설명합니다. 출발일보다 이른 귀국일도 유효한 달력 날짜일 수 있으므로, 애플리케이션에서 두 날짜를 별도로 검사해야 합니다. 기본 예제에서는 명확한 오류를 표시하고 setFocus()를 사용합니다. 이는 내부 입력 요소에 포커스를 이동하는 문서화된 메서드입니다.

날짜 수는 양 끝 날짜를 포함해 셉니다. 출발일과 귀국일이 같으면 달력상 하루입니다. UTC 자정 기준으로 ISO 날짜를 변환하면 서머타임 변경으로 인해 달력상 하루의 기간이 소수점 값이 되는 일을 방지할 수 있습니다. 이 계산은 애플리케이션에서 직접 구현한 로직이며 Duet의 요금 규칙이 아닙니다.

1. 시작일이나 종료일이 없거나, 형식이 잘못되었거나, 허용 범위를 벗어난 경우 거부하세요.

2. 귀국일이 출발일보다 이른 경우 거부하세요.

3. 수정이 필요한 필드로 포커스를 이동하세요.

4. 두 검사를 모두 통과한 뒤에만 양 끝 날짜를 포함한 범위를 준비하세요.

지원 사양 읽기

## Duet 디자인 시스템 기본 작업 버튼이 제출을 의미하지는 않습니다

### Duet은 submit 속성으로 제출 여부를 명시합니다

메인 시스템 버튼은 submit을 사용해 양식 제출을 명시적으로 선택하며, 기본값은 false입니다. 제공된 구성 예제는 클릭 동작으로 로컬 결과를 준비하므로 해당 속성이 필요하지 않습니다. 이동할 목적지가 있다면 url을 사용하세요. 그러면 앵커 의미가 적용됩니다.

두 입력 중 하나라도 변경되면 미리보기에서 준비된 메시지를 지웁니다. 그렇지 않으면 방문자가 이미 값을 바꿨는데도 해당 메시지가 그 값을 확인해 주는 것처럼 보일 수 있습니다. 비동기 작업이 없으므로 스피너는 표시하지 않습니다.

- 기본 준비 작업은 하나만 사용하세요.

- 결과가 로컬에서 생성된다는 점을 명시하세요.

- 성공을 나타내는 문구를 재사용해 정책이 생성된 것처럼 보이게 하지 마세요.

지원 사양 읽기

## Duet 디자인 시스템 메인 시스템 에셋은 호환되는 세트로 고정하세요

### 이 샘플은 문서화된 특정 시점의 스냅샷이며, 최신 버전을 보장하지 않습니다

검토한 사용법 페이지에는 컴포넌트 10.7.0과 CSS 5.1.4가 기재되어 있지만, 검색 색인 스냅샷에는 이미 더 최신 릴리스가 언급되어 있습니다. 이 예제에서는 직접 검토한 두 버전을 함께 사용합니다. 프로덕션에 적용할 때는 하나의 릴리스를 선택하고, 여기에 맞는 CSS, 글꼴 및 컴포넌트 동작을 확인하세요.

날짜 필드는 커스텀 요소입니다. 메서드를 호출하기 전에 해당 요소의 정의가 완료될 때까지 기다리고, duetChange에 리스너를 연결한 뒤, 네이티브 change 이벤트를 가정하지 말고 문서화된 페이로드를 읽으세요. 메인 시스템 CDN 모듈과 독립형 피커를 같은 페이지에서 함께 사용하지 마세요. 둘 다 같은 태그를 정의합니다.

지원 사양 읽기

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

### 완전한 독립형 인터랙티브 예제

문서 전체를 index.html로 저장한 뒤 브라우저에서 여세요. 네이티브 날짜 입력을 사용해 오프라인에서 HTML를 해석하고 검증된 Duet 기본 테마 값을 적용한 예제이며, Duet 캘린더 런타임은 아닙니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Duet travel period interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f7fa;color:#082a4d;font:16px/1.5 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:36px 28px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}h1{font-size:36px;line-height:1.2;font-weight:600;margin:0 0 20px}p{margin:0 0 20px}.hero{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;margin-bottom:28px}.art{height:170px;position:relative;overflow:hidden;border-radius:50%;background:#c6e1ee}.sun{position:absolute;top:25px;right:60px;width:36px;height:36px;border-radius:50%;background:white}.hill{position:absolute;background:#0077b3;width:210px;height:170px;bottom:-95px;left:-10px;transform:rotate(25deg);border-radius:24px}.hill.two{left:135px;background:#00619b;bottom:-110px;transform:rotate(-25deg)}.road{position:absolute;width:150px;height:200px;border:12px solid white;border-radius:50%;top:65px;left:95px;transform:rotate(25deg)}.card{background:white;border-radius:4px;padding:28px;box-shadow:0 2px 8px #082a4d0d;display:grid;grid-template-columns:1fr 230px;gap:28px}h2{font-size:24px;line-height:1.3;margin:0 0 20px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-weight:600;margin-bottom:8px}input{width:100%;max-width:100%;min-width:0;border:1px solid #909599;border-radius:4px;font:inherit;color:inherit;padding:12px;background:white}input[aria-invalid=true]{border-color:#d61c52}button{background:#0077b3;color:white;border:0;border-radius:20rem;padding:12px 36px;font:600 16px/1.5 system-ui;cursor:pointer}button:hover{background:#004b81}button:focus-visible,input:focus-visible{outline:3px solid #082a4d;outline-offset:3px}.error{font-size:14px;color:#d61c52;min-height:24px;margin:8px 0 20px}.calendar{background:#f0f7fa;border-radius:4px;padding:20px}.calendar strong{display:block;margin-bottom:12px}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px;text-align:center}.grid span{padding:3px 0}.grid .in-range{background:#c6e1ee}.grid .endpoint{background:#0077b3;color:white;border-radius:50%}.caption{font-size:12px;margin:12px 0 0}.result{margin-top:20px;background:#e4f1f7;padding:20px;border-radius:4px}.result:empty{display:none}.boundary{font-size:12px;margin-top:28px}.hint{font-size:14px}@media(max-width:650px){main{padding:24px 16px}.hero{grid-template-columns:1fr}.art{display:none}h1{font-size:28px}.card{grid-template-columns:1fr;padding:20px}.fields{grid-template-columns:1fr;gap:16px}.calendar{max-width:300px;width:100%}button{width:100%;padding:12px 20px}}
</style><main><div class="hero"><div><div class="eyebrow">Travel period planner</div><h1>Make time for a change of scenery.</h1><p>Choose a departure and return date to explore an inclusive calendar-day count.</p></div><div class="art" aria-hidden="true"><div class="sun"></div><div class="hill"></div><div class="hill two"></div><div class="road"></div></div></div><div class="card"><section><h2>When will you travel?</h2><p class="hint" id="hint">Use dates from 1–30 June 2027. This fixed month is for demonstration.</p><form novalidate><div class="fields"><div><label for="start">Departure</label><input id="start" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-10" required aria-describedby="hint error"></div><div><label for="end">Return</label><input id="end" type="date" min="2027-06-01" max="2027-06-30" value="2027-06-17" required aria-describedby="hint error"></div></div><div class="error" id="error" role="alert"></div><button type="submit">Prepare date range</button></form></section><aside class="calendar"><strong>June 2027</strong><div class="grid" id="calendar" aria-hidden="true"></div><p class="caption" id="range-caption">10–17 June selected</p></aside></div><div class="result" id="result" role="status"></div><p class="boundary">Independent HTML interpretation of Duet tokens with native date fields. The calendar image is a non-interactive range overview. No insurance quote, booking or policy is created.</p></main><script>const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result'),error=document.querySelector('#error');function valid(){return start.validity.valid&&end.validity.valid&&start.value&&end.value&&end.value>=start.value}function draw(){let days=['M','T','W','T','F','S','S'].map(d=>'<span>'+d+'</span>').join('')+'<span></span>';for(let i=1;i<=30;i++){let iso='2027-06-'+String(i).padStart(2,'0'),range=valid()&&iso>=start.value&&iso<=end.value,edge=range&&(iso===start.value||iso===end.value);days+='<span class="'+(edge?'endpoint':range?'in-range':'')+'">'+i+'</span>'}document.querySelector('#calendar').innerHTML=days;document.querySelector('#range-caption').textContent=valid()?start.value+' to '+end.value:'Choose a valid range to highlight it.'}function changed(){result.textContent='';error.textContent='';start.removeAttribute('aria-invalid');end.removeAttribute('aria-invalid');draw()}[start,end].forEach(el=>el.oninput=changed);document.querySelector('form').onsubmit=e=>{e.preventDefault();let bad;if(!start.value||!start.validity.valid){error.textContent='Choose a departure date in June 2027.';bad=start}else if(!end.value||!end.validity.valid){error.textContent='Choose a return date in June 2027.';bad=end}else if(end.value<start.value){error.textContent='Return must be on or after departure.';bad=end}if(bad){bad.setAttribute('aria-invalid','true');bad.focus();result.textContent='';return}const days=(Date.parse(end.value+'T00:00:00Z')-Date.parse(start.value+'T00:00:00Z'))/86400000+1;result.textContent=days+' calendar '+(days===1?'day':'days')+', including departure and return. Local draft: '+start.value+' to '+end.value+'. No policy created.'};draw();</script></html>
```

코드 참조

- 이 문서에서는 브라우저 기본 날짜 컨트롤을 사용합니다. 별도의 Duet 예제에서는 메인 시스템 피커를 사용합니다. 이를 독립형 오픈 소스 날짜 피커 패키지와 혼동하지 마세요.

### 메인 시스템 Date Picker 두 개의 유효성을 검사합니다

레이블이 있는 필드 두 개, 6월 날짜 범위 제한, 순서가 올바른 양 끝 날짜, 오류가 있는 피커로 포커스 이동, 양 끝 날짜를 포함한 날짜 수 계산.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

코드 참조

- 이 예제에서는 메인 시스템 CDN을 통해 @duetds/components를 사용하며, @duetds/date-picker 1.x는 사용하지 않습니다.

- 시작일과 종료일이 같은 범위는 양 끝 날짜를 포함해 하루입니다.

- UTC 연산을 사용하면 날짜 수 계산에서 서머타임 오프셋을 피할 수 있습니다.

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

### 구현 시작점

검토한 통합 페이지에 명시된 버전을 사용한 메인 시스템 CDN 구성 전체입니다. 공개 검색 스냅샷에는 더 최신 버전도 표시되어 있으므로, 이것이 최신이라고 가정하지 말고 호환되는 릴리스를 고정하세요. 글꼴은 이 문서에서 재배포하지 않습니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Date range draft</title>
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/5.1.4/lib/duet.min.css">
<script type="module" src="https://cdn.duetds.com/api/components/10.7.0/lib/duet/duet.esm.js"></script>
<style>main{max-width:680px;margin:auto;padding:28px}.range{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:576px){.range{grid-template-columns:1fr}}</style>
<main><h1>Choose a travel period</h1><p>Demonstration only. No insurance is quoted or purchased.</p><div class="range">
<duet-date-picker id="start" label="Departure" required expand value="2027-06-10" min="2027-06-01" max="2027-06-30"></duet-date-picker>
<duet-date-picker id="end" label="Return" required expand value="2027-06-17" min="2027-06-01" max="2027-06-30"></duet-date-picker></div>
<duet-button id="prepare" variation="primary">Prepare date range</duet-button>
<p id="result" role="status"></p></main><script type="module">
await customElements.whenDefined('duet-date-picker');
const start=document.querySelector('#start'),end=document.querySelector('#end'),result=document.querySelector('#result');
function error(picker){const v=picker.validity;if(!picker.value)return 'Choose a date.';if(v&&!v.valid)return 'Choose a valid date in June 2027.';return '';}
function validate(){start.error=error(start);end.error=error(end);if(!start.error&&!end.error&&end.value<start.value)end.error='Return must be on or after departure.';return !start.error&&!end.error;}
[start,end].forEach(p=>p.addEventListener('duetChange',()=>{result.textContent='';validate()}));
document.querySelector('#prepare').addEventListener('click',async()=>{if(!validate()){await(start.error?start:end).setFocus();return;}const a=Date.parse(start.value+'T00:00:00Z'),b=Date.parse(end.value+'T00:00:00Z');result.textContent=`Local range: ${start.value} to ${end.value}, ${(b-a)/86400000+1} calendar days inclusive. No policy created.`;});
</script></html>
```

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

```
레이블이 있는 Date Picker 두 개, ISO 값, 유효성 검사를 사용해 Duet 메인 시스템의 날짜 범위를 구성하세요. 양 끝 날짜의 순서는 별도로 검사하고, 오류가 있으면 setFocus를 호출하며, 기본 로컬 준비 작업을 명시적으로 사용하세요. 같은 페이지에서 독립형 피커 패키지는 사용하지 마세요.
```

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

독립적인 OpenDesign 참고 자료입니다. 독창적인 일정 계획 예제로, 정책, 예약 또는 견적을 생성하지 않습니다. 메인 시스템 Duet과 별도의 오픈 소스 날짜 피커는 서로 다른 계약을 따릅니다.

- 디자인 토큰 테마 색상, 간격 및 토큰 상태.

- 타이포그래피 간격 체계와 별도의 브랜드 글꼴.

- Date Picker ISO 값, 유효성 검사 및 메서드.

- Button 제출 선택 속성 및 변형.

- 컴포넌트 사용법 메인 시스템 CDN 및 패키지.

- 독립형 피커 별도로 배포되는 오픈 소스이며, 여기서 대상으로 삼는 코드는 아닙니다.

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

### Elastic UI

검증된 Borealis 스케일, 기본 테이블과 검색 컨트롤, 심각도 필터링, 로컬 저장 이벤트, 완전한 React 소스를 갖춘 Elastic UI 로그 탐색기를 만드세요.

### Emplifi Soul

Soul의 데이터 테이블 동작 명세를 6픽셀 간격, 레이어형 색상 역할, 컴팩트한 Inter 글꼴과 함께 살펴보세요. 일괄 선택, 누락 데이터 표기, 요약 행을 비교한 다음 검증된 비공개 React 패키지 진입점을 확인하세요.

### Esri Calcite

공간 도구에 초점을 맞춘 실용적인 Calcite 참고 자료입니다. 의미가 분명한 표면과 파란색 동작 요소, 간결한 검사 패널, 실제 입력 API, 완성된 로컬 사이트 검토 예제를 다룹니다.


- [구현 레퍼런스](https://www.duetds.com/components/date-picker/)
- [출처](https://www.duetds.com/tokens/)
- [출처](https://www.duetds.com/typography/)
- [출처](https://www.duetds.com/components/date-picker/)
- [출처](https://www.duetds.com/components/button/)
- [지원 사양 읽기](https://www.duetds.com/using-components/)
- [지원 사양 읽기](https://www.duetds.com/tokens/)
- [지원 사양 읽기](https://www.duetds.com/typography/)
- [지원 사양 읽기](https://www.duetds.com/components/date-picker/)
- [지원 사양 읽기](https://www.duetds.com/components/button/)
- [코드 참조](https://www.duetds.com/components/date-picker/)
- [디자인 토큰 테마 색상, 간격 및 토큰 상태.](https://www.duetds.com/tokens/)
- [타이포그래피 간격 체계와 별도의 브랜드 글꼴.](https://www.duetds.com/typography/)
- [Date Picker ISO 값, 유효성 검사 및 메서드.](https://www.duetds.com/components/date-picker/)
- [Button 제출 선택 속성 및 변형.](https://www.duetds.com/components/button/)
- [컴포넌트 사용법 메인 시스템 CDN 및 패키지.](https://www.duetds.com/using-components/)
- [독립형 피커 별도로 배포되는 오픈 소스이며, 여기서 대상으로 삼는 코드는 아닙니다.](https://github.com/duetds/date-picker)