Aliança dark tokens

Preview the MDS website using the Aliança dark theme.

Primary UI

Design token
CSS variable name (--mds)
Value
brand_appearance_primary_default_text-color
--mds_brand_appearance_primary_default_text-color
rgb(5,125,201)
#057DC9, opacity: 1
brand_appearance_primary_default_background-color
--mds_brand_appearance_primary_default_background-color
rgb(5,125,201)
#057DC9, 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(5,125,201)
#057DC9, opacity: 1
brand_appearance_primary_default_link-color
--mds_brand_appearance_primary_default_link-color
rgb(5,125,201)
#057DC9, opacity: 1
brand_appearance_primary_weak_background-color
--mds_brand_appearance_primary_weak_background-color
rgb(2,38,60)
#02263C, opacity: 1
brand_appearance_primary_weak_on-background-color
--mds_brand_appearance_primary_weak_on-background-color
rgb(155,203,233)
#9BCBE9, opacity: 1
brand_appearance_primary_weak_border-color
--mds_brand_appearance_primary_weak_border-color
rgb(3,75,121)
#034B79, opacity: 1
brand_appearance_state_primary_default_hover_background-color
--mds_brand_appearance_state_primary_default_hover_background-color
rgb(4,100,161)
#0464A1, opacity: 1
brand_appearance_state_primary_default_hover_border-color
--mds_brand_appearance_state_primary_default_hover_border-color
rgb(4,100,161)
#0464A1, opacity: 1
brand_appearance_state_primary_default_active_background-color
--mds_brand_appearance_state_primary_default_active_background-color
rgb(3,75,121)
#034B79, opacity: 1
brand_appearance_state_primary_default_active_border-color
--mds_brand_appearance_state_primary_default_active_border-color
rgb(3,75,121)
#034B79, opacity: 1
brand_appearance_state_primary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_primary_weakest_opacity_hover_background-color
rgba(5,125,201,0.16)
#057DC9, opacity: 0.16
brand_appearance_state_primary_weakest_opacity_active_background-color
--mds_brand_appearance_state_primary_weakest_opacity_active_background-color
rgba(5,125,201,0.28)
#057DC9, opacity: 0.28

Secondary UI

Design token
CSS variable name (--mds)
Value
brand_appearance_secondary_default_text-color
--mds_brand_appearance_secondary_default_text-color
rgb(192,197,213)
#C0C5D5, opacity: 1
brand_appearance_secondary_default_background-color
--mds_brand_appearance_secondary_default_background-color
rgb(205,209,222)
#CDD1DE, 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(129,139,172)
#818BAC, opacity: 1
brand_appearance_secondary_weak_background-color
--mds_brand_appearance_secondary_weak_background-color
rgb(16,36,97)
#102461, opacity: 1
brand_appearance_secondary_weak_on-background-color
--mds_brand_appearance_secondary_weak_on-background-color
rgb(255,255,255)
#FFFFFF, opacity: 1
brand_appearance_secondary_weak_border-color
--mds_brand_appearance_secondary_weak_border-color
rgb(66,82,130)
#425282, opacity: 1
brand_appearance_state_secondary_default_hover_background-color
--mds_brand_appearance_state_secondary_default_hover_background-color
rgb(154,163,189)
#9AA3BD, opacity: 1
brand_appearance_state_secondary_default_active_background-color
--mds_brand_appearance_state_secondary_default_active_background-color
rgb(129,139,172)
#818BAC, opacity: 1
brand_appearance_state_secondary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_hover_background-color
rgba(28,47,106,0.28)
#1C2F6A, opacity: 0.28
brand_appearance_state_secondary_weakest_opacity_active_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_active_background-color
rgba(28,47,106,0.56)
#1C2F6A, opacity: 0.56

Neutral

Design token
CSS variable name (--mds)
Value
brand_appearance_neutral_default_text-color
--mds_brand_appearance_neutral_default_text-color
rgb(240,240,240)
#F0F0F0, 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(240,240,240)
#F0F0F0, opacity: 1
brand_appearance_neutral_default_border-color
--mds_brand_appearance_neutral_default_border-color
rgb(76,76,76)
#4C4C4C, opacity: 1
brand_appearance_neutral_default_opacity_border-color
--mds_brand_appearance_neutral_default_opacity_border-color
rgba(255,255,255,0.24)
#FFFFFF, opacity: 0.24
brand_appearance_neutral_weakest_text-color
--mds_brand_appearance_neutral_weakest_text-color
rgb(138,138,138)
#8A8A8A, opacity: 1
brand_appearance_neutral_weakest_background-color
--mds_brand_appearance_neutral_weakest_background-color
rgb(33,33,33)
#212121, opacity: 1
brand_appearance_neutral_weakest_on-background-color
--mds_brand_appearance_neutral_weakest_on-background-color
rgb(240,240,240)
#F0F0F0, opacity: 1
brand_appearance_neutral_weak_text-color
--mds_brand_appearance_neutral_weak_text-color
rgb(212,212,212)
#D4D4D4, opacity: 1
brand_appearance_neutral_weak_background-color
--mds_brand_appearance_neutral_weak_background-color
rgb(54,54,54)
#363636, opacity: 1
brand_appearance_neutral_weak_on-background-color
--mds_brand_appearance_neutral_weak_on-background-color
rgb(240,240,240)
#F0F0F0, opacity: 1
brand_appearance_neutral_weak_border-color
--mds_brand_appearance_neutral_weak_border-color
rgb(54,54,54)
#363636, opacity: 1
brand_appearance_neutral_weak_opacity_background-color
--mds_brand_appearance_neutral_weak_opacity_background-color
rgba(255,255,255,0.14)
#FFFFFF, opacity: 0.14
brand_appearance_neutral_strong_background-color
--mds_brand_appearance_neutral_strong_background-color
rgb(76,76,76)
#4C4C4C, opacity: 1
brand_appearance_neutral_strong_on-background-color
--mds_brand_appearance_neutral_strong_on-background-color
rgb(240,240,240)
#F0F0F0, opacity: 1
brand_appearance_neutral_strongest_background-color
--mds_brand_appearance_neutral_strongest_background-color
rgb(106,106,106)
#6A6A6A, opacity: 1
brand_appearance_neutral_strongest_on-background-color
--mds_brand_appearance_neutral_strongest_on-background-color
rgb(240,240,240)
#F0F0F0, 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(20,20,20)
#141414, 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(54,54,54)
#363636, opacity: 1
brand_appearance_state_neutral_default_hover_border-color
--mds_brand_appearance_state_neutral_default_hover_border-color
rgb(106,106,106)
#6A6A6A, opacity: 1
brand_appearance_state_neutral_default_active_background-color
--mds_brand_appearance_state_neutral_default_active_background-color
rgb(76,76,76)
#4C4C4C, opacity: 1
brand_appearance_state_neutral_default_active_border-color
--mds_brand_appearance_state_neutral_default_active_border-color
rgb(138,138,138)
#8A8A8A, 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.14)
#FFFFFF, opacity: 0.14
brand_appearance_state_neutral_weakest_opacity_active_background-color
--mds_brand_appearance_state_neutral_weakest_opacity_active_background-color
rgba(255,255,255,0.24)
#FFFFFF, opacity: 0.24
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(138,138,138)
#8A8A8A, opacity: 1
brand_appearance_state_neutral_strongest_active_background-color
--mds_brand_appearance_state_neutral_strongest_active_background-color
rgb(179,179,179)
#B3B3B3, opacity: 1
brand_appearance_state_neutral_inverse_opacity_hover_background-color
--mds_brand_appearance_state_neutral_inverse_opacity_hover_background-color
rgba(20,20,20,0.06)
#141414, opacity: 0.06
brand_appearance_state_neutral_inverse_opacity_active_background-color
--mds_brand_appearance_state_neutral_inverse_opacity_active_background-color
rgba(20,20,20,0.12)
#141414, opacity: 0.12

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

See also