Style Unique AI to your Corporate Identity — Unique AI Documentation
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 |
|---|---|
Primary CTA color determines: - Primary buttons - Links - Key actions elements that need attention |
|
Primary Variant color determines: - Hover status of the Primary buttons and links |
|
On Primary color determines: - Text/icon color on top of Primary CTA Color |
| Supporting Brand Colors | UI samples |
|---|---|
Secondary color determines: - Level 2 of the Sidebar Navigation (section items) |
|
Secondary Variant color determines: - Level 1 of the Sidebar Navigation (icons bar) |
|
On Secondary color determines: - Text/icon color on top of Secondary Color |
| Neutral Colors | UI samples |
|---|---|
Background color determines: - Page background color option - Secondary buttons - Modals background color |
|
Background Variant color determines: - Label background - Secondary buttons hover |
|
On Background Main color determines: - Text/icon color on top of the Background color or buttons hover |
|
On Background Dimmed color determines: - A lighter text/icon color option for supporting information |
|
Surface color determines: - Header, cards background, main reading surfaces |
|
On Surface color determines: - Text/icon color on top of the Surface color |
|
Control color determines: - Outline of input fields |
|
On Control Main color determines: - Text in input fields |
|
On Control Dimmed color determines: - Helper text in input fields |
| Functional Colors | UI samples |
|---|---|
Info color determines: - Info texts and toasters, progress bars |
|
On Info color determines: - Text on info color background |
|
Success Light color determines: - Progress bars completed |
|
On Success Light color determines: - Text on success light color background |
|
Success Dark color determines: - Success texts - Toasters |
|
On Success Dark color determines: - Text on success dark color background |
|
Error Light color determines: - Error texts and toasters - Progress bars failed - Danger CTA buttons |
|
On Error Light color determines: - Text on error light color background |
|
Error Dark color determines: - A darker option for error color, - danger CTA buttons on hover |
|
On Error Dark color determines: - Text on error dark color background |
|
Attention color determines: - Soft warning toasters |
|
On Attention color determines: - Text on attention color background |
|
Attention Variant color determines: - Key elements that are not primary actions but require UI prominence |
|
On Attention Variant color determines: - Text on attention variant color background |
Always ensure that background colors are paired with text colors in a way that fulfills accessibility requirements.
Logos
There are 2 logos to be added, in PNG format.
| Logo Type | UI Reference |
|---|---|
| Logo Navbar | Sidebar Navigation |
| Logo Header | Top Navigation in desktop and mobile |
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:
- Help menu
- 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.