Captain Peter light tokens

Preview the MDS website using the Captain Peter 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(208,0,111)
#D0006F, opacity: 1
brand_appearance_primary_default_background-color
--mds_brand_appearance_primary_default_background-color
rgb(208,0,111)
#D0006F, 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(208,0,111)
#D0006F, opacity: 1
brand_appearance_primary_default_link-color
--mds_brand_appearance_primary_default_link-color
rgb(208,0,111)
#D0006F, opacity: 1
brand_appearance_primary_weak_background-color
--mds_brand_appearance_primary_weak_background-color
rgb(240,240,240)
#F0F0F0, opacity: 1
brand_appearance_primary_weak_on-background-color
--mds_brand_appearance_primary_weak_on-background-color
rgb(255,255,255)
#FFFFFF, opacity: 1
brand_appearance_primary_weak_border-color
--mds_brand_appearance_primary_weak_border-color
rgb(212,212,212)
#D4D4D4, opacity: 1
brand_appearance_state_primary_default_hover_background-color
--mds_brand_appearance_state_primary_default_hover_background-color
rgb(217,51,140)
#D9338C, opacity: 1
brand_appearance_state_primary_default_active_background-color
--mds_brand_appearance_state_primary_default_active_background-color
rgb(166,0,88)
#A60058, opacity: 1
brand_appearance_state_primary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_primary_weakest_opacity_hover_background-color
rgba(20,20,20,0.12)
#141414, opacity: 0.12
brand_appearance_state_primary_weakest_opacity_active_background-color
--mds_brand_appearance_state_primary_weakest_opacity_active_background-color
rgba(20,20,20,0.24)
#141414, 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(18,19,63)
#12133F, opacity: 1
brand_appearance_secondary_default_background-color
--mds_brand_appearance_secondary_default_background-color
rgb(25,28,115)
#191C73, 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(25,28,115)
#191C73, opacity: 1
brand_appearance_secondary_default_link-color
--mds_brand_appearance_secondary_default_link-color
rgb(25,28,115)
#191C73, opacity: 1
brand_appearance_secondary_weak_background-color
--mds_brand_appearance_secondary_weak_background-color
rgb(231,234,251)
#E7EAFB, 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(159,166,209)
#9FA6D1, opacity: 1
brand_appearance_state_secondary_default_hover_background-color
--mds_brand_appearance_state_secondary_default_hover_background-color
rgb(18,19,63)
#12133F, opacity: 1
brand_appearance_state_secondary_default_hover_border-color
--mds_brand_appearance_state_secondary_default_hover_border-color
rgb(255,255,255)
#FFFFFF, opacity: 1
brand_appearance_state_secondary_default_active_background-color
--mds_brand_appearance_state_secondary_default_active_background-color
rgb(18,19,63)
#12133F, opacity: 1
brand_appearance_state_secondary_default_active_border-color
--mds_brand_appearance_state_secondary_default_active_border-color
rgb(255,255,255)
#FFFFFF, opacity: 1
brand_appearance_state_secondary_weakest_opacity_hover_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_hover_background-color
rgba(20,20,20,0.06)
#141414, opacity: 0.06
brand_appearance_state_secondary_weakest_opacity_active_background-color
--mds_brand_appearance_state_secondary_weakest_opacity_active_background-color
rgba(20,20,20,0.12)
#141414, opacity: 0.12

Neutral

Design token
CSS variable name (--mds)
Value
brand_appearance_neutral_default_text-color
--mds_brand_appearance_neutral_default_text-color
rgb(18,19,63)
#12133F, 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(18,19,63)
#12133F, opacity: 1
brand_appearance_neutral_default_border-color
--mds_brand_appearance_neutral_default_border-color
rgb(212,212,212)
#D4D4D4, opacity: 1
brand_appearance_neutral_default_opacity_border-color
--mds_brand_appearance_neutral_default_opacity_border-color
rgba(20,20,20,0.28)
#141414, opacity: 0.28
brand_appearance_neutral_weakest_text-color
--mds_brand_appearance_neutral_weakest_text-color
rgb(199,199,214)
#C7C7D6, opacity: 1
brand_appearance_neutral_weakest_background-color
--mds_brand_appearance_neutral_weakest_background-color
rgb(246,246,251)
#F6F6FB, opacity: 1
brand_appearance_neutral_weakest_on-background-color
--mds_brand_appearance_neutral_weakest_on-background-color
rgb(18,19,63)
#12133F, opacity: 1
brand_appearance_neutral_weak_text-color
--mds_brand_appearance_neutral_weak_text-color
rgb(128,128,151)
#808097, opacity: 1
brand_appearance_neutral_weak_background-color
--mds_brand_appearance_neutral_weak_background-color
rgb(213,213,224)
#D5D5E0, opacity: 1
brand_appearance_neutral_weak_on-background-color
--mds_brand_appearance_neutral_weak_on-background-color
rgb(18,19,63)
#12133F, opacity: 1
brand_appearance_neutral_weak_border-color
--mds_brand_appearance_neutral_weak_border-color
rgb(213,213,224)
#D5D5E0, opacity: 1
brand_appearance_neutral_weak_opacity_background-color
--mds_brand_appearance_neutral_weak_opacity_background-color
rgba(20,20,20,0.06)
#141414, opacity: 0.06
brand_appearance_neutral_strong_background-color
--mds_brand_appearance_neutral_strong_background-color
rgb(226,226,226)
#E2E2E2, opacity: 1
brand_appearance_neutral_strong_on-background-color
--mds_brand_appearance_neutral_strong_on-background-color
rgb(20,20,20)
#141414, opacity: 1
brand_appearance_neutral_strongest_background-color
--mds_brand_appearance_neutral_strongest_background-color
rgb(179,179,179)
#B3B3B3, opacity: 1
brand_appearance_neutral_strongest_on-background-color
--mds_brand_appearance_neutral_strongest_on-background-color
rgb(20,20,20)
#141414, 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(20,20,20)
#141414, 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(222,222,234)
#DEDEEA, opacity: 1
brand_appearance_state_neutral_default_hover_border-color
--mds_brand_appearance_state_neutral_default_hover_border-color
rgb(185,185,204)
#B9B9CC, opacity: 1
brand_appearance_state_neutral_default_active_background-color
--mds_brand_appearance_state_neutral_default_active_background-color
rgb(185,185,204)
#B9B9CC, opacity: 1
brand_appearance_state_neutral_default_active_border-color
--mds_brand_appearance_state_neutral_default_active_border-color
rgb(185,185,204)
#B9B9CC, opacity: 1
brand_appearance_state_neutral_weakest_opacity_hover_background-color
--mds_brand_appearance_state_neutral_weakest_opacity_hover_background-color
rgba(20,20,20,0.06)
#141414, opacity: 0.06
brand_appearance_state_neutral_weakest_opacity_active_background-color
--mds_brand_appearance_state_neutral_weakest_opacity_active_background-color
rgba(20,20,20,0.12)
#141414, opacity: 0.12
brand_appearance_state_neutral_weak_opacity_hover_background-color
--mds_brand_appearance_state_neutral_weak_opacity_hover_background-color
rgba(170,180,195,0.06)
#AAB4C3, opacity: 0.06
brand_appearance_state_neutral_weak_opacity_active_background-color
--mds_brand_appearance_state_neutral_weak_opacity_active_background-color
rgba(170,180,195,0.18)
#AAB4C3, opacity: 0.18
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(106,106,106)
#6A6A6A, 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

See also