Detailed Branding Tokens

Use these tokens if you want to configure specific elements of the app. When you change any of these detailed branding token values, it overrides the generic token used by that element.

Detailed TokenGeneric TokenDescription
SMI.bannerBackgroundonBackgroundBanner background color
SMI.bannerTextbackgroundBanner text color
SMI.chatBackgroundbackgroundChat window background color
SMI.ctaButtonssecondaryCall-to-action button color
SMI.ctaButtonsTextsecondaryCall-to-action text color
SMI.imageViewerBackgroundtertiaryImage viewer background color
SMI.navigationBackgroundprimaryNavigation background color
SMI.navigationIcononPrimaryNavigation icon color
SMI.navigationTextonPrimaryNavigation text color
Detailed TokenGeneric TokenDescription
SMI.avatarBackgroundsecondaryAvatar background color
SMI.avatarForegroundonSecondaryAvatar foreground color
SMI.chatSeperatoronBackgroundSemiTransparentChat separator color
SMI.iconErroronSecondaryError icon color that's used in the unknown entry
SMI.receivedBubbleBackgroundsurfaceBackground color for an incoming chat bubble
SMI.receivedBubbleBordersurfaceVariantBorder color for incoming chat bubble
SMI.receivedBubbleTextonSurfaceText color for an incoming message bubble
SMI.sentBubbleBackgroundsecondaryBackground color for an outgoing chat bubble
SMI.sentBubbleTextonSecondaryText color for an outgoing message bubble
SMI.timestamponBackgroundTimestamp text color
SMI.typingIndicatorTextonBackgroundTyping indicator ellipse color
SMI.unknownEntryErrorIconBackgrounderrorError entry icon background color
Detailed TokenGeneric TokenDescription
SMI.buttonBackgroundsurfaceButton background color
SMI.buttonBordersurfaceVariantButton border color
SMI.buttonDisabledBackgroundsurfaceDisabled text background color
SMI.buttonDisabledSelectedBackgroundonBackgroundDisabled selected text background color
SMI.buttonDisabledSelectedTextbackgroundDisabled selected text color
SMI.buttonDisabledTextonBackgroundDisabled text color
SMI.buttonFocusBackgroundonSurfaceVariantFocus text background color
SMI.buttonFocusTextsurfaceFocus text color
SMI.buttonTextonSurfaceVariantButton text color
SMI.cancelButtonActive​​onSecondaryCancel button active color
SMI.cancelButtonBgActive​​onBackgroundCancel button active background color
SMI.cancelButtonBgPressed​​secondaryActiveCancel button pressed background color
SMI.cancelButtonPressed​​onSecondaryCancel button pressed color
SMI.listPickerTitleBackgroundsurfaceList picker title background color
SMI.listPickerTitleTextonSurfaceList picker title text color
Detailed TokenGeneric TokenDescription
SMI.cameraButtonActive​​onSecondaryCamera button active color
SMI.cameraButtonBgActive​​onSecondaryTransparentCamera button active background color
SMI.cameraButtonBgFocused​​onSecondarySemiTransparentCamera button focused background color
SMI.cameraButtonBgPressed​​onSecondaryCamera button pressed background color
SMI.cameraButtonFocused​​secondaryCamera button focused color
SMI.cameraButtonPressed​​onSecondaryCamera button pressed color
Detailed TokenGeneric TokenDescription
SMI.cardBackgroundprimaryBackground color for a card
SMI.cardBorderprimaryVariantBorder color for a card
SMI.cardHeadlineTextonPrimaryHeadline text for a card
SMI.cardSubheaderTextprimaryVariantSubheader text for a card
Detailed TokenGeneric TokenDescription
SMI.carouselBackgroundsurfaceCarousel button background color
SMI.carouselButtonBackgroundsurfaceCarousel button text disabled color
SMI.carouselButtonTextDisabledonBackgroundCarousel button text color
SMI.carouselImageBackgroundprimaryCarousel selected icon background color
SMI.carouselProgressIndicatorActivesecondaryCarousel background color
SMI.carouselProgressIndicatorInactiveonBackgroundCarousel progress indicator active color
SMI.carouselSelectedHighlightsecondaryCarousel progress indicator inactive color
SMI.carouselSelectedIconBackgroundsecondaryCarousel selected icon foreground color
SMI.carouselSelectedIconForegroundonSecondaryCarousel selected highlight color
SMI.carouselSubTitleTextonPrimaryCarousel text subtitle color
SMI.carouselTitleTextprimaryCarousel text title color
Detailed TokenGeneric TokenDescription
SMI.iconBackgroundsecondaryIcon background color
SMI.iconBackgroundSecondaryonBackgroundIcon secondary background color
SMI.iconDisabledonBackgroundIcon disabled color
SMI.iconForegroundonSecondaryIcon foreground color
Detailed TokenGeneric TokenDescription
SMI.inputBackgroundsurfaceBackground color for text input field
SMI.inputBordersurfaceVariantBorder color for text input field
SMI.inputPlaceholderonBackgroundPlaceholder text color for the input text field
SMI.inputTextonSurfaceText font color when typing a message
Detailed TokenGeneric TokenDescription
SMI.loadingScreenAvataronBackgroundLoading screen avatar color
SMI.loadingScreenBackgroundbackgroundLoading screen background color
SMI.loadingScreenInputTextPlaceholdersurfaceSecondaryLoading screen input text placeholder color
SMI.loadingScreenReceivedBubbleBackgroundonBackgroundLoading screen received bubble background color
SMI.loadingScreenSentBubbleBackgroundsurfaceSecondaryLoading screen sent bubble background color
SMI.loadingScreenTextPlaceholdersurfaceSecondaryLoading screen placeholder text color
Detailed TokenGeneric TokenDescription
SMI.messageSearchHighlightBackgroundAgentsurfaceHighlightHighlighted background color for agent
SMI.messageSearchHighlightBackgroundUsersecondaryHighlightHighlighted background color for user
SMI.messageSearchHighlightBorderAgenthighlightHighlighted border color for agent
SMI.messageSearchHighlightBorderUserhighlightHighlighted border color for user
SMI.messageSearchHighlightTextAgentprimaryHighlighted text color for agent
SMI.messageSearchHighlightTextUserprimaryHighlighted text color for user
SMI.messageSearchInputBaronBackgroundSemiTransparentSearch input bar color
Detailed TokenGeneric TokenDescription
SMI.participantClientMenuBackgroundbackgroundClient menu background color
SMI.participantClientMenuItemBackgroundsurfaceClient menu item background color
SMI.participantClientMenuItemIconsecondaryClient menu item icon color
SMI.participantClientMenuItemFocusBackgroundonSurfaceVariantClient menu item focus background color
SMI.participantClientMenuItemTextonSurfaceClient menu text item color
SMI.participantClientMenuSearchIconsecondaryClient menu search icon color
Detailed TokenGeneric TokenDescription
SMI.prechatBackgroundbackgroundPre-chat window background color
SMI.prechatBorderonPrimaryBorder color for text input field in pre-chat
SMI.prechatButtonsecondaryPre-chat button color
SMI.prechatButtonActivesecondaryActivePre-chat active button color
SMI.prechatButtonTextonSecondaryPre-chat button text color
SMI.prechatDisabledsurfaceSecondaryDisabled pre-chat field
SMI.prechatErrorerrorPre-chat error feedback color
SMI.prechatInputBackgroundsurfacePre-chat window background color
SMI.prechatTextonPrimaryText color on pre-chat form
SMI.prechatTextActivesecondaryColor for the active pre-chat cell
SMI.urlLinksecondaryURL link color in the pre-chat Terms and Conditions string
Detailed TokenGeneric TokenDescription
SMI.formBackButtononSecondarySecure form back button background color
SMI.formBackButtonTextsecondarySecure form back button text color
SMI.formBackgroundbackgroundSecure form background color
SMI.formCellIconBackgroundDisabledsurfaceHighlightSecure form cell icon disabled background color
SMI.formCellIconDisabledprimarySecure form cell icon disabled color
SMI.formConfirmationButtonCancelsurfaceSecure form confirmation cancel button background color
SMI.formConfirmationButtonCancelBorderonSurfaceSecure form confirmation cancel button border text color
SMI.formConfirmationButtonCancelTextonSurfaceSecure form confirmation cancel button text color
SMI.formConfirmationButtonLeavesecondarySecure form confirmation window leave button background color
SMI.formConfirmationButtonLeaveTextonSecondarySecure form confirmation window leave button text color
SMI.formDatePickerIconsecondarySecure form date picker icon color
SMI.formInputBackgroundbackgroundSecure form input background color
SMI.formInputBorderonPrimarySecure form input border color
SMI.formInputBorderActivesecondarySecure form input border active color
SMI.formInputBorderErrorerrorSecure form input border error color
SMI.formInputFooterLabelonPrimarySecure form input footer label
SMI.formInputTextonPrimarySecure form input text color
SMI.formInputTitleTextonPrimarySecure form input title text color
SMI.formNextButtonsecondarySecure form next button background color
SMI.formNextButtonTextonSecondarySecure form next button text color
SMI.formOptionButtonBackgroundprimarySecure form selectable option button background color
SMI.formOptionButtonBorderonPrimarySecure form selectable option button border color
SMI.formOptionButtonBorderSelectedsecondarySecure form selectable option button border selected color
SMI.formOptionButtonBorderRequirederrorSecure form selectable option button border required color
SMI.formOptionButtonIconsecondarySecure form option icon button color
SMI.formOptionButtonTextonPrimarySecure form selectable option button text color
SMI.formOptionTextErrorerrorSecure form selectable option text error color
SMI.formOptionTitleonPrimarySecure form selectable option title color
SMI.formProressBarForegroundsecondarySecure form progress bar foreground color
SMI.formSubTitleTextonPrimarySecure form subtitle text color
SMI.formSubmitButtonsecondarySecure form submit button color
SMI.formSubmitButtonTextonSecondarySecure form submit button color text
SMI.formTitleTextonPrimarySecure form title text color