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_banner_background​​smi_color_on_backgroundBanner background color
smi_banner_text​​smi_color_backgroundBanner text color
smi_chat_background​​smi_color_backgroundChat window background color
smi_cta_buttons​​smi_color_secondaryCall-to-action button color
smi_cta_buttons_textsecondaryCall-to-action text color
smi_image_viewer_backgroundsmi_color_tertiaryImage viewer background color
smi_navigation_background​​smi_color_primaryNavigation background color
smi_navigation_iconsmi_color_on_primaryNavigation icon color
smi_navigation_text​​smi_color_on_primaryNavigation text color
smi_url_textsmi_color_secondary
Detailed TokenGeneric TokenDescription
smi_avatar_background​​smi_color_secondaryAvatar background color
smi_avatar_foreground​​smi_color_on_secondaryAvatar foreground color
smi_chat_separatorsmi_color_on_background_semi_transparentChat separator color
smi_received_bubble_text​​smi_color_on_surfaceText color for an incoming message bubble
smi_received_bubble_background​​smi_color_surfaceBackground color for an incoming chat bubble
smi_received_bubble_border​​smi_color_surface_variantBorder color for incoming chat bubble
smi_sent_bubble_background​​smi_color_secondaryBackground color for an outgoing chat bubble
smi_sent_bubble_text​​smi_color_on_secondaryText color for an outgoing message bubble
smi_timestamp​​smi_color_on_backgroundTimestamp text color
smi_typing_indicator_text​​smi_color_on_backgroundTyping indicator color
Detailed TokenGeneric TokenDescription
smi_button_background​​smi_color_surfaceButton background color
smi_button_border​​smi_color_surface_variantButton border color
smi_button_disabled_background​​smi_color_surfaceDisabled text background color
smi_button_disabled_selected_backgroundsmi_color_on_backgroundDisabled selected text background color
smi_button_disabled_selected_textsmi_color_backgroundDisabled selected text color
smi_button_disabled_text​​smi_color_on_backgroundDisabled text color
smi_button_focus_background​​smi_color_on_surface_variantFocus text background color
smi_button_focus_text​​smi_color_surfaceFocus text color
smi_button_text​​smi_color_on_surface_variantButton text color
smi_list_picker_title_backgroundsmi_color_surfaceList picker title background color
smi_list_picker_title_text​​smi_color_on_surfaceList picker title text color
smi_cancel_button_active​​smi_color_on_secondaryCancel button active color
smi_cancel_button_bg_active​​smi_color_on_backgroundCancel button active background color
smi_cancel_button_bg_pressed​​smi_color_secondary_activeCancel button pressed background color
smi_cancel_button_pressed​​smi_color_on_secondaryCancel button pressed color
Detailed TokenGeneric TokenDescription
smi_camera_button_active​​smi_color_on_secondaryCamera button active color
smi_camera_button_bg_active​​smi_color_on_secondary_transparentCamera button active background color
smi_camera_button_bg_focused​​smi_color_on_secondary_semi_transparentCamera button focused background color
smi_camera_button_bg_pressed​​smi_color_on_secondaryCamera button pressed background color
smi_camera_button_focused​​smi_color_secondaryCamera button focused color
smi_camera_button_pressed​​smi_color_on_secondaryCamera button pressed color
Detailed TokenGeneric TokenDescription
smi_card_background​​smi_color_primaryBackground color for a card
smi_card_border​​smi_color_primary_variantBorder color for a card
smi_card_headline_text​​smi_color_on_primaryHeadline text for a card
smi_card_subheader_text​​smi_color_primary_variantSubheader text for a card
Detailed TokenGeneric TokenDescription
smi_carousel_backgroundsmi_color_surfaceCarousel background color
smi_carousel_button_backgroundsmi_color_surfaceCarousel button background color
smi_carousel_button_textsmi_color_secondaryCarousel button text color
smi_carousel_button_text_disabledsmi_color_on_backgroundCarousel button text disabled color
smi_carousel_image_backgroundsmi_color_primaryCarousel image background color
smi_carousel_progress_indicator_activesmi_color_secondaryCarousel progress indicator active color
smi_carousel_progress_indicator_inactivesmi_color_on_backgroundCarousel progress indicator inactive color
smi_carousel_selected_highlightsmi_color_secondaryCarousel selected highlight color
smi_carousel_selected_icon_foregroundsmi_color_on_secondaryCarousel selected icon foreground color
smi_carousel_selected_icon_backgroundsmi_color_secondaryCarousel selected icon background color
smi_carousel_sub_title_textsmi_color_on_primaryCarousel text subtitle color
smi_carousel_title_textsmi_color_on_primaryCarousel text title color
Detailed TokenGeneric TokenDescription
smi_icon_background​​smi_color_secondaryIcon background color
smi_icon_background_secondarysmi_color_on_backgroundIcon secondary background color
smi_icon_disabled​​smi_color_on_backgroundIcon disabled color
smi_icon_foreground​​smi_color_on_secondaryIcon foreground color
Detailed TokenGeneric TokenDescription
smi_input_background​​smi_color_surfaceBackground color for text input field
smi_input_border​​smi_color_surface_variantBorder color for text input field
smi_input_text​​smi_color_on_surfaceText font color when typing a message
smi_input_placeholder​​smi_color_on_backgroundPlaceholder text color for the input text field
Detailed TokenGeneric TokenDescription
smi_loading_screen_avatarsmi_color_on_backgroundLoading screen avatar color
smi_loading_screen_backgroundsmi_color_backgroundLoading screen background color
smi_loading_screen_input_text_placeholdersmi_color_surface_secondaryLoading screen input text placeholder color
smi_loading_screen_received_bubble_backgroundsmi_color_on_backgroundLoading screen received bubble background color
smi_loading_screen_sent_bubble_backgroundsmi_color_surface_secondaryLoading screen sent bubble background color
smi_loading_screen_text_placeholdersmi_color_surface_secondaryLoading screen placeholder text color
Detailed TokenGeneric TokenDescription
smi_message_search_input_barsmi_color_on_background_semi_transparentSearch input bar color
smi_message_search_highlight_background_agentsmi_color_surface_highlightHighlighted background color for agent
smi_message_search_highlight_background_usersmi_color_secondary_highlightHighlighted background color for user
smi_message_search_highlight_border_agentsmi_color_highlightHighlighted border color for agent
smi_message_search_highlight_border_usersmi_color_highlightHighlighted border color for user
smi_message_search_highlight_text_agentsmi_color_primaryHighlighted text color for agent
smi_message_search_highlight_text_usersmi_color_primaryHighlighted text color for user
Detailed TokenGeneric TokenDescription
smi_participant_client_menu_backgroundsmi_color_backgroundClient menu background color
smi_participant_client_menu_item_backgroundsmi_color_surfaceClient menu item background color
smi_participant_client_menu_item_focus_backgroundsmi_color_on_surface_variantClient menu item focus background color
smi_participant_client_menu_item_iconsmi_color_secondaryClient menu item icon color
smi_participant_client_menu_item_textsmi_color_on_surfaceClient menu text item color
smi_participant_client_menu_search_iconsmi_color_secondaryClient menu search icon color
Detailed TokenGeneric TokenDescription
smi_prechat_background​​smi_color_backgroundPre-chat window background color
smi_prechat_border​​smi_color_on_primaryBorder color for text input field in pre-chat
smi_prechat_button​​smi_color_secondaryPre-chat button color
smi_prechat_button_active​​smi_color_secondary_activePre-chat active button color
smi_prechat_button_text​​smi_color_on_secondaryPre-chat button text color
smi_prechat_disabledsmi_color_surface_secondaryDisabled pre-chat field
smi_prechat_error​​smi_color_errorPre-chat error feedback color
smi_prechat_input_background​​smi_color_surfacePre-chat window background color
smi_prechat_text​​smi_color_on_primaryText color on pre-chat form
smi_prechat_text_active​​smi_color_secondaryColor for the active pre-chat cell
Detailed TokenGeneric TokenDescription
smi_form_back_buttonsmi_color_on_secondarySecure form back button background color
smi_form_back_button_textsmi_color_secondarySecure form back button text color
smi_form_backgroundsmi_color_backgroundSecure form background color
smi_form_cell_icon_background_disabledsmi_color_surface_highlightSecure form cell icon disabled background color
smi_form_cell_icon_disabledsmi_color_primarySecure form cell icon disabled color
smi_form_confirmation_button_cancelsmi_color_surfaceSecure form confirmation cancel button background color
smi_form_confirmation_button_cancel_bordersmi_color_on_surfaceSecure form confirmation cancel button border text color
smi_form_confirmation_button_cancel_textsmi_color_on_surfaceSecure form confirmation cancel button text color
smi_form_confirmation_button_leavesmi_color_secondarySecure form confirmation window leave button background color
smi_form_confirmation_button_leave_textsmi_color_on_secondarySecure form confirmation window leave button text color
smi_form_date_picker_iconsmi_color_secondarySecure form date picker icon color
smi_form_input_backgroundsmi_color_backgroundSecure form input background color
smi_form_input_bordersmi_color_on_primarySecure form input border color
smi_form_input_border_activesmi_color_secondarySecure form input border active color
smi_form_input_border_errorsmi_color_errorSecure form input border error color
smi_form_input_footer_labelsmi_color_on_primarySecure form input footer label
smi_form_input_textsmi_color_on_primarySecure form input text color
smi_form_input_title_textsmi_color_on_primarySecure form input title text color
smi_form_next_buttonsmi_color_secondarySecure form next button background color
smi_form_next_button_textsmi_color_on_secondarySecure form next button text color
smi_form_option_button_backgroundsmi_color_primarySecure form selectable option button background color
smi_form_option_button_bordersmi_color_on_primarySecure form selectable option button border color
smi_form_option_button_border_requiredsmi_color_errorSecure form selectable option button border required color
smi_form_option_button_border_selectedsmi_color_secondarySecure form selectable option button border selected color
smi_form_option_button_iconsmi_color_secondarySecure form option icon button color
smi_form_option_button_textsmi_color_on_primarySecure form selectable option button text color
smi_form_option_text_errorsmi_color_errorSecure form selectable option text error color
smi_form_option_titlesmi_color_on_primarySecure form selectable option title color
smi_form_proress_bar_foregroundsmi_color_secondarySecure form progress bar foreground color
smi_form_sub_title_textsmi_color_on_primarySecure form subtitle text color
smi_form_submit_buttonsmi_color_secondarySecure form submit button color
smi_form_submit_button_textsmi_color_on_secondarySecure form submit button color text
smi_form_title_textsmi_color_on_primarySecure form title text color