# Sistema di design Maersk ## Sistema di design Maersk Anteprima dell’interfaccia Cerca due riferimenti di esempio originali, esamina la cronologia di un percorso e distingui una query malformata da un record mancante. ## 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. ### Ruoli del tema chiaro Maersk | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --mds_brand_appearance_primary_default_background-color | #141414 | Azione primaria con riempimento. | | --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Testo sul riempimento primario. | | --mds_brand_appearance_primary_default_link-color | #0077B2 | Testo del collegamento. | | --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Riempimento secondario del brand. | | --mds_brand_appearance_secondary_default_on-background-color | #141414 | Testo sul riempimento secondario. | | --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Superficie secondaria discreta. | | --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Bordo predefinito. | | --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Testo di supporto. | | --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Superficie della pagina discreta. | ### Scala tipografica | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --mds_brand_typography_text_font-family | Maersk Text | Carattere nativo del brand. | | text_large desktop/mobile | 18px / 28px line height | Uguale su entrambe le piattaforme. | | text_medium desktop/mobile | 16px / 24px line height | Dimensione standard del testo. | | text_small desktop/mobile | 14px / 20px line height | Metadati compatti. | | text_x-small desktop/mobile | 12px / 16px line height | Dimensione di riferimento minima. | | normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Pesi del testo documentati. | ### Scala dei titoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | headline_large desktop | 50px / 56px, weight 300 | Titolo display grande. | | headline_large mobile | 38px / 38px, weight 300 | Corrispondente per dispositivi mobili. | | headline_medium desktop | 40px / 40px, weight 300 | Titolo della pagina. | | headline_medium mobile | 26px / 32px, weight 300 | Titolo della pagina su dispositivi mobili. | | headline_small desktop | 26px / 32px, weight 400 | Titolo di sezione. | | headline_small mobile | 22px / 26px, weight 400 | Titolo della sezione su dispositivi mobili. | | headline_x-small desktop/mobile | 20px / 24px, weight 400 | Titolo piccolo. | ### Raggi degli angoli | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | radius-xs | 2px | Elementi annidati piccoli. | | radius-sm | 4px | Elementi delle dimensioni di una checkbox. | | radius-md | 6px | Pulsanti e campi di input. | | radius-lg | 8px | Notifiche e tabelle. | | radius-xl | 12px | Schede con controlli annidati. | | radius-2xl | 16px | Immagini e finestre di dialogo grandi. | | radius-full | 9999px | Forme completamente arrotondate. | ### Spaziatura e densità | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Base rhythm | 4px multiples | Padding, margini e spaziature. | | Fine component exceptions | 2px, 6px, 10px | Allineamento dei componenti piccoli. | | Responsive dimensions | Not required to be divisible by 4 | Mantieni la spaziatura tra elementi affini secondo il ritmo. | ### Gerarchia delle azioni | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Primary action | Primary + Filled | Unica azione principale. | | Secondary action | Neutral + Outlined | Azione di supporto in un modulo aperto. | | Tertiary action | Neutral + Plain | Cancella, reimposta o ripeti la visualizzazione dei dettagli. | | Secondary in a dialog | Neutral + Filled | Evita contorni che competono tra loro. | | Brand hero exception | Secondary + Filled | Non è l’azione predefinita del modulo. | ## Sistema di design Maersk Guida completa Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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. 1. Verifica l’accesso ai registri aziendali prima di scegliere il percorso dei pacchetti nativi. 2. Allinea la documentazione dei componenti alla versione installata. 3. Usa l’esempio originale di HTML per esplorare pubblicamente il sistema senza dipendenze private. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. Leggi la specifica di supporto ## 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. ``` Sample shipment lookup
CARGO / WORKSPACEIndependent MDS interpretation

Follow the next milestone.

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

``` Riferimento del codice - È 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. ``` Sample shipment lookup

Find a sample shipment

Try 000042 or 000108. These are original sample records.

``` Riferimento del codice - 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. ## 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. ``` 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 ``` 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. ``` ## 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. - Accesso per sviluppatori Registri privati e adozione nativa. - Architettura dei token Nomenclatura, brand e densità. - Tema chiaro Maersk Ruoli cromatici semantici esatti. - Tema scuro Maersk Valori corrispondenti per il tema. - Token di testo Coppie di dimensione e spessore del testo del corpo. - Token per i titoli Scala dei titoli specifica per piattaforma. - Spaziatura Ritmo di quattro pixel ed eccezioni. - Raggio degli angoli Scala delle forme annidate. - Indicazioni per gli input Identificativi, etichette ed errori. - Indicazioni per i pulsanti Rilevanza e ordine delle azioni. ## Sistema di design Maersk Risorse correlate ### Microsoft Fluent 2 Crea uno spazio di lavoro Fluent UI React v9 con token semantici effettivi, le scale web di tipografia e spaziatura, schede controllate e una finestra di dialogo per l’accesso con convalida. Confronta i valori del tema, esamina l’anatomia dei componenti e prova un’interazione locale prima di usare l’esempio completo React. ### Monday Vibe Componi una bacheca di consegna funzionante con i token Vibe 4 e i controlli React. Scopri la differenza tra i colori semantici delle azioni e le etichette della bacheca, le spaziature nominali, le scorciatoie tipografiche e la configurazione esplicita di CSS necessaria per una nuova applicazione. ### Morningstar sistema di design Crea un’interfaccia di ricerca in cui i numeri siano allineati, i colori degli asset mantengano il loro significato e la tipografia resti leggibile. Esplora le costanti MDS, l’adozione di Vue 3, la transizione a Morningstar Intrinsic e un quaderno fittizio di allocazione ordinabile. - [Riferimento per l’implementazione](https://designsystem.maersk.com/components/input/index.html) - [Fonte](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Fonte](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Fonte](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Fonte](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Fonte](https://designsystem.maersk.com/foundations/spacing/) - [Fonte](https://designsystem.maersk.com/components/button/index.html) - [Leggi la specifica di supporto](https://designsystem.maersk.com/develop/index.html) - [Leggi la specifica di supporto](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Leggi la specifica di supporto](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Leggi la specifica di supporto](https://designsystem.maersk.com/foundations/spacing/) - [Leggi la specifica di supporto](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Leggi la specifica di supporto](https://designsystem.maersk.com/components/input/index.html) - [Leggi la specifica di supporto](https://designsystem.maersk.com/components/button/index.html) - [Leggi la specifica di supporto](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Riferimento del codice](https://designsystem.maersk.com/components/input/index.html) - [Accesso per sviluppatori Registri privati e adozione nativa.](https://designsystem.maersk.com/develop/index.html) - [Architettura dei token Nomenclatura, brand e densità.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/) - [Tema chiaro Maersk Ruoli cromatici semantici esatti.](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Tema scuro Maersk Valori corrispondenti per il tema.](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Token di testo Coppie di dimensione e spessore del testo del corpo.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Token per i titoli Scala dei titoli specifica per piattaforma.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Spaziatura Ritmo di quattro pixel ed eccezioni.](https://designsystem.maersk.com/foundations/spacing/) - [Raggio degli angoli Scala delle forme annidate.](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Indicazioni per gli input Identificativi, etichette ed errori.](https://designsystem.maersk.com/components/input/index.html) - [Indicazioni per i pulsanti Rilevanza e ordine delle azioni.](https://designsystem.maersk.com/components/button/index.html)