# Maersk Design System — OpenDesign Application Guide Study Maersk’s operational interface language through real light-theme roles, headline and text scales, nested radii and identifier handling. A sample shipment lookup demonstrates exact reference matching and an accessible event history without claiming access to live logistics data. Independent OpenDesign reference. Native MDS packages require authorized corporate access. All shipment identifiers, routes and events in the preview are fictional sample data; no tracking service is called. ## Source Reference - **Package access:** Private corporate registries ([source](https://designsystem.maersk.com/develop/index.html)) - **Body typeface:** Maersk Text ([source](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html)) - **Headline typeface:** Maersk Headline ([source](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html)) - **Spacing base:** 4px ([source](https://designsystem.maersk.com/foundations/spacing/)) - **Input radius:** 6px ([source](https://designsystem.maersk.com/foundations/corner-radius/index.html)) - **Light primary fill:** #141414 ([source](https://designsystem.maersk.com/foundations/themes/maersk/light/)) ## Design Reference Public MDS foundation and component usage documentation. Native component packages are in private Maersk registries; the runnable example uses native HTML and a documented token snapshot, not invented mc-* APIs. ### Maersk light roles [Official reference](https://designsystem.maersk.com/foundations/themes/maersk/light/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | --mds_brand_appearance_primary_default_background-color | #141414 | Primary filled action. | | --mds_brand_appearance_primary_default_on-background-color | #FFFFFF | Text on primary fill. | | --mds_brand_appearance_primary_default_link-color | #0077B2 | Link text. | | --mds_brand_appearance_secondary_default_background-color | #42B0D5 | Brand secondary fill. | | --mds_brand_appearance_secondary_default_on-background-color | #141414 | Text on secondary fill. | | --mds_brand_appearance_secondary_weak_background-color | #E2F3F9 | Subtle secondary surface. | | --mds_brand_appearance_neutral_default_border-color | #D4D4D4 | Default border. | | --mds_brand_appearance_neutral_weakest_text-color | #6A6A6A | Supporting text. | | --mds_brand_appearance_neutral_weakest_background-color | #F7F7F7 | Subtle page surface. | ### Text scale [Official reference](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | --mds_brand_typography_text_font-family | Maersk Text | Native brand face. | | text_large desktop/mobile | 18px / 28px line height | Same on both platforms. | | text_medium desktop/mobile | 16px / 24px line height | Default reading size. | | text_small desktop/mobile | 14px / 20px line height | Compact metadata. | | text_x-small desktop/mobile | 12px / 16px line height | Smallest reference size. | | normal / light / medium / semibold / bold | 400 / 300 / 500 / 600 / 700 | Documented text weights. | ### Headline scale [Official reference](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | headline_large desktop | 50px / 56px, weight 300 | Large display headline. | | headline_large mobile | 38px / 38px, weight 300 | Mobile counterpart. | | headline_medium desktop | 40px / 40px, weight 300 | Page heading. | | headline_medium mobile | 26px / 32px, weight 300 | Mobile page heading. | | headline_small desktop | 26px / 32px, weight 400 | Section heading. | | headline_small mobile | 22px / 26px, weight 400 | Mobile section heading. | | headline_x-small desktop/mobile | 20px / 24px, weight 400 | Small heading. | ### Corner radii [Official reference](https://designsystem.maersk.com/foundations/corner-radius/index.html) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | radius-xs | 2px | Small nested elements. | | radius-sm | 4px | Checkbox-sized elements. | | radius-md | 6px | Buttons and inputs. | | radius-lg | 8px | Notifications and tables. | | radius-xl | 12px | Cards with nested controls. | | radius-2xl | 16px | Large images and dialogs. | | radius-full | 9999px | Fully rounded shapes. | ### Spacing and density [Official reference](https://designsystem.maersk.com/foundations/spacing/) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | Base rhythm | 4px multiples | Padding, margins and gaps. | | Fine component exceptions | 2px, 6px, 10px | Small component alignment. | | Responsive dimensions | Not required to be divisible by 4 | Keep sibling spacing on the rhythm. | ### Action hierarchy [Official reference](https://designsystem.maersk.com/components/button/index.html) | Name / Rule | Value / Configuration | Use | | --- | --- | --- | | Primary action | Primary + Filled | Single main action. | | Secondary action | Neutral + Outlined | Supporting action in an open form. | | Tertiary action | Neutral + Plain | Clear, reset or repeated disclosure. | | Secondary in a dialog | Neutral + Filled | Avoid competing outlines. | | Brand hero exception | Secondary + Filled | Not the default form action. | ## Maersk Design System Public rules and private components are different resources ### Choose the adoption path honestly MDS exposes substantial foundation and usage guidance publicly, while its developer guide places packages in private Maersk Global GitHub Packages and Nexus repositories. Reading a component page does not grant package or font distribution rights. Authorized teams should use the package and Storybook associated with their corporate setup. This public reference instead supplies a complete native HTML implementation of the visible rules, so a reader can inspect the behavior without a fictitious public install command. 1. Confirm corporate registry access before choosing the native package path. 2. Match component documentation to the installed release. 3. Use the original HTML specimen for public exploration without private dependencies. [Supporting specification](https://designsystem.maersk.com/develop/index.html) ## Maersk Design System Read the role before recognizing the brand color ### The primary action is dark in the light theme Maersk blue is recognizable, but the light-theme primary filled role is #141414 with white on-background text. The secondary filled role is #42B0D5 with dark text. This distinction prevents every control from becoming a bright brand accent. The sample’s main lookup action uses the dark primary role. A pale secondary surface frames the route study, and neutral borders organize the supporting records. Token names encode depth, item, variant, platform, state and attribute, allowing the role to remain understandable when a theme changes. [Supporting specification](https://designsystem.maersk.com/foundations/themes/maersk/light/) ## Maersk Design System Separate headline character from reading density ### Use the actual desktop and mobile pairs Maersk Headline and Maersk Text serve different purposes. A medium headline changes from 40/40 on desktop to 26/32 on mobile, while medium body text stays 16/24. Applying one percentage scale to every text style would miss this deliberate difference. The original preview uses Arial because it does not redistribute brand font files. It follows the documented size hierarchy: a light page title, clear section labels and readable 14px event metadata. Reference identifiers remain selectable text so readers can inspect leading zeros and copy the exact string. [Supporting specification](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) ## Maersk Design System Density comes from spacing, not missing information ### Preserve relationships in a compact operational view MDS uses a four-pixel spacing rhythm with 2, 6 and 10px exceptions for detailed component alignment. Density tokens support Default, Compact and Spacious modes, but an unverified package-specific density value should not be guessed from those names. The example’s 8px and 16px gaps group labels, events and metadata; 24px and 32px separate larger regions. At narrow widths the route and event history stack. The information remains present rather than disappearing to make a small screenshot cleaner. [Supporting specification](https://designsystem.maersk.com/foundations/spacing/) ## Maersk Design System Outer containers need room for inner controls ### The radius scale communicates nesting Cards use the 12px reference, buttons and fields use 6px, and large images or dialogs use 16px. The corner-radius guidance explicitly asks for a larger outer radius when one component contains another. The sample places its route illustration inside a rounded card, while the lookup field keeps a tighter shape. A border is a structural separator here, not a decorative outline around every line of text. The documented global border is one solid pixel. [Supporting specification](https://designsystem.maersk.com/foundations/corner-radius/index.html) ## Maersk Design System A shipment number is an identifier, not an amount ### Do not let a number input change the reference MDS input guidance distinguishes quantities from identifiers such as container numbers and reference numbers. A number input can discard leading zeros or change on accidental stepping. The sample therefore uses type="text" with inputmode="numeric" and exact string keys. The six-digit format is an original specimen constraint, not a Maersk shipment-number specification. Empty or malformed input receives a specific correction message; a well-formed but unknown reference receives a separate no-match result. These outcomes should never collapse into a vague Invalid error. - Keep the label above the field. - Preserve every identifier digit as a string. - Link format help and error text with aria-describedby. - Set aria-invalid only for a format error, not for a valid unknown record. [Supporting specification](https://designsystem.maersk.com/components/input/index.html) ## Maersk Design System Keep the main lookup distinct from sample shortcuts ### Use sentence-case verbs with concrete outcomes Show shipment is the single filled action. Sample-reference shortcuts are low-emphasis actions that populate the same query rather than competing as several primary buttons. In an open form, the primary action precedes a supporting action in keyboard and reading order. The preview renders a selected sample’s event history as an ordered list. Event labels carry the status in text, so the blue marker and connector are supplementary. The record is explicitly fictional; no ETA or route is presented as live operational information. [Supporting specification](https://designsystem.maersk.com/components/button/index.html) ## Maersk Design System A dark theme needs its own semantic values ### Avoid inverting a screenshot The public dark-theme table changes primary text to #F0F0F0 and the primary fill to white, while its neutral canvas becomes #141414. Those are intentional role mappings rather than an instruction to invert every RGB value. This specimen stays in the documented light theme. Extending it to dark mode requires replacing the role set coherently, including hover, border and on-background colors. The original route diagram would then need separate contrast review rather than inheriting a global filter. [Supporting specification](https://designsystem.maersk.com/foundations/themes/maersk/dark/) ## Component Examples ### Complete standalone interactive specimen Save the complete document as index.html and open it in a browser. Original offline native HTML interpretation using documented Maersk light roles and spacing. No private MDS runtime, brand font files or live shipment connection. ```html Sample shipment lookup
CARGO / WORKSPACEIndependent MDS interpretation

Follow the next milestone.

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

``` [Code reference](https://designsystem.maersk.com/components/input/index.html) - Only the included sample shipment references can be found. Exact string matching preserves identifiers; the document does not contain private Maersk components or tracking access. ### Preserve shipment references as text A native form follows MDS input guidance and uses public token roles. Exact-match sample data preserves leading zeros and distinguishes invalid format from no matching record. ```html Sample shipment lookup

Find a sample shipment

Try 000042 or 000108. These are original sample records.

``` [Code reference](https://designsystem.maersk.com/components/input/index.html) - type="text" preserves identifier digits; inputmode only suggests a keyboard. - The visible label, persistent hint and linked error have separate jobs. - This code is an original implementation, not the private MDS Input component API. ## Implementation Starting Point The public developer page documents private registry access. Exact native imports and event signatures are intentionally not fabricated from unavailable code snippets. The supplied HTML is a complete, working interpretation of public foundations. ```text 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. ``` ## Agent Prompt Create a Maersk-inspired operational lookup using documented light roles, a dark primary action, 4px-based gaps, 6px input corners and 12px cards. Preserve shipment identifiers as text, distinguish malformed input from a missing record and expose event history as an ordered list. Do not invent public package access or private component APIs. ## Sources - [Developer access](https://designsystem.maersk.com/develop/index.html) — Private registries and native adoption. - [Token architecture](https://designsystem.maersk.com/foundations/themes/about-our-design-tokens/) — Naming, brands and density. - [Maersk light](https://designsystem.maersk.com/foundations/themes/maersk/light/) — Exact semantic color roles. - [Maersk dark](https://designsystem.maersk.com/foundations/themes/maersk/dark/) — Theme counterpart values. - [Text tokens](https://designsystem.maersk.com/foundations/themes/maersk/brand/text/index.html) — Body size and weight pairs. - [Headline tokens](https://designsystem.maersk.com/foundations/themes/maersk/brand/index.html) — Platform-specific headline scale. - [Spacing](https://designsystem.maersk.com/foundations/spacing/) — Four-pixel rhythm and exceptions. - [Corner radius](https://designsystem.maersk.com/foundations/corner-radius/index.html) — Nested shape scale. - [Input guidance](https://designsystem.maersk.com/components/input/index.html) — Identifiers, labels and errors. - [Button guidance](https://designsystem.maersk.com/components/button/index.html) — Action prominence and order.