Themes
Unit's white-label UIs support multiple themes.
In order to create a new theme, you would need to upload a JSON that contains the white-label settings associated with that theme via an API.
In response, you will get a URL. You will then specify that URL as you initialize any UI component, under the theme attribute.
The best way to understand how to use the white-label themes is to see them in action. Try out the component preview page in order to make component look and feel like your brand. Once you are happy with the result, you can copy the JSON settings from under the 'Appearence Config' tab in the preview page, and create the theme by uploading the JSON to the API.
Customization Options#
The settings that make up a theme are divided into two main categories - global settings and component specific settings.
- Global settings are meant to reflect your brand's design system - colors, fonts, basic component look and feel.
- Component specific settings are meant to allow you to control UI elements that are unique to a specific component (e.g. the color of the font on a card image). On the component specific level, you may also provide overrides to any parameter specified in the global settings.
note
Please reach out to Unit if you need additional customization options to support your brand.
Global Settings#
| Field | type | Description |
|---|---|---|
| colors | object | Color palette |
| typography | object | Typography (text) preferences |
Colors#
| Field | type | Description |
|---|---|---|
| background | string | Will be used as background color of the components, drop downs menus and inner flows |
| primary | string | Will be used for buttons,icons, highlight fields that are in focus, cover elements |
| secondary | string | The secondary brand color is used for secondary buttons |
| neutral | string | We will derive 6 neutral shades based on your main Neutral colot. These shades will be used for texts, light background colors and disabled/inactive elements |
| success | string | Semantic. Will be used in messages, toasts, statuses and alerts |
| warning | string | Semantic. Will be used in messages, toasts, statuses and alerts |
| error | string | Semantic. Will be used in messages, toasts, statuses and alerts |
Typography#
| Field | type | Description |
|---|---|---|
| common | object | Common typography settings (running texts) |
| titles | object | Titles typography settings |
Common#
| Field | type | Description |
|---|---|---|
| fontFamily | string | Font family for elements. Note, the components components will not fetch the font. Font should be available on the page from which the components are used |
Titles#
| Field | type | Description |
|---|---|---|
| h2 | object | The main title used in the components. Examples include the card title, activity table title etc |
| h3 | object | The secondary title used in the components. Examples include menus and empty states |
Component Specific Settings#
Card#
| Field | type | Description |
|---|---|---|
| designs | Array of Design | The main title used in the components. Examples include the card title, activity table title etc |
| override | Global | The secondary title used in the components. Examples include menus and empty states |
Card Design#
| Field | type | Description |
|---|---|---|
| name | string | Name of your design, should match the name of card design in Unit |
| url | string | Link to card image |
| fontColor | string | Will control the font color on top of the card |
| boxShadow | string | Will control the card shadow |