Generic Branding Tokens

Generic branding tokens Generic branding tokens for pre-chat

Use these tokens to adjust the colors of the app to match your product's brand.

KeywordDefault Light ColorDefault Dark ColorDescription
​​smi_color_primary#FAFAF9 color light#2B2B26 color darkPrimary branding color
​​smi_color_primary_variant#706E6B color light#2B2826 color darkVariant of the primary color
​​smi_color_on_primary#2B2B26 color light#ECEBEA color darkPrimary text color
​​smi_color_secondary#0070D2 color light#007ADD color darkSecondary branding color
​​smi_color_on_secondary#FFFFFF color light#FFFFFF color darkSecondary text color
​​smi_color_secondary_active#014485 color light#16325C color darkSecondary color for active elements
smi_color_secondary_highlight#062680 color light#6EC4FA color darkSecondary color for highlighted elements
​​smi_color_on_secondary_variant#DDDBDA color light#1A1B1E color darkAlternate secondary text color
​​smi_color_background#F3F2F2 color light#080707 color darkBackground color
​​smi_color_on_background#706E6B color light#B0ADAB color darkColor for elements on the background color
​​smi_color_surface#FFFFFF color light#1A1B1E color darkPrimary color for surfaces
​​smi_color_on_surface#2B2826 color light#C9C7C5 color darkText color on surfaces
​​smi_color_surface_highlight#B3B3B3 color light#66676B color darkHighlight color for surfaces
​​smi_color_surface_variant#DDDBDA color light#30373D color darkVariant color for surfaces
​​smi_color_on_surface_variant#0070D2 color light#FFFFFF color darkVariant color for surfaces
smi_color_surface_secondary#CED0D2 color light#30373D color darkSecondary color for surfaces
smi_color_tertiary#000000 color light#000000 color darkTertiary branding color
smi_color_highlight#FCC003 color light#FCC003 color darkHighlight color
​​smi_color_error#A61A14 color light#D4504C color darkError feedback color
​​smi_color_warning#FFB75D color light#FFB75D color darkWarning feedback color
​​smi_color_success#04844B color light#4BCA81 color darkSuccess feedback color
smi_color_transparent(alpha #00) #00FFFF(alpha #00) #00FFFFTransparent color
smi_color_background_transparent(alpha #80) #F3F2F2(alpha #80) #080707Transparent background color
smi_color_surface_transparent(alpha #80) #FFFFFF(alpha #80) #1A1B1ETransparent surface color
smi_color_on_secondary_transparent(alpha #80) #FFFFFF(alpha #80) #FFFFFFTransparent secondary color
smi_color_on_secondary_semi_transparent(alpha #99) #FFFFFF(alpha #99) #FFFFFFTransparent color on secondary
smi_color_on_background_semi_transparent(alpha: #80) #706E6B(alpha: #80) #B0ADABSemi-transparent color for elements on the background color