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.
Header/General Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.bannerBackground | onBackground | Banner background color |
| SMI.bannerText | background | Banner text color |
| SMI.chatBackground | background | Chat window background color |
| SMI.ctaButtons | secondary | Call-to-action button color |
| SMI.ctaButtonsText | secondary | Call-to-action text color |
| SMI.imageViewerBackground | tertiary | Image viewer background color |
| SMI.navigationBackground | primary | Navigation background color |
| SMI.navigationIcon | onPrimary | Navigation icon color |
| SMI.navigationText | onPrimary | Navigation text color |
Bubble/Chat Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.avatarBackground | secondary | Avatar background color |
| SMI.avatarForeground | onSecondary | Avatar foreground color |
| SMI.chatSeperator | onBackgroundSemiTransparent | Chat separator color |
| SMI.iconError | onSecondary | Error icon color that's used in the unknown entry |
| SMI.receivedBubbleBackground | surface | Background color for an incoming chat bubble |
| SMI.receivedBubbleBorder | surfaceVariant | Border color for incoming chat bubble |
| SMI.receivedBubbleText | onSurface | Text color for an incoming message bubble |
| SMI.sentBubbleBackground | secondary | Background color for an outgoing chat bubble |
| SMI.sentBubbleText | onSecondary | Text color for an outgoing message bubble |
| SMI.timestamp | onBackground | Timestamp text color |
| SMI.typingIndicatorText | onBackground | Typing indicator ellipse color |
| SMI.unknownEntryErrorIconBackground | error | Error entry icon background color |
Button Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.buttonBackground | surface | Button background color |
| SMI.buttonBorder | surfaceVariant | Button border color |
| SMI.buttonDisabledBackground | surface | Disabled text background color |
| SMI.buttonDisabledSelectedBackground | onBackground | Disabled selected text background color |
| SMI.buttonDisabledSelectedText | background | Disabled selected text color |
| SMI.buttonDisabledText | onBackground | Disabled text color |
| SMI.buttonFocusBackground | onSurfaceVariant | Focus text background color |
| SMI.buttonFocusText | surface | Focus text color |
| SMI.buttonText | onSurfaceVariant | Button text color |
| SMI.cancelButtonActive | onSecondary | Cancel button active color |
| SMI.cancelButtonBgActive | onBackground | Cancel button active background color |
| SMI.cancelButtonBgPressed | secondaryActive | Cancel button pressed background color |
| SMI.cancelButtonPressed | onSecondary | Cancel button pressed color |
| SMI.listPickerTitleBackground | surface | List picker title background color |
| SMI.listPickerTitleText | onSurface | List picker title text color |
Camera Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.cameraButtonActive | onSecondary | Camera button active color |
| SMI.cameraButtonBgActive | onSecondaryTransparent | Camera button active background color |
| SMI.cameraButtonBgFocused | onSecondarySemiTransparent | Camera button focused background color |
| SMI.cameraButtonBgPressed | onSecondary | Camera button pressed background color |
| SMI.cameraButtonFocused | secondary | Camera button focused color |
| SMI.cameraButtonPressed | onSecondary | Camera button pressed color |
Card Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.cardBackground | primary | Background color for a card |
| SMI.cardBorder | primaryVariant | Border color for a card |
| SMI.cardHeadlineText | onPrimary | Headline text for a card |
| SMI.cardSubheaderText | primaryVariant | Subheader text for a card |
Carousels Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.carouselBackground | surface | Carousel button background color |
| SMI.carouselButtonText | secondary | Carousel button text color |
| SMI.carouselButtonBackground | surface | Carousel button text disabled color |
| SMI.carouselButtonTextDisabled | onBackground | Carousel button text color |
| SMI.carouselImageBackground | primary | Carousel selected icon background color |
| SMI.carouselProgressIndicatorActive | secondary | Carousel background color |
| SMI.carouselProgressIndicatorInactive | onBackground | Carousel progress indicator active color |
| SMI.carouselSelectedHighlight | secondary | Carousel progress indicator inactive color |
| SMI.carouselSelectedIconBackground | secondary | Carousel selected icon foreground color |
| SMI.carouselSelectedIconForeground | onSecondary | Carousel selected highlight color |
| SMI.carouselSubTitleText | onPrimary | Carousel text subtitle color |
| SMI.carouselTitleText | primary | Carousel text title color |
Citation Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.citationsSourceButtonBackground | surfaceSecondaryVariant | Citation source button background color |
| SMI.citationsSourceButtonText | onSurface | Citation source button text color |
End Chat Session Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.endChatConfirmationBackground | background | End chat confirmation screen background color |
| SMI.endChatConfirmationButtonBackground | secondary | End chat confirmation button color |
| SMI.endChatConfirmationButtonBorder | secondary | End chat confirmation button border color |
| SMI.endChatConfirmationButtonCancelBackground | surface | End chat confirmation cancel button color |
| SMI.endChatConfirmationButtonCancelBorder | onSurfaceVariant | End chat confirmation cancel button border color |
| SMI.endChatConfirmationButtonCancelText | onSurface | End chat confirmation cancel button text color |
| SMI.endChatConfirmationButtonText | onSecondary | End chat confirmation button text color |
| SMI.endChatConfirmationProgressIndicator | secondary | End session progress indicator color |
| SMI.endChatConfirmationText | onSurface | End chat confirmation screen text color |
Fallback Message Screen Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.fallbackMessageBackground | background | Fallback message confirmation screen background color |
| SMI.fallbackMessageConfirmationButton | secondary | Fallback message confirmation button color |
| SMI.fallbackMessageConfirmationButtonText | onSecondary | Fallback message confirmation button text color |
| SMI.fallbackMessageConfirmationText | onSurface | Fallback message confirmation screen text color |
File Type Placeholders
| Detailed Token | Default Light Color | Default Dark Color | Description |
|---|---|---|---|
| SMI.colorFileIconCsv | #FF2E844A | #FF2E844A | Placeholder color for .csv files |
| SMI.colorFileIconExcel | #FF2E844A | #FF2E844A | Placeholder color for .xls and .xlsx files |
| SMI.colorFileIconTxt | #FFE4A201 | #FFE4A201 | Placeholder color for .txt files |
| SMI.colorFileIconWord | #FF107CAD | #FF107CAD | Placeholder color for .doc and .docx files |
| SMI.colorFileIconXml | #FFF38303 | #FFF38303 | Placeholder color for .xml files |
Icon Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.iconBackground | secondary | Icon background color |
| SMI.iconBackgroundSecondary | onBackground | Icon secondary background color |
| SMI.iconDisabled | onBackground | Icon disabled color |
| SMI.iconForeground | onSecondary | Icon foreground color |
Input Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.inputBackground | surface | Background color for text input field |
| SMI.inputBorder | surfaceVariant | Border color for text input field |
| SMI.inputPlaceholder | onBackground | Placeholder text color for the input text field |
| SMI.inputText | onSurface | Text font color when typing a message |
Loading Screen Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.loadingScreenAvatar | onBackground | Loading screen avatar color |
| SMI.loadingScreenBackground | background | Loading screen background color |
| SMI.loadingScreenInputTextPlaceholder | surfaceSecondary | Loading screen input text placeholder color |
| SMI.loadingScreenReceivedBubbleBackground | onBackground | Loading screen received bubble background color |
| SMI.loadingScreenSentBubbleBackground | surfaceSecondary | Loading screen sent bubble background color |
| SMI.loadingScreenTextPlaceholder | surfaceSecondary | Loading screen placeholder text color |
Markdown Text Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.receivedMarkdownCodeBackground | background | Markdown code background color |
| SMI.receivedMarkdownCodeText | onSurface | Markdown code text color |
| SMI.receivedMarkdownHorizontalRule | onSurface | Markdown horizontal rule color |
| SMI.receivedMarkdownLinkText | secondary | Markdown link text color |
Message Search Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.messageSearchHighlightBackgroundAgent | surfaceHighlight | Highlighted background color for rep |
| SMI.messageSearchHighlightBackgroundUser | secondaryHighlight | Highlighted background color for user |
| SMI.messageSearchHighlightBorderAgent | highlight | Highlighted border color for rep |
| SMI.messageSearchHighlightBorderUser | highlight | Highlighted border color for user |
| SMI.messageSearchHighlightTextAgent | primary | Highlighted text color for rep |
| SMI.messageSearchHighlightTextUser | primary | Highlighted text color for user |
| SMI.messageSearchInputBar | onBackgroundSemiTransparent | Search input bar color |
Participant Client Menu Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.participantClientMenuBackground | background | Client menu background color |
| SMI.participantClientMenuItemBackground | surface | Client menu item background color |
| SMI.participantClientMenuItemIcon | secondary | Client menu item icon color |
| SMI.participantClientMenuItemFocusBackground | onSurfaceVariant | Client menu item focus background color |
| SMI.participantClientMenuItemText | onSurface | Client menu text item color |
| SMI.participantClientMenuSearchIcon | secondary | Client menu search icon color |
| SMI.participantClientMenuButton | surface | Client menu button color |
| SMI.participantClientMenuButtonText | onSurface | Client menu button text color |
| SMI.participantClientMenuButtonBorder | surfaceVariant | Client menu button border color |
| SMI.participantClientMenuButtonSelected | onSurfaceVariant | Client menu button selected color |
Pre-Chat Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.prechatBackground | background | Pre-chat window background color |
| SMI.prechatBorder | onPrimary | Border color for text input field in pre-chat |
| SMI.prechatButton | secondary | Pre-chat button color |
| SMI.prechatButtonActive | secondaryActive | Pre-chat active button color |
| SMI.prechatButtonText | onSecondary | Pre-chat button text color |
| SMI.prechatDisabled | surfaceSecondary | Disabled pre-chat field |
| SMI.prechatError | error | Pre-chat error feedback color |
| SMI.prechatInputBackground | surface | Pre-chat window background color |
| SMI.prechatText | onPrimary | Text color on pre-chat form |
| SMI.prechatTextActive | secondary | Color for the active pre-chat cell |
| SMI.urlText | secondary | URL link color in the pre-chat Terms and Conditions string |
Request Transcript Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.transcriptBackground | background | Request transcript screen background color |
| SMI.transcriptText | onSurface | Request transcript screen text color |
| SMI.transcriptButtonLeave | secondary | Request transcript leave button color |
| SMI.transcriptButtonLeaveBorder | secondary | Request transcript leave button border color |
| SMI.transcriptButtonLeaveText | onSecondary | Request transcript leave button text color |
| SMI.transcriptButtonCancel | surface | Request transcript cancel button color |
| SMI.transcriptButtonCancelBorder | onSurfaceVariant | Request transcript cancel button border color |
| SMI.transcriptButtonCancelText | onSurface | Request transcript cancel button text color |
| SMI.transcriptProgressIndicator | secondary | Request transcript progress indicator color |
| SMI.transcriptProgressIndicatorBackground | onSecondary | Request transcript progress indicator background color |
Progress Indicator Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.notificationBadgeBackground | surface | Notification badge background color |
| SMI.notificationBadgeCounterBackground | error | Notification badge unread message counter background |
| SMI.notificationBadgeCounterText | surface | Notification badge unread message counter text color |
| SMI.notificationBadgeIcon | onSurface | Notification badge icon color |
| SMI.notificationBadgeOutline | surfaceVariant | Notification badge outline color |
| SMI.progressIndicatorIconInner | onSurface | Progress indicator animation icon inner arch color |
| SMI.progressIndicatorIconOuter | onSurface | Progress indicator animation icon outer arch color |
| SMI.progressIndicatorText | onSurface | Progress indicator label text color |
Secure Forms Colors
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.formBackButton | onSecondary | Secure form back button background color |
| SMI.formBackButtonText | secondary | Secure form back button text color |
| SMI.formBackground | background | Secure form background color |
| SMI.formCellIconBackgroundDisabled | surfaceHighlight | Secure form cell icon disabled background color |
| SMI.formCellIconDisabled | primary | Secure form cell icon disabled color |
| SMI.formConfirmationButtonCancel | surface | Secure form confirmation cancel button background color |
| SMI.formConfirmationButtonCancelBorder | onSurface | Secure form confirmation cancel button border text color |
| SMI.formConfirmationButtonCancelText | onSurface | Secure form confirmation cancel button text color |
| SMI.formConfirmationButtonLeave | secondary | Secure form confirmation window leave button background color |
| SMI.formConfirmationButtonLeaveText | onSecondary | Secure form confirmation window leave button text color |
| SMI.formDatePickerIcon | secondary | Secure form date picker icon color |
| SMI.formInputBackground | background | Secure form input background color |
| SMI.formInputBorder | onPrimary | Secure form input border color |
| SMI.formInputBorderActive | secondary | Secure form input border active color |
| SMI.formInputBorderError | error | Secure form input border error color |
| SMI.formInputFooterLabel | onPrimary | Secure form input footer label |
| SMI.formInputText | onPrimary | Secure form input text color |
| SMI.formInputTitleText | onPrimary | Secure form input title text color |
| SMI.formNextButton | secondary | Secure form next button background color |
| SMI.formNextButtonText | onSecondary | Secure form next button text color |
| SMI.formOptionButtonBackground | primary | Secure form selectable option button background color |
| SMI.formOptionButtonBorder | onPrimary | Secure form selectable option button border color |
| SMI.formOptionButtonBorderSelected | secondary | Secure form selectable option button border selected color |
| SMI.formOptionButtonBorderRequired | error | Secure form selectable option button border required color |
| SMI.formOptionButtonIcon | secondary | Secure form option icon button color |
| SMI.formOptionButtonText | onPrimary | Secure form selectable option button text color |
| SMI.formOptionTextError | error | Secure form selectable option text error color |
| SMI.formOptionTitle | onPrimary | Secure form selectable option title color |
| SMI.formProressBarForeground | secondary | Secure form progress bar foreground color |
| SMI.formSubTitleText | onPrimary | Secure form subtitle text color |
| SMI.formSubmitButton | secondary | Secure form submit button color |
| SMI.formSubmitButtonText | onSecondary | Secure form submit button color text |
| SMI.formTitleText | onPrimary | Secure form title text color |