# Customize layout and styles in the UI > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/customize-style # Customize layout and styles in the UI If you want to match the look and feel of embedded ThoughtSpot content with your core application, you can customize the ThoughtSpot application UI elements. Using style customization, you can create a uniform ThoughtSpot experience that complies with your company’s branding guidelines. You can rebrand the ThoughtSpot interface elements such as the application logo, background color, and color scheme of visualizations. > **NOTE:** When you rebrand ThoughtSpot content, the UI styles are reset for all users. ## Style components You can customize the following ThoughtSpot UI style components: - [Application logo & favicon](#logo-change) - [Font style for charts and tables](#font-customize) - [The background color of the UI](#custom-bg) - [The background color of navigation panel](#nav-panel) - [Color palette for charts](#chart-color) - [Footer text](#footer-text) - [Page title](#page-title) ## Access customization settings To access style customization settings: 1. Log in to ThoughtSpot as an admin or a developer user. 2. To access the ThoughtSpot Developer portal, click **Develop** 3. Under **Customizations**, click **Styles**. > **NOTE:** Style customization settings are also available in the ThoughtSpot Admin tab. For more information on setting UI styles from the Admin tab, see Style Customization. ## Customize application logo and favicon To upload your application logos: 1. To access the ThoughtSpot Developer portal, click **Develop**. 2. Under **Customizations**, click **Styles**. 3. To upload the default logo: 1. Click **Application Logo (Default)**. 2. Browse to your local directory and select a logo image. ![Default Application Logo](/docs/doc-images/images/style-applogo.png) > **NOTE:** The accepted file formats for the logo image are jpg, jpeg, and png. The recommended size for the logo is 140px by 140px. For ThoughtSpot instances using the V3 navigation and home page experience (version 26.3.0.cl or later), the logo in the top navigation bar is constrained to 28px by 28px. For best results, upload a square logo that remains clear and visible when scaled down to 28px by 28px. 3. Verify if the logo appears correctly in the top left corner of the navigation bar. 4. To upload a wide logo: 1. Click the wide icon under **Application Logo (Wide)**. 2. Browse to your local directory and select a logo image. ![Wide application logo](/docs/doc-images/images/style-widelogo.png) > **NOTE:** The application logo (wide) appears on the login screen. The recommended size is 250px by 50px (5:1 aspect ratio). This allows the system to preserve the aspect ratio of the uploaded logo image and prevent distortion. The wide logo dimensions have changed in ThoughtSpot Cloud 26.8.0.cl and later versions. If you previously uploaded a logo sized at 330px by 100px, re-upload your logo at 250px by 50px to ensure it displays correctly on the login screen without distortion. The accepted file formats for the logo image are jpg, jpeg, and png. 3. Verify if the logo appears correctly. ## Customize fonts for visualizations You can add and edit fonts to customize the appearance of your charts and tables. You can set the default fonts of your system by customizing **Chart Visualization Fonts** and **Table Visualization Fonts**. > **NOTE:** Before you begin, make sure you have the WOFF files available for the fonts you want to use. ### Important points to note - To add a custom font, your font must be defined in a Web Open Font Format (`WOFF`) file. - Changes to chart and table defaults apply only to charts and features created _after_ you configure a value. - If you change table fonts, older tables retain their previous fonts. ### Update fonts To update fonts: 1. To access the ThoughtSpot Developer portal, click **Develop** 2. Under **Customizations**, click **Styles**. 3. To update fonts for charts, go to **Chart Visualization Fonts**, and select a chart label. 4. To update fonts for tables, go to **Table Visualization Fonts**. By default, the font changes are applied to all values in the table cells. 5. To add a custom font, click **+**. The system displays the **Custom Font** dialog. 6. Click the **Custom Font** field. The system displays the file finder. 7. Add the `WOFF` file you want. The file appears in the font dialog. 8. Click **Confirm**. 9. To update the font style: 1. Click the edit icon. 2. Modify the font color, weight, and style. 3. Click **Confirm**. ## Customize background color You can customize the application background color to match your company’s color scheme. The custom background color is applied to the application interface, embedded visualizations in Liveboards and answers. To choose a background color for the ThoughtSpot application interface: 1. To access the ThoughtSpot Developer portal, click **Develop** 2. Under **Customizations**, click **Styles**. 3. Click the background color box under **Embedded Application Background**. ![Application Background Color](/docs/doc-images/images/set-background-color.png) 4. Use the color menu to choose your new background color. You can also add a HEX color code. ## Customize navigation panel If you have embedded the entire ThoughtSpot application in your app, you can customize the navigation panel color to match your company’s color scheme. To choose a background color for the navigation panel: 1. To access the ThoughtSpot Developer portal, click **Develop** 2. Under **Customizations**, click **Styles**. 3. Click the background color box under **Navigation Panel Color**. 4. Use the color menu to choose your new background color. You can also add a HEX color code. ## Customize color palette for charts You can define a set of primary and secondary colors for chart visualizations. The customized color palette is used for all visualizations in Liveboards and answers. ### How chart colors work ThoughtSpot picks colors and hues in a specific order. For example, a primary color, lighter hue, and a hue that is darker than the primary color. The standard color palette in ThoughtSpot uses the following color format by default: | Primary 1 (P1) | Primary 2 (P2) | Primary 3 (P3) | Primary 4 (P4) | Primary 5 (P5) | Primary 6 (P6) | Primary 7 (P7) | Primary 8 (P8) | | --- | --- | --- | --- | --- | --- | --- | --- | | Lightest 1 (L1) | Lightest 2 (L2) | Lightest 3 (L3) | Lightest 4 (L4) | Lightest 5 (L5) | Lightest 6 (L6) | Lightest 7 (L7) | Lightest 8 (L8) | | Light 1 (l1) | Light 2 (l2) | Light 3 (l3) | Light 4 (l4) | Light 5 (l5) | Light 6 (l6) | Light 7 (l7) | Light 8 (l8) | | Dark 1 (d1) | Dark 2 (d2) | Dark 3 (d3) | Dark 4 (d4) | Dark 5 (d5) | Dark 6 (d6) | Dark 7 (d7) | Dark 8 (d8) | | Darkest 1 (D1) | Darkest 2 (D2) | Darkest 3 (D3) | Darkest 4 (D4) | Darkest 5 (D5) | Darkest 6 (D6) | Darkest 7 (D7) | Darkest 8 (D8) | ![Standard chart color format](/docs/doc-images/images/chart-color-palette-format.png) ThoughtSpot applies the same format for custom color palettes. To know more about the color selection algorithm and criteria for charts, see [How chart colors work](https://docs.thoughtspot.com/cloud/latest/chart-color-change#_how_chart_colors_work). ### Define a custom color palette for charts To change the color palette for charts: 1. To access the ThoughtSpot Developer portal, click **Develop** 2. Under **Customizations**, click **Styles**. 3. Click the color box under **Chart Color Palettes**. 4. To choose a primary color, click the color box. 5. You can also add a HEX color code. 6. To add more colors, click **Add Color**. 7. To reset your chart colors to the ThoughtSpot default, click **Reset**. ## Customize footer text You can add custom footer text to the ThoughtSpot UI. To customize footer text: 1. To access the ThoughtSpot Developer portal, click **Develop** 2. Under **Customizations**, click **Styles**. 3. Add the footer text in the **Footer Text** box. ## Customize page title You can customize the page title that appears in the browser tab. To customize the page title: 1. To access the ThoughtSpot Developer portal, click **Develop** 2. Under **Customizations**, click **Styles**. 3. Add the page title in the **Page Title** box. ## Related resources - [Style Customization in ThoughtSpot](https://docs.thoughtspot.com/cloud/latest/style-customization) - [Embed Liveboards]({{navprefix}}/{{embed-liveboard}}) - [Customize the full application]({{navprefix}}/{{full-app-customize}})