APM Terminals light 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,96,0) #FF6000, opacity: 1 |
| brand_appearance_primary_default_background-color --mds_brand_appearance_primary_default_background-color | rgb(255,96,0) #FF6000, opacity: 1 |
| brand_appearance_primary_default_on-background-color --mds_brand_appearance_primary_default_on-background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_primary_default_border-color --mds_brand_appearance_primary_default_border-color | rgb(255,96,0) #FF6000, opacity: 1 |
| brand_appearance_primary_default_link-color --mds_brand_appearance_primary_default_link-color | rgb(255,96,0) #FF6000, opacity: 1 |
| brand_appearance_primary_weak_background-color --mds_brand_appearance_primary_weak_background-color | rgb(255,239,229) #FFEFE5, opacity: 1 |
| brand_appearance_primary_weak_on-background-color --mds_brand_appearance_primary_weak_on-background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_primary_weak_border-color --mds_brand_appearance_primary_weak_border-color | rgb(255,191,153) #FFBF99, opacity: 1 |
| brand_appearance_state_primary_default_hover_background-color --mds_brand_appearance_state_primary_default_hover_background-color | rgb(230,86,0) #E65600, 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,96,0,0.14) #FF6000, opacity: 0.14 |
| brand_appearance_state_primary_weakest_opacity_active_background-color --mds_brand_appearance_state_primary_weakest_opacity_active_background-color | rgba(255,96,0,0.22) #FF6000, 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(10,110,130) #0A6E82, opacity: 1 |
| brand_appearance_secondary_default_background-color --mds_brand_appearance_secondary_default_background-color | rgb(10,110,130) #0A6E82, opacity: 1 |
| brand_appearance_secondary_default_on-background-color --mds_brand_appearance_secondary_default_on-background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_secondary_default_border-color --mds_brand_appearance_secondary_default_border-color | rgb(10,110,130) #0A6E82, opacity: 1 |
| brand_appearance_secondary_weak_background-color --mds_brand_appearance_secondary_weak_background-color | rgb(230,240,242) #E6F0F2, opacity: 1 |
| brand_appearance_secondary_weak_on-background-color --mds_brand_appearance_secondary_weak_on-background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_secondary_weak_border-color --mds_brand_appearance_secondary_weak_border-color | rgb(157,197,205) #9DC5CD, opacity: 1 |
| brand_appearance_state_secondary_default_hover_background-color --mds_brand_appearance_state_secondary_default_hover_background-color | rgb(9,99,117) #096375, 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(10,110,130,0.08) #0A6E82, opacity: 0.08 |
| brand_appearance_state_secondary_weakest_opacity_active_background-color --mds_brand_appearance_state_secondary_weakest_opacity_active_background-color | rgba(10,110,130,0.14) #0A6E82, opacity: 0.14 |
Neutral
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_neutral_default_text-color --mds_brand_appearance_neutral_default_text-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_default_background-color --mds_brand_appearance_neutral_default_background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_neutral_default_on-background-color --mds_brand_appearance_neutral_default_on-background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_default_border-color --mds_brand_appearance_neutral_default_border-color | rgb(187,195,207) #BBC3CF, opacity: 1 |
| brand_appearance_neutral_default_opacity_border-color --mds_brand_appearance_neutral_default_opacity_border-color | rgba(170,180,195,0.8) #AAB4C3, opacity: 0.8 |
| brand_appearance_neutral_weakest_text-color --mds_brand_appearance_neutral_weakest_text-color | rgb(138,138,144) #8A8A90, opacity: 1 |
| brand_appearance_neutral_weakest_background-color --mds_brand_appearance_neutral_weakest_background-color | rgb(245,247,250) #F5F7FA, opacity: 1 |
| brand_appearance_neutral_weakest_on-background-color --mds_brand_appearance_neutral_weakest_on-background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_weak_text-color --mds_brand_appearance_neutral_weak_text-color | rgb(99,99,107) #63636B, opacity: 1 |
| brand_appearance_neutral_weak_background-color --mds_brand_appearance_neutral_weak_background-color | rgb(230,235,242) #E6EBF2, opacity: 1 |
| brand_appearance_neutral_weak_on-background-color --mds_brand_appearance_neutral_weak_on-background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_weak_border-color --mds_brand_appearance_neutral_weak_border-color | rgb(221,225,231) #DDE1E7, opacity: 1 |
| brand_appearance_neutral_weak_opacity_background-color --mds_brand_appearance_neutral_weak_opacity_background-color | rgba(170,180,195,0.26) #AAB4C3, opacity: 0.26 |
| brand_appearance_neutral_strong_background-color --mds_brand_appearance_neutral_strong_background-color | rgb(170,180,195) #AAB4C3, opacity: 1 |
| brand_appearance_neutral_strong_on-background-color --mds_brand_appearance_neutral_strong_on-background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_strongest_background-color --mds_brand_appearance_neutral_strongest_background-color | rgb(99,99,107) #63636B, opacity: 1 |
| brand_appearance_neutral_strongest_on-background-color --mds_brand_appearance_neutral_strongest_on-background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_neutral_inverse_text-color --mds_brand_appearance_neutral_inverse_text-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_neutral_inverse_background-color --mds_brand_appearance_neutral_inverse_background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_neutral_inverse_on-background-color --mds_brand_appearance_neutral_inverse_on-background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_neutral_inverse_border-color --mds_brand_appearance_neutral_inverse_border-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_state_neutral_default_hover_background-color --mds_brand_appearance_state_neutral_default_hover_background-color | rgb(238,240,243) #EEF0F3, opacity: 1 |
| brand_appearance_state_neutral_default_hover_border-color --mds_brand_appearance_state_neutral_default_hover_border-color | rgb(170,180,195) #AAB4C3, opacity: 1 |
| brand_appearance_state_neutral_default_active_background-color --mds_brand_appearance_state_neutral_default_active_background-color | rgb(187,195,207) #BBC3CF, opacity: 1 |
| brand_appearance_state_neutral_default_active_border-color --mds_brand_appearance_state_neutral_default_active_border-color | rgb(90,110,125) #5A6E7D, opacity: 1 |
| brand_appearance_state_neutral_weakest_opacity_hover_background-color --mds_brand_appearance_state_neutral_weakest_opacity_hover_background-color | rgba(170,180,195,0.16) #AAB4C3, opacity: 0.16 |
| brand_appearance_state_neutral_weakest_opacity_active_background-color --mds_brand_appearance_state_neutral_weakest_opacity_active_background-color | rgba(170,180,195,0.24) #AAB4C3, opacity: 0.24 |
| brand_appearance_state_neutral_weak_opacity_hover_background-color --mds_brand_appearance_state_neutral_weak_opacity_hover_background-color | rgba(170,180,195,0.36) #AAB4C3, opacity: 0.36 |
| brand_appearance_state_neutral_weak_opacity_active_background-color --mds_brand_appearance_state_neutral_weak_opacity_active_background-color | rgba(170,180,195,0.48) #AAB4C3, opacity: 0.48 |
| brand_appearance_state_neutral_strongest_hover_background-color --mds_brand_appearance_state_neutral_strongest_hover_background-color | rgb(60,60,70) #3C3C46, opacity: 1 |
| brand_appearance_state_neutral_strongest_active_background-color --mds_brand_appearance_state_neutral_strongest_active_background-color | rgb(99,99,107) #63636B, opacity: 1 |
| brand_appearance_state_neutral_inverse_opacity_hover_background-color --mds_brand_appearance_state_neutral_inverse_opacity_hover_background-color | rgba(255,255,255,0.12) #FFFFFF, opacity: 0.12 |
| brand_appearance_state_neutral_inverse_opacity_active_background-color --mds_brand_appearance_state_neutral_inverse_opacity_active_background-color | rgba(255,255,255,0.2) #FFFFFF, 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(0,89,134) #005986, 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(0,89,134) #005986, opacity: 1 |
| brand_appearance_info_weak_background-color --mds_brand_appearance_info_weak_background-color | rgb(226,243,251) #E2F3FB, opacity: 1 |
| brand_appearance_info_weak_on-background-color --mds_brand_appearance_info_weak_on-background-color | rgb(0,36,61) #00243D, opacity: 1 |
| brand_appearance_info_weak_border-color --mds_brand_appearance_info_weak_border-color | rgb(161,209,232) #A1D1E8, 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(184,0,18) #B80012, opacity: 1 |
| brand_appearance_error_default_background-color --mds_brand_appearance_error_default_background-color | rgb(184,0,18) #B80012, opacity: 1 |
| brand_appearance_error_default_on-background-color --mds_brand_appearance_error_default_on-background-color | rgb(255,255,255) #FFFFFF, opacity: 1 |
| brand_appearance_error_default_border-color --mds_brand_appearance_error_default_border-color | rgb(184,0,18) #B80012, opacity: 1 |
| brand_appearance_error_weak_background-color --mds_brand_appearance_error_weak_background-color | rgb(252,221,224) #FCDDE0, opacity: 1 |
| brand_appearance_error_weak_on-background-color --mds_brand_appearance_error_weak_on-background-color | rgb(55,0,5) #370005, opacity: 1 |
| brand_appearance_error_weak_border-color --mds_brand_appearance_error_weak_border-color | rgb(233,178,183) #E9B2B7, opacity: 1 |
| brand_appearance_state_error_default_hover_background-color --mds_brand_appearance_state_error_default_hover_background-color | rgb(166, 0, 16) #A60010, opacity: 1 |
| brand_appearance_state_error_default_active_background-color --mds_brand_appearance_state_error_default_active_background-color | rgb(129, 0, 13) #81000D, opacity: 1 |
| brand_appearance_state_error_weakest_opacity_hover_background-color --mds_brand_appearance_state_error_weakest_opacity_hover_background-color | rgba(184, 0, 18, 0.06) #B80012, opacity: 0.06 |
| brand_appearance_state_error_weakest_opacity_active_background-color --mds_brand_appearance_state_error_weakest_opacity_active_background-color | rgba(184, 0, 18, 0.1) #B80012, opacity: 0.1 |
Warning
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_warning_default_text-color --mds_brand_appearance_warning_default_text-color | rgb(128,104,20) #806814, opacity: 1 |
| brand_appearance_warning_default_background-color --mds_brand_appearance_warning_default_background-color | rgb(255,208,41) #FFD029, 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(255,208,41) #FFD029, opacity: 1 |
| brand_appearance_warning_weak_background-color --mds_brand_appearance_warning_weak_background-color | rgb(255,241,194) #FFF1C2, opacity: 1 |
| brand_appearance_warning_weak_on-background-color --mds_brand_appearance_warning_weak_on-background-color | rgb(77,62,12) #4D3E0C, opacity: 1 |
| brand_appearance_warning_weak_border-color --mds_brand_appearance_warning_weak_border-color | rgb(255,235,168) #FFEBA8, opacity: 1 |
| brand_appearance_state_warning_default_hover_background-color --mds_brand_appearance_state_warning_default_hover_background-color | rgb(230, 187, 37) #E6BB25, opacity: 1 |
| brand_appearance_state_warning_default_active_background-color --mds_brand_appearance_state_warning_default_active_background-color | rgb(179, 146, 29) #B3921D, opacity: 1 |
Success
| Design token CSS variable name (--mds) | Value |
|---|---|
| brand_appearance_success_default_text-color --mds_brand_appearance_success_default_text-color | rgb(50,133,41) #328529, opacity: 1 |
| brand_appearance_success_default_background-color --mds_brand_appearance_success_default_background-color | rgb(64,171,53) #40AB35, 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(64,171,53) #40AB35, opacity: 1 |
| brand_appearance_success_weak_background-color --mds_brand_appearance_success_weak_background-color | rgb(220,246,217) #DCF6D9, opacity: 1 |
| brand_appearance_success_weak_on-background-color --mds_brand_appearance_success_weak_on-background-color | rgb(19,51,16) #133310, opacity: 1 |
| brand_appearance_success_weak_border-color --mds_brand_appearance_success_weak_border-color | rgb(197,229,194) #C5E5C2, opacity: 1 |
| brand_appearance_state_success_default_hover_background-color --mds_brand_appearance_state_success_default_hover_background-color | rgb(58, 154, 48) #3A9A30, opacity: 1 |
| brand_appearance_state_success_default_active_background-color --mds_brand_appearance_state_success_default_active_background-color | rgb(50, 133, 41) #328529, opacity: 1 |