Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Maersk.
Esamina il linguaggio delle interfacce operative di Maersk attraverso i ruoli del tema chiaro, le scale per titoli e testo, i raggi annidati e la gestione degli identificativi. Un esempio di ricerca delle spedizioni mostra la corrispondenza esatta dei riferimenti e una cronologia degli eventi accessibile, senza dichiarare l’accesso ai dati logistici in tempo reale.
Interpretazione nativa originale e offline di HTML, basata sui ruoli e sulla spaziatura documentati del tema chiaro Maersk. Non include il runtime privato MDS, i file dei font del brand o una connessione alle spedizioni in tempo reale. · Riferimento per l’implementazione
02
Sistema di design Maersk Riferimento di design
Documentazione pubblica sulle basi di MDS e sull’uso dei componenti. I pacchetti dei componenti nativi sono disponibili nei registri privati Maersk; l’esempio eseguibile usa HTML nativo e un’istantanea documentata dei token, non API mc-* inventate.
Sistema di design Maersk Le regole pubbliche e i componenti privati sono risorse distinte
Scegli con trasparenza il percorso di adozione
MDS rende pubblicamente disponibili ampie indicazioni sulle basi e sull’uso, mentre la guida per sviluppatori colloca i pacchetti nei registri privati Maersk Global GitHub Packages e Nexus. Consultare la pagina di un componente non conferisce i diritti di accesso ai pacchetti o di distribuzione dei font.
I team autorizzati dovrebbero usare il pacchetto e Storybook previsti dalla configurazione aziendale. Questo riferimento pubblico offre invece un’implementazione nativa completa di HTML delle regole visibili, così da permettere di esaminarne il comportamento senza ricorrere a un comando di installazione pubblico fittizio.
Verifica l’accesso ai registri aziendali prima di scegliere il percorso dei pacchetti nativi.
Allinea la documentazione dei componenti alla versione installata.
Usa l’esempio originale di HTML per esplorare pubblicamente il sistema senza dipendenze private.
Sistema di design Maersk Comprendi il ruolo prima di riconoscere il colore del brand
Nel tema chiaro, l’azione primaria è scura
Il blu Maersk è riconoscibile, ma nel tema chiaro il ruolo del riempimento primario è #141414, con testo bianco in primo piano. Il ruolo del riempimento secondario è #42B0D5, con testo scuro. Questa distinzione impedisce che ogni controllo diventi un acceso accento del brand.
L’azione principale di ricerca dell’esempio usa il ruolo primario scuro. Una superficie secondaria chiara incornicia l’analisi del percorso e i bordi neutri organizzano i record di supporto. I nomi dei token codificano profondità, elemento, variante, piattaforma, stato e attributo, mantenendo comprensibile il ruolo anche al cambiare del tema.
Sistema di design Maersk Distingui il carattere dei titoli dalla densità del testo
Usa le coppie effettive per desktop e dispositivi mobili
Maersk Headline e Maersk Text hanno funzioni diverse. Un titolo medio passa da 40/40 su desktop a 26/32 su dispositivi mobili, mentre il testo del corpo medio resta a 16/24. Applicare una scala percentuale uniforme a tutti gli stili di testo ignorerebbe questa differenza intenzionale.
L’anteprima originale usa Arial perché non ridistribuisce i file dei font del brand. Rispetta la gerarchia dimensionale documentata: un titolo di pagina leggero, etichette di sezione chiare e metadati degli eventi leggibili da 14px. Gli identificativi di riferimento restano testo selezionabile, così è possibile controllare gli zeri iniziali e copiare la stringa esatta.
Sistema di design Maersk La densità dipende dagli spazi, non dalla mancanza di informazioni
Mantieni le relazioni in una vista operativa compatta
MDS usa un ritmo di spaziatura di quattro pixel, con eccezioni di 2, 6 e 10px per l’allineamento dettagliato dei componenti. I token di densità supportano le modalità Default, Compact e Spacious, ma non bisogna dedurre un valore di densità specifico di un pacchetto senza averlo verificato, basandosi solo su questi nomi.
Nell’esempio, spaziature di 8px e 16px raggruppano etichette, eventi e metadati; quelle di 24px e 32px separano le aree più ampie. Sugli schermi stretti, il percorso e la cronologia degli eventi si dispongono in verticale. Le informazioni restano tutte presenti, invece di scomparire per rendere più ordinata una schermata piccola.
Sistema di design Maersk I contenitori esterni devono lasciare spazio ai controlli interni
La scala dei raggi comunica la gerarchia degli elementi annidati
Le schede usano il riferimento da 12px, i pulsanti e i campi quello da 6px, mentre le immagini grandi e le finestre di dialogo quello da 16px. Le indicazioni sul raggio degli angoli specificano esplicitamente di usare un raggio esterno più ampio quando un componente ne contiene un altro.
L'esempio inserisce l'illustrazione del percorso in una scheda arrotondata, mentre il campo di ricerca ha una forma più compatta. Qui il bordo è un separatore strutturale, non un contorno decorativo attorno a ogni riga di testo. Il bordo globale documentato è una linea continua di un pixel.
Sistema di design Maersk Un numero di spedizione è un identificativo, non un importo
Impedisci che un input numerico modifichi il riferimento
Le indicazioni MDS per gli input distinguono le quantità dagli identificativi, come i numeri di container e di riferimento. Un input numerico può eliminare gli zeri iniziali o modificare il valore se si preme accidentalmente un pulsante di incremento. Per questo l'esempio usa type="text" con inputmode="numeric" e chiavi stringa esatte.
Il formato a sei cifre è un vincolo dell'esempio originale, non una specifica dei numeri di spedizione Maersk. Gli input vuoti o in formato non valido ricevono un messaggio di correzione specifico; un riferimento ben formato ma sconosciuto restituisce un risultato distinto, senza corrispondenze. Questi esiti non devono mai confluire in un generico errore di non validità.
Mantieni l'etichetta sopra il campo.
Conserva ogni cifra dell'identificativo come stringa.
Collega con aria-describedby le istruzioni sul formato e il testo di errore.
Imposta aria-invalid solo in caso di errore di formato, non per un record valido ma sconosciuto.
Sistema di design Maersk Distingui la ricerca principale dalle scorciatoie per gli esempi
Usa verbi al presente e in forma semplice, con esiti concreti
Mostra spedizione è l'unica azione con riempimento pieno. Le scorciatoie per i riferimenti di esempio sono azioni a bassa evidenza che compilano la stessa query, anziché competere come più pulsanti primari. In un modulo aperto, l'azione primaria precede quella di supporto nell'ordine di navigazione tramite tastiera e di lettura.
L'anteprima mostra la cronologia degli eventi del campione selezionato come elenco ordinato. Le etichette degli eventi riportano lo stato in forma testuale, quindi il marcatore blu e la linea di collegamento sono elementi supplementari. Il record è esplicitamente fittizio; né la data di arrivo stimata né il percorso sono presentati come informazioni operative in tempo reale.
Sistema di design Maersk Un tema scuro richiede valori semantici specifici
Non limitarti a invertire i colori di uno screenshot
La tabella pubblica del tema scuro imposta il testo principale su #F0F0F0 e il riempimento principale sul bianco, mentre lo sfondo neutro diventa #141414. Si tratta di associazioni intenzionali di ruoli, non di un'istruzione a invertire ogni valore RGB.
Questo esempio usa il tema chiaro documentato. Per estenderlo alla modalità scura occorre sostituire in modo coerente l'intero insieme di ruoli, inclusi i colori di hover, dei bordi e del testo sugli sfondi. In tal caso, il diagramma originale del percorso richiederebbe una verifica separata del contrasto, anziché ereditare un filtro globale.
Sistema di design Maersk Esempi di componenti del sistema di progettazione
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione nativa offline originale di HTML, basata sui ruoli chiari Maersk e sulle spaziature documentate. Non richiede il runtime MDS privato, i file dei font del brand né una connessione alle spedizioni in tempo reale.
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>
È possibile trovare solo i riferimenti alle spedizioni di esempio inclusi. La corrispondenza esatta delle stringhe preserva gli identificativi; il documento non include componenti Maersk privati né l'accesso al tracciamento.
Conserva i riferimenti alle spedizioni come testo
Un modulo nativo segue le indicazioni MDS per gli input e usa i ruoli dei token pubblici. I dati di esempio con corrispondenza esatta preservano gli zeri iniziali e distinguono un formato non valido dall'assenza di record corrispondenti.
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" conserva le cifre degli identificativi; inputmode suggerisce soltanto una tastiera.
L'etichetta visibile, l'indicazione persistente e l'errore collegato hanno funzioni distinte.
Questo codice è un'implementazione originale, non il componente Input privato di MDS API.
04
Sistema di design Maersk Configurazione dell'agente IA
Punto di partenza per l’implementazione
La pagina pubblica per gli sviluppatori documenta l'accesso al registro privato. Gli import nativi esatti e le firme degli eventi non vengono inventati a partire da frammenti di codice non disponibili. Il HTML fornito è un'interpretazione completa e funzionante dei fondamenti pubblici.
testo
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.
Un prompt per il tuo progetto
Prompt per l’agente
Crea un'interfaccia di ricerca operativa ispirata a Maersk, usando i ruoli chiari documentati, un'azione primaria scura, spaziature basate su 4px, angoli degli input da 6px e schede da 12px. Conserva gli identificativi delle spedizioni come testo, distingui gli input in formato errato dai record mancanti e mostra la cronologia degli eventi come elenco ordinato. Non inventare l'accesso a pacchetti pubblici né API di componenti privati.
05
Sistema di design Maersk Fonti e ambito
Riferimento indipendente di OpenDesign. I pacchetti MDS nativi richiedono l'accesso aziendale autorizzato. Tutti gli identificativi delle spedizioni, i percorsi e gli eventi nell'anteprima sono dati di esempio fittizi; non viene chiamato alcun servizio di tracciamento.
