# Maersk Designsystem

## Maersk Designsystem-Oberflächenvorschau

Suche nach zwei eigens erstellten Beispielreferenzen, prüfe einen Routenverlauf und unterscheide zwischen einer fehlerhaften Anfrage und einem nicht vorhandenen Datensatz.

## 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-Rollen für das helle Design

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --mds_brand_appearance_primary_default_background-color | #141414 | Primäre, ausgefüllte Aktion. |
| --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Text auf der primären Füllfarbe. |
| --mds_brand_appearance_primary_default_link-color | #0077B2 | Linktext. |
| --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Sekundäre Markenfüllfarbe. |
| --mds_brand_appearance_secondary_default_on-background-color | #141414 | Text auf der sekundären Füllfarbe. |
| --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Dezente sekundäre Oberfläche. |
| --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Standardrahmen. |
| --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Unterstützender Text. |
| --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Dezente Seitenoberfläche. |
### Textgrößen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --mds_brand_typography_text_font-family | Maersk Text | Native Markenschrift. |
| text_large desktop/mobile | 18px / 28px line height | Auf beiden Plattformen identisch. |
| text_medium desktop/mobile | 16px / 24px line height | Standard-Leseschriftgröße. |
| text_small desktop/mobile | 14px / 20px line height | Kompakte Metadaten. |
| text_x-small desktop/mobile | 12px / 16px line height | Kleinste Referenzgröße. |
| normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Dokumentierte Schriftstärken. |
### Überschriftengrößen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| headline_large desktop | 50px / 56px, weight 300 | Große Anzeigeüberschrift. |
| headline_large mobile | 38px / 38px, weight 300 | Entsprechung für Mobilgeräte. |
| headline_medium desktop | 40px / 40px, weight 300 | Seitenüberschrift. |
| headline_medium mobile | 26px / 32px, weight 300 | Seitenüberschrift auf Mobilgeräten. |
| headline_small desktop | 26px / 32px, weight 400 | Abschnittsüberschrift. |
| headline_small mobile | 22px / 26px, weight 400 | Abschnittsüberschrift auf Mobilgeräten. |
| headline_x-small desktop/mobile | 20px / 24px, weight 400 | Kleine Überschrift. |
### Eckenradien

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| radius-xs | 2px | Kleine verschachtelte Elemente. |
| radius-sm | 4px | Elemente in Checkbox-Größe. |
| radius-md | 6px | Schaltflächen und Eingabefelder. |
| radius-lg | 8px | Benachrichtigungen und Tabellen. |
| radius-xl | 12px | Karten mit verschachtelten Steuerelementen. |
| radius-2xl | 16px | Große Bilder und Dialoge. |
| radius-full | 9999px | Vollständig abgerundete Formen. |
### Abstände und Dichte

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Base rhythm | 4px multiples | Innenabstände, Außenabstände und Lücken. |
| Fine component exceptions | 2px, 6px, 10px | Ausrichtung kleiner Komponenten. |
| Responsive dimensions | Not required to be divisible by 4 | Halte die Abstände zwischen gleichrangigen Elementen im Raster. |
### Aktionshierarchie

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Primary action | Primary + Filled | Einzelne Hauptaktion. |
| Secondary action | Neutral + Outlined | Unterstützende Aktion in einem offenen Formular. |
| Tertiary action | Neutral + Plain | Löschen, Zurücksetzen oder wiederholtes Ein- und Ausblenden. |
| Secondary in a dialog | Neutral + Filled | Vermeide konkurrierende Umrandungen. |
| Brand hero exception | Secondary + Filled | Nicht die Standardaktion des Formulars. |
## Maersk Designsystem: vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

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

1. Prüfen Sie den Zugriff auf das Unternehmens-Registry, bevor Sie sich für den nativen Paketpfad entscheiden.

2. Richten Sie die Komponentendokumentation nach der installierten Version aus.

3. Verwenden Sie das ursprüngliche HTML-Beispiel für die öffentliche Erkundung ohne private Abhängigkeiten.

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

Unterstützende Spezifikation lesen

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

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

Code-Referenz

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

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

Code-Referenz

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

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

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

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

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

- Entwicklerzugriff Private Registries und native Integration.

- Token-Architektur Benennung, Marken und Dichte.

- Maersk Hell Exakte semantische Farbrollen.

- Maersk Dunkel Entsprechende Werte für das Theme.

- Text-Tokens Paare aus Schriftgröße und Schriftstärke für Fließtext.

- Überschriften-Tokens Plattformspezifische Überschriftenskalierung.

- Abstände Vier-Pixel-Raster und Ausnahmen.

- Eckenradius Abgestufte Formenskalierung.

- Empfehlungen für Eingabefelder Kennungen, Labels und Fehlermeldungen.

- Empfehlungen für Buttons Hervorhebung und Reihenfolge von Aktionen.

## Maersk Designsystem Verwandte Ressourcen

### Microsoft Fluent 2

Richte einen Fluent-UI-React-v9-Arbeitsbereich mit echten semantischen Tokens, den Web-Typografie- und Abstandsabstufungen, gesteuerten Tabs und einem validierten Zugriffsdialog ein. Vergleiche die Theme-Werte, untersuche den Aufbau der Komponenten und teste eine lokale Interaktion, bevor du das vollständige React-Beispiel verwendest.

### Monday Vibe

Erstelle mit Vibe-4-Tokens und React-Steuerelementen ein funktionsfähiges Lieferboard. Erfahre, worin sich semantische Aktionsfarben und Board-Beschriftungen unterscheiden, wie benannte Abstandsstufen und Schrift-Kurzschreibweisen funktionieren und welche explizite Einrichtung von CSS eine neue Anwendung benötigt.

### Morningstar Designsystem

Erstellen Sie eine Rechercheoberfläche, in der Zahlen bündig ausgerichtet sind, Asset-Farben ihre Bedeutung behalten und die Typografie gut lesbar bleibt. Entdecken Sie MDS-Konstanten, die Integration mit Vue 3, den Übergang zu Morningstar Intrinsic und ein sortierbares, fiktives Allokationsnotizbuch.


- [Implementierungsreferenz](https://designsystem.maersk.com/components/input/index.html)
- [Quelle](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Quelle](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)
- [Quelle](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [Quelle](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [Quelle](https://designsystem.maersk.com/foundations/spacing/)
- [Quelle](https://designsystem.maersk.com/components/button/index.html)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/develop/index.html)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/foundations/spacing/)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/components/input/index.html)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/components/button/index.html)
- [Unterstützende Spezifikation lesen](https://designsystem.maersk.com/foundations/themes/maersk/dark/)
- [Code-Referenz](https://designsystem.maersk.com/components/input/index.html)
- [Entwicklerzugriff Private Registries und native Integration.](https://designsystem.maersk.com/develop/index.html)
- [Token-Architektur Benennung, Marken und Dichte.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/)
- [Maersk Hell Exakte semantische Farbrollen.](https://designsystem.maersk.com/foundations/themes/maersk/light/)
- [Maersk Dunkel Entsprechende Werte für das Theme.](https://designsystem.maersk.com/foundations/themes/maersk/dark/)
- [Text-Tokens Paare aus Schriftgröße und Schriftstärke für Fließtext.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)
- [Überschriften-Tokens Plattformspezifische Überschriftenskalierung.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)
- [Abstände Vier-Pixel-Raster und Ausnahmen.](https://designsystem.maersk.com/foundations/spacing/)
- [Eckenradius Abgestufte Formenskalierung.](https://designsystem.maersk.com/foundations/corner-radius/index.html)
- [Empfehlungen für Eingabefelder Kennungen, Labels und Fehlermeldungen.](https://designsystem.maersk.com/components/input/index.html)
- [Empfehlungen für Buttons Hervorhebung und Reihenfolge von Aktionen.](https://designsystem.maersk.com/components/button/index.html)