Symphony Messaging Dev Docs
Developer CertificationREST API
  • Start Your Developer Journey
  • Bots
    • Building Bots
    • Planning Your Bot
      • Conversational Bot
      • Interactive Bot
      • Headless Bot
    • Getting Started
      • Getting Started with BDK
      • Creating a Service Account
      • Configuration
      • Truststores
    • Overview of REST API
      • REST API Architecture
      • Overview of Pod API
      • Overview of Key Manager API
      • Overview of Agent API
      • Bot Permissions
      • REST API Reference
    • Authentication
      • RSA Authentication Workflow
      • Certificate Authentication Workflow
    • Datafeed
      • Real-Time Events
      • Overview of Streams
    • Messages
      • MessageML
        • MessageML Basics
          • Content Grouping
          • Text formatting and semantics
          • Tables
          • Images
          • Tags and mentions
            • Enhanced tags notice
          • Style Attributes
          • Special Characters
          • Emojis
        • Elements Interactive Forms
          • Buttons
            • Icon set for Buttons
          • Text Field
          • Masked Text Field
          • Text Area
          • Checkbox
          • Radio Button
          • Dropdown Menu
          • Person Selector
          • Room Selector
          • Date Picker
          • Time Picker
          • Timezone Picker
          • Table Select
          • Regular Expressions - Regex
        • Extensibility UI Actions
          • OpenChat
          • Dialog
        • Entities
          • Standard Entities
          • Custom Entities
      • PresentationML
    • Bots Best Practices
    • Open Source Code Samples
  • Extension Apps
    • Building Extension Apps
    • Planning Your App
    • Getting Started
      • Getting Started with ADK
      • Application Manifest Bundle
      • Add an Extension App to a Symphony Pod
    • Overview of Extension API
      • Initialization
      • Register and Connect
      • Extension API Services
        • Service Interface
        • Register and Subscribe
        • Modules Service
        • Entity Service
          • Entity Advanced Templating
          • Message Format - ExtensionML
        • Applications-Nav Service
        • Share Service
        • Commerce Service
        • Dialogs Service
        • UI Service
          • Receiving Conversation and User Information
          • Filter Function
    • App Authentication
      • Circle of Trust Authentication
      • OBO Authentication
  • Developer Tools
    • Symphony Messaging Generator
    • Bot Developer Kit for Java
      • Build a Conversational Bot
      • Build an Interactive Bot
      • Build a Headless Bot
      • Integrate a Bot with an Identity Provider
    • Bot Developer Kit for Python
    • App Developer Kit
      • Build a Basic Extension App
      • Build an Extension App with App Views
        • Add Buttons and Handlers to an Extension App
        • Add BDK to an Extension App for Circle of Trust
      • Build an Extension App with Message Renderers
    • Postman
    • UI Style Guide
      • Colors
      • Form Elements
      • Buttons
  • Embedded Modules
    • Symphony Messaging URI
      • Symphony Messaging URI for Mobile (deprecated)
    • Desktop interoperability
      • FDC3 intents
        • Message format
      • Configuration guide
        • Configure Interop.io
        • Configure Here Core
        • Configure Finsemble
        • Configure with Embedded Mode
        • Troubleshooting
      • Change log
    • Embedded Mode
      • Get started
      • Configuration parameters
      • Open a chat
      • Send a message
      • Create a room
      • Pin a message
      • Notifications
      • Support for extension applications
      • Open an app
      • Embedded Mode with Sponsored Access
      • Pricing tiers
      • Logout
    • Universal Webhook
      • User guide
        • Example with Splunk
      • Installation guide
  • Symphony REST API
    • Messaging REST API
    • Federation
    • Sponsored Access API
    • Enhanced Directory API
  • Developer Certification
    • Developer Certification
  • Mobile Frameworks
    • Blackberry
    • MobileIron
  • Admin Guides
    • Change Logs
      • API Agent
        • Agent - 25.5
        • Agent - 25.3 (LTS)
        • Agent - 24.12 (LTS)
        • Agent - 24.9 (LTS)
        • Agent - 24.6 (LTS)
        • Archives
          • Agent - 24.11
          • Agent - 24.10
          • Agent - 23.9 (LTS)
          • Agent - 24.8
          • Agent - 24.3 (LTS)
          • Agent - 24.2
          • Agent - 24.1
          • Agent - 23.12 (LTS)
          • Agent - 23.11
          • Agent - 23.10
          • Agent - 23.7
          • Agent - 23.6 (LTS)
          • Agent - 23.4
          • Agent - 23.3 (LTS)
          • Agent - 23.1
          • Agent - 22.12 (LTS)
          • Agent - 22.11
          • Agent - 22.10
          • Agent - 22.9 (LTS)
          • Agent - 22.8
          • Agent - 22.7
          • Agent - 22.6 (LTS)
          • Agent - 20.14
          • Agent - 20.13
          • Agent - 20.12
          • Agent - 20.10
          • Agent - 20.9 (2.62)
          • Agent - 20.7 (2.61)
          • Agent - 20.6 (2.60)
          • Agent - 20.5 (2.59)
          • Agent - 20.4 (2.58)
      • SBE (Pod API)
        • SBE - 24.1
        • SBE - 20.16
        • SBE - 20.15
        • Archives
          • SBE - 20.14
          • SBE - 20.13
          • SBE - 20.12
          • SBE - 20.10
          • SBE - 20.9 (1.62)
          • SBE - 20.7 (1.61)
          • SBE - 20.6 (1.60)
          • SBE - 20.5 (1.59)
          • SBE - 20.4 (1.58)
      • Client 2.0 APIs
        • Client 2.0 - 25.05
        • Client 2.0 - 25.03
        • Client 2.0 - 24.12
        • Client 2.0 - 24.05
        • Client 2.0 - 23.02
        • Client 2.0 - 22.11
        • Archives
          • Client 2.0 - 20.4
          • Client 2.0 - 20.5
          • Client 2.0 - 20.6
          • Client 2.0 - 20.7
          • Client 2.0 - 20.9
          • Client 2.0 - 20.10
          • Client 2.0 - 20.12
          • Client 2.0 - 22.8
          • Client 2.0 - 22.10
      • Universal Webhook
        • Univ Webhook - 2.6
        • Univ Webhook - 2.4
        • Univ Webhook - 2.2
        • Univ Webhook - 2.1
        • Univ Webhook - 2.0
    • API Change Management
    • Global Throttling
    • Agent Guide
      • Network Topology
      • Agent Download
      • Agent Installation
      • Agent Configuration Fields
      • Agent Server High Availability
      • Agent Performance Tuning
Powered by GitBook
On this page
  • Theme Colors
  • Advanced theme colors
  • Constant Colors

Was this helpful?

Export as PDF
  1. Developer Tools
  2. UI Style Guide

Colors

Theme Colors

Symphony Messaging supports a large variety of color themes, to ensure that your applications always feel familiar to users, you should use the following colors:

Color

Description

tempo-text-color--normal

Normal text color.

This color depends on the user’s theme settings.

tempo-text-color--secondary

Secondary text color. Often for less important information.

This color depends on the user’s theme settings.

tempo-ui--background

Background color for the user’s Symphony Messaging web clients, and your application. Can be particularly useful when doing overlays and wanting to match the background color of the app.

Dark or light depending on the users theme settings.

By default, we recommend that iframe based applications and renderers backgrounds are transparent. The background of conversations change in color depending on what the user is focused on, and that change of state will then be visible by default.

This color depends on the users theme settings.

tempo-bg-color--theme-primary

This is typically the color of the uses navigation, and can create a dynamic looking UI as it changes to the users preference.

This color depends on the user’s theme settings.

tempo-bg-color--theme-accent

This is generally a complimentary color of the users primary theme color, and can create a dynamic looking UI as it changes to the users preference.

This color depends on the user’s theme settings.

Advanced theme colors

For more advanced visual elements, you need to also use the relevant theme-specific colors below:

Color

Description

tempo-text-color--link

Link color for text.

This will be applied automatically when using a tags with an href attribute.

tempo-text-color--placeholder

Placeholder text color is used for placeholders in input fields, and similar suggestions.

This color depends on the user’s theme settings.

tempo-text-color--disabled

Disabled color text is used for elements that are not clickable or applicable at the time of viewing such as disabled URLs.

This color depends on the user’s theme settings.

tempo-text-color--theme-primary

This text color matches the user’s background color of their navigation.

This color depends on the user’s theme settings.

tempo-text-color--theme-accent

This text color matches the users accent color, which is generally a complimentary color to the user’s navigation background.

This color depends on the user’s theme settings.

tempo-ui--layout

The opposite of the background color. In a dark theme, it will be white. In a light theme, it will be black.

This color depends on the user’s theme settings.

tempo-text-color--external

Color to reflect that this text applies to data outside of your organization. See note below.

tempo-bg-color--external

Color to reflect that this text applies to data outside of your organization. See note below.

Constant Colors

If you do need to use specific colors, the color styles below are constant and not theme-specific:

Color

Description

tempo-text-color--white

Constant white text color.

tempo-text-color--black

Constant black text color.

tempo-text-color--red

Constant red text color.

tempo-text-color--green

Constant green text color.

tempo-text-color--blue

Constant blue text color.

tempo-text-color--yellow

Constant yellow text color.

tempo-text-color--cyan

Constant cyan text color.

tempo-text-color--purple

Constant purple text color.

tempo-text-color--orange

Constant orange text color. See note below on how to use with tempo-text-color--external.

tempo-bg-color--white

Constant white background color.

tempo-bg-color--black

Constant black background color.

tempo-bg-color--red

Constant red background color.

tempo-bg-color--green

Constant green background color.

tempo-bg-color--blue

Constant blue background color.

tempo-bg-color--yellow

Constant yellow background color.

tempo-bg-color--cyan

Constant cyan background color.

tempo-bg-color--purple

Constant purple background color.

tempo-bg-color--orange

Constant orange background color. See note below on how to use with tempo-bg-color--external.

Note: tempo-text-color--orange and tempo-bg-color--orange should be used with caution. The color orange is primarily used to represent conversations and people that are external to your company. If you plan on representing external chat rooms, users, or companies, we recommend that you use tempo-bg-color--external and tempo-text-color--external.

Last updated 1 month ago

Was this helpful?