# Système de design Maersk ## 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. ## 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. ### Rôles clairs de Maersk | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --mds_brand_appearance_primary_default_background-color | #141414 | Action principale pleine. | | --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Texte sur le fond principal. | | --mds_brand_appearance_primary_default_link-color | #0077B2 | Texte du lien. | | --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Fond secondaire de marque. | | --mds_brand_appearance_secondary_default_on-background-color | #141414 | Texte sur le fond secondaire. | | --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Surface secondaire discrète. | | --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Bordure par défaut. | | --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Texte d’accompagnement. | | --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Surface de page discrète. | ### Échelle de texte | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --mds_brand_typography_text_font-family | Maersk Text | Police de marque native. | | text_large desktop/mobile | 18px / 28px line height | Identique sur les deux plateformes. | | text_medium desktop/mobile | 16px / 24px line height | Taille de lecture par défaut. | | text_small desktop/mobile | 14px / 20px line height | Métadonnées compactes. | | text_x-small desktop/mobile | 12px / 16px line height | Plus petite taille de référence. | | normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Graisses de texte documentées. | ### Échelle des titres | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | headline_large desktop | 50px / 56px, weight 300 | Grand titre d’affichage. | | headline_large mobile | 38px / 38px, weight 300 | Équivalent mobile. | | headline_medium desktop | 40px / 40px, weight 300 | Titre de page. | | headline_medium mobile | 26px / 32px, weight 300 | Titre de page sur mobile. | | headline_small desktop | 26px / 32px, weight 400 | Titre de section. | | headline_small mobile | 22px / 26px, weight 400 | Titre de section sur mobile. | | headline_x-small desktop/mobile | 20px / 24px, weight 400 | Petit titre. | ### Rayons des angles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | radius-xs | 2px | Petits éléments imbriqués. | | radius-sm | 4px | Éléments de la taille d’une case à cocher. | | radius-md | 6px | Boutons et champs de saisie. | | radius-lg | 8px | Notifications et tableaux. | | radius-xl | 12px | Cartes avec contrôles imbriqués. | | radius-2xl | 16px | Grandes images et boîtes de dialogue. | | radius-full | 9999px | Formes entièrement arrondies. | ### Espacement et densité | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Base rhythm | 4px multiples | Marges intérieures, marges et espacements. | | Fine component exceptions | 2px, 6px, 10px | Alignement des petits composants. | | Responsive dimensions | Not required to be divisible by 4 | Respectez le rythme d’espacement entre les éléments frères. | ### Hiérarchie des actions | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Primary action | Primary + Filled | Action principale unique. | | Secondary action | Neutral + Outlined | Action d’accompagnement dans un formulaire ouvert. | | Tertiary action | Neutral + Plain | Effacer, réinitialiser ou répéter une divulgation. | | Secondary in a dialog | Neutral + Filled | Évitez les contours concurrents. | | Brand hero exception | Secondary + Filled | Ne constitue pas l’action de formulaire par défaut. | ## Système de design Maersk Guide complet Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## 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. 1. Vérifiez l’accès au registre d’entreprise avant d’opter pour le package natif. 2. Faites correspondre la documentation des composants à la version installée. 3. Utilisez l’exemple original de HTML pour explorer les ressources publiques sans dépendances privées. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. Consultez la spécification associée ## 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. ``` Sample shipment lookup
CARGO / WORKSPACEIndependent MDS interpretation

Follow the next milestone.

A reference lookup and event history, using original sample records.

``` Référence du code - 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. ``` Sample shipment lookup

Find a sample shipment

Try 000042 or 000108. These are original sample records.

``` Référence du code - 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. ## 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. ``` 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 ``` 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. ``` ## 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é. - Accès développeur Registres privés et adoption native. - Architecture des jetons Nommage, marques et densité. - Thème clair Maersk Rôles de couleur sémantiques exacts. - Thème sombre Maersk Valeurs correspondantes du thème. - Jetons de texte Paires de tailles et de graisses pour le corps de texte. - Jetons de titres Échelle des titres propre à chaque plateforme. - Espacement Rythme de 4 pixels et exceptions. - Rayon des angles Échelle des formes imbriquées. - Consignes pour les champs de saisie Identifiants, libellés et erreurs. - Consignes pour les boutons Importance et ordre des actions. ## Système de design Maersk Ressources associées ### Microsoft Fluent 2 Créez un espace de travail Fluent UI React v9 avec de véritables tokens sémantiques, les échelles typographiques et d’espacement Web, des onglets contrôlés et une boîte de dialogue d’accès validée. Comparez les valeurs du thème, examinez l’anatomie des composants et essayez une interaction locale avant d’utiliser l’exemple complet React. ### Monday Vibe Composez un tableau de suivi des livraisons fonctionnel avec les tokens Vibe 4 et les commandes React. Distinguez les couleurs d’action sémantiques des étiquettes du tableau, découvrez les pas d’espacement nommés et les raccourcis de police, ainsi que la configuration explicite de CSS nécessaire à une nouvelle application. ### Morningstar système de design Créez une interface de recherche où les nombres sont alignés, les couleurs des actifs gardent leur signification et la typographie reste lisible. Découvrez les constantes MDS, l’adoption de Vue 3, la transition Morningstar Intrinsic et un carnet d’allocation fictif avec tri. - [Référence de mise en œuvre](https://designsystem.maersk.com/components/input/index.html) - [Source](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Source](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Source](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Source](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Source](https://designsystem.maersk.com/foundations/spacing/) - [Source](https://designsystem.maersk.com/components/button/index.html) - [Consultez la spécification associée](https://designsystem.maersk.com/develop/index.html) - [Consultez la spécification associée](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Consultez la spécification associée](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Consultez la spécification associée](https://designsystem.maersk.com/foundations/spacing/) - [Consultez la spécification associée](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Consultez la spécification associée](https://designsystem.maersk.com/components/input/index.html) - [Consultez la spécification associée](https://designsystem.maersk.com/components/button/index.html) - [Consultez la spécification associée](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Référence du code](https://designsystem.maersk.com/components/input/index.html) - [Accès développeur Registres privés et adoption native.](https://designsystem.maersk.com/develop/index.html) - [Architecture des jetons Nommage, marques et densité.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/) - [Thème clair Maersk Rôles de couleur sémantiques exacts.](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Thème sombre Maersk Valeurs correspondantes du thème.](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Jetons de texte Paires de tailles et de graisses pour le corps de texte.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Jetons de titres Échelle des titres propre à chaque plateforme.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Espacement Rythme de 4 pixels et exceptions.](https://designsystem.maersk.com/foundations/spacing/) - [Rayon des angles Échelle des formes imbriquées.](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Consignes pour les champs de saisie Identifiants, libellés et erreurs.](https://designsystem.maersk.com/components/input/index.html) - [Consignes pour les boutons Importance et ordre des actions.](https://designsystem.maersk.com/components/button/index.html)