Stillstrom dark tokens

Preview the MDS website using the Stillstrom 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(0,255,51)
#00FF33, opacity: 1
brand_appearance_primary_default_background-color
--mds_brand_appearance_primary_default_background-color
rgb(0,255,51)
#00FF33, opacity: 1
brand_appearance_primary_default_on-background-color
--mds_brand_appearance_primary_default_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_primary_default_border-color
--mds_brand_appearance_primary_default_border-color
rgb(0,255,51)
#00FF33, opacity: 1
brand_appearance_primary_default_link-color
--mds_brand_appearance_primary_default_link-color
rgb(157,162,165)
#9DA2A5, opacity: 1
brand_appearance_primary_weak_background-color
--mds_brand_appearance_primary_weak_background-color
rgb(0,102,20)
#006614, opacity: 1
brand_appearance_primary_weak_on-background-color
--mds_brand_appearance_primary_weak_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_primary_weak_border-color
--mds_brand_appearance_primary_weak_border-color
rgb(0,102,20)
#006614, opacity: 1
brand_appearance_state_primary_default_hover_background-color
--mds_brand_appearance_state_primary_default_hover_background-color
rgb(0,204,41)
#00CC29, opacity: 1
brand_appearance_state_primary_default_hover_border-color
--mds_brand_appearance_state_primary_default_hover_border-color
rgb(0,204,41)
#00CC29, opacity: 1
brand_appearance_state_primary_default_active_background-color
--mds_brand_appearance_state_primary_default_active_background-color
rgb(0,153,31)
#00991F, opacity: 1
brand_appearance_state_primary_default_active_border-color
--mds_brand_appearance_state_primary_default_active_border-color
rgb(0,153,31)
#00991F, opacity: 1
brand_appearance_state_primary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_primary_weakest_opacity_hover_background-color
rgba(0,255,51,0.14)
#00FF33, opacity: 0.14
brand_appearance_state_primary_weakest_opacity_active_background-color
--mds_brand_appearance_state_primary_weakest_opacity_active_background-color
rgba(0,255,51,0.24)
#00FF33, opacity: 0.24

Secondary UI

Design token
CSS variable name (--mds)
Value
brand_appearance_secondary_default_text-color
--mds_brand_appearance_secondary_default_text-color
rgb(243,243,244)
#F3F3F4, opacity: 1
brand_appearance_secondary_default_background-color
--mds_brand_appearance_secondary_default_background-color
rgb(255,255,255)
#FFFFFF, opacity: 1
brand_appearance_secondary_default_on-background-color
--mds_brand_appearance_secondary_default_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_secondary_default_border-color
--mds_brand_appearance_secondary_default_border-color
rgb(255,255,255)
#FFFFFF, opacity: 1
brand_appearance_secondary_weak_background-color
--mds_brand_appearance_secondary_weak_background-color
rgb(60,69,76)
#3C454C, opacity: 1
brand_appearance_secondary_weak_on-background-color
--mds_brand_appearance_secondary_weak_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_secondary_weak_border-color
--mds_brand_appearance_secondary_weak_border-color
rgb(48,58,65)
#303A41, opacity: 1
brand_appearance_state_secondary_default_hover_background-color
--mds_brand_appearance_state_secondary_default_hover_background-color
rgb(229,234,237)
#E5EAED, opacity: 1
brand_appearance_state_secondary_default_active_background-color
--mds_brand_appearance_state_secondary_default_active_background-color
rgb(203,213,219)
#CBD5DB, opacity: 1
brand_appearance_state_secondary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_hover_background-color
rgba(255,255,255,0.16)
#FFFFFF, opacity: 0.16
brand_appearance_state_secondary_weakest_opacity_active_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_active_background-color
rgba(255,255,255,0.28)
#FFFFFF, 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(243,243,244)
#F3F3F4, opacity: 1
brand_appearance_neutral_default_background-color
--mds_brand_appearance_neutral_default_background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_neutral_default_on-background-color
--mds_brand_appearance_neutral_default_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_neutral_default_border-color
--mds_brand_appearance_neutral_default_border-color
rgb(72,81,87)
#485157, 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(133,139,143)
#858B8F, opacity: 1
brand_appearance_neutral_weakest_background-color
--mds_brand_appearance_neutral_weakest_background-color
rgb(23,35,42)
#17232A, opacity: 1
brand_appearance_neutral_weakest_on-background-color
--mds_brand_appearance_neutral_weakest_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_neutral_weak_text-color
--mds_brand_appearance_neutral_weak_text-color
rgb(206,209,210)
#CED1D2, opacity: 1
brand_appearance_neutral_weak_background-color
--mds_brand_appearance_neutral_weak_background-color
rgb(48,58,65)
#303A41, opacity: 1
brand_appearance_neutral_weak_on-background-color
--mds_brand_appearance_neutral_weak_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_neutral_weak_border-color
--mds_brand_appearance_neutral_weak_border-color
rgb(48,58,65)
#303A41, opacity: 1
brand_appearance_neutral_weak_opacity_background-color
--mds_brand_appearance_neutral_weak_opacity_background-color
rgba(255,255,255,0.15)
#FFFFFF, opacity: 0.15
brand_appearance_neutral_strong_background-color
--mds_brand_appearance_neutral_strong_background-color
rgb(72,81,87)
#485157, opacity: 1
brand_appearance_neutral_strong_on-background-color
--mds_brand_appearance_neutral_strong_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_neutral_strongest_background-color
--mds_brand_appearance_neutral_strongest_background-color
rgb(96,104,109)
#60686D, opacity: 1
brand_appearance_neutral_strongest_on-background-color
--mds_brand_appearance_neutral_strongest_on-background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_neutral_inverse_text-color
--mds_brand_appearance_neutral_inverse_text-color
rgb(11,23,31)
#0B171F, 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(11,23,31)
#0B171F, opacity: 1
brand_appearance_neutral_inverse_border-color
--mds_brand_appearance_neutral_inverse_border-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_state_neutral_default_hover_background-color
--mds_brand_appearance_state_neutral_default_hover_background-color
rgb(35,46,53)
#232E35, opacity: 1
brand_appearance_state_neutral_default_hover_border-color
--mds_brand_appearance_state_neutral_default_hover_border-color
rgb(96,104,109)
#60686D, opacity: 1
brand_appearance_state_neutral_default_active_background-color
--mds_brand_appearance_state_neutral_default_active_background-color
rgb(60,69,76)
#3C454C, opacity: 1
brand_appearance_state_neutral_default_active_border-color
--mds_brand_appearance_state_neutral_default_active_border-color
rgb(145,151,154)
#91979A, 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(133,139,143)
#858B8F, opacity: 1
brand_appearance_state_neutral_strongest_active_background-color
--mds_brand_appearance_state_neutral_strongest_active_background-color
rgb(170,174,177)
#AAAEB1, opacity: 1
brand_appearance_state_neutral_inverse_opacity_hover_background-color
--mds_brand_appearance_state_neutral_inverse_opacity_hover_background-color
rgba(11,23,31,0.6)
#0B171F, opacity: 0.6
brand_appearance_state_neutral_inverse_opacity_active_background-color
--mds_brand_appearance_state_neutral_inverse_opacity_active_background-color
rgba(11,23,31,0.12)
#0B171F, 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