# Style Unique AI to your Corporate Identity

Unique AI offers broad choices to customize the entire Platform UI to your Corporate Identity, including styling and general settings.

These controls can be accessed by adding **/theme** to your company’s Unique URL: eg. next.unique.app **/theme**.

## Colors

There are 29 colors to be configured by adding HEX codes (eg. #1FB7EA) representing your Brand Guidelines.

Explore the tables below to learn which colors affect which UI components across the platform.

| **Primary Brand Colors** | **UI samples** |
| --- | --- |
| <br>**Primary CTA** color determines:<br>- Primary buttons<br>- Links<br>- Key actions elements that need attention |  |
| <br>**Primary Variant** color determines:<br>- Hover status of the Primary buttons and links |  |
| <br>**On Primary** color determines:<br>- Text/icon color on top of Primary CTA Color |  |

| **Supporting Brand Colors** | **UI samples** |
| --- | --- |
| <br>**Secondary** color determines:<br>- Level 2 of the Sidebar Navigation (section items) |  |
| <br>**Secondary Variant** color determines:<br>- Level 1 of the Sidebar Navigation (icons bar) | 
| <br>**On Secondary** color determines:<br>- Text/icon color on top of Secondary Color |

| **Neutral Colors** | **UI samples** |
| --- | --- |
| <br>**Background** color determines:<br>- Page background color option<br>- Secondary buttons<br>- Modals background color |  |
| <br>**Background Variant** color determines:<br>- Label background<br>- Secondary buttons hover |  |
| <br>**On Background Main** color determines:<br>- Text/icon color on top of the Background color or buttons hover |  |
| <br>**On Background Dimmed** color determines:<br>- A lighter text/icon color option for supporting information |  |
| <br>**Surface** color determines:<br>- Header, cards background, main reading surfaces | <br><br> |
| <br>**On Surface** color determines:<br>- Text/icon color on top of the Surface color |
| <br>**Control** color determines:<br>- Outline of input fields | <br> |
| <br>**On Control Main** color determines:<br>- Text in input fields |
| <br>**On Control Dimmed** color determines:<br>- Helper text in input fields |

| **Functional Colors** | **UI samples** |
| --- | --- |
| <br>**Info** color determines:<br>- Info texts and toasters, progress bars | <br> |
| <br>**On Info** color determines:<br>- Text on info color background |
| <br>**Success Light** color determines:<br>- Progress bars completed |  |
| <br>**On Success Light** color determines:<br>- Text on success light color background |
| <br>**Success Dark** color determines:<br>- Success texts<br>- Toasters |  |
| <br>**On Success Dark** color determines:<br>- Text on success dark color background |
| <br>**Error Light** color determines:<br>- Error texts and toasters<br>- Progress bars failed<br>- Danger CTA buttons | <br> |
| <br>**On Error Light** color determines:<br>- Text on error light color background |
| <br>**Error Dark** color determines:<br>- A darker option for error color,<br>- danger CTA buttons on hover |  |
| <br>**On Error Dark** color determines:<br>- Text on error dark color background |
| <br>**Attention** color determines:<br>- Soft warning toasters |  |
| <br>**On Attention** color determines:<br>- Text on attention color background |
| <br>**Attention Variant** color determines:<br>- Key elements that are not primary actions but require UI prominence | <br><br> |
| <br>**On Attention Variant** color determines:<br>- Text on attention variant color background |

Always ensure that background colors are paired with text colors in a way that fulfills [accessibility requirements](https://webaim.org/resources/contrastchecker/).

## Logos

There are 2 logos to be added, in PNG format.

| **Logo Type** | **UI Reference** |
| --- | --- |
| **Logo Navbar** | Sidebar Navigation<br> |
| **Logo Header** | Top Navigation in desktop and mobile<br> |

Make sure that the color of your logos has a good contrast against the background colors.

## Fonts

To customize the fonts, upload your Corporate font(s) in any supported format (.WOFF, .TTF, .OTF). For each upload, specify Font Family (eg. Times New Roman), Font Weight (eg. Regular, Bold…), and Font Style (Sans-serif or Serif)

After that, assign the desired font to each item of the typographic scale, as shown in the GIF below.

**title-l**

**title-s**

**subtitle-1**

**subtitle-2**

**body-1**

**body-2**

**overline-text**

It is possible to upload and utilize more than one font, based on your CI.

## Custom Naming

Each Corporate client is invited to choose a custom name for the Unique AI tool.

This name becomes an integral part of the tool’s identity as, within the organization, all employees will refer to it accordingly.

Go to the “Tab name in browser” section and type the chosen tool name.

After the configuration, this name will appear as the App’s name in the Browser Tab.

## Support Email

To facilitate issues management, provide a contact in the “Support email” section.

Throughout the platform, this Email will be linked to:

1. Help menu
2. Error pages

If a user clicks on this “Support Email”, their Email tool will open, preset to the designated Support Contact.

## Help Center Link

This configuration allows you to establish a user path to your Help Center.

Once configured, the Help Center link will be accessible, throughout the platform, from the Help menu.