Gerçek açık tema rolleri, başlık ve metin ölçekleri, iç içe yarıçaplar ve tanımlayıcı işleme yoluyla Maersk’in operasyonel arayüz dilini inceleyin. Örnek bir gönderi sorgulaması, canlı lojistik verilerine erişim iddiasında bulunmadan tam referans eşleştirmesini ve erişilebilir bir olay geçmişini gösterir.
Belgelenmiş Maersk açık tema rolleri ve boşluklarını temel alan, özgün ve çevrimdışı yerel HTML uygulaması. Özel MDS çalışma zamanı, marka yazı tipi dosyaları veya canlı gönderi bağlantısı kullanılmaz. · Uygulama başvurusu
02
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 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.
Yerel paket yolunu seçmeden önce kurumsal kayıt deposuna erişiminiz olduğunu doğrulayın.
Bileşen belgelerini yüklü sürümle eşleştirin.
Özel bağımlılıklar olmadan herkese açık keşif için özgün HTML örneğini kullanın.
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.
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.
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.
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.
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.
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.
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.
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.
html
<!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>
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.
html
<!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" 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.
04
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.
text
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
Ajan İstemi
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.
05
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.
