Stillstrom 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(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 |