Untersuchen Sie die Sprache operativer Benutzeroberflächen von Maersk anhand realer Rollen im hellen Theme, Schriftgrößen für Überschriften und Fließtext, abgestuften Eckenradien und der Behandlung von Kennungen. Eine beispielhafte Sendungssuche veranschaulicht den exakten Abgleich von Referenzen und einen barrierefreien Ereignisverlauf, ohne Zugriff auf Live-Logistikdaten zu behaupten.
Suche nach zwei eigens erstellten Beispielreferenzen, prüfe einen Routenverlauf und unterscheide zwischen einer fehlerhaften Anfrage und einem nicht vorhandenen Datensatz.
Eigenständige Offline-Interpretation mit nativem HTML auf Basis dokumentierter Maersk-Rollen und Abstände für das helle Design. Keine private MDS-Laufzeitumgebung, keine Markenschriftdateien und keine Live-Sendungsverbindung. · Implementierungsreferenz
02
Maersk Designsystem-Designreferenz
Öffentliche Dokumentation zu MDS-Grundlagen und zur Verwendung von Komponenten. Native Komponentenpakete liegen in privaten Maersk-Registries. Das ausführbare Beispiel verwendet natives HTML und eine dokumentierte Momentaufnahme der Tokens, keine erfundenen mc-*-APIs.
Maersk Designsystem: Öffentliche Regeln und private Komponenten sind unterschiedliche Ressourcen
Wähle den Integrationsweg ehrlich aus
MDS stellt umfangreiche Grundlagen und Nutzungshinweise öffentlich bereit. Der Entwicklerleitfaden verweist für Pakete jedoch auf die privaten Maersk Global GitHub Packages- und Nexus-Repositories. Das Lesen einer Komponentenseite gewährt keine Rechte zur Verteilung von Paketen oder Schriftarten.
Autorisierte Teams sollten das Paket und Storybook verwenden, die zu ihrer Unternehmensumgebung gehören. Diese öffentliche Referenz bietet stattdessen eine vollständige native HTML-Implementierung der sichtbaren Regeln, damit sich das Verhalten ohne einen erfundenen öffentlichen Installationsbefehl untersuchen lässt.
Prüfen Sie den Zugriff auf das Unternehmens-Registry, bevor Sie sich für den nativen Paketpfad entscheiden.
Richten Sie die Komponentendokumentation nach der installierten Version aus.
Verwenden Sie das ursprüngliche HTML-Beispiel für die öffentliche Erkundung ohne private Abhängigkeiten.
Maersk Designsystem Erkennen Sie zuerst die Rolle, dann die Markenfarbe
Die primäre Aktion ist im hellen Theme dunkel
Maersk-Blau ist unverwechselbar, doch die primäre gefüllte Rolle im hellen Theme ist #141414 mit weißem Text auf der Hintergrundfläche. Die sekundäre gefüllte Rolle ist #42B0D5 mit dunklem Text. Diese Unterscheidung verhindert, dass jedes Steuerelement zu einem leuchtenden Markenakzent wird.
Die Hauptaktion der Beispielansicht verwendet die dunkle primäre Rolle. Eine helle sekundäre Fläche rahmt die Routenansicht ein, neutrale Ränder gliedern die ergänzenden Datensätze. Tokennamen geben Tiefe, Element, Variante, Plattform, Zustand und Attribut an. So bleibt die Rolle auch bei einem Theme-Wechsel verständlich.
Maersk Designsystem Überschriftencharakter und Lesedichte getrennt betrachten
Die tatsächlichen Desktop- und Mobilvarianten verwenden
Maersk Headline und Maersk Text erfüllen unterschiedliche Zwecke. Eine mittelgroße Überschrift wechselt von 40/40 auf dem Desktop zu 26/32 auf Mobilgeräten, während mittelgroßer Fließtext bei 16/24 bleibt. Eine einheitliche prozentuale Skalierung für alle Textstile würde diesen bewussten Unterschied verfehlen.
Die Originalvorschau verwendet Arial, da sie keine Markenschriftdateien weiterverteilt. Sie folgt der dokumentierten Größenhierarchie: ein leichter Seitentitel, klare Abschnittsbezeichnungen und gut lesbare Ereignismetadaten mit 14 px. Referenzkennungen bleiben auswählbarer Text, damit sich führende Nullen überprüfen und exakte Zeichenfolgen kopieren lassen.
Maersk Designsystem Dichte entsteht durch Abstände, nicht durch fehlende Informationen
Beziehungen in einer kompakten Betriebsansicht bewahren
MDS verwendet einen Abstandsrythmus von vier Pixeln mit Ausnahmen von 2, 6 und 10 px für die präzise Ausrichtung von Komponenten. Dichte-Tokens unterstützen die Modi Default, Compact und Spacious. Ein nicht verifizierter, paketspezifischer Dichtewert sollte jedoch nicht aus diesen Bezeichnungen abgeleitet werden.
Die Abstände von 8 px und 16 px im Beispiel gruppieren Beschriftungen, Ereignisse und Metadaten; 24 px und 32 px trennen größere Bereiche. Bei schmalen Ansichten werden Route und Ereignisverlauf untereinander angeordnet. Die Informationen bleiben erhalten, statt zu verschwinden, damit ein kleiner Screenshot aufgeräumter wirkt.
Maersk Designsystem Äußere Container benötigen Platz für innere Steuerelemente
Die Radius-Skala macht Verschachtelungen sichtbar
Karten verwenden den Referenzradius von 12 px, Schaltflächen und Eingabefelder 6 px und große Bilder oder Dialoge 16 px. Die Vorgaben für Eckenradien empfehlen ausdrücklich einen größeren Radius für den äußeren Container, wenn dieser eine weitere Komponente enthält.
Im Beispiel liegt die Routenillustration in einer abgerundeten Karte, während das Suchfeld eine engere Rundung hat. Ein Rand dient hier als strukturelle Trennung und ist keine dekorative Umrandung jeder Textzeile. Der dokumentierte globale Rahmen ist eine durchgezogene Linie mit einer Pixel Stärke.
Maersk Designsystem Eine Sendungsnummer ist eine Kennung, kein Betrag
Verhindern, dass ein Zahlenfeld die Referenz verändert
Die Eingabevorgaben von MDS unterscheiden Mengen von Kennungen wie Containernummern und Referenznummern. Ein Zahlenfeld kann führende Nullen entfernen oder den Wert versehentlich durch Hoch- oder Herunterzählen ändern. Das Beispiel verwendet daher type="text" mit inputmode="numeric" und exakten Zeichenfolgen als Schlüssel.
Das sechsstellige Format ist eine Einschränkung dieses Referenzbeispiels und keine Spezifikation für Maersk-Sendungsnummern. Bei leerer oder fehlerhafter Eingabe erscheint eine konkrete Korrekturmeldung; für eine wohlgeformte, aber unbekannte Referenz wird separat gemeldet, dass kein Treffer gefunden wurde. Diese Fälle dürfen niemals in einer allgemeinen Fehlermeldung wie „Ungültig“ zusammengefasst werden.
Das Label oberhalb des Feldes platzieren.
Jede Ziffer einer Kennung als Zeichenfolge bewahren.
Format-Hilfe und Fehlermeldung über aria-describedby verknüpfen.
aria-invalid nur bei einem Formatfehler setzen, nicht bei einem gültigen, aber unbekannten Datensatz.
Maersk Designsystem Die Hauptsuche klar von den Beispielverknüpfungen abgrenzen
Verben im Satzstil mit konkreten Ergebnissen verwenden
„Sendung anzeigen“ ist die einzige gefüllte Aktion. Verknüpfungen zu Beispielreferenzen sind Aktionen mit geringer Gewichtung. Sie füllen dieselbe Suchanfrage aus, statt mit mehreren primären Schaltflächen zu konkurrieren. In einem geöffneten Formular steht die primäre Aktion in der Tastatur- und Lesereihenfolge vor einer ergänzenden Aktion.
Die Vorschau zeigt den Ereignisverlauf eines ausgewählten Beispiels als geordnete Liste. Ereignisbezeichnungen geben den Status als Text wieder, sodass die blaue Markierung und Verbindungslinie nur ergänzende Elemente sind. Der Datensatz ist ausdrücklich fiktiv; weder voraussichtliche Ankunftszeiten noch Routen werden als aktuelle Betriebsinformationen dargestellt.
Maersk Designsystem Ein dunkles Theme braucht eigene semantische Werte
Nicht einfach einen Screenshot invertieren
Die Tabelle für das öffentliche dunkle Theme setzt den primären Text auf #F0F0F0 und die primäre Füllung auf Weiß, während die neutrale Fläche zu #141414 wird. Dies sind gezielte Zuordnungen von Rollen und keine Anweisung, sämtliche RGB-Werte zu invertieren.
Dieses Beispiel bleibt beim dokumentierten hellen Theme. Für eine Erweiterung auf den dunklen Modus muss der gesamte Rollensatz stimmig ersetzt werden, einschließlich Hover-, Rahmen- und Textfarben auf Hintergrundflächen. Anschließend muss der Kontrast der ursprünglichen Routendiagramm-Ansicht gesondert geprüft werden, statt einfach einen globalen Filter anzuwenden.
Maersk Designsystem Beispiele für Designsystem-Komponenten
Vollständige, eigenständige interaktive Demo
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Originale Offline-Interpretation mit nativem HTML auf Grundlage der dokumentierten hellen Maersk-Rollen und Abstände. Keine private MDS-Laufzeitumgebung, keine Markenschriftdateien und keine Live-Verbindung zu Sendungsdaten.
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>
Es lassen sich nur die enthaltenen Beispiel-Sendungsreferenzen finden. Der exakte Zeichenfolgenabgleich bewahrt Kennungen. Das Dokument enthält weder private Maersk-Komponenten noch Zugriff auf Sendungsverfolgungsdaten.
Sendungsreferenzen als Text bewahren
Ein natives Formular folgt den MDS-Eingabeempfehlungen und verwendet öffentliche Token-Rollen. Beispieldaten mit exakter Übereinstimmung erhalten führende Nullen und unterscheiden zwischen ungültigem Format und keinem passenden Datensatz.
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" erhält die Ziffern der Kennung; inputmode schlägt lediglich eine Tastatur vor.
Das sichtbare Label, der dauerhaft angezeigte Hinweis und der verknüpfte Fehler erfüllen jeweils eigene Aufgaben.
Dieser Code ist eine eigenständige Implementierung, nicht die private MDS Input-Komponente API.
04
Einrichtung des AI Agenten Maersk Designsystem
Ausgangspunkt für die Implementierung
Die öffentliche Entwicklerseite dokumentiert den Zugriff auf private Registries. Exakte native Imports und Event-Signaturen werden bewusst nicht aus nicht verfügbaren Codebeispielen abgeleitet. Das bereitgestellte HTML ist eine vollständige, funktionsfähige Auslegung der öffentlichen Grundlagen.
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.
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie eine von Maersk inspirierte operative Suche mit dokumentierten hellen Rollen, einer dunklen primären Aktion, Abständen auf Basis von 4 px, 6-px-Ecken für Eingabefelder und Karten mit 12 px Ecken. Behandeln Sie Sendungskennungen als Text, unterscheiden Sie zwischen fehlerhafter Eingabe und einem fehlenden Datensatz und geben Sie den Ereignisverlauf als geordnete Liste aus. Erfinden Sie weder öffentlichen Paketzugriff noch private Komponenten-APIs.
05
Maersk Designsystem Quellen und Geltungsbereich
Unabhängige Referenz zu OpenDesign. Für native MDS-Pakete ist autorisierter Unternehmenszugriff erforderlich. Alle Sendungskennungen, Routen und Ereignisse in der Vorschau sind fiktive Beispieldaten; es wird kein Trackingdienst aufgerufen.
