# Sistema de diseño Maersk ## Sistema de diseño Maersk Vista previa de la interfaz Consulta dos referencias de ejemplo originales, inspecciona el historial de una ruta y distingue entre una consulta mal formada y un registro inexistente. ## Sistema de diseño Maersk Referencia de diseño Documentación pública sobre los fundamentos de MDS y el uso de sus componentes. Los paquetes de componentes nativos están en registros privados de Maersk; el ejemplo ejecutable utiliza HTML nativo y una instantánea documentada de tokens, no API mc-* inventadas. ### Roles claros de Maersk | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --mds_brand_appearance_primary_default_background-color | #141414 | Acción principal con relleno. | | --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Texto sobre el relleno principal. | | --mds_brand_appearance_primary_default_link-color | #0077B2 | Texto del enlace. | | --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Relleno secundario de marca. | | --mds_brand_appearance_secondary_default_on-background-color | #141414 | Texto sobre el relleno secundario. | | --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Superficie secundaria sutil. | | --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Borde predeterminado. | | --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Texto complementario. | | --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Superficie sutil de página. | ### Escala de texto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --mds_brand_typography_text_font-family | Maersk Text | Tipografía de marca nativa. | | text_large desktop/mobile | 18px / 28px line height | Igual en ambas plataformas. | | text_medium desktop/mobile | 16px / 24px line height | Tamaño de lectura predeterminado. | | text_small desktop/mobile | 14px / 20px line height | Metadatos compactos. | | text_x-small desktop/mobile | 12px / 16px line height | Tamaño de referencia más pequeño. | | normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Pesos de texto documentados. | ### Escala de titulares | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | headline_large desktop | 50px / 56px, weight 300 | Titular de gran formato. | | headline_large mobile | 38px / 38px, weight 300 | Versión equivalente para móviles. | | headline_medium desktop | 40px / 40px, weight 300 | Título de página. | | headline_medium mobile | 26px / 32px, weight 300 | Encabezado de página para móviles. | | headline_small desktop | 26px / 32px, weight 400 | Título de sección. | | headline_small mobile | 22px / 26px, weight 400 | Encabezado de sección para móvil. | | headline_x-small desktop/mobile | 20px / 24px, weight 400 | Encabezado pequeño. | ### Radios de esquina | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | radius-xs | 2px | Elementos anidados pequeños. | | radius-sm | 4px | Elementos del tamaño de una casilla de verificación. | | radius-md | 6px | Botones y campos de entrada. | | radius-lg | 8px | Notificaciones y tablas. | | radius-xl | 12px | Tarjetas con controles anidados. | | radius-2xl | 16px | Imágenes grandes y cuadros de diálogo. | | radius-full | 9999px | Formas completamente redondeadas. | ### Espaciado y densidad | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Base rhythm | 4px multiples | Relleno, márgenes y separaciones. | | Fine component exceptions | 2px, 6px, 10px | Alineación de componentes pequeños. | | Responsive dimensions | Not required to be divisible by 4 | Mantén el espaciado entre elementos del mismo nivel según el ritmo. | ### Jerarquía de acciones | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Primary action | Primary + Filled | Una única acción principal. | | Secondary action | Neutral + Outlined | Acción complementaria en un formulario abierto. | | Tertiary action | Neutral + Plain | Borrar, restablecer o repetir una divulgación. | | Secondary in a dialog | Neutral + Filled | Evita contornos que compitan entre sí. | | Brand hero exception | Secondary + Filled | No es la acción predeterminada del formulario. | ## Guía completa sistema de diseño Maersk Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño Maersk Las reglas públicas y los componentes privados son recursos distintos ### Elige la vía de adopción con honestidad > MDS ofrece públicamente una base sólida y orientación de uso, mientras que su guía para desarrolladores indica que los paquetes están en los repositorios privados Maersk Global GitHub Packages y Nexus. Consultar la página de un componente no concede derechos de distribución de paquetes o fuentes. Los equipos autorizados deben usar el paquete y Storybook asociados a su configuración corporativa. En cambio, esta referencia pública proporciona una implementación nativa completa de HTML que reproduce las reglas visibles, para que cualquiera pueda examinar el comportamiento sin recurrir a un comando de instalación pública ficticio. 1. Confirma el acceso al registro corporativo antes de elegir la vía del paquete nativo. 2. Consulta la documentación del componente correspondiente a la versión instalada. 3. Usa el ejemplo original de HTML para explorarlo públicamente sin dependencias privadas. Consulta la especificación complementaria ## Sistema de diseño Maersk Identifica la función antes de reconocer el color de marca ### La acción principal es oscura en el tema claro El azul Maersk es reconocible, pero en el tema claro la función de relleno principal es #141414, con texto blanco sobre el fondo. La función de relleno secundaria es #42B0D5, con texto oscuro. Esta distinción evita que todos los controles se conviertan en acentos de marca brillantes. La acción principal del ejemplo usa la función principal oscura. Una superficie secundaria clara enmarca el estudio de rutas, y los bordes neutros organizan los registros complementarios. Los nombres de los tokens codifican la profundidad, el elemento, la variante, la plataforma, el estado y el atributo, de modo que la función siga siendo comprensible cuando cambia el tema. Consulta la especificación complementaria ## Sistema de diseño Maersk Distingue el carácter de los titulares de la densidad de lectura ### Usa las parejas reales para escritorio y móvil Maersk Headline y Maersk Text tienen funciones distintas. Un titular mediano cambia de 40/40 en escritorio a 26/32 en móvil, mientras que el texto de cuerpo mediano se mantiene en 16/24. Aplicar el mismo escalado porcentual a todos los estilos de texto pasaría por alto esta diferencia intencional. La vista previa original usa Arial porque no redistribuye los archivos de fuentes de marca. Sigue la jerarquía de tamaños documentada: un título de página ligero, rótulos de sección claros y metadatos de eventos legibles de 14px. Los identificadores de referencia siguen siendo texto seleccionable para que se puedan revisar los ceros iniciales y copiar la cadena exacta. Consulta la especificación complementaria ## Sistema de diseño Maersk La densidad se logra con el espaciado, no omitiendo información ### Conserva las relaciones en una vista operativa compacta MDS usa un ritmo de espaciado de cuatro píxeles, con excepciones de 2, 6 y 10px para la alineación detallada de los componentes. Los tokens de densidad admiten los modos Predeterminado, Compacto y Espacioso, pero no se debe suponer un valor de densidad específico de un paquete sin verificarlo a partir de esos nombres. Los espacios de 8px y 16px del ejemplo agrupan rótulos, eventos y metadatos; los de 24px y 32px separan regiones más amplias. En pantallas estrechas, la ruta y el historial de eventos se apilan. La información se conserva, en lugar de desaparecer para que una captura pequeña se vea más despejada. Consulta la especificación complementaria ## Sistema de diseño Maersk Los contenedores exteriores necesitan espacio para los controles interiores ### La escala de radios comunica la jerarquía Las tarjetas usan la referencia de 12px, los botones y campos usan 6px, y las imágenes grandes o los cuadros de diálogo usan 16px. Las directrices sobre radios de esquina indican explícitamente que el radio exterior debe ser mayor cuando un componente contiene otro. El ejemplo coloca la ilustración de la ruta dentro de una tarjeta redondeada, mientras que el campo de búsqueda tiene una forma más compacta. En este caso, el borde es un separador estructural, no un contorno decorativo alrededor de cada línea de texto. El borde global documentado es una línea sólida de un píxel. Consulta la especificación complementaria ## Sistema de diseño Maersk Un número de envío es un identificador, no una cantidad ### No permitas que un campo numérico cambie la referencia Las directrices de entrada de MDS distinguen las cantidades de los identificadores, como los números de contenedor y de referencia. Un campo numérico puede eliminar los ceros iniciales o cambiar el valor al incrementarlo por accidente. Por eso, el ejemplo usa type="text" con inputmode="numeric" y claves de cadena exactas. El formato de seis dígitos es una condición del ejemplo, no una especificación de los números de envío de Maersk. Las entradas vacías o con formato incorrecto reciben un mensaje de corrección específico; las referencias con formato válido pero desconocidas reciben un resultado distinto que indica que no hay coincidencias. Estos casos nunca deben reducirse a un mensaje impreciso de «No válido». - Mantén la etiqueta encima del campo. - Conserva todos los dígitos del identificador como una cadena. - Vincula la ayuda sobre el formato y el texto del error mediante aria-describedby. - Establece aria-invalid solo si hay un error de formato, no si el registro válido es desconocido. Consulta la especificación complementaria ## Sistema de diseño Maersk Mantén la búsqueda principal separada de los accesos directos a ejemplos ### Usa verbos en estilo oración que indiquen resultados concretos Mostrar envío es la única acción con relleno. Los accesos directos a referencias de ejemplo son acciones de baja prominencia que completan la misma consulta, en lugar de competir como varios botones principales. En un formulario abierto, la acción principal precede a la acción complementaria tanto en el orden de tabulación como en el de lectura. La vista previa muestra el historial de eventos del ejemplo seleccionado como una lista ordenada. Las etiquetas de los eventos indican el estado con texto, de modo que el marcador azul y la línea de conexión son elementos complementarios. El registro es explícitamente ficticio; no se presenta ninguna hora estimada de llegada ni ruta como información operativa en tiempo real. Consulta la especificación complementaria ## Sistema de diseño Maersk Un tema oscuro necesita sus propios valores semánticos ### No inviertas una captura de pantalla La tabla pública del tema oscuro cambia el texto principal a #F0F0F0 y el relleno principal a blanco, mientras que el fondo neutro pasa a ser #141414. Son asignaciones intencionales de funciones, no una instrucción para invertir todos los valores RGB. Este ejemplo se mantiene en el tema claro documentado. Para adaptarlo al modo oscuro, hay que sustituir de forma coherente el conjunto de funciones, incluidos los colores de estados hover, bordes y texto sobre el fondo. Después, la ilustración original de la ruta necesitaría una revisión de contraste independiente, en lugar de heredar un filtro global. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño sistema de diseño Maersk ### Muestra interactiva independiente completa Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación nativa original sin conexión de HTML basada en los roles de color claro y el espaciado documentados de Maersk. No utiliza el entorno de ejecución privado de MDS, archivos de fuentes de marca ni conexión en tiempo real a envíos. ``` Sample shipment lookup
CARGO / WORKSPACEIndependent MDS interpretation

Follow the next milestone.

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

``` Referencia de código - Solo se pueden encontrar las referencias de envío de ejemplo incluidas. La coincidencia exacta de cadenas conserva los identificadores; el documento no contiene componentes privados de Maersk ni acceso al seguimiento. ### Conservar las referencias de envío como texto Un formulario nativo sigue las pautas de entrada de MDS y usa los roles de tokens públicos. Los datos de ejemplo con coincidencia exacta conservan los ceros iniciales y distinguen entre un formato no válido y la ausencia de un registro coincidente. ``` Sample shipment lookup

Find a sample shipment

Try 000042 or 000108. These are original sample records.

``` Referencia de código - type="text" conserva los dígitos del identificador; inputmode solo sugiere un teclado. - La etiqueta visible, la indicación persistente y el error asociado cumplen funciones distintas. - Este código es una implementación original, no el componente privado Input de MDS API. ## Configuración del agente de sistema de diseño Maersk ### Punto de partida para la implementación La página pública para desarrolladores documenta el acceso al registro privado. No se inventan importaciones nativas exactas ni firmas de eventos a partir de fragmentos de código no disponibles. El HTML proporcionado es una interpretación completa y funcional de los fundamentos públicos. ``` 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. ``` ### Una instrucción para tu proyecto ``` Crea una consulta operativa inspirada en Maersk que use los roles claros documentados, una acción principal oscura, separaciones basadas en 4px, campos con esquinas de 6px y tarjetas de 12px. Conserva los identificadores de envío como texto, distingue entre una entrada con formato incorrecto y un registro inexistente, y presenta el historial de eventos como una lista ordenada. No inventes acceso a paquetes públicos ni API de componentes privados. ``` ## Fuentes y alcance de sistema de diseño Maersk Referencia independiente de OpenDesign. Los paquetes nativos de MDS requieren acceso corporativo autorizado. Todos los identificadores de envío, rutas y eventos de la vista previa son datos de ejemplo ficticios; no se llama a ningún servicio de seguimiento. - Acceso para desarrolladores Registros privados y adopción nativa. - Arquitectura de tokens Nombres, marcas y densidad. - Maersk claro Roles de color semánticos exactos. - Maersk oscuro Valores correspondientes del tema. - Tokens de texto Pares de tamaño y grosor del texto principal. - Tokens de titulares Escala de titulares específica de la plataforma. - Espaciado Ritmo de cuatro píxeles y excepciones. - Radio de esquina Escala de formas anidadas. - Pautas para campos Identificadores, etiquetas y errores. - Pautas para botones Relevancia y orden de las acciones. ## Recursos relacionados con sistema de diseño Maersk ### Microsoft Fluent 2 Crea un espacio de trabajo con Fluent UI React v9 que incluya tokens semánticos reales, las escalas web de tipografía y espaciado, pestañas controladas y un diálogo de acceso con validación. Compara los valores del tema, inspecciona la anatomía de los componentes y prueba una interacción local antes de usar el ejemplo completo de React. ### Monday Vibe Crea un tablero de entregas funcional con tokens de Vibe 4 y controles de React. Distingue los colores semánticos de acción de las etiquetas del tablero, explora los pasos de espaciado con nombre y las abreviaturas tipográficas, y conoce la configuración explícita de CSS que necesita una aplicación nueva. ### Morningstar sistema de diseño Crea una interfaz de investigación donde los números se alineen, los colores de los activos mantengan su significado y la tipografía siga siendo legible. Explora las constantes de MDS, la adopción de Vue 3, la transición a Morningstar Intrinsic y un cuaderno de asignaciones ficticio que se puede ordenar. - [Referencia de implementación](https://designsystem.maersk.com/components/input/index.html) - [Fuente](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Fuente](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Fuente](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Fuente](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Fuente](https://designsystem.maersk.com/foundations/spacing/) - [Fuente](https://designsystem.maersk.com/components/button/index.html) - [Consulta la especificación complementaria](https://designsystem.maersk.com/develop/index.html) - [Consulta la especificación complementaria](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Consulta la especificación complementaria](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Consulta la especificación complementaria](https://designsystem.maersk.com/foundations/spacing/) - [Consulta la especificación complementaria](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Consulta la especificación complementaria](https://designsystem.maersk.com/components/input/index.html) - [Consulta la especificación complementaria](https://designsystem.maersk.com/components/button/index.html) - [Consulta la especificación complementaria](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Referencia de código](https://designsystem.maersk.com/components/input/index.html) - [Acceso para desarrolladores Registros privados y adopción nativa.](https://designsystem.maersk.com/develop/index.html) - [Arquitectura de tokens Nombres, marcas y densidad.](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/) - [Maersk claro Roles de color semánticos exactos.](https://designsystem.maersk.com/foundations/themes/maersk/light/) - [Maersk oscuro Valores correspondientes del tema.](https://designsystem.maersk.com/foundations/themes/maersk/dark/) - [Tokens de texto Pares de tamaño y grosor del texto principal.](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) - [Tokens de titulares Escala de titulares específica de la plataforma.](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) - [Espaciado Ritmo de cuatro píxeles y excepciones.](https://designsystem.maersk.com/foundations/spacing/) - [Radio de esquina Escala de formas anidadas.](https://designsystem.maersk.com/foundations/corner-radius/index.html) - [Pautas para campos Identificadores, etiquetas y errores.](https://designsystem.maersk.com/components/input/index.html) - [Pautas para botones Relevancia y orden de las acciones.](https://designsystem.maersk.com/components/button/index.html)