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.primary#FAFAF9 color light#2B2B26 color darkPrimary branding color
SMI.primaryVariant#706E6B color light#2B2826 color darkVariant of the primary color
SMI.onPrimary#2B2B26 color light#ECEBEA color darkPrimary text color
SMI.secondary#0070D2 color light#007ADD color darkSecondary branding color
SMI.onSecondary#FFFFFF color light#FFFFFF color darkSecondary text color
SMI.secondaryActive#014485 color light#16325C color darkSecondary color for active elements
SMI.secondaryHighlight#062680 color light#6EC4FA color darkSecondary color for highlighted elements
​​SMI.onSecondaryVariant#DDDBDA color light#1A1B1E color darkAlternate secondary text color
SMI.background#F3F2F2 color light#080707 color darkBackground color
SMI.onBackground#706E6B color light#B0ADAB color darkColor for elements on the background color
SMI.surface#FFFFFF color light#1A1B1E color darkPrimary color for surfaces
SMI.onSurface#2B2826 color light#C9C7C5 color darkText color on surfaces
SMI.surfaceHighlight#B3B3B3 color light#66676B color darkHighlight color for surfaces
SMI.surfaceVariant#DDDBDA color light#30373D color darkVariant color for surfaces
SMI.onSurfaceVariant#0070D2 color light#FFFFFF color darkVariant color for surfaces
SMI.surfaceSecondary#CED0D2 color light#30373D color darkSecondary color for surfaces
SMI.tertiary#000000 color light#000000 color darkTertiary branding color
SMI.highlight#FCC003 color light#FCC003 color darkHighlight color
SMI.error#A61A14 color light#D4504C color darkError feedback color
SMI.warning#FFB75D color light#FFB75D color darkWarning feedback color
SMI.success#04844B color light#4BCA81 color darkSuccess feedback color
SMI.transparent(alpha #00) #00FFFF(alpha #00) #00FFFFTransparent color
SMI.backgroundTransparent(alpha #80) #F3F2F2(alpha #80) #080707Transparent background color
SMI.surfaceTransparent(alpha #80) #FFFFFF(alpha #80) #1A1B1ETransparent surface color
SMI.onSecondaryTransparent(alpha #80) #FFFFFF(alpha #80) #FFFFFFTransparent secondary color
SMI.onSecondarySemiTransparent(alpha #99) #FFFFFF(alpha #99) #FFFFFFTransparent color on secondary
SMI.onBackgroundSemiTransparent(alpha: #80) #706E6B(alpha: #80) #B0ADABSemi-transparent color for elements on the background color