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 a 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 |
| buttons | object | buttons states preferences |
| menuButton | object | menu-button states preferences |
| avatar | object | avatar 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 color. 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. |
| fontSize | string | Font size for elements. Can be set to either relative or absolute units. |
Titles
| Field | type | Description |
|---|---|---|
| h2 | Title | The main title used in the Components. Examples include the Card title, Activity table title etc. |
| h3 | Title | The secondary title used in the Components. Examples include menus and empty states. |
| menuTitle | Title | The title used for mobile menus (card-menu, account-list menu, etc). |
| componentTitle | Title | The title applied to various components such as card and activity components. |
| bigNumber | BigNumber | The title used for big number displays in components. |
| flow | Flow | The titles used for a flow or series of steps in a component. (card-actions, payments flows, etc.) |
| response | Response | The titles used for a response or message in components. |
| emptyState | EmptyState | The titles displayed in empty states within component. |
| table | Table | The titles for tables used in components. |
Title
| Field | type | Description |
|---|---|---|
| fontWeight | 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , 950 , "normal" , "bold" , "bolder" , "lighter" | The thickness or boldness of the font. |
| color | string | The color of the text in the title. |
| fontSize | string | The size of the font used in the title. |
| fontFamily | string | The specific font family for the title's text. |
Big Number
| Field | type | Description |
|---|---|---|
| fontWeight | 100 , 200 , 300 , 400 , 500 , 600 , 700 , 800 , 900 , 950 , "normal" , "bold" , "bolder" , "lighter" | The thickness or boldness of the font. |
| color | string | The color of the text in the big number display. |
| fontFamily | string | The specific font family for the big number text. |
| largeFontSize | string | The font size for larger big number displays. |
| extraLargeFontSize | string | The font size for extra-large big number displays. |
Flow
| Field | type | Description |
|---|---|---|
| title | Title | The main title for the flow. |
| subtitle | Title | The secondary title for the flow. |
Response
| Field | type | Description |
|---|---|---|
| title | Title | The title for the response. |
Empty State
| Field | type | Description |
|---|---|---|
| title | Title | The title displayed in the empty state. |
Table
| Field | type | Description |
|---|---|---|
| headers | Title | The titles for the table headers. |
Buttons
| Field | type | Description |
|---|---|---|
| primary | ButtonStates | The primary style of the button. |
| secondary | ButtonStates | A secondary style option for the button. |
| subtle | ButtonStates | A subtle style option for the button. |
| outline | ButtonStates | An outlined style option for the button. |
| flat | ButtonStates | A flat style option for the button. |
Menu Button
| Field | type | Description |
|---|---|---|
| default | ButtonAttributes | The default style of the menu button. |
| hover | ButtonAttributes | The style when the button is hovered. |
| active | ButtonAttributes | The style when the button is active. |
| disabled | ButtonAttributes | The style when the button is disabled. |
Button States
| Field | type | Description |
|---|---|---|
| default | ButtonAttributes | The default style of the menu button. |
| hover | ButtonAttributes | The style when the button is hovered. |
| active | ButtonAttributes | The style when the button is active. |
| disabled | ButtonAttributes | The style when the button is disabled. |
Button Attributes
| Field | type | Description |
|---|---|---|
| border | Border | The border attributes for the button. |
| textColor | string | The color of the text in the button. |
| backgroundColor | string | The background color of the button. |
Border
| Field | type | Description |
|---|---|---|
| width | string | The width of the border around the element. |
| radius | string | The border radius or curvature of the element's corners. |
| color | string | The color of the border around the element. |
Avatar
| Field | type | Description |
|---|---|---|
| iconColor | string | Will control the color of the icon. |
| borderColor | string | Will control the color of the border. |
| backgroundColor | string | Will control the color of the background. |
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. For charge cards the name must contain "_credit". |
| 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 |
Account
| Field | type | Description |
|---|---|---|
| titleColor | string | Will control the font color of the account title |
| balanceTitleColor | string | Will control the font color of the balance title |
| coverBackgroundColor | string | Will control the color of the cover background |