Maersk dark tokens
Primary UI
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_primary_default_text-color --mds_brand_appearance_primary_default_text-color | rgb(255,128,51) #FF8033, opacity: 1 |
| brand_appearance_primary_default_background-color --mds_brand_appearance_primary_default_background-color | rgb(255,128,51) #FF8033, opacity: 1 |
| brand_appearance_primary_default_on-background-color --mds_brand_appearance_primary_default_on-background-color | rgb(20,20,20) #141414, opacity: 1 |
| brand_appearance_primary_default_border-color --mds_brand_appearance_primary_default_border-color | rgb(255,128,51) #FF8033, opacity: 1 |
| brand_appearance_primary_default_link-color --mds_brand_appearance_primary_default_link-color | rgb(255,128,51) #FF8033, opacity: 1 |
| brand_appearance_primary_weak_background-color --mds_brand_appearance_primary_weak_background-color | rgb(136,51,0) #883300, opacity: 1 |
| brand_appearance_primary_weak_on-background-color --mds_brand_appearance_primary_weak_on-background-color | rgb(255,239,230) #FFEFE6, opacity: 1 |
| brand_appearance_primary_weak_border-color --mds_brand_appearance_primary_weak_border-color | rgb(136,51,0) #883300, opacity: 1 |
| brand_appearance_state_primary_default_hover_background-color --mds_brand_appearance_state_primary_default_hover_background-color | rgb(255,96,0) #FF6000, opacity: 1 |
| brand_appearance_state_primary_default_hover_border-color --mds_brand_appearance_state_primary_default_hover_border-color | rgb(255,96,0) #FF6000, opacity: 1 |
| brand_appearance_state_primary_default_active_background-color --mds_brand_appearance_state_primary_default_active_background-color | rgb(204,77,0) #CC4D00, opacity: 1 |
| brand_appearance_state_primary_default_active_border-color --mds_brand_appearance_state_primary_default_active_border-color | rgb(204,77,0) #CC4D00, opacity: 1 |
| brand_appearance_state_primary_weakest_opacity_hover_background-color --mds_brand_appearance_state_primary_weakest_opacity_hover_background-color | rgba(255,128,51,0.14) #FF8033, opacity: 0.14 |
| brand_appearance_state_primary_weakest_opacity_active_background-color --mds_brand_appearance_state_primary_weakest_opacity_active_background-color | rgba(255,128,51,0.22) #FF8033, opacity: 0.22 |
Secondary UI
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_secondary_default_text-color --mds_brand_appearance_secondary_default_text-color | rgb(157,197,205) #9DC5CD, opacity: 1 |
| brand_appearance_secondary_default_background-color --mds_brand_appearance_secondary_default_background-color | rgb(157,197,205) #9DC5CD, opacity: 1 |
| brand_appearance_secondary_default_on-background-color --mds_brand_appearance_secondary_default_on-background-color | rgb(20,20,20) #141414, opacity: 1 |
| brand_appearance_secondary_default_border-color --mds_brand_appearance_secondary_default_border-color | rgb(157,197,205) #9DC5CD, opacity: 1 |
| brand_appearance_secondary_weak_background-color --mds_brand_appearance_secondary_weak_background-color | rgb(6,70,83) #064653, opacity: 1 |
| brand_appearance_secondary_weak_on-background-color --mds_brand_appearance_secondary_weak_on-background-color | rgb(231,241,243) #E7F1F3, opacity: 1 |
| brand_appearance_secondary_weak_border-color --mds_brand_appearance_secondary_weak_border-color | rgb(6,70,83) #064653, opacity: 1 |
| brand_appearance_state_secondary_default_hover_background-color --mds_brand_appearance_state_secondary_default_hover_background-color | rgb(10,110,130) #0A6E82, opacity: 1 |
| brand_appearance_state_secondary_default_active_background-color --mds_brand_appearance_state_secondary_default_active_background-color | rgb(8,88,104) #085868, opacity: 1 |
| brand_appearance_state_secondary_weakest_opacity_hover_background-color --mds_brand_appearance_state_secondary_weakest_opacity_hover_background-color | rgba(59, 139, 155, 0.2) #3B8B9B, opacity: 0.2 |
| brand_appearance_state_secondary_weakest_opacity_active_background-color --mds_brand_appearance_state_secondary_weakest_opacity_active_background-color | rgba(59, 139, 155, 0.28) #3B8B9B, opacity: 0.28 |
Neutral
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_neutral_default_text-color --mds_brand_appearance_neutral_default_text-color | rgb(236,236,237) #ECECED, opacity: 1 |
| brand_appearance_neutral_default_background-color --mds_brand_appearance_neutral_default_background-color | rgb(20,20,20) #141414, opacity: 1 |
| brand_appearance_neutral_default_on-background-color --mds_brand_appearance_neutral_default_on-background-color | rgb(236,236,237) #ECECED, opacity: 1 |
| brand_appearance_neutral_default_border-color --mds_brand_appearance_neutral_default_border-color | rgb(120,120,120) #787878, opacity: 1 |
| brand_appearance_neutral_default_opacity_border-color --mds_brand_appearance_neutral_default_opacity_border-color | rgba(255,255,255,0.43) #FFFFFF, opacity: 0.43 |
| brand_appearance_neutral_weakest_text-color --mds_brand_appearance_neutral_weakest_text-color | rgb(152,152,152) #989898, opacity: 1 |
| brand_appearance_neutral_weakest_background-color --mds_brand_appearance_neutral_weakest_background-color | rgb(36,36,42) #24242A, opacity: 1 |
| brand_appearance_neutral_weakest_on-background-color --mds_brand_appearance_neutral_weakest_on-background-color | rgb(236,236,237) #ECECED, opacity: 1 |
| brand_appearance_neutral_weak_text-color --mds_brand_appearance_neutral_weak_text-color | rgb(207,207,207) #CFCFCF, opacity: 1 |
| brand_appearance_neutral_weak_background-color --mds_brand_appearance_neutral_weak_background-color | rgb(48,48,56) #303038, opacity: 1 |
| brand_appearance_neutral_weak_on-background-color --mds_brand_appearance_neutral_weak_on-background-color | rgb(236,236,237) #ECECED, opacity: 1 |
| brand_appearance_neutral_weak_border-color --mds_brand_appearance_neutral_weak_border-color | rgb(58,58,58) #3A3A3A, opacity: 1 |
| brand_appearance_neutral_weak_opacity_background-color --mds_brand_appearance_neutral_weak_opacity_background-color | rgba(255,255,255,0.12) #FFFFFF, opacity: 0.12 |
| brand_appearance_neutral_strong_background-color --mds_brand_appearance_neutral_strong_background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_strong_on-background-color --mds_brand_appearance_neutral_strong_on-background-color | rgb(236,236,237) #ECECED, opacity: 1 |
| brand_appearance_neutral_strongest_background-color --mds_brand_appearance_neutral_strongest_background-color | rgb(138,138,144) #8A8A90, opacity: 1 |
| brand_appearance_neutral_strongest_on-background-color --mds_brand_appearance_neutral_strongest_on-background-color | rgb(24,24,28) #18181C, opacity: 1 |
| brand_appearance_neutral_inverse_text-color --mds_brand_appearance_neutral_inverse_text-color | rgb(20,20,20) #141414, opacity: 1 |
| brand_appearance_neutral_inverse_background-color --mds_brand_appearance_neutral_inverse_background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_neutral_inverse_on-background-color --mds_brand_appearance_neutral_inverse_on-background-color | rgb(24,24,28) #18181C, opacity: 1 |
| brand_appearance_neutral_inverse_border-color --mds_brand_appearance_neutral_inverse_border-color | rgb(20,20,20) #141414, opacity: 1 |
| brand_appearance_state_neutral_default_hover_background-color --mds_brand_appearance_state_neutral_default_hover_background-color | rgb(36,36,42) #24242A, opacity: 1 |
| brand_appearance_state_neutral_default_hover_border-color --mds_brand_appearance_state_neutral_default_hover_border-color | rgb(177,177,181) #B1B1B5, opacity: 1 |
| brand_appearance_state_neutral_default_active_background-color --mds_brand_appearance_state_neutral_default_active_background-color | rgb(48,48,56) #303038, opacity: 1 |
| brand_appearance_state_neutral_default_active_border-color --mds_brand_appearance_state_neutral_default_active_border-color | rgb(216,216,218) #D8D8DA, opacity: 1 |
| brand_appearance_state_neutral_weakest_opacity_hover_background-color --mds_brand_appearance_state_neutral_weakest_opacity_hover_background-color | rgba(255,255,255,0.12) #FFFFFF, opacity: 0.12 |
| brand_appearance_state_neutral_weakest_opacity_active_background-color --mds_brand_appearance_state_neutral_weakest_opacity_active_background-color | rgba(255,255,255,0.2) #FFFFFF, opacity: 0.2 |
| brand_appearance_state_neutral_weak_opacity_hover_background-color --mds_brand_appearance_state_neutral_weak_opacity_hover_background-color | rgba(255,255,255,0.24) #FFFFFF, opacity: 0.24 |
| brand_appearance_state_neutral_weak_opacity_active_background-color --mds_brand_appearance_state_neutral_weak_opacity_active_background-color | rgba(255,255,255,0.32) #FFFFFF, opacity: 0.32 |
| brand_appearance_state_neutral_strongest_hover_background-color --mds_brand_appearance_state_neutral_strongest_hover_background-color | rgb(177,177,181) #B1B1B5, opacity: 1 |
| brand_appearance_state_neutral_strongest_active_background-color --mds_brand_appearance_state_neutral_strongest_active_background-color | rgb(216,216,218) #D8D8DA, opacity: 1 |
| brand_appearance_state_neutral_inverse_opacity_hover_background-color --mds_brand_appearance_state_neutral_inverse_opacity_hover_background-color | rgba(60,60,70,0.08) #3C3C46, opacity: 0.08 |
| brand_appearance_state_neutral_inverse_opacity_active_background-color --mds_brand_appearance_state_neutral_inverse_opacity_active_background-color | rgba(60,60,70,0.2) #3C3C46, opacity: 0.2 |
Info
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_info_default_text-color --mds_brand_appearance_info_default_text-color | rgb(22,134,189) #1686BD, opacity: 1 |
| brand_appearance_info_default_background-color --mds_brand_appearance_info_default_background-color | rgb(0,89,134) #005986, opacity: 1 |
| brand_appearance_info_default_on-background-color --mds_brand_appearance_info_default_on-background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_info_default_border-color --mds_brand_appearance_info_default_border-color | rgb(22,134,189) #1686BD, opacity: 1 |
| brand_appearance_info_weak_background-color --mds_brand_appearance_info_weak_background-color | rgb(0,36,61) #00243D, opacity: 1 |
| brand_appearance_info_weak_on-background-color --mds_brand_appearance_info_weak_on-background-color | rgb(195,228,243) #C3E4F3, opacity: 1 |
| brand_appearance_info_weak_border-color --mds_brand_appearance_info_weak_border-color | rgb(0,62,98) #003E62, opacity: 1 |
| brand_appearance_state_info_default_hover_background-color --mds_brand_appearance_state_info_default_hover_background-color | rgb(0,62,98) #003E62, opacity: 1 |
| brand_appearance_state_info_default_active_background-color --mds_brand_appearance_state_info_default_active_background-color | rgb(0,36,61) #00243D, opacity: 1 |
Error
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_error_default_text-color --mds_brand_appearance_error_default_text-color | rgb(255, 162, 166) #FFA2A6, opacity: 1 |
| brand_appearance_error_default_background-color --mds_brand_appearance_error_default_background-color | rgb(255, 162, 166) #FFA2A6, opacity: 1 |
| brand_appearance_error_default_on-background-color --mds_brand_appearance_error_default_on-background-color | rgb(20, 20, 20) #141414, opacity: 1 |
| brand_appearance_error_default_border-color --mds_brand_appearance_error_default_border-color | rgb(255, 162, 166) #FFA2A6, opacity: 1 |
| brand_appearance_error_weak_background-color --mds_brand_appearance_error_weak_background-color | rgb(80, 23, 33) #501721, opacity: 1 |
| brand_appearance_error_weak_on-background-color --mds_brand_appearance_error_weak_on-background-color | rgb(247, 229, 230) #F7E5E6, opacity: 1 |
| brand_appearance_error_weak_border-color --mds_brand_appearance_error_weak_border-color | rgb(104, 28, 37) #681C25, opacity: 1 |
| brand_appearance_state_error_default_hover_background-color --mds_brand_appearance_state_error_default_hover_background-color | rgb(251, 130, 136) #FB8288, opacity: 1 |
| brand_appearance_state_error_default_active_background-color --mds_brand_appearance_state_error_default_active_background-color | rgb(253, 187, 190) #FDBBBE, opacity: 1 |
| brand_appearance_state_error_weakest_opacity_hover_background-color --mds_brand_appearance_state_error_weakest_opacity_hover_background-color | rgba(139, 39, 48, 0.16) #8B2730, opacity: 0.16 |
| brand_appearance_state_error_weakest_opacity_active_background-color --mds_brand_appearance_state_error_weakest_opacity_active_background-color | rgba(139, 39, 48, 0.4) #8B2730, opacity: 0.4 |
Warning
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_warning_default_text-color --mds_brand_appearance_warning_default_text-color | rgb(242, 205, 89) #F2CD59, opacity: 1 |
| brand_appearance_warning_default_background-color --mds_brand_appearance_warning_default_background-color | rgb(242, 205, 89) #F2CD59, opacity: 1 |
| brand_appearance_warning_default_on-background-color --mds_brand_appearance_warning_default_on-background-color | rgb(20, 20, 20) #141414, opacity: 1 |
| brand_appearance_warning_default_border-color --mds_brand_appearance_warning_default_border-color | rgb(242, 205, 89) #F2CD59, opacity: 1 |
| brand_appearance_warning_weak_background-color --mds_brand_appearance_warning_weak_background-color | rgb(63, 51, 16) #3F3310, opacity: 1 |
| brand_appearance_warning_weak_on-background-color --mds_brand_appearance_warning_weak_on-background-color | rgb(253, 237, 186) #FDEDBA, opacity: 1 |
| brand_appearance_warning_weak_border-color --mds_brand_appearance_warning_weak_border-color | rgb(83, 68, 19) #534413, opacity: 1 |
| brand_appearance_state_warning_default_hover_background-color --mds_brand_appearance_state_warning_default_hover_background-color | rgb(223, 187, 75) #DFBB4B, opacity: 1 |
| brand_appearance_state_warning_default_active_background-color --mds_brand_appearance_state_warning_default_active_background-color | rgb(251, 216, 107) #FBD86B, opacity: 1 |
Success
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_success_default_text-color --mds_brand_appearance_success_default_text-color | rgb(127, 209, 117) #7FD175, opacity: 1 |
| brand_appearance_success_default_background-color --mds_brand_appearance_success_default_background-color | rgb(127, 209, 117) #7FD175, opacity: 1 |
| brand_appearance_success_default_on-background-color --mds_brand_appearance_success_default_on-background-color | rgb(20, 20, 20) #141414, opacity: 1 |
| brand_appearance_success_default_border-color --mds_brand_appearance_success_default_border-color | rgb(127, 209, 117) #7FD175, opacity: 1 |
| brand_appearance_success_weak_background-color --mds_brand_appearance_success_weak_background-color | rgb(18, 51, 17) #123311, opacity: 1 |
| brand_appearance_success_weak_on-background-color --mds_brand_appearance_success_weak_on-background-color | rgb(216, 242, 213) #D8F2D5, opacity: 1 |
| brand_appearance_success_weak_border-color --mds_brand_appearance_success_weak_border-color | rgb(27, 70, 23) #1B4617, opacity: 1 |
| brand_appearance_state_success_default_hover_background-color --mds_brand_appearance_state_success_default_hover_background-color | rgb(92, 189, 82) #5CBD52, opacity: 1 |
| brand_appearance_state_success_default_active_background-color --mds_brand_appearance_state_success_default_active_background-color | rgb(155, 223, 146) #9BDF92, opacity: 1 |