Stillstrom light tokens

Preview the MDS website using the Stillstrom light 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(124,149,165)
#7C95A5, opacity: 1
brand_appearance_primary_weak_background-color
--mds_brand_appearance_primary_weak_background-color
rgb(204,255,214)
#CCFFD6, opacity: 1
brand_appearance_primary_weak_on-background-color
--mds_brand_appearance_primary_weak_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_primary_weak_border-color
--mds_brand_appearance_primary_weak_border-color
rgb(128,255,153)
#80FF99, opacity: 1
brand_appearance_state_primary_default_hover_background-color
--mds_brand_appearance_state_primary_default_hover_background-color
rgb(0,217,43)
#00D92B, 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,178,36)
#00B224, 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.12)
#00FF33, opacity: 0.12
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(11,23,31)
#0B171F, opacity: 1
brand_appearance_secondary_default_background-color
--mds_brand_appearance_secondary_default_background-color
rgb(124,149,165)
#7C95A5, 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(124,149,165)
#7C95A5, opacity: 1
brand_appearance_secondary_weak_background-color
--mds_brand_appearance_secondary_weak_background-color
rgb(222,229,233)
#DEE5E9, opacity: 1
brand_appearance_secondary_weak_on-background-color
--mds_brand_appearance_secondary_weak_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_secondary_weak_border-color
--mds_brand_appearance_secondary_weak_border-color
rgb(189,202,210)
#BDCAD2, opacity: 1
brand_appearance_state_secondary_default_hover_background-color
--mds_brand_appearance_state_secondary_default_hover_background-color
rgb(112,134,148)
#708694, opacity: 1
brand_appearance_state_secondary_default_active_background-color
--mds_brand_appearance_state_secondary_default_active_background-color
rgb(99,119,132)
#637784, opacity: 1
brand_appearance_state_secondary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_hover_background-color
rgba(124,149,165,0.12)
#7C95A5, opacity: 0.12
brand_appearance_state_secondary_weakest_opacity_active_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_active_background-color
rgba(124,149,165,0.24)
#7C95A5, opacity: 0.24

Neutral

Design token
CSS variable name (--mds)
Value
brand_appearance_neutral_default_text-color
--mds_brand_appearance_neutral_default_text-color
rgb(11,23,31)
#0B171F, 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(11,23,31)
#0B171F, opacity: 1
brand_appearance_neutral_default_border-color
--mds_brand_appearance_neutral_default_border-color
rgb(203,213,219)
#CBD5DB, opacity: 1
brand_appearance_neutral_default_opacity_border-color
--mds_brand_appearance_neutral_default_opacity_border-color
rgba(124,149,165,0.4)
#7C95A5, opacity: 0.4
brand_appearance_neutral_weakest_text-color
--mds_brand_appearance_neutral_weakest_text-color
rgb(96,104,109)
#60686D, opacity: 1
brand_appearance_neutral_weakest_background-color
--mds_brand_appearance_neutral_weakest_background-color
rgb(248,250,250)
#F8FAFA, opacity: 1
brand_appearance_neutral_weakest_on-background-color
--mds_brand_appearance_neutral_weakest_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_neutral_weak_text-color
--mds_brand_appearance_neutral_weak_text-color
rgb(72,81,87)
#485157, opacity: 1
brand_appearance_neutral_weak_background-color
--mds_brand_appearance_neutral_weak_background-color
rgb(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_neutral_weak_on-background-color
--mds_brand_appearance_neutral_weak_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_neutral_weak_border-color
--mds_brand_appearance_neutral_weak_border-color
rgb(222,229,233)
#DEE5E9, opacity: 1
brand_appearance_neutral_weak_opacity_background-color
--mds_brand_appearance_neutral_weak_opacity_background-color
rgba(124,149,165,0.15)
#7C95A5, opacity: 0.15
brand_appearance_neutral_strong_background-color
--mds_brand_appearance_neutral_strong_background-color
rgb(222,229,233)
#DEE5E9, opacity: 1
brand_appearance_neutral_strong_on-background-color
--mds_brand_appearance_neutral_strong_on-background-color
rgb(11,23,31)
#0B171F, opacity: 1
brand_appearance_neutral_strongest_background-color
--mds_brand_appearance_neutral_strongest_background-color
rgb(170,186,197)
#AABAC5, opacity: 1
brand_appearance_neutral_strongest_on-background-color
--mds_brand_appearance_neutral_strongest_on-background-color
rgb(11,23,31)
#0B171F, 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(11,23,31)
#0B171F, 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(235,239,242)
#EBEFF2, opacity: 1
brand_appearance_state_neutral_default_hover_border-color
--mds_brand_appearance_state_neutral_default_hover_border-color
rgb(163,181,192)
#A3B5C0, opacity: 1
brand_appearance_state_neutral_default_active_background-color
--mds_brand_appearance_state_neutral_default_active_background-color
rgb(216,223,228)
#D8DFE4, opacity: 1
brand_appearance_state_neutral_default_active_border-color
--mds_brand_appearance_state_neutral_default_active_border-color
rgb(137,160,174)
#89A0AE, opacity: 1
brand_appearance_state_neutral_weakest_opacity_hover_background-color
--mds_brand_appearance_state_neutral_weakest_opacity_hover_background-color
rgba(124,149,165,0.08)
#7C95A5, opacity: 0.08
brand_appearance_state_neutral_weakest_opacity_active_background-color
--mds_brand_appearance_state_neutral_weakest_opacity_active_background-color
rgba(124,149,165,0.16)
#7C95A5, opacity: 0.16
brand_appearance_state_neutral_weak_opacity_hover_background-color
--mds_brand_appearance_state_neutral_weak_opacity_hover_background-color
rgba(124,149,165,0.24)
#7C95A5, opacity: 0.24
brand_appearance_state_neutral_weak_opacity_active_background-color
--mds_brand_appearance_state_neutral_weak_opacity_active_background-color
rgba(124,149,165,0.32)
#7C95A5, opacity: 0.32
brand_appearance_state_neutral_strongest_hover_background-color
--mds_brand_appearance_state_neutral_strongest_hover_background-color
rgb(150,170,183)
#96AAB7, opacity: 1
brand_appearance_state_neutral_strongest_active_background-color
--mds_brand_appearance_state_neutral_strongest_active_background-color
rgb(131,154,170)
#839AAA, 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.20)
#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

See also