# Maersk 디자인 시스템

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

독창적인 샘플 참조 번호 두 개를 조회하고, 경로 이력을 확인한 뒤, 잘못된 쿼리와 누락된 레코드를 구별하세요.

## Maersk 디자인 시스템 디자인 참조

공개 MDS 기반 및 컴포넌트 사용 문서입니다. 네이티브 컴포넌트 패키지는 비공개 Maersk 레지스트리에 있습니다. 실행 가능한 예제는 네이티브 HTML와 문서화된 토큰 스냅샷을 사용하며, 존재하지 않는 mc-* API를 만들어내지 않습니다.

### Maersk 라이트 테마 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --mds_brand_appearance_primary_default_background-color | #141414 | 기본 채우기 동작입니다. |
| --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | 기본 채우기 위에 표시되는 텍스트입니다. |
| --mds_brand_appearance_primary_default_link-color | #0077B2 | 링크 텍스트입니다. |
| --mds_brand_appearance_secondary_default_background-color | #42B0D5 | 브랜드 보조 채우기입니다. |
| --mds_brand_appearance_secondary_default_on-background-color | #141414 | 보조 채우기 위에 표시되는 텍스트입니다. |
| --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | 은은한 보조 표면입니다. |
| --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | 기본 테두리입니다. |
| --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | 보조 텍스트. |
| --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | 은은한 페이지 표면입니다. |
### 텍스트 크기

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --mds_brand_typography_text_font-family | Maersk Text | 네이티브 브랜드 서체입니다. |
| text_large desktop/mobile | 18px / 28px line height | 두 플랫폼에서 동일합니다. |
| text_medium desktop/mobile | 16px / 24px line height | 기본 본문 글자 크기입니다. |
| text_small desktop/mobile | 14px / 20px line height | 간결한 메타데이터입니다. |
| text_x-small desktop/mobile | 12px / 16px line height | 참조 중 가장 작은 크기입니다. |
| normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | 문서에 명시된 글자 두께입니다. |
### 제목 크기

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| headline_large desktop | 50px / 56px, weight 300 | 큰 디스플레이 제목입니다. |
| headline_large mobile | 38px / 38px, weight 300 | 모바일 대응 크기입니다. |
| headline_medium desktop | 40px / 40px, weight 300 | 페이지 제목. |
| headline_medium mobile | 26px / 32px, weight 300 | 모바일 페이지 제목입니다. |
| headline_small desktop | 26px / 32px, weight 400 | 섹션 제목. |
| headline_small mobile | 22px / 26px, weight 400 | 모바일 섹션 제목입니다. |
| headline_x-small desktop/mobile | 20px / 24px, weight 400 | 작은 제목입니다. |
### 모서리 반경

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| radius-xs | 2px | 작은 중첩 요소입니다. |
| radius-sm | 4px | 체크박스 크기 요소입니다. |
| radius-md | 6px | 버튼과 입력란. |
| radius-lg | 8px | 알림 및 테이블입니다. |
| radius-xl | 12px | 내부 컨트롤이 있는 카드입니다. |
| radius-2xl | 16px | 큰 이미지 및 대화상자입니다. |
| radius-full | 9999px | 완전히 둥근 형태입니다. |
### 간격 및 밀도

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Base rhythm | 4px multiples | 패딩, 마진 및 간격입니다. |
| Fine component exceptions | 2px, 6px, 10px | 작은 컴포넌트 정렬입니다. |
| Responsive dimensions | Not required to be divisible by 4 | 인접 요소 간 간격을 리듬에 맞추세요. |
### 작업 우선순위

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Primary action | Primary + Filled | 기본 동작 하나입니다. |
| Secondary action | Neutral + Outlined | 열린 폼에서 사용하는 보조 동작입니다. |
| Tertiary action | Neutral + Plain | 지우기, 초기화 또는 반복되는 공개 동작입니다. |
| Secondary in a dialog | Neutral + Filled | 외곽선이 서로 경쟁하지 않도록 하세요. |
| Brand hero exception | Secondary + Filled | 폼의 기본 동작이 아닙니다. |
## Maersk 디자인 시스템 전체 가이드

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

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

## Maersk 디자인 시스템 공개 규칙과 비공개 컴포넌트는 별개의 리소스입니다

### 실제 상황에 맞는 도입 경로를 선택하세요

> MDS는 기반 요소와 사용 지침을 상당 부분 공개하지만, 개발자 가이드에 따르면 패키지는 Maersk의 비공개 GitHub Packages 및 Nexus 저장소에서 제공됩니다. 구성 요소 페이지를 읽는다고 해서 패키지나 글꼴을 배포할 권한이 생기는 것은 아닙니다.

권한이 있는 팀은 회사 설정에 맞는 패키지와 Storybook을 사용해야 합니다. 이 공개 참고 자료는 보이는 규칙을 완전히 구현한 네이티브 HTML 버전을 제공하므로, 독자는 가상의 공개 설치 명령 없이도 동작을 살펴볼 수 있습니다.

1. 네이티브 패키지 경로를 선택하기 전에 회사 레지스트리에 접근할 수 있는지 확인하세요.

2. 구성 요소 문서를 설치된 릴리스에 맞추세요.

3. 비공개 종속성 없이 공개적으로 살펴볼 때는 원본 HTML 예시를 사용하세요.

지원 사양 읽기

## Maersk 디자인 시스템 브랜드 색상을 알아보기 전에 역할을 확인하세요

### 라이트 테마의 기본 액션은 어두운 색입니다

Maersk 블루는 쉽게 알아볼 수 있지만, 라이트 테마에서 기본 채우기 역할은 #141414이며 배경 위 텍스트는 흰색입니다. 보조 채우기 역할은 #42B0D5이고 텍스트는 어두운 색입니다. 이 차이를 두면 모든 컨트롤이 밝은 브랜드 강조색으로 채워지는 일을 막을 수 있습니다.

예시의 기본 조회 액션에는 어두운 기본 역할이 적용됩니다. 옅은 보조 표면은 경로 예시를 감싸고, 중립 테두리는 관련 기록을 정리합니다. 토큰 이름에는 깊이, 항목, 변형, 플랫폼, 상태, 속성이 담겨 있어 테마가 바뀌어도 각 역할을 쉽게 파악할 수 있습니다.

지원 사양 읽기

## Maersk 디자인 시스템 제목의 개성과 본문 가독성을 따로 조절하세요

### 데스크톱과 모바일의 실제 글꼴 크기 조합을 사용하세요

Maersk Headline과 Maersk Text는 서로 다른 용도로 사용됩니다. 중간 굵기의 제목은 데스크톱에서 40/40, 모바일에서 26/32로 바뀌지만, 중간 굵기의 본문 텍스트는 16/24로 유지됩니다. 모든 텍스트 스타일에 같은 비율을 적용하면 이러한 의도적인 차이를 놓치게 됩니다.

원본 미리보기는 브랜드 글꼴 파일을 재배포하지 않으므로 Arial을 사용합니다. 문서에 명시된 크기 계층을 따릅니다. 페이지 제목은 가벼운 느낌으로, 섹션 레이블은 명확하게, 이벤트 메타데이터는 읽기 쉬운 14px로 표시합니다. 참조 식별자는 선택 가능한 텍스트로 남겨 앞자리 0을 확인하고 정확한 문자열을 복사할 수 있습니다.

지원 사양 읽기

## Maersk 디자인 시스템 정보 누락이 아닌 간격으로 밀도 조절

### 운영 정보를 간결하게 보여 주면서 관계를 유지하세요

MDS는 4px 간격 리듬을 사용하며, 세부 구성 요소 정렬에는 2px, 6px, 10px 간격도 예외적으로 사용합니다. 밀도 토큰은 Default, Compact, Spacious 모드를 지원하지만, 확인되지 않은 패키지별 밀도 값은 이러한 이름만 보고 추측해서는 안 됩니다.

예시에서는 레이블, 이벤트, 메타데이터를 묶을 때 8px와 16px 간격을 사용하고, 더 큰 영역을 구분할 때는 24px와 32px 간격을 사용합니다. 좁은 화면에서는 경로와 이벤트 기록이 세로로 쌓입니다. 작은 화면을 깔끔하게 보이게 하려고 정보를 숨기지 않습니다.

지원 사양 읽기

## Maersk 디자인 시스템 바깥 컨테이너에는 내부 컨트롤을 위한 여유가 필요합니다

### 반경 규모로 중첩 구조를 표현하세요

카드에는 12px, 버튼과 입력란에는 6px, 큰 이미지나 대화상자에는 16px 반경을 사용합니다. 모서리 반경 지침에서는 한 구성 요소가 다른 구성 요소를 포함할 때 바깥쪽 반경을 더 크게 설정하도록 명시합니다.

예시에서는 둥근 카드 안에 경로 그림을 넣고 조회 입력란에는 더 작은 반경을 적용합니다. 여기서 테두리는 구조를 구분하는 요소이지, 모든 텍스트 줄을 장식적으로 둘러싸는 윤곽선이 아닙니다. 문서에 명시된 전역 테두리는 두께가 1픽셀이고 실선입니다.

지원 사양 읽기

## Maersk 디자인 시스템 운송장 번호는 수량이 아니라 식별자입니다

### 숫자 입력란 때문에 참조 번호가 바뀌지 않도록 하세요

MDS 입력 지침은 수량과 컨테이너 번호, 참조 번호 같은 식별자를 구분합니다. 숫자 입력란은 앞자리 0을 없애거나 실수로 값을 증감시킬 수 있습니다. 따라서 예시에서는 type="text"와 inputmode="numeric"을 사용하고 정확한 문자열을 키로 사용합니다.

6자리 형식은 이 예시만을 위한 제약이며 Maersk 운송장 번호 사양이 아닙니다. 입력값이 비어 있거나 형식이 잘못된 경우에는 구체적인 수정 안내를 표시하고, 형식은 올바르지만 일치하는 참조를 찾지 못한 경우에는 별도의 결과를 표시합니다. 이 두 결과를 모호한 ‘잘못된 입력’ 오류 하나로 합쳐서는 안 됩니다.

- 레이블을 입력란 위에 배치하세요.

- 모든 식별 숫자를 문자열로 보존하세요.

- aria-describedby로 형식 안내와 오류 텍스트를 연결하세요.

- 형식 오류일 때만 aria-invalid를 설정하고, 유효한 형식의 기록을 찾지 못한 경우에는 설정하지 마세요.

지원 사양 읽기

## Maersk 디자인 시스템 기본 조회와 예시 바로가기를 구분하세요

### 구체적인 결과를 나타내는 동사를 문장형 대소문자로 사용하세요

‘운송장 조회’는 채우기 스타일이 적용된 단일 액션입니다. 예시 참조 바로가기는 강조 수준이 낮은 액션으로, 여러 기본 버튼과 경쟁하는 대신 같은 검색어 입력란에 값을 채웁니다. 열린 폼에서는 키보드 탐색과 읽기 순서 모두에서 기본 액션이 보조 액션보다 앞에 와야 합니다.

미리보기에서는 선택한 예시의 이벤트 기록을 순서 있는 목록으로 표시합니다. 상태는 이벤트 레이블의 텍스트로 전달되므로 파란색 표시와 연결선은 보조 요소입니다. 해당 기록은 허구임을 명확히 밝히며, 예상 도착 시간이나 경로를 실시간 운영 정보처럼 보여 주지 않습니다.

지원 사양 읽기

## Maersk 디자인 시스템 다크 테마에는 별도의 의미 기반 값이 필요합니다

### 스크린샷을 단순히 반전하지 마세요

공개된 다크 테마 표에서는 기본 텍스트를 #F0F0F0으로, 기본 채우기를 흰색으로 바꾸고 중립 캔버스를 #141414로 설정합니다. 이는 모든 RGB 값을 반전하라는 지침이 아니라 각 역할에 맞춘 의도적인 매핑입니다.

이 예시는 문서에 명시된 라이트 테마를 사용합니다. 다크 모드로 확장하려면 호버, 테두리, 배경 위 텍스트 색을 포함해 역할 집합 전체를 일관되게 교체해야 합니다. 그러면 원본 경로 그림도 전역 필터에 의존하지 말고 별도로 대비를 검토해야 합니다.

지원 사양 읽기

## Maersk 디자인 시스템 구성 요소 예시

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

문서 전체를 index.html로 저장한 후 브라우저에서 여세요. 문서에 명시된 Maersk 라이트 테마 역할과 간격을 해석해 만든 오프라인 네이티브 HTML 예시입니다. 비공개 MDS 런타임, 브랜드 글꼴 파일, 실시간 운송장 연결은 포함되어 있지 않습니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Sample shipment lookup</title><style>*{box-sizing:border-box}body{font:16px/24px Arial,sans-serif;background:#f7f7f7;color:#141414;margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #0077b2;outline-offset:3px}header{background:#fff;padding:20px 32px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #d4d4d4}header b{font-weight:500;letter-spacing:1px}header span{font-size:12px;color:#6a6a6a}main{max-width:1120px;margin:auto;padding:32px}h1{font-size:40px;line-height:40px;font-weight:300;margin:8px 0 16px}p{margin:0 0 16px}.subtitle{color:#6a6a6a}.search{background:#fff;border:1px solid #d4d4d4;padding:24px;border-radius:12px;margin:24px 0}.search label{display:block;margin-bottom:8px}.entry{display:flex;gap:8px}.entry input{border:1px solid #8a8a8a;border-radius:6px;padding:12px 16px;max-width:360px;min-width:0;width:100%;background:#fff;color:#141414}.entry button{border:0;background:#141414;color:#fff;border-radius:6px;padding:12px 24px}.hint{font-size:14px;color:#6a6a6a;margin:8px 0 0}.error{color:#b80012;margin:8px 0 0}.error:empty{display:none}.layout{display:grid;grid-template-columns:250px 1fr;gap:24px}aside{background:#fff;border-radius:12px;border:1px solid #d4d4d4;padding:24px}aside h2{font-size:20px;line-height:24px;font-weight:400;margin:0 0 16px}.record{display:block;text-align:left;background:none;border:0;border-top:1px solid #e2e2e2;padding:16px 0;width:100%;color:#141414}.record strong,.record small{display:block}.record strong{font-size:16px;font-weight:500}.record small{color:#6a6a6a;font-size:12px;margin-top:4px}.record[aria-pressed=true]{color:#0077b2}.record[aria-pressed=true] strong:after{content:' →'}.detail{background:#fff;border:1px solid #d4d4d4;border-radius:12px;padding:24px;min-width:0}.detail h2{font-size:26px;line-height:32px;font-weight:400;margin:0}.topline{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.tag{font-size:12px;border-radius:4px;background:#e2f3f9;color:#141414;padding:4px 8px;align-self:start;white-space:nowrap}.route{height:148px;border-radius:12px;background:#e2f3f9;display:flex;align-items:center;justify-content:space-between;padding:24px;position:relative;gap:16px}.port{position:relative;z-index:1;font-size:14px;max-width:40%}.port b{display:block;font-size:20px;line-height:24px;font-weight:400}.port:last-child{text-align:right}.route:before{content:'';height:2px;background:#42b0d5;position:absolute;left:24px;right:24px;top:52%}.port{background:#e2f3f9;padding:8px}.history{list-style:none;margin:24px 0 0;padding:0}.history li{position:relative;padding:0 0 24px 28px;border-left:2px solid #d4d4d4;margin-left:5px}.history li:last-child{padding-bottom:0;border-color:transparent}.history li:before{content:'';position:absolute;left:-6px;top:7px;width:10px;height:10px;background:#42b0d5;border-radius:50%}.history b{font-weight:500;display:block}.history small{font-size:14px;line-height:20px;color:#6a6a6a;display:block;margin-top:4px}.notice{padding:32px 0;max-width:430px}footer{font-size:12px;line-height:16px;color:#6a6a6a;margin-top:24px}@media(max-width:650px){header{padding:16px}header span{max-width:115px}main{padding:24px 16px}h1{font-size:26px;line-height:32px}.layout{grid-template-columns:1fr}aside{padding:16px}.record{padding:12px 0}.search,.detail{padding:20px}.entry{flex-wrap:wrap}.entry input{max-width:none}.entry button{width:100%}.topline{flex-wrap:wrap}.route{padding:8px}.port b{font-size:18px}.route:before{left:16px;right:16px}}
</style><header><b>CARGO / WORKSPACE</b><span>Independent MDS interpretation</span></header><main><h1>Follow the next milestone.</h1><p class="subtitle">A reference lookup and event history, using original sample records.</p><form id="lookup" class="search" novalidate><label for="reference">Shipment reference</label><div class="entry"><input id="reference" type="text" inputmode="numeric" value="000042" required aria-describedby="hint error"><button type="submit">Show shipment</button></div><p class="hint" id="hint">Try 000042 or 000108. Keep the leading zeros.</p><p class="error" id="error" role="alert"></p></form><div class="layout"><aside><h2>Sample shipments</h2><button class="record" data-id="000042" aria-pressed="true"><strong>000042</strong><small>Rotterdam → Singapore</small></button><button class="record" data-id="000108" aria-pressed="false"><strong>000108</strong><small>Hamburg → New York</small></button></aside><section class="detail" id="result" aria-live="polite"></section></div><footer>All references, routes and events are fictional. No live tracking, shipment status or transport commitment is represented.</footer></main><script>const data={'000042':{from:'Rotterdam',to:'Singapore',status:'In transit',events:[['Booking received','Sample milestone 1 · Reference created'],['Loaded at origin','Sample milestone 2 · Origin handling complete'],['In transit','Sample milestone 3 · Next event pending']]},'000108':{from:'Hamburg',to:'New York',status:'Awaiting handover',events:[['Booking received','Sample milestone 1 · Reference created'],['Awaiting origin handover','Sample milestone 2 · Cargo handover pending']]}};const input=document.querySelector('#reference'),result=document.querySelector('#result'),error=document.querySelector('#error');function resetError(){error.textContent='';input.setAttribute('aria-invalid','false')}function show(){resetError();const id=input.value.trim();document.querySelectorAll('.record').forEach(x=>x.setAttribute('aria-pressed',String(x.dataset.id===id)));result.replaceChildren();if(!/^\d{6}$/.test(id)){error.textContent='Use a six-digit sample reference, including leading zeros.';input.setAttribute('aria-invalid','true');input.focus();result.innerHTML='<p class="notice">Correct the reference to view a sample event history.</p>';return}const r=data[id];if(!r){result.innerHTML='<h2>No sample shipment found</h2><p class="notice">This reference does not match the two sample records. Try 000042 or 000108.</p>';return}result.innerHTML=`<div class="topline"><h2>Shipment ${id}</h2><span class="tag">${r.status}</span></div><div class="route"><div class="port"><small>ORIGIN</small><b>${r.from}</b></div><div class="port"><small>DESTINATION</small><b>${r.to}</b></div></div><ol class="history">${r.events.map(([a,b])=>`<li><b>${a}</b><small>${b}</small></li>`).join('')}</ol>`}document.querySelector('#lookup').onsubmit=e=>{e.preventDefault();show()};document.querySelectorAll('.record').forEach(x=>x.onclick=()=>{input.value=x.dataset.id;show()});input.oninput=()=>{resetError();document.querySelectorAll('.record').forEach(x=>x.setAttribute('aria-pressed','false'));result.innerHTML='<p class="notice">Select Show shipment to look up the edited reference.</p>'};show();</script></html>
```

코드 참조

- 포함된 예시 운송장 참조만 조회할 수 있습니다. 정확한 문자열 일치로 식별자를 보존하며, 이 문서에는 비공개 Maersk 구성 요소나 추적 기능이 포함되어 있지 않습니다.

### 운송장 참조를 텍스트로 보존하세요

네이티브 양식은 MDS 입력 지침을 따르고 공개 토큰 역할을 사용합니다. 정확히 일치하는 샘플 데이터는 앞자리 0을 보존하고, 형식 오류와 일치하는 레코드가 없는 경우를 구분합니다.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>Sample shipment lookup</title><style>
/* Local snapshot of documented Maersk light roles; not an MDS package import. */
:root{--mds_brand_appearance_primary_default_background-color:#141414;
--mds_brand_appearance_primary_default_on-background-color:#fff;
--mds_brand_appearance_neutral_default_border-color:#d4d4d4;
--mds_brand_appearance_secondary_weak_background-color:#e2f3f9}
body{font:16px/24px Arial,sans-serif;color:#141414;margin:32px}
main{max-width:48rem;margin:auto}label{display:block;margin-bottom:8px}
input,button{font:inherit;padding:12px 16px;border-radius:6px}
input{border:1px solid var(--mds_brand_appearance_neutral_default_border-color);max-width:100%;box-sizing:border-box}
button{border:0;background:var(--mds_brand_appearance_primary_default_background-color);color:var(--mds_brand_appearance_primary_default_on-background-color)}
.actions{display:flex;gap:8px;flex-wrap:wrap}li{padding:12px 0}#error{color:#b80012}#result{margin-top:24px;padding:24px;border-radius:12px;background:var(--mds_brand_appearance_secondary_weak_background-color)}
</style><main><h1>Find a sample shipment</h1>
<form id="lookup" novalidate><label for="reference">Shipment reference</label>
<p id="hint">Try 000042 or 000108. These are original sample records.</p>
<div class="actions"><input id="reference" type="text" inputmode="numeric" value="000042" aria-describedby="hint error" required>
<button type="submit">Show shipment</button></div><p id="error" role="alert"></p></form>
<section id="result" aria-live="polite"></section></main>
<script>
const shipments={'000042':{route:'Rotterdam → Singapore',events:['Booking received','Loaded at origin','In transit']},'000108':{route:'Hamburg → New York',events:['Booking received','Awaiting origin handover']}};
const input=document.querySelector('#reference'),result=document.querySelector('#result'),error=document.querySelector('#error');
function lookup(e){e.preventDefault();const id=input.value.trim();error.textContent='';input.setAttribute('aria-invalid','false');result.replaceChildren();
 if(!/^\d{6}$/.test(id)){error.textContent='Use a six-digit sample reference, including leading zeros.';input.setAttribute('aria-invalid','true');input.focus();return;}
 const record=shipments[id];if(!record){result.textContent='No sample shipment matches this reference. Try 000042 or 000108.';return;}
 const heading=document.createElement('h2');heading.textContent=id+' · '+record.route;
 const list=document.createElement('ol');record.events.forEach(x=>{const li=document.createElement('li');li.textContent=x;list.append(li)});
 result.append(heading,list);
}
document.querySelector('#lookup').addEventListener('submit',lookup);
input.addEventListener('input',()=>{error.textContent='';input.setAttribute('aria-invalid','false');result.replaceChildren();});
</script></html>
```

코드 참조

- type="text"는 식별자 숫자를 그대로 보존하며, inputmode는 키보드 표시 방식만 제안합니다.

- 표시 라벨, 계속 표시되는 안내 문구, 연결된 오류 메시지는 각각 다른 역할을 합니다.

- 이 코드는 독립적으로 구현한 예시이며, 비공개 MDS Input 컴포넌트가 아닙니다 API.

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

### 구현 시작점

공개 개발자 페이지에는 비공개 레지스트리 접근 방법이 안내되어 있습니다. 확인할 수 없는 코드 조각을 바탕으로 정확한 네이티브 import문이나 이벤트 시그니처를 임의로 만들어 내지 않았습니다. 제공된 HTML는 공개 기반을 해석해 완성한, 작동하는 구현입니다.

```
Native MDS adoption (authorized Maersk teams):
1. Obtain access to Maersk Global GitHub Packages or the private Nexus registry.
2. Use the corporate authentication and SSO flow in the official developer guide.
3. Install the approved component or core package and its documented token/font dependencies.
4. Read exact component properties and events in the MDS Storybook for that installed release.

Public reference specimen:
Save the complete HTML example as index.html and open it in a browser.
It requires no registry, external script or private asset.
Its token declarations are a local light-theme snapshot; they do not initialize MDS Web Components.
```

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

```
문서화된 밝은 색상 역할, 어두운 기본 액션, 4px 기반 간격, 모서리 반경 6px 입력 필드와 12px 카드로 Maersk에서 영감을 받은 운영 조회 화면을 만듭니다. 운송장 식별자는 텍스트로 보존하고, 잘못된 형식과 존재하지 않는 레코드를 구분하며, 이벤트 기록은 순서가 있는 목록으로 제공합니다. 공개 패키지 접근 권한이나 비공개 컴포넌트 API를 지어내지 마세요.
```

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

독립적으로 작성한 OpenDesign 참고 자료입니다. 네이티브 MDS 패키지를 사용하려면 승인된 기업 계정으로 접근해야 합니다. 미리보기에 나오는 운송장 식별자, 경로와 이벤트는 모두 가상의 샘플 데이터이며, 추적 서비스를 호출하지 않습니다.

- 개발자 접근 비공개 레지스트리 및 네이티브 도입.

- 토큰 구조 이름, 브랜드 및 정보 밀도.

- Maersk 라이트 정확한 시맨틱 색상 역할.

- Maersk 다크 테마별 대응 값.

- 텍스트 토큰 본문 크기와 굵기 조합.

- 헤드라인 토큰 플랫폼별 헤드라인 크기 체계.

- 간격 4px 리듬과 예외.

- 모서리 반경 중첩된 형태의 크기 체계.

- 입력 지침 식별자, 라벨 및 오류.

- 버튼 지침 액션의 강조 수준과 순서.

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

### Microsoft Fluent 2

실제 의미 토큰, 웹용 타이포그래피 및 간격 단계, 제어형 탭, 검증된 접근성 대화상자를 갖춘 Fluent UI React v9 작업 공간을 구성합니다. 테마 값을 비교하고 컴포넌트 구성을 살펴본 다음, 완성된 React 예시를 사용하기 전에 로컬 인터랙션을 시험해 보세요.

### Monday Vibe

Vibe 4 토큰과 React 컨트롤로 작동하는 배송 보드를 구성하세요. 의미 기반 작업 색상과 보드 라벨의 차이, 명명된 간격 단계, 글꼴 축약 표기, 새 애플리케이션에 필요한 명시적인 CSS 설정을 알아보세요.

### Morningstar 디자인 시스템

숫자를 정렬하고, 자산 색상의 의미를 유지하며, 읽기 쉬운 타이포그래피를 적용한 리서치 인터페이스를 구성하세요. MDS 상수, Vue 3 도입, Morningstar Intrinsic 전환, 정렬 가능한 가상 자산 배분 노트를 살펴보세요.


- [구현 레퍼런스](https://designsystem.maersk.com/components/input/index.html)
- [출처](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [출처](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)
- [출처](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [출처](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [출처](https://designsystem.maersk.com/foundations/spacing/)
- [출처](https://designsystem.maersk.com/components/button/index.html)
- [지원 사양 읽기](https://designsystem.maersk.com/develop/index.html)
- [지원 사양 읽기](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [지원 사양 읽기](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [지원 사양 읽기](https://designsystem.maersk.com/foundations/spacing/)
- [지원 사양 읽기](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [지원 사양 읽기](https://designsystem.maersk.com/components/input/index.html)
- [지원 사양 읽기](https://designsystem.maersk.com/components/button/index.html)
- [지원 사양 읽기](https://designsystem.maersk.com/foundations/themes/maersk/dark/)
- [코드 참조](https://designsystem.maersk.com/components/input/index.html)
- [개발자 접근 비공개 레지스트리 및 네이티브 도입.](https://designsystem.maersk.com/develop/index.html)
- [토큰 구조 이름, 브랜드 및 정보 밀도.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/)
- [Maersk 라이트 정확한 시맨틱 색상 역할.](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Maersk 다크 테마별 대응 값.](https://designsystem.maersk.com/foundations/themes/maersk/dark/)
- [텍스트 토큰 본문 크기와 굵기 조합.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)
- [헤드라인 토큰 플랫폼별 헤드라인 크기 체계.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [간격 4px 리듬과 예외.](https://designsystem.maersk.com/foundations/spacing/)
- [모서리 반경 중첩된 형태의 크기 체계.](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [입력 지침 식별자, 라벨 및 오류.](https://designsystem.maersk.com/components/input/index.html)
- [버튼 지침 액션의 강조 수준과 순서.](https://designsystem.maersk.com/components/button/index.html)