APM Terminals brand tokens
Headline x-large
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_typography_headline_font-family --mds_brand_typography_headline_font-family | Maersk Text |
| brand_typography_headline_font-family-fallback --mds_brand_typography_headline_font-family-fallback | Arial-apple-systemBlinkMacSystemFontSegoe UIRobotoApple SD Gothic NeoMalgun GothicPingFang TCMicrosoft JhengHeiPingFang SCMicrosoft YaHeiHiragino Kaku Gothic ProNMeiryosans-serif |
| brand_typography_headline_x-large_font-style --mds_brand_typography_headline_x-large_font-style | normal |
| brand_typography_headline_x-large_font-weight --mds_brand_typography_headline_x-large_font-weight | 300 |
| brand_typography_headline_x-large_text-transform --mds_brand_typography_headline_x-large_text-transform | none |
| brand_typography_headline_x-large_desktop_font-size --mds_brand_typography_headline_x-large_desktop_font-size | 80px |
| brand_typography_headline_x-large_desktop_line-height --mds_brand_typography_headline_x-large_desktop_line-height | 80px |
| brand_typography_headline_x-large_mobile_font-size --mds_brand_typography_headline_x-large_mobile_font-size | 56px |
| brand_typography_headline_x-large_mobile_line-height --mds_brand_typography_headline_x-large_mobile_line-height | 56px |
Headline large
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_typography_headline_font-family --mds_brand_typography_headline_font-family | Maersk Text |
| brand_typography_headline_font-family-fallback --mds_brand_typography_headline_font-family-fallback | Arial-apple-systemBlinkMacSystemFontSegoe UIRobotoApple SD Gothic NeoMalgun GothicPingFang TCMicrosoft JhengHeiPingFang SCMicrosoft YaHeiHiragino Kaku Gothic ProNMeiryosans-serif |
| brand_typography_headline_large_font-style --mds_brand_typography_headline_large_font-style | normal |
| brand_typography_headline_large_font-weight --mds_brand_typography_headline_large_font-weight | 300 |
| brand_typography_headline_large_text-transform --mds_brand_typography_headline_large_text-transform | none |
| brand_typography_headline_large_desktop_font-size --mds_brand_typography_headline_large_desktop_font-size | 50px |
| brand_typography_headline_large_desktop_line-height --mds_brand_typography_headline_large_desktop_line-height | 56px |
| brand_typography_headline_large_mobile_font-size --mds_brand_typography_headline_large_mobile_font-size | 38px |
| brand_typography_headline_large_mobile_line-height --mds_brand_typography_headline_large_mobile_line-height | 38px |
Headline medium
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_typography_headline_font-family --mds_brand_typography_headline_font-family | Maersk Text |
| brand_typography_headline_font-family-fallback --mds_brand_typography_headline_font-family-fallback | Arial-apple-systemBlinkMacSystemFontSegoe UIRobotoApple SD Gothic NeoMalgun GothicPingFang TCMicrosoft JhengHeiPingFang SCMicrosoft YaHeiHiragino Kaku Gothic ProNMeiryosans-serif |
| brand_typography_headline_medium_font-style --mds_brand_typography_headline_medium_font-style | normal |
| brand_typography_headline_medium_font-weight --mds_brand_typography_headline_medium_font-weight | 300 |
| brand_typography_headline_medium_text-transform --mds_brand_typography_headline_medium_text-transform | none |
| brand_typography_headline_medium_desktop_font-size --mds_brand_typography_headline_medium_desktop_font-size | 40px |
| brand_typography_headline_medium_desktop_line-height --mds_brand_typography_headline_medium_desktop_line-height | 40px |
| brand_typography_headline_medium_mobile_font-size --mds_brand_typography_headline_medium_mobile_font-size | 26px |
| brand_typography_headline_medium_mobile_line-height --mds_brand_typography_headline_medium_mobile_line-height | 32px |
Headline small
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_typography_headline_font-family --mds_brand_typography_headline_font-family | Maersk Text |
| brand_typography_headline_font-family-fallback --mds_brand_typography_headline_font-family-fallback | Arial-apple-systemBlinkMacSystemFontSegoe UIRobotoApple SD Gothic NeoMalgun GothicPingFang TCMicrosoft JhengHeiPingFang SCMicrosoft YaHeiHiragino Kaku Gothic ProNMeiryosans-serif |
| brand_typography_headline_small_font-style --mds_brand_typography_headline_small_font-style | normal |
| brand_typography_headline_small_font-weight --mds_brand_typography_headline_small_font-weight | 300 |
| brand_typography_headline_small_text-transform --mds_brand_typography_headline_small_text-transform | none |
| brand_typography_headline_small_desktop_font-size --mds_brand_typography_headline_small_desktop_font-size | 26px |
| brand_typography_headline_small_desktop_line-height --mds_brand_typography_headline_small_desktop_line-height | 32px |
| brand_typography_headline_small_mobile_font-size --mds_brand_typography_headline_small_mobile_font-size | 22px |
| brand_typography_headline_small_mobile_line-height --mds_brand_typography_headline_small_mobile_line-height | 26px |
Headline x-small
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_typography_headline_font-family --mds_brand_typography_headline_font-family | Maersk Text |
| brand_typography_headline_font-family-fallback --mds_brand_typography_headline_font-family-fallback | Arial-apple-systemBlinkMacSystemFontSegoe UIRobotoApple SD Gothic NeoMalgun GothicPingFang TCMicrosoft JhengHeiPingFang SCMicrosoft YaHeiHiragino Kaku Gothic ProNMeiryosans-serif |
| brand_typography_headline_x-small_font-style --mds_brand_typography_headline_x-small_font-style | normal |
| brand_typography_headline_x-small_font-weight --mds_brand_typography_headline_x-small_font-weight | 300 |
| brand_typography_headline_x-small_text-transform --mds_brand_typography_headline_x-small_text-transform | none |
| brand_typography_headline_x-small_desktop_font-size --mds_brand_typography_headline_x-small_desktop_font-size | 20px |
| brand_typography_headline_x-small_desktop_line-height --mds_brand_typography_headline_x-small_desktop_line-height | 24px |
| brand_typography_headline_x-small_mobile_font-size --mds_brand_typography_headline_x-small_mobile_font-size | 20px |
| brand_typography_headline_x-small_mobile_line-height --mds_brand_typography_headline_x-small_mobile_line-height | 24px |