This document outlines the resources and capabilities of the Symphony Messaging Platform that are available to you to shape the user interface of your application.
Symphony Messaging's design library, Tempo UI, encompasses Symphony Messaging's unique theming, performance considerations, and more.
For more information on how to build an extension app, refer to our section on Extension Applications.
Symphony Messaging uses a standard style sheet for all external apps. Link to the compiled CSS file using the code shown below:
All CSS classes have a prefix of tempo- to ensure that styles aren’t overwritten by other libraries. This example shows two styles:
This example shows how you can apply the styles:
This image shows the result of the above code example:
Symphony Messaging users can personalize their user interface by choosing between a variety of modes (day/night), contrast level, and font sizes.
To make your application respect the user’s font, add one of the font classes to the <html> tag of your application:
xsmall
small
medium
Text elements will react to these font sizes by default, unless you specify custom font sizes. Use rem as your font size unit for custom font sizes. Generally, regular text is 1rem.
To make your application respect the user’s mode, add one of the theme classes to the <body> tag of your application:
dark
light
You should leave the background color of your application as transparent to inherent all the application states from Symphony Messaging (for example, by doing this, if the user focuses your application, the background color will be changed, depending on the user's theme).
The user’s preferences are returned in the Extension API theme object.
Symphony Messaging uses a modified version of font named Lato, which is an open source font hosted by Google. Because we have modified Lato to include a specific set of glyphs for fractions commonly used by our customers, our stylesheet includes a modified version called SymphonyLato that is hosted by Symphony Messaging. This font is automatically applied to your body tag when you include the stylesheet.
<link rel="stylesheet" type="text/css" href="https://cdn.symphony.com/resources/api/v2.1/styles/symphony-external-app.css" />.tempo-text-color--white{}
.tempo-btn--primary{}<div>
<label class="tempo-text-primary">
Anjana Dasu
</label>
<span class="tempo-text-secondary">
Product Manager at Symphony
</span>
<div class="tempo-btn tempo-btn--primary">
Connect
</div>
</div>Note: For native support of Buttons, refer to Symphony Messaging Elements. The following is built for extension applications looking to implement their own button or input logic.
Buttons change color depending on the user’s theming preferences. They are generally the same color as the theme accent color.
Buttons must include the following class to inherit the proper shape:
tempo-btn
You can modify the style of a button by applying any of these additional classes:
tempo-btn--primary
tempo-btn--secondary
tempo-btn--link
Have only one primary button per screen or view that displays to the right of all other buttons and links.
Have only one cancel action button per screen or view that displays to the left of all other buttons and links. Cancel action buttons must follow these design guidelines:
Are link style, text only, and gray in color.
Use the Primary button style when there is a clear primary action on a page or for a message. Avoid displaying multiple primary buttons within the same context. We recommend that a primary button always displays to the right of any other buttons. The image below shows a Primary button style adjacent to a text link.
Use the Secondary button style when there are multiple actions of the same importance or some actions with less importance than a single primary action. You can align multiple secondary buttons vertically or horizontally on the interface. If you align multiple buttons in a horizontal row, we recommend a maximum of three buttons: one primary and two secondary.
Link buttons are similar to secondary action buttons, while being more discreet. Use links for situations when there are many secondary actions, particularly when these actions are stacked, included in tables, or part of other interface elements within messages.
Use the Disabled button style to show that an action is currently unavailable. You can use this style with the Primary, Secondary, and Link styles.
Use this style for situations where a user can choose one of two actions: cancel and complete.
You can apply the Compact style to the Primary, Secondary, and Link styles. This style reduces the button’s size for optimal display in compact environments.
Note: Do not use compact buttons with standard size buttons. We recommend using compact buttons only when space prohibits the use of standard size buttons.
Use Icon buttons when there is limited space and the action can be represented by an icon, such as a checkmark. You can use the Icon style for Primary, Secondary, Disabled, and Compact buttons.
Use the Icon Action style for situations where you don’t need a button; for example, a 5-star rating scale. Icon Actions must meet the following requirements:
Format: .svg
Size: 18 x 18 pixels
Color: Black and white or color
tempo-btn--disabled
Have a label of Cancel, Remove, Ignore, or similar text.
Are the last button on the left if buttons are horizontally aligned.
Have up to two secondary buttons to the left of the primary button.
Third-level buttons (or tertiary buttons) are generally icons or plain text links. Do not place third-level buttons inline with standard size buttons.
Do not use compact buttons with standard size buttons. We recommend using compact buttons only when space prohibits the using standard size buttons.
Note: For native support of input fields and buttons, refer to Symphony Elements. The following is built for extension applications looking to implement their own button or input logic.
Using form element styles will make your apps look native to the users. Things like theming and performance optimization will be applied automatically:
<input type="text" class="tempo-input-standard" placeholder="Search" /><div class="tempo-btn tempo-btn--primary">Button</div><div class="tempo-btn tempo-btn--secondary">Button</div><div class="tempo-btn tempo-btn--link">Button</div><div class="tempo-btn tempo-btn--<style> tempo-btn--disabled">Button</div>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
For more advanced visual elements, you need to also use the relevant theme-specific colors below:
If you do need to use specific colors, the color styles below are constant and not theme-specific:
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.
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 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.
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.
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.
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-ui--layout
tempo-text-color--yellow
