# Maersk tasarım sistemi

## Maersk tasarım sistemi Arayüz Önizlemesi

Özgün iki örnek referansı arayın, bir rota geçmişini inceleyin ve hatalı bir sorguyu bulunmayan bir kayıttan ayırt edin.

## Maersk tasarım sistemi Tasarım Referansı

Herkese açık MDS temel yapısı ve bileşen kullanım belgeleri. Yerel bileşen paketleri özel Maersk kayıtlarında bulunur; çalıştırılabilir örnek, uydurma mc-* API'leri yerine yerel HTML ve belgelenmiş bir tasarım belirteci anlık görüntüsü kullanır.

### Maersk açık tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --mds_brand_appearance_primary_default_background-color | #141414 | Birincil dolu eylem. |
| --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Birincil dolgu üzerindeki metin. |
| --mds_brand_appearance_primary_default_link-color | #0077B2 | Bağlantı metni. |
| --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Markanın ikincil dolgu rengi. |
| --mds_brand_appearance_secondary_default_on-background-color | #141414 | İkincil dolgu üzerindeki metin. |
| --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Hafif ikincil yüzey. |
| --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Varsayılan kenarlık. |
| --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Yardımcı metin. |
| --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Hafif sayfa yüzeyi. |
### Metin ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --mds_brand_typography_text_font-family | Maersk Text | Markanın yerel yazı tipi. |
| text_large desktop/mobile | 18px / 28px line height | Her iki platformda da aynı. |
| text_medium desktop/mobile | 16px / 24px line height | Varsayılan okuma boyutu. |
| text_small desktop/mobile | 14px / 20px line height | Kompakt meta veriler. |
| text_x-small desktop/mobile | 12px / 16px line height | En küçük referans boyutu. |
| normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Belgelenmiş metin kalınlıkları. |
### Başlık ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| headline_large desktop | 50px / 56px, weight 300 | Büyük vitrin başlığı. |
| headline_large mobile | 38px / 38px, weight 300 | Mobil karşılığı. |
| headline_medium desktop | 40px / 40px, weight 300 | Sayfa başlığı. |
| headline_medium mobile | 26px / 32px, weight 300 | Mobil sayfa başlığı. |
| headline_small desktop | 26px / 32px, weight 400 | Bölüm başlığı. |
| headline_small mobile | 22px / 26px, weight 400 | Mobil bölüm başlığı. |
| headline_x-small desktop/mobile | 20px / 24px, weight 400 | Küçük başlık. |
### Köşe yarıçapları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| radius-xs | 2px | Küçük iç içe öğeler. |
| radius-sm | 4px | Onay kutusu boyutundaki öğeler. |
| radius-md | 6px | Düğmeler ve giriş alanları. |
| radius-lg | 8px | Bildirimler ve tablolar. |
| radius-xl | 12px | İç içe kontrolleri olan kartlar. |
| radius-2xl | 16px | Büyük görseller ve iletişim kutuları. |
| radius-full | 9999px | Tamamen yuvarlatılmış şekiller. |
### Boşluk ve yoğunluk

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Base rhythm | 4px multiples | Dolgu, kenar boşlukları ve aralıklar. |
| Fine component exceptions | 2px, 6px, 10px | Küçük bileşen hizalaması. |
| Responsive dimensions | Not required to be divisible by 4 | Benzer düzeydeki öğeler arasındaki boşlukları ritme uygun tutun. |
### Eylem hiyerarşisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Primary action | Primary + Filled | Tek ana eylem. |
| Secondary action | Neutral + Outlined | Açık bir formdaki destekleyici eylem. |
| Tertiary action | Neutral + Plain | Temizleme, sıfırlama veya tekrarlanan açma-kapama. |
| Secondary in a dialog | Neutral + Filled | Birbiriyle yarışan ana hatlardan kaçının. |
| Brand hero exception | Secondary + Filled | Varsayılan form eylemi değildir. |
## Maersk tasarım sistemi Eksiksiz Rehber

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

## Maersk tasarım sistemi Herkese açık kurallar ve özel bileşenler farklı kaynaklardır

### Kullanım yolunu olduğu gibi belirtin

> MDS, temel yapısı ve kullanımına ilişkin kapsamlı yönergeleri herkese açık biçimde sunarken geliştirici rehberi paketleri özel Maersk Global GitHub Packages ve Nexus depolarında gösterir. Bir bileşen sayfasını okumak, paketleri veya yazı tiplerini dağıtma hakkı vermez.

Yetkili ekipler, şirket kurulumlarıyla ilişkili paketi ve Storybook'u kullanmalıdır. Bu herkese açık referans ise görünen kuralların yerel HTML uygulamasını eksiksiz biçimde sunar; böylece okurlar gerçek olmayan bir genel kurulum komutuna ihtiyaç duymadan davranışı inceleyebilir.

1. Yerel paket yolunu seçmeden önce kurumsal kayıt deposuna erişiminiz olduğunu doğrulayın.

2. Bileşen belgelerini yüklü sürümle eşleştirin.

3. Özel bağımlılıklar olmadan herkese açık keşif için özgün HTML örneğini kullanın.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Marka rengini tanımadan önce rolünü okuyun

### Açık temadaki birincil eylem koyudur

Maersk mavisi kolayca tanınır, ancak açık temada birincil dolu rol #141414, arka plan üzerindeki metin ise beyazdır. İkincil dolu rol #42B0D5, üzerindeki metin ise koyudur. Bu ayrım, her kontrolün parlak bir marka vurgusuna dönüşmesini önler.

Örneğin ana arama eyleminde koyu birincil rol kullanılır. Soluk ikincil bir yüzey rota incelemesini çevreler; nötr kenarlıklar da destekleyici kayıtları düzenler. Tasarım belirteci adları derinliği, öğeyi, varyantı, platformu, durumu ve niteliği kodlar; böylece tema değiştiğinde de rol anlaşılır kalır.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Başlık karakterini okuma yoğunluğundan ayırın

### Masaüstü ve mobil için gerçek boyut çiftlerini kullanın

Maersk Headline ve Maersk Text farklı amaçlara hizmet eder. Orta boy başlık, masaüstünde 40/40 iken mobilde 26/32 boyutuna geçer; orta boy gövde metni ise 16/24 olarak kalır. Her metin stiline aynı yüzdelik ölçeği uygulamak, bu bilinçli farkı gözden kaçırır.

Özgün önizlemede, marka yazı tipi dosyaları yeniden dağıtılmadığından Arial kullanılır. Hiyerarşide belgelenen boyutları izler: ince ağırlıklı bir sayfa başlığı, belirgin bölüm etiketleri ve okunabilir 14px etkinlik meta verileri. Okurlar baştaki sıfırları inceleyip dizenin tamamını kopyalayabilsin diye referans tanımlayıcıları seçilebilir metin olarak bırakılır.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Yoğunluk, bilgileri çıkarmaktan değil, boşluklardan gelir

### Kompakt bir operasyonel görünümde ilişkileri koruyun

MDS, ayrıntılı bileşen hizalaması için 2, 6 ve 10px'lik istisnalarla birlikte dört piksellik bir boşluk ritmi kullanır. Yoğunluk belirteçleri Default, Compact ve Spacious modlarını destekler; ancak paket özelindeki doğrulanmamış bir yoğunluk değeri, yalnızca bu adlara bakılarak tahmin edilmemelidir.

Örnekte etiketleri, etkinlikleri ve meta verileri gruplamak için 8px ve 16px; daha büyük alanları ayırmak içinse 24px ve 32px boşluklar kullanılır. Dar ekranlarda rota ve etkinlik geçmişi alt alta sıralanır. Küçük ekran görüntüsü daha sade görünsün diye bilgiler kaybolmaz.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Dış kapsayıcılarda iç kontroller için yer bırakın

### Yarıçap ölçeği, iç içe geçme ilişkisini belirtir

Kartlarda 12px, düğme ve alanlarda 6px, büyük görsellerde veya iletişim kutularında 16px referans alınır. Köşe yarıçapı kılavuzu, bir bileşen başka bir bileşenin içindeyse dış bileşenin yarıçapının daha büyük olmasını açıkça önerir.

Örnekte rota çizimi, köşeleri yuvarlatılmış bir kartın içine yerleştirilirken arama alanı daha dar bir biçime sahiptir. Buradaki kenarlık, her metin satırının çevresinde dekoratif bir çerçeve değil, yapısal bir ayırıcıdır. Belgelenen genel kenarlık, tek piksellik düz bir çizgidir.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Gönderi numarası bir tanımlayıcıdır, miktar değil

### Sayı girişinin referansı değiştirmesine izin vermeyin

MDS giriş kılavuzu, miktarları konteyner numarası ve referans numarası gibi tanımlayıcılardan ayırır. Sayı girişi baştaki sıfırları silebilir veya yanlışlıkla artırılıp azaltılabilir. Bu nedenle örnekte type="text", inputmode="numeric" ve tam eşleşen dize anahtarları kullanılır.

Altı haneli biçim, bu özgün örneğe ait bir kısıttır; Maersk gönderi numarası belirtimi değildir. Boş veya hatalı biçimdeki girişler için belirli bir düzeltme mesajı, biçimi doğru ancak bulunamayan bir referans içinse ayrı bir eşleşme yok sonucu gösterilir. Bu sonuçlar hiçbir zaman belirsiz bir Geçersiz hatasında birleştirilmemelidir.

- Etiketi alanın üzerinde tutun.

- Tanımlayıcıların tüm rakamlarını dize olarak koruyun.

- Biçim yardımını ve hata metnini aria-describedby ile ilişkilendirin.

- aria-invalid değerini yalnızca biçim hatasında ayarlayın; geçerli ancak kaydı bulunamayan bir referansta ayarlamayın.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Ana aramayı örnek kısayollarından ayrı tutun

### Somut sonuç belirten, cümle düzeninde fiiller kullanın

Gönderiyi görüntüle, tek dolu eylemdir. Örnek referans kısayolları, birbiriyle yarışan birden fazla birincil düğme olmak yerine aynı sorguyu dolduran düşük vurgulu eylemlerdir. Açık bir formda birincil eylem, klavye ve okuma sıralamasında destekleyici eylemden önce gelir.

Önizleme, seçili bir örneğin olay geçmişini sıralı liste olarak görüntüler. Durum, olay etiketlerinde metinle belirtilir; mavi işaretçi ve bağlantı çizgisi ise yardımcı öğelerdir. Kayıt açıkça kurgusaldır; ETA veya rota, canlı operasyon bilgisi olarak sunulmaz.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Koyu temanın kendine özgü anlamsal değerleri olmalıdır

### Ekran görüntüsünü ters çevirmekten kaçının

Herkese açık koyu tema tablosunda birincil metin #F0F0F0, birincil dolgu beyaz; nötr tuval ise #141414 olarak değiştirilir. Bunlar, her RGB değerini ters çevirme talimatı değil, rollere yönelik bilinçli eşlemelerdir.

Bu örnek, belgelenen açık temayı kullanır. Koyu tema desteği eklemek için vurgulu, kenarlık ve arka plan üzerindeki metin renkleri dâhil olmak üzere rol kümesini tutarlı biçimde değiştirmek gerekir. Ardından özgün rota diyagramı, genel bir filtreyi devralmak yerine ayrıca kontrast incelemesinden geçirilmelidir.

Destekleyici belirtimi okuyun

## Maersk tasarım sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedin ve tarayıcıda açın. Belgelenen Maersk açık tema rolleri ve boşluklarını kullanan, çevrimdışı çalışabilen özgün bir HTML yorumudur. Özel MDS çalışma zamanı, marka yazı tipi dosyaları veya canlı gönderi bağlantısı içermez.

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

Kod referansı

- Yalnızca eklenen örnek gönderi referansları bulunabilir. Tam dize eşleşmesi tanımlayıcıları korur; belge özel Maersk bileşenlerini veya takip erişimini içermez.

### Gönderi referanslarını metin olarak koruyun

Yerel bir form, MDS giriş kılavuzunu izler ve herkese açık belirteç rollerini kullanır. Tam eşleşen örnek veriler baştaki sıfırları korur ve geçersiz biçimi eşleşen kayıt bulunmamasından ayırır.

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

Kod referansı

- type="text" tanımlayıcı rakamlarını korur; inputmode yalnızca klavye önerisinde bulunur.

- Görünür etiketin, kalıcı ipucunun ve bağlantılı hatanın her birinin ayrı bir işlevi vardır.

- Bu kod, özel MDS Input bileşeni değil, özgün bir uygulamadır API.

## Maersk tasarım sistemi AI Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Herkese açık geliştirici sayfasında özel kayıt defterine erişim belgelenmiştir. Tam yerel içe aktarma bildirimleri ve olay imzaları, erişilemeyen kod parçacıklarından hareketle uydurulmamıştır. Sağlanan HTML, herkese açık temellerin eksiksiz ve çalışan bir yorumudur.

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

### Projeniz İçin Bir İstem

```
Belgelenen açık tema rollerini, koyu birincil eylemi, 4px tabanlı aralıkları, 6px giriş köşelerini ve 12px kartları kullanarak Maersk'ten esinlenen bir operasyonel arama deneyimi oluşturun. Gönderi tanımlayıcılarını metin olarak koruyun, hatalı biçimdeki girişi bulunamayan kayıttan ayırın ve olay geçmişini sıralı liste olarak sunun. Herkese açık paket erişimi veya özel bileşen API'leri uydurmayın.
```

## Maersk tasarım sistemi Kaynaklar ve Kapsam

Bağımsız OpenDesign referansı. Yerel MDS paketleri için yetkili kurumsal erişim gerekir. Önizlemedeki tüm gönderi tanımlayıcıları, rotalar ve olaylar kurgusal örnek verilerdir; hiçbir takip hizmeti çağrılmaz.

- Geliştirici erişimi Özel kayıt defterleri ve yerel benimseme.

- Belirteç mimarisi Adlandırma, markalar ve yoğunluk.

- Maersk açık tema Tam anlamsal renk rolleri.

- Maersk koyu tema Tema karşılıklarının değerleri.

- Metin belirteçleri Gövde metni boyutu ve ağırlığı eşleşmeleri.

- Başlık belirteçleri Platforma özgü başlık ölçeği.

- Boşluklar Dört piksellik ritim ve istisnalar.

- Köşe yarıçapı İç içe biçim ölçeği.

- Giriş kılavuzu Tanımlayıcılar, etiketler ve hatalar.

- Düğme kılavuzu Eylem vurgusu ve sıralaması.

## Maersk tasarım sistemi İlgili Kaynaklar

### Microsoft Fluent 2

Gerçek anlamsal tasarım belirteçleri, web yazı tipi ve boşluk ölçekleri, denetimli sekmeler ve doğrulanmış erişim iletişim kutusuyla bir Fluent UI React v9 çalışma alanı oluşturun. Tema değerlerini karşılaştırın, bileşen anatomisini inceleyin ve eksiksiz React örneğini kullanmadan önce yerel bir etkileşimi deneyin.

### Monday Vibe

Vibe 4 tasarım belirteçleri ve React kontrolleriyle çalışan bir teslimat panosu oluşturun. Anlamsal eylem renklerini pano etiketlerinden, adlandırılmış boşluk adımlarını, yazı tipi kısaltmalarını ve yeni bir uygulamanın gerektirdiği açık CSS kurulumundan ayırt edin.

### Morningstar tasarım sistemi

Sayıların hizalandığı, varlık renklerinin anlamını koruduğu ve tipografinin okunaklı kaldığı bir araştırma arayüzü oluşturun. MDS sabitlerini, Vue 3 kullanımını, Morningstar Intrinsic geçişini ve sıralanabilir, kurgusal bir varlık dağılımı not defterini inceleyin.


- [Uygulama başvurusu](https://designsystem.maersk.com/components/input/index.html)
- [Kaynak](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Kaynak](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)
- [Kaynak](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [Kaynak](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [Kaynak](https://designsystem.maersk.com/foundations/spacing/)
- [Kaynak](https://designsystem.maersk.com/components/button/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/develop/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/foundations/spacing/)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/components/input/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/components/button/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.maersk.com/foundations/themes/maersk/dark/)
- [Kod referansı](https://designsystem.maersk.com/components/input/index.html)
- [Geliştirici erişimi Özel kayıt defterleri ve yerel benimseme.](https://designsystem.maersk.com/develop/index.html)
- [Belirteç mimarisi Adlandırma, markalar ve yoğunluk.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/)
- [Maersk açık tema Tam anlamsal renk rolleri.](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Maersk koyu tema Tema karşılıklarının değerleri.](https://designsystem.maersk.com/foundations/themes/maersk/dark/)
- [Metin belirteçleri Gövde metni boyutu ve ağırlığı eşleşmeleri.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)
- [Başlık belirteçleri Platforma özgü başlık ölçeği.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [Boşluklar Dört piksellik ritim ve istisnalar.](https://designsystem.maersk.com/foundations/spacing/)
- [Köşe yarıçapı İç içe biçim ölçeği.](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [Giriş kılavuzu Tanımlayıcılar, etiketler ve hatalar.](https://designsystem.maersk.com/components/input/index.html)
- [Düğme kılavuzu Eylem vurgusu ve sıralaması.](https://designsystem.maersk.com/components/button/index.html)