Design de produits d’entreprise · Nouvelle ressource
Système de design Maersk.
Découvrez le langage d’interface opérationnel de Maersk à travers les rôles du thème clair, les échelles de titres et de texte, les rayons imbriqués et la gestion des identifiants. Un exemple de recherche d’expédition montre la correspondance exacte des références et un historique des événements accessible, sans prétendre accéder aux données logistiques en direct.
Guide OpenDesign8 chapitres37 entrées de référenceGuide de l’application d’origine
01
Système de design Maersk Aperçu de l’interface
Recherchez deux références d’exemple d’origine, consultez un historique d’itinéraire et distinguez une requête mal formée d’un enregistrement introuvable.
Interprétation native hors ligne originale de HTML, fondée sur les rôles et les espacements documentés du thème clair de Maersk. Aucun environnement d’exécution MDS privé, fichier de police de marque ni accès aux expéditions en direct. · Référence de mise en œuvre
02
Système de design Maersk Référence de conception
Documentation publique sur les fondations MDS et l’utilisation des composants. Les packages de composants natifs se trouvent dans les registres privés de Maersk ; l’exemple exécutable utilise HTML natif et un instantané documenté des jetons, et non des API mc-* inventées.
Système de design Maersk Les règles publiques et les composants privés sont des ressources distinctes
Choisissez honnêtement votre voie d’adoption
MDS met à disposition un vaste ensemble de fondations et de conseils d’utilisation, tandis que son guide de développement indique que les packages sont hébergés dans les dépôts privés Maersk Global GitHub Packages et Nexus. La lecture d’une page sur un composant ne donne pas droit aux packages ni à la distribution des polices.
Les équipes autorisées doivent utiliser le package et Storybook associés à leur configuration d’entreprise. Cette référence publique propose plutôt une implémentation native complète de HTML, fidèle aux règles visibles, afin de permettre d’en examiner le comportement sans inventer de commande d’installation publique.
Vérifiez l’accès au registre d’entreprise avant d’opter pour le package natif.
Faites correspondre la documentation des composants à la version installée.
Utilisez l’exemple original de HTML pour explorer les ressources publiques sans dépendances privées.
Système de design Maersk Comprenez le rôle avant de reconnaître la couleur de marque
Dans le thème clair, l’action principale est sombre
Le bleu Maersk est reconnaissable, mais le rôle principal plein du thème clair est #141414, avec du texte blanc sur le fond. Le rôle secondaire plein est #42B0D5, avec du texte sombre. Cette distinction évite que chaque contrôle ne devienne un accent de marque éclatant.
L’action principale de recherche de l’exemple utilise le rôle principal sombre. Une surface secondaire pâle encadre l’étude de l’itinéraire, tandis que des bordures neutres organisent les enregistrements d’accompagnement. Les noms des jetons indiquent la profondeur, l’élément, la variante, la plateforme, l’état et l’attribut, ce qui permet de comprendre le rôle même lorsque le thème change.
Système de design Maersk Distinguez le caractère des titres de la densité de lecture
Utilisez les paires prévues pour ordinateur et mobile
Maersk Headline et Maersk Text répondent à des besoins différents. Un titre moyen passe de 40/40 sur ordinateur à 26/32 sur mobile, tandis que le texte courant moyen reste à 16/24. Appliquer une même échelle en pourcentage à tous les styles de texte ne respecterait pas cette distinction délibérée.
L’aperçu original utilise Arial, car il ne redistribue pas les fichiers de polices de marque. Il suit la hiérarchie des tailles documentée : un titre de page léger, des intitulés de section nets et des métadonnées d’événement lisibles en 14px. Les identifiants de référence restent sélectionnables afin que les lecteurs puissent vérifier les zéros initiaux et copier la chaîne exacte.
Système de design Maersk La densité vient de l’espacement, pas d’informations manquantes
Préservez les relations dans une vue opérationnelle compacte
MDS utilise un rythme d’espacement de quatre pixels, avec des exceptions de 2, 6 et 10px pour l’alignement détaillé des composants. Les jetons de densité prennent en charge les modes Default, Compact et Spacious, mais il ne faut pas deviner une valeur de densité propre à un package sans l’avoir vérifiée, même à partir de ces noms.
Dans cet exemple, les espacements de 8px et 16px regroupent les libellés, les événements et les métadonnées ; ceux de 24px et 32px séparent les grandes zones. Sur les écrans étroits, l’itinéraire et l’historique des événements s’empilent. Les informations restent présentes au lieu de disparaître pour alléger une petite capture d’écran.
Système de design Maersk Les conteneurs extérieurs doivent laisser de la place aux contrôles intérieurs
L’échelle des rayons indique l’imbrication
Les cartes utilisent la valeur de référence de 12px, les boutons et les champs celle de 6px, et les grandes images ou boîtes de dialogue celle de 16px. Les recommandations sur les rayons d’angle précisent qu’un composant extérieur doit avoir un rayon plus grand lorsqu’il en contient un autre.
L’exemple place l’illustration de l’itinéraire dans une carte aux coins arrondis, tandis que le champ de recherche a une forme plus anguleuse. Ici, la bordure sert de séparateur structurel, et non de contour décoratif autour de chaque ligne de texte. La bordure globale documentée est une ligne pleine d’un pixel.
Système de design Maersk Un numéro d’expédition est un identifiant, pas un montant
Ne laissez pas un champ numérique modifier la référence
Les consignes MDS pour les champs de saisie distinguent les quantités des identifiants, tels que les numéros de conteneur et de référence. Un champ numérique peut supprimer les zéros en tête ou modifier la valeur en cas d’incrémentation accidentelle. L’exemple utilise donc type="text" avec inputmode="numeric" et des clés sous forme de chaînes exactes.
Le format à six chiffres est une contrainte propre à cet exemple, et non une spécification des numéros d’expédition Maersk. Une saisie vide ou mal formatée déclenche un message de correction précis ; une référence bien formatée mais inconnue affiche un résultat distinct indiquant qu’aucune correspondance n’a été trouvée. Ces situations ne doivent jamais être ramenées à un vague message « Invalide ».
Placez le libellé au-dessus du champ.
Conservez chaque chiffre de l’identifiant sous forme de chaîne.
Associez l’aide sur le format et le texte d’erreur à l’aide de aria-describedby.
Définissez aria-invalid uniquement en cas d’erreur de format, pas pour un enregistrement valide mais introuvable.
Système de design Maersk Distinguez clairement la recherche principale des raccourcis vers les exemples
Utilisez des verbes à la casse de phrase et décrivez des résultats concrets
Afficher l’expédition est la seule action avec un bouton plein. Les raccourcis vers les références d’exemple sont des actions discrètes qui renseignent la même requête, plutôt que de rivaliser avec plusieurs boutons principaux. Dans un formulaire ouvert, l’action principale précède l’action secondaire dans l’ordre de navigation au clavier et de lecture.
L’aperçu présente l’historique des événements de l’exemple sélectionné sous forme de liste ordonnée. Les libellés indiquent le statut en toutes lettres ; le marqueur bleu et la ligne de liaison sont donc complémentaires. L’enregistrement est explicitement fictif ; aucune heure d’arrivée estimée ni aucun itinéraire n’est présenté comme une information opérationnelle en temps réel.
Système de design Maersk Un thème sombre nécessite ses propres valeurs sémantiques
N’inversez pas simplement une capture d’écran
Le tableau public du thème sombre fait passer le texte principal à #F0F0F0 et le fond principal au blanc, tandis que la surface neutre devient #141414. Il s’agit de correspondances intentionnelles entre les rôles, et non d’une consigne d’inverser chaque valeur RVB.
Cet exemple reste dans le thème clair documenté. Pour l’adapter au mode sombre, il faut remplacer l’ensemble des rôles de manière cohérente, notamment les couleurs de survol, de bordure et de premier plan sur fond. Le diagramme d’itinéraire original devrait alors faire l’objet d’une vérification distincte de son contraste, plutôt que d’hériter d’un filtre global.
Exemples de composants du système de design système de design Maersk
Exemple interactif autonome complet
Enregistrez le document complet sous le nom index.html, puis ouvrez-le dans un navigateur. Interprétation native originale hors ligne HTML reposant sur les rôles clairs et les espacements Maersk documentés. Aucun environnement d’exécution MDS privé, fichier de police de la marque ni connexion à des données d’expédition en temps réel.
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>
Seules les références d’expédition d’exemple incluses peuvent être recherchées. La correspondance exacte des chaînes préserve les identifiants ; le document ne contient ni composants Maersk privés ni accès au suivi.
Conservez les références d’expédition sous forme de texte
Un formulaire natif suit les consignes MDS pour les champs de saisie et utilise les rôles des jetons publics. La correspondance exacte avec les données d’exemple préserve les zéros en tête et distingue un format invalide d’une référence introuvable.
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" préserve les chiffres de l’identifiant ; inputmode suggère simplement un clavier.
Le libellé visible, l’indication persistante et l’erreur associée ont chacun un rôle distinct.
Ce code est une implémentation originale, et non le composant MDS Input privé API.
04
Configuration de l’agent système de design Maersk
Point de départ de l’implémentation
La page publique destinée aux développeurs décrit l’accès au registre privé. Les imports natifs exacts et les signatures d’événement ne sont volontairement pas inventés à partir d’extraits de code indisponibles. Le contenu HTML fourni est une interprétation complète et fonctionnelle des fondations publiques.
texte
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 pour votre projet
Prompt pour l’agent IA
Créez une interface de recherche opérationnelle inspirée de Maersk, avec les rôles clairs documentés, une action principale sombre, des espacements basés sur 4px, des champs aux coins de 6px et des cartes de 12px. Conservez les identifiants d’expédition sous forme de texte, distinguez une saisie mal formatée d’un enregistrement introuvable et présentez l’historique des événements sous forme de liste ordonnée. N’inventez ni accès à des packages publics ni API de composants privés.
05
Système de design Maersk Sources et périmètre
Référence indépendante OpenDesign. Les packages MDS natifs nécessitent un accès professionnel autorisé. Tous les identifiants d’expédition, itinéraires et événements de l’aperçu sont des données d’exemple fictives ; aucun service de suivi n’est appelé.
