Table of Contents

1 Whitelabel configuration
- 1.1 Full Code
- 1.2 Whitelabeling Breakdown
  - 1.2.1 Colours
  - 1.2.2 Illustrations / icons
  - 1.2.3 Fonts
  - 1.2.4 Overwritable screens
- 1.3 Typography structure
  - 1.3.1 Heading 1 style
  - 1.3.2 Heading 2 style
  - 1.3.3 Body text style
  - 1.3.4 List text style
  - 1.3.5 Button label text style
  - 1.3.6 Input label text style
- 1.4 Base component styling
2 Components (Advanced whitelabeling)
- 2.1 Buttons structure
  - 2.1.1 Button. Main Appearance.
  - 2.1.2 Button. Normal view
  - 2.1.3 Button. Pressed state
  - 2.1.4 Button. Disabled state
  - 2.1.5 Back and Close Buttons
- 2.2 Inputs components
- 2.3 Face Scan UI Configuration
  - 2.3.1 Face Scan Frame
  - 2.3.2 Feedback bar
- 2.4 Other components
  - 2.4.1 Selection card
  - 2.4.2 Activity indicator
  - 2.4.3 Camera screen configuration
  - 2.4.4 Document Upload Configuration

Whitelabel configuration

This Whitelabel configuration JSON sets up a flexible theming system for whitelabeling MobileSDK UI. At its core, it defines global styles—like colors, typography and basic component styling that cover most design needs right out of the box.

For teams that want even more control, each UI component (like buttons, inputs, and others) can be easily customized with specific overrides. This makes it simple to adapt the design for your branding needs without losing consistency or control.

Full Code

JSON file can have only those values that you want to replace

Whitelabeling Breakdown

Colours

	Code	Name

	Code	Name
"brand": { "colors": { "primaryColor": "#64749c", // Primary brand color - used in illustration and primary button "textColor": "#000000", // Text color for content "backgroundColor": "#FFFFFF", // Base background color for screens "danger": "#D04555", // Color for error states and messages "warning": "#F9BB42", // Color for warning elements "success": "#28865A", // Color for success elements "grey100": "", // Currently not used "grey200": "#F2F5F8", //Button Disabled state background, Text input readonly background "grey300": "", // Currently not used "grey400": "#BEC6D0", //Color for input element border color, also used in Text input "grey500": "#96A0AE", //Color for "Select card" icon, Proof of Adress upload element border, Text input disabled state text color "grey600": "#6D7580", //Color for Proof of Adress icon color, Text input Active state border "grey700": "#282B2F", //Color for feedback bar background color //Android specific "statusBarColor": "#4968FC", //Default: brand.colors.primaryColor } }	`"primaryColor"`	Primary color Primary button background Illustrations
	`"textColor"`	Text color Heading, body text and other text element color
	`"backgroundColor"`	Background color Used for every screen background color. By adding dark background color and light text elements, it’s possible to achieve “dark mode”
	`"danger"`	Danger / Alert Red Used for alert and rejection icons
	`"warning"`	Warning Yellow Used for the warning icons
	`"success"`	Success Green Used for the identification approval icon
	`"grey" 100-700`	Grey colors Used for input components and other elements. We recommend not to change these values.
	`"statusBarColor"` Android only	Status bar color Used for the top status bar color.

Illustrations / icons

In the application there are two types of media assets:

Illustrations
Their accent colour is set from the "primaryColor". It is also possible to overwrite the illustrations with your own.
Icons
Icon colour can be adjusted with the icon colour configuration. It is also possible to overwrite the icons with your own.
Images
Some of the default images can be overridden, the important part here is to use the exact same naming as the default image resource.
For example, on Android, to override the identification waiting screen image, one needs to use a raw resource JSON file named waiting_page_animation.json , put under the res/raw folder inside your project and it would work like a charm. Note that it has to adhere to Lottie image JSON format, as explained in their documentation.

Fonts

Font style can be adjusted with the text configuration. It is also possible to use your own custom font.

Guide how to do that is coming soon

Overwritable screens

It is possible to replace the following screens with your own custom screens.

Guide how to do that is coming soon

Typography structure

In the application we are using these typography types:

Heading 1 (1)
Used for the each screens title
Heading 2 (2)
Used for the second hierarchy texts, for example - “Please check if” or “Make sure” texts
Normal Text (3)
The body text
List Text (4)
Texts style used in lists
Button Text (5)
Texts style used in buttons
Input Label Text (6)
Texts style used for the labels in inputs

Fonts needs to be set-up separately from the JSON file.

For iOS the font size, weight is taken from Font file.

Heading 1 style

Text style used for the title of each screen

	Code	Name	Values

	Code	Name	Values
`"brand": { "typography": { "heading1": { "fontSize": 24, "fontWeight": 500, "lineHeight": 32, "alignment": "center" }, } },`	`"fontSize"`	Font size	Numbers in pt
	`"fontWeight"`	Font weight	Numbers 100-800 (based on your font file)
	`"lineHeight"`	Line height	Numbers in pt
	`"alignment"`	Text alignment	left center right

Heading 2 style

Used for the second hierarchy texts, for example - “Please check if” or “Make sure” texts

	Code	Name	Values

	Code	Name	Values
`"brand": { "typography": { "heading2": { "fontSize": 16, "fontWeight": 500, "lineHeight": 18, "alignment": "center" }, } },`	`"fontSize"`	Font size	Numbers in pt
	`"fontWeight"`	Font weight	Numbers 100-800 (based on your font file)
	`"lineHeight"`	Line height	Numbers in pt
	`"alignment"`	Text alignment	left center right

Body text style

The body text

	Code	Name	Values

	Code	Name	Values
`"brand": { "typography": { "body": { "fontSize": 16, "fontWeight": 400, "lineHeight": 18, "alignment": "center" }, } },`	`"fontSize"`	Font size	Numbers in pt
	`"fontWeight"`	Font weight	Numbers 100-800 (based on your font file)
	`"lineHeight"`	Line height	Numbers in pt
	`"alignment"`	Text alignment	left center right

List text style

Text style used for the list

	Code	Name	Values

	Code	Name	Values
`"brand": { "typography": { "list": { "fontSize": 16, "fontWeight": 400, "lineHeight": 18 }, } },`	`"fontSize"`	Font size	Numbers in pt
	`"fontWeight"`	Font weight	Numbers 100-800 (based on your font file)
	`"lineHeight"`	Line height	Numbers in pt

Button label text style

Text style used for the button text

	Code	Name	Values

	Code	Name	Values
`"brand": { "typography": { "button": { "fontSize": 16, "fontWeight": 400, "lineHeight": 18 }, } },`	`"fontSize"`	Font size	Numbers in pt
	`"fontWeight"`	Font weight	Numbers 100-800 (based on your font file)
	`"lineHeight"`	Line height	Numbers in pt

Input label text style

Text style used for the input label text

	Code	Name	Values

	Code	Name	Values
`"brand": { "typography": { "inputLabel": { "fontSize": 16, "fontWeight": 500, "lineHeight": 18 }, } },`	`"fontSize"`	Font size	Numbers in pt
	`"fontWeight"`	Font weight	Numbers 100-800 (based on your font file)
	`"lineHeight"`	Line height	Numbers in pt

Base component styling

		Code	Name	Values

		Code	Name	Values
`"brand": { "baseComponentStyling": { "cornerRadius": 6, //Used for all input components (Buttons, Text inputs and other elements) "buttonPadding": { "top": 14, "bottom": 14, "left": 24, "right": 24 }, //Used for Primary and Secondary button paddings "borderWidth": 1.0 //Used for Secondary button, Text input, Selection button border }, },`	1	`"cornerRadius"`	Corner radius	Numbers in pt
	2	`"top"`	Button padding	Numbers in pt
		`"bottom"`
		`"left"`
		`"right"`
	3	`"borderWidth"`	Border width	Numbers in pt

Components (Advanced whitelabeling)

Buttons structure

In the application we are using these button types:

Primary button (1)
for the main actions like “Submit”, “Capture”.
Secondary button (2)
for the other actions, like “Cancel”, “Retake photo”.
Back (3) and Close (4) buttons
These are icon buttons on the top part of the card

Button whitelabel is structured in 4 parts - Base variables, which has values for styles like corner radius, padding, font. These stylings are applied for all 3 states:

Normal
Default button view
Pressed
When the button is pressed
Disabled
When the button is not accessible.

Button. Main Appearance.

These values will go thorough all primary button states - Normal, Highlighted and Disabled

		Code	Name	Values

		Code	Name	Values
"buttons": { "primary": { "base": { "cornerRadius": 6, //Default: brand.baseComponentStyling.cornerRadius "padding": { "top": 14, "bottom": 14, "left": 24, "right": 24 }, //Default: brand.baseComponentStyling.buttonPadding "fontSize": 16, //Type: Number \| Default: typography.button.fontSize "fontWeight": 500, //Type: Number \| Default: typography.button.fontWeight "lineHeight": 18, //Type: Number \| Default: typography.button.lineHeight "showIcon": false //Type: Boolean }, "secondary": { "base": { "cornerRadius": 6, //Default: brand.baseComponentStyling.cornerRadius "padding": { "top": 14, "bottom": 14, "left": 24, "right": 24 }, //Default: brand.baseComponentStyling.buttonPadding "fontSize": 16, //Type: Number \| Default: typography.button.fontSize "fontWeight": 500, //Type: Number \| Default: typography.button.fontWeight "lineHeight": 18, //Type: Number \| Default: typography.button.lineHeight "showIcon": false //Type: Boolean }, },	1	`"fontSize"`	Font size	Numbers in pt
		`"fontWeight"`	Font weight	Numbers\| 100-800 (based on your font file)
		`"lineHeight"`	Line height	Numbers in pt
	2	`"cornerRadius"`	Corner radius	Numbers in pt
	3	`"padding.top"`	Button padding	Numbers in pt
		`"padding.bottom"`
		`"padding.left"`
		`"padding.right"`
	4	`"showIcon"`	if true, shows the icon near the button text	Boolean True/False

Button. Normal view

This view will be default look of a button.

		Code	Name	Values

		Code	Name	Values
"buttons": { "primary": { "normal": { "textColor": "#000", //Type: String \| Default: brand.colors.textColor "backgroundColor": "#64749c", //Type: String \| Default: brand.colors.primaryColor "borderWidth": 1.0, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "borderColor": "#64749c", //Type: String \| Default: colors.primaryColor "iconColor": "#000", //Type: String \| Default: colors.textColor "opacity": 1.0 //Type: Float } }, "secondary": { "normal": { "textColor": "#000", //Type: String \| Default: brand.colors.textColor "backgroundColor": "#FFFFFF", //Default - colors.backgroundColor "borderWidth": 1.0, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "borderColor": "#BEC6D0", //Type: String \| Default: brand.colors.grey400 "iconColor": "#000", //Type: String \| Default: brand.colors.textColor "opacity": 1.0 //Type: Float } } }	1	`"textColor"`	Text color	Hex color
	2	`"backgroundColor"`	Background color	Hex color
	3	`"borderColor"`	Border color	Hex color
		`"borderWidth"`	Border width	Numbers in pt
	4	`"iconColor"`	Icon colour	Hex color
		`"opacity"`	Opacity	Float

Button. Pressed state

Button style when it’s pressed down.

		Code	Name	Values

		Code	Name	Values
"buttons": { "primary": { "pressed": { "textColor": "#000", //Type: String \| Default: brand.colors.textColor "backgroundColor": "#64749c", //Type: String \| Default: brand.colors.primaryColor "borderWidth": 1.0, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "borderColor": "#64749c", //Type: String \| Default: colors.primaryColor "iconColor": "#000", //Type: String \| Default: colors.textColor "opacity": 0.8 //Type: Float } }, "secondary": { "pressed": { "textColor": "#000", //Type: String \| Default: brand.colors.textColor "backgroundColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "borderWidth": 1.0, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "borderColor": "#6D7580", //Type: String \| Default: brand.colors.grey600 "iconColor": "#000", //Type: String \| Default: brand.colors.textColor "opacity": 1.0 //Type: Float } } }	1	`"textColor"`	Text color	Hex color
	2	`"backgroundColor"`	Background color	Hex color
	3	`"borderColor"`	Border color	Hex color
		`"borderWidth"`	Border width	Numbers in pt
	4	`"iconColor"`	Icon colour	Hex color
		`"opacity"`	Opacity	Float

Button. Disabled state

Button style when it’s disabled

		Code	Name	Values

		Code	Name	Values
"buttons": { "primary": { "disabled": { "textColor": "#96A0AE", //Type: String \| Default: brand.colors.grey500 "backgroundColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "borderWidth": 1, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "borderColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "iconColor": "#96A0AE", //Type: String \| Default: brand.colors.grey500 "opacity": 1.0 //Type: Float } }, "secondary": { "disabled": { "textColor": "#96A0AE", //Type: String \| Default: brand.colors.grey500 "backgroundColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "borderWidth": 1.0, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "borderColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "iconColor": "#96A0AE", //Type: String \| Default: brand.colors.grey500 "opacity": 1.0 //Type: Float } } }	1	`"textColor"`	Text color	Hex color
	2	`"backgroundColor"`	Background color	Hex color
	3	`"borderColor"`	Border color	Hex color
		`"borderWidth"`	Border width	Numbers in pt
	4	`"iconColor"`	Icon colour	Hex color
		`"opacity"`	Opacity	Float

Back and Close Buttons

	Code	Name	Values

	Code	Name	Values
`"navigationButtons": { "close": { "iconColor": "#000000" }, //Type: String \| Default: brand.colors.textColor "back": { "iconColor": "#000000" } //Type: String \| Default: brand.colors.textColor },`	`"iconColor"`	Icon color	Hex color

Inputs components

		Code	Name	Values

		Code	Name	Values
"textInput": { "base": { "cornerRadius": 6, //Type: Float \| Default: brand.baseComponentStyling.cornerRadius "padding": { "top": 14, "bottom": 14, "left": 24, "right": 24 }, //Default: brand.baseComponentStyling.buttonPadding "fontSize": 16, //Type: Number \| Default: typography.body.fontSize "fontWeight": 500, //Type: Number \| Default: typography.body.fontWeight "lineHeight": 22 //Type: Number \| Default: typography.body.lineHeight }, "normal": { "textColor": "#000000", //Type: String \| Default: brand.colors.textColor "backgroundColor": "#FFFFFF", //Type: String \| Default: brand.colors.backgroundColor "borderColor": "#BEC6D0", //Type: String \| Default: brand.colors.grey400 "borderWidth": 1.0 //Type: Float \| Default: brand.baseComponentStyling.borderWidth }, "selected": { "textColor": "#000000", //Type: String \| Default: brand.colors.textColor "backgroundColor": "#FFFFFF", //Type: String \| Default: brand.colors.backgroundColor "borderColor": "#6D7580", //Type: String \| Default: brand.colors.grey600 "borderWidth": 1.0 //Type: Float \| Default: brand.baseComponentStyling.borderWidth }, "disabled": { "textColor": "#BEC6D0", //Type: String \| Default: brand.colors.grey400 "backgroundColor": "#FFFFFF", //Type: String \| Default: brand.colors.backgroundColor "borderColor": "#BEC6D0", //Type: String \| Default: brand.colors.grey400 "borderWidth": 1.0 //Type: Float \| Default: brand.baseComponentStyling.borderWidth }, "readOnly": { "textColor": "#6D7580", //Type: String \| Default: brand.colors.grey600 "backgroundColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "borderColor": "#F2F5F8", //Type: String \| Default: brand.colors.grey200 "borderWidth": 1.0 //Type: Float \| Default: brand.baseComponentStyling.borderWidth }, "error": { "textColor": "#D04555", //Type: String \| Default: brand.colors.danger "borderColor": "#D04555", //Type: String \| Default: brand.colors.danger "borderWidth": 1.0, //Type: Float \| Default: brand.baseComponentStyling.borderWidth "backgroundColor": "#FFFFFF" //Type: String \| Default: brand.colors.backgroundColor } },	Base

Ondato

Mobile SDK Whitelabeling

Whitelabel configuration

Full Code

Whitelabeling Breakdown

Colours

Illustrations / icons

Fonts

Overwritable screens

Typography structure

Heading 1 style

Heading 2 style

Body text style

List text style

Button label text style

Input label text style

Base component styling

Components (Advanced whitelabeling)

Buttons structure

Button. Main Appearance.

Button. Normal view

Button. Pressed state

Button. Disabled state

Back and Close Buttons

Inputs components

Mobile SDK Whitelabeling

Whitelabel configuration

Full Code

Whitelabeling Breakdown

Colours

Illustrations / icons

Fonts

Overwritable screens

​ Typography structure

Heading 1 style

​ Heading 2 style

​ Body text style

​ List text style

Button label text style

Input label text style

​ Base component styling

Components (Advanced whitelabeling)

Buttons structure

Button. Main Appearance.

Button. Normal view

Button. Pressed state

Button. Disabled state

Back and Close Buttons

Inputs components

Typography structure

Heading 2 style

Body text style

List text style

Base component styling