Glossary
Key terms and their definitions as used across the Maersk Design System.
If you are looking for shipping and business-specific terminology, visit Maersk Glossaries.
General
| Term | Definition | Learn more |
|---|---|---|
| MDS | Maersk Design System. | About |
| Foundations | The visual DNA forming the basis of all MDS UI elements, e.g. spacing, typography, colours, borders. | Foundations |
| Components | UI components designed and built by the MDS team. | Components |
| Guidelines | A collection of recommended best practices to follow when building UIs at Maersk. | Guidelines |
| Icons | Icons designed and maintained by the Maersk Design System team. | Icons |
| Experiments | Early access to MDS prototypes and proof of concepts. Experiments are not production ready. MDS support is limited. | Experiments |
Themes
| Term | Definition | Learn more |
|---|---|---|
| Brand | A business or product using the MDS, e.g. “Maersk”, “APM Terminals”, “Captain Peter”, “Aliança”, or “Stillstrom”. | Themes and tokens |
| Theme | An MDS theme representing a brand and a visual appearance, e.g. “Maersk Light”, “Maersk Dark”. | Themes and tokens |
| Design Token | A named value (e.g. colour, font size, border width) that defines a theme’s visual style. Tokens are authored in Figma and transformed into developer formats such as CSS custom properties. | Design Tokens |
| Global Token | A design token having a consistent value across all themes, the broadest scope in the token hierarchy, e.g. border width, breakpoints, animation timings. | Global tokens |
| Brand Token | A design token having a consistent value across all appearances for that brand, one level below Global Tokens, e.g. typography, border radius. | Brand tokens |
| Appearance Token | A design token scoped to a specific brand appearance (light/dark), one level below Brand Tokens, e.g. colours, opacity, shadows. | Light tokens |
Colours
| Term | Definition | Learn more |
|---|---|---|
| Colour Role | A conceptual grouping of colour shades, e.g. “Primary”, “Secondary”, “Error”, “Success”, “Neutral”. | Colour roles |
| Shade | The intensity level within a colour role. The five levels are: “default”, “weakest”, “weak”, “strong”, and “strongest”. Example token names: “neutral-weakest”, “primary-strong”. | Colour roles |
| Primary | The main UI colour role reflected in the primary buttons, checkboxes, radio buttons, switches, etc. | Colour roles |
| Secondary | A secondary UI colour. Must be used sparingly to draw attention to a key UI element or to highlight the brand. | Colour roles |
| Neutral | Contains monochrome shades: white, black, and grey. | Colour roles |
| Error | A red colour role used to communicate negative states such as destructive actions, validation errors, or critical alerts. | Colour roles |
| Success | A green colour role used to communicate positive outcomes such as completed actions, available status, or upward trends. | Colour roles |
| Warning | A yellow colour role used to communicate potential problems such as lost connections, expiring deadlines, or pending states. | Colour roles |
| Info | A blue colour role used to convey neutral, supplementary information such as tips, feature highlights, or available updates. | Colour roles |
Layout
Design properties
| Term | Definition | Learn more |
|---|---|---|
| Appearance | ”Appearance” is a cross-layer concept referring to the colour scheme applied to an entity. The brand scheme context is defined in design tokens, typically light or dark themes. The component contenxt is typically the semantic colour role expressed by a component, such as primary, secondary, error, success. It is not always a 1-to-1 relationship with colour role names, for example “inverse” and “default”. | Appearance |
| Fit | Components use a property called “fit” to control their sizing and determines a number of size-related properties including height, padding, border radius and typographic scale | Fit |
| Variant | Variant changes visual composition (independent of colour) and, in some components, interaction pattern. Common values include “filled”, “outlined”, “plain”, “bordered” and “borderless”. | Variant |