Style Unique FinanceGPT to your Corporate Identity

Owned by Daylan Araz
Last updated: Sept 26, 2024 by Enerel Khuyag
7 min read

Unique FinanceGPT 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.

Theming.gif

Your Guide to Customization Options

This article will guide you through all possible customizations and how they reflect in the platform:

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 Brand Colors

UI samples

Group 994.png

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

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

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

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.

Do you need any help? Unique offers expert support in color customization, to help you ensure that your Corporate Identity will be matched in the FinanceGPT UI.

Logos

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

Logo Type

UI Reference

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

Custom Naming

Each Corporate client is invited to choose a custom name for the FinanceGPT 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.

 

Author

@Donatella Mancini

 

© 2024 Unique AG. All rights reserved. Privacy Policy – Terms of Service