Skip to main content

Additional Resources

Colors

Studio Web Accent
accent-50 #E3EFF9
accent-100 #B5D3EE
accent-200 #89B8E4
accent-300 #619FD9
accent-400 #3C88CF
accent-500 #1A72C4
accent-600 #1764AB
accent-700 #135593
accent-800 #10477A
accent-900 #0D3961
Base Grays
base-50 #EBEBEB
base-100 #C6C6C6
base-200 #A1A1A1
base-200 #A1A1A1
base-400 #575757
base-500 #323232
base-600 #2C2C2C
base-700 #252525
base-800 #1F1F1F
base-900 #191919
Alert States
AlertRed #B22222
AlertAmber #BF5300
AlertGreen #008040
AlertStandard (Base 600) #2C2C2C

Branding Properties

Property NameLight ThemeDark Theme
accentIconBackgroundwhite white
accentIconBackgroundHoverwhite white
accentIconBorderbase-600 white
accentIconBorderHoverbase-600 white
accentIconForegroundaccent-500 accent-500
accentIconForegroundHoveraccent-500 accent-500
alertAmberBackgroundalertAmber alertAmber
alertAmberBackgroundHoverwhite white
alertAmberBorderalertAmber alertAmber
alertAmberBorderHoveralertAmber alertAmber
alertAmberForegroundwhite white
alertAmberForegroundHoverwhite white
alertAmberIconwhite white
alertAmberIconHoveralertAmber alertAmber
alertButtonBackgroundDisabledbase-100 base-600
alertButtonBorderDisabledbase-100 base-600
alertButtonForegroundDisabledbase-400 base-200
alertButtonIconDisabledbase-400 base-200
alertGrayBackgroundbase-600 base-600
alertGrayBackgroundHoverwhite white
alertGrayBorderbase-600 base-600
alertGrayBorderHoverbase-600 base-600
alertGrayForegroundwhite white
alertGrayForegroundHoverbase-600 base-600
alertGrayIconwhite white
alertGrayIconHoverbase-600 base-600
alertGreenBackgroundalertGreen alertGreen
alertGreenBackgroundHoverwhite white
alertGreenBorderalertGreen alertGreen
alertGreenBorderHoveralertGreen alertGreen
alertGreenForegroundwhite white
alertGreenForegroundHoveralertGreen alertGreen
alertGreenIconwhite white
alertGreenIconHoveralertGreen alertGreen
alertRedBackgroundalertRed alertRed
alertRedBackgroundHoverwhite white
alertRedBorderalertRed alertRed
alertRedBorderHoveralertRed alertRed
alertRedForegroundwhite white
alertRedForegroundHoveralertRed alertRed
alertRedIconwhite white
alertRedIconHoveralertRed alertRed
buttonBackgroundwhite base-900
buttonBackgroundDisabledbase-100 base-600
buttonBackgroundHoverbase-100 base-100
buttonBorderbase-600 base-200
buttonBorderDisabledbase-300 base-300
buttonBorderHoverbase-700 base-700
buttonForegroundblack white
buttonForegroundDisabledbase-400 base-200
buttonForegroundHoverblack base-900
buttonIconaccent-500 white
buttonIconDisabledbase-400 base-200
buttonIconHoveraccent-500 accent-500
disabledIconFillbase-500 base-500
emphasizedButtonBackgroundaccent-500 accent-500
emphasizedButtonBackgroundDisabledaccent-100 accent-200
emphasizedButtonBackgroundHoveraccent-50 accent-50
emphasizedButtonBorderaccent-500 accent-100
emphasizedButtonBorderDisabledaccent-100 accent-700
emphasizedButtonBorderHoveraccent-500 accent-500
emphasizedButtonForegroundwhite white
emphasizedButtonForegroundDisabledaccent-700 accent-700
emphasizedButtonForegroundHoveraccent-700 accent-600
emphasizedButtonIconwhite white
emphasizedButtonIconDisabledaccent-700 accent-700
emphasizedButtonIconHoveraccent-500 accent-500
headerBackgroundbase-100 base-800
inputBorderbase-600 base-200
inputBorderDisabledbase-200 base-300
listContentbase-900 base-100
listMenuItemBorderbase-200 base-800
listSecondaryContentbase-200 base-100
mapWidgetBackgroundwhite white
mapWidgetBackgroundDisabledbase-50 base-50
mapWidgetBackgroundHoveraccent-500 accent-500
mapWidgetBorderwhite white
mapWidgetBorderDisabledbase-50 base-50
mapWidgetBorderHoveraccent-500 accent-500
mapWidgetForegroundaccent-500 accent-500
mapWidgetForegroundDisabledbase-500 base-500
mapWidgetForegroundHoverwhite white
mapWidgetIconaccent-500 accent-500
mapWidgetIconDisabledbase-500 base-500
mapWidgetIconHoverwhite white
nonetransparenttransparent
panelBorderbase-400 base-600
primaryAccentaccent-500 accent-50
PrimaryAccentDisabledbase-300 base-300
primaryAccentHoverbase-600 base-200
primaryAccentLargebase-500 base-200
primaryBackgroundwhite base-800
primaryBackgroundDisabledbase-50 base-500
primaryBorderbase-100 base-600
primaryForegroundbase-900 white
primaryForegroundDisabledbase-200 base-500
secondaryBackgroundbase-50 base-900
secondaryBorderbase-200 base-700
secondaryForegroundbase-800 base-200
tabPrimaryForegroundaccent-500 base-200
tabSecondaryForegroundbase-900 white
itemSelectedBackgroundaccent-50 accent-800
itemHoverBackgroundaccent-200 accent-500