# UI Style Guide
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](/ext-apps/building-extension-apps.md).
## Overview
Symphony Messaging uses a standard style sheet for all external apps. Link to the compiled CSS file using the code shown below:
```markup
```
All CSS classes have a prefix of `tempo-` to ensure that styles aren’t overwritten by other libraries. This example shows two styles:
```markup
.tempo-text-color--white{}
.tempo-btn--primary{}
```
This example shows how you can apply the styles:
```markup
Product Manager at Symphony
Connect
```
This image shows the result of the above code example:
## Personalization
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 `` tag of your application:
* xsmall
* small
* medium
* large
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 `` 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.
## Typography
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.developers.symphony.com/dev-tools/ui-style-guide.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.