Table of Contents

1 Configuration
- 1.1 Full Code
  - 1.1.1 Colours
  - 1.1.2 Illustrations / icons
  - 1.1.3 Fonts
  - 1.1.4 Overwritable screens
2 Components
- 2.1 Buttons structure
  - 2.1.1 Button. Main Appearance.
  - 2.1.2 Button. Normal view
  - 2.1.3 Button. Highlighted state
  - 2.1.4 Button. Disabled state
  - 2.1.5 Back and Close Buttons
- 2.2 Typography structure
  - 2.2.1 Heading 1 style
  - 2.2.2 Heading 2 style
  - 2.2.3 Normal text style
  - 2.2.4 List text style
- 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

Configuration

Full Code

{
  "baseColors": {
    "primaryColor": "#1434CB", // Used for illustrations and other accents
    "black": "#171717", // Black color used for texts
    "white": "#FFFFFF", // Your perfect shade of white used for 
    "dangerRed": "#D04555", // Used for termination or alert elements
    "warningYellow": "#F9BB42", // Used for warning elements
    "successGreen": "#28865A", // Used for success elements
    
    "backgroundColor": "#FFFFFF" // Used for all screens background color
  },

 "primaryButtonAppearance": {
  // Button text configuration
  "fontSize": 16, 
  "fontWeight": 500,
  "lineHeight": 22,
  
  "cornerRadius": 6.0,   // Button corner radius
  "roundCorners": false, // If "true", then the button will have fully rounded corners

  // Button padding configuration
  "buttonPadding": {
    "top": 14,
    "bottom": 14,
    "left": 24,
    "right": 24
  }

// If true, show the button icons (e.g. "Start" button with camera icon )
  "showIcon": false,
},


 "primaryButtonAppearanceNormal": {
    "textColor": "#FFFFFF", // Button text colour
    "tintColor": "#FFFFFF", // Button icon colour
    
    "backgroundColor": "#112EB7", // Button background colour
    
    "borderWidth": 0,  // Button border width 
    "borderColour": "#FFFFFF", // Button border colour 
    
    "opacity": 1.0 //Button opacity
  },


  "primaryButtonAppearanceHighlighted": {
    "textColor": "#FFFFFF", // Button text colour
    "tintColor": "#FFFFFF", // Button icon colour
    
    "backgroundColor": "#112EB7", // Button background colour
    
    "borderWidth": 0,  // Button border width 
    "borderColour": "#FFFFFF", // Button border colour 
    
    "opacity": 1.0 //Button opacity
  },


  "primaryButtonAppearanceDisabled": {
    "textColor": "#FFFFFF", // Button text colour
    "tintColor": "#FFFFFF", // Button icon colour
    
    "backgroundColor": "#112EB7", // Button background colour
    
    "borderWidth": 0,  // Button border width 
    "borderColour": "#FFFFFF", // Button border colour 
    
    "opacity": 0.4 //Button opacity
  },



"secondaryButtonAppearance": {
  "fontSize": 16,
  "fontWeight": 500,
  "lineHeight": 22,
  
  "cornerRadius": 6.0,
  "roundCorners": false, 

  "buttonPadding": {
    "top": 14,
    "bottom": 14,
    "left": 24,
    "right": 24
  }

  "showIcon": false,
},


  "secondaryButtonAppearanceNormal": {
    "textColor": "#2B2B2B", // Button text colour
    "tintColor": "#2B2B2B", // Button icon colour
    
    "backgroundColor": "#112EB7", // Button background colour
    
    "borderWidth": 1,  // Button border width 
    "borderColour": "#FFFFFF", // Button border colour 
    
    "opacity": 1 //Button opacity
  },


  "secondaryButtonAppearanceHighlighted": {
    "textColor": "#2B2B2B", // Button text colour
    "tintColor": "#2B2B2B", // Button icon colour
    
    "backgroundColor": "#112EB7", // Button background colour
    
    "borderWidth": 1,  // Button border width 
    "borderColour": "#FFFFFF", // Button border colour 
    
    "opacity": 1 //Button opacity
  },


  "secondaryButtonAppearanceDisabled": {
    "textColor": "#2B2B2B", // Button text colour
    "tintColor": "#2B2B2B", // Button icon colour
    
    "backgroundColor": "#112EB7", // Button background colour
    
    "borderWidth": 1,  // Button border width 
    "borderColour": "#FFFFFF", // Button border colour 
    
    "opacity": 0.4 //Button opacity
  },
  

  "backButtonAppearance": {
    "tintColor": "#282B2F" // Back button colour
  },

  "closeButtonAppearance": {
    "tintColor": "#282B2F" // Close button colour
  },



  "heading1TextAppearance": {
    "alignment": "center",
    "fontSize": 20,
    "fontWeight": 700,
    "lineHeight": 24
  },
  
  "heading2TextAppearance": {
    "alignment": "center",
    "fontSize": 16,
    "fontWeight": 700,
    "lineHeight": 18
  },
  "normalTextAppearance": {
    "alignment": "center",
    "fontSize": 16,
    "fontWeight": 400,
    "lineHeight": 18
  },

  "listTextAppearance": {
    "alignment": "left",
    "fontWeight": 400,
    "fontSize": 16,
    "lineHeight": 18
  },

  "selectionCardAppearance": {
    "borderWidth": 1,
    "borderRadius": 12,
    "fontWeight": 500,
    "lineHeight": 20,
    "tintColor": "#D3DAE2"
  },

  "activityIndicatorAppearance": {
    "color": "#1434CB" // Loader icon colour
  }
},


"faceScanUIConfiguration": {
  "faceScanFrame": {
    "borderColor": "#ffffff",
    "borderWidth": 2
  },
  "feedbackBar": {
    "backgroundColor": "#000000",
    "textColor": "#ffffff",
    "cornerRadius": 6
  }
}

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

Colours

	Code	Name

	Code	Name
`"baseColors": { "primaryColor": "#1434CB", "black": "#171717", "white": "#FFFFFF", "dangerRed": "#D04555", "warningYellow": "#F9BB42", "successGreen": "#28865A", "backgroundColor": "#FFFFFF" // Used for all screens background color },`	`"primaryColor"`	Primary colour Primary button background Illustrations
	`"black"`	Black colour Heading and other text colour Feedback bar background colour
	`"white"`	White colour ??
	`"dangerRed"`	Danger / Alert Red Used for alert and rejection icons
	`"warningYellow"`	Warning Yellow Used for the warning icons
	`"successGreen"`	Success Green Used for the identification approval icon
	`"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”

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

Document selection screen

Document instruction screen

Face capture instruction screen

Components

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 - primaryButtonAppearance, secondaryButtonAppearance which has variables for styles like corner radius, padding, font. These stylings are applied for all 3 states:

Normal
Default button view
Highlighted
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
`"primaryButtonAppearance": { "fontSize": 16, "fontWeight": 500, "lineHeight": 22, "cornerRadius": 6.0, "roundCorners": false, "buttonPadding": { "top": 14, "bottom": 14, "left": 24, "right": 24 } "showIcon": false, }, "secondaryButtonAppearance": { "fontSize": 16, "fontWeight": 500, "lineHeight": 22, "cornerRadius": 6.0, "roundCorners": false, "buttonPadding": { "top": 14, "bottom": 14, "left": 24, "right": 24 } "showIcon": false, },`	1	`"fontSize"`	Font size	8-32pt
		`"fontWeight"`	Font weight	100-800
		`"lineHeight"`	Line height	8-32pt
	2	`"cornerRadius"`	Corner radius	0-32pt
	2	`"roundCorners"`	if true, ignores cornerRadius value and rounds the button corners completely	true/false
	3	`"top"`	Button padding	0-32pt
		`"bottom"`		0-32pt
		`"left"`		0-32pt
		`"right"`		0-32pt
	4	`"showIcon"`	if true, shows the icon near the button text	true/false

Button. Normal view

This view will be default look of a button.

		Code	Name	Values

		Code	Name	Values
`"primaryButtonAppearanceNormal": { "textColor": "#FFFFFF", "backgroundColor": "#1434CB", "borderColor": "#FFFFFF", "borderWidth": 0, "tintColor": "#FFFFFF", // Button icon colour }, "secondaryButtonAppearanceNormal": { "textColor": "#FFFFFF", "backgroundColor": "#1434CB", "borderColor": "#FFFFFF", "borderWidth": 0, "tintColor": "#FFFFFF" // Button icon colour },`	1	`"textColor"`	Text color	`#FFFFFF`
	2	`"backgroundColor"`	Background color	`#1434CB`
	3	`"borderColor"`	Border color	#FFFFFF
		`"borderWidth"`	Border width	0-32pt
	4	`"tintColor"`	Icon colour	#FFFFFF

Button. Highlighted state

Button style when it’s pressed down.

		Code	Name	Values

		Code	Name	Values
`"primaryButtonAppearanceHighlighted": { "textColor": "#FFFFFF", "backgroundColor": "#1434CB", "borderColor": "#FFFFFF", "borderWidth": 0, "tintColor": "#FFFFFF" // Button icon colour }, "secondaryButtonAppearanceHighlighted": { "textColor": "#FFFFFF", "backgroundColor": "#1434CB", "borderColor": "#FFFFFF", "borderWidth": 0, "tintColor": "#FFFFFF" // Button icon colour },`	1	`"textColor"`	Text color	`#FFFFFF`
	2	`"backgroundColor"`	Background color	`#1434CB`
	3	`"borderColor"`	Border color	#FFFFFF
		`"borderWidth"`	Border width	0-32pt
	4	`"tintColor"`	Icon colour	#FFFFFF

Button. Disabled state

Button style when it’s disabled

		Code	Name	Values

		Code	Name	Values
`"primaryButtonAppearanceDisabled": { "textColor": "#FFFFFF", "backgroundColor": "#1434CB", "borderColor": "#FFFFFF", "borderWidth": 0, "tintColor": "#FFFFFF", // Button icon colour "opacity": 1 // Button opacity }, "secondaryButtonAppearanceDisabled": { "textColor": "#FFFFFF", "backgroundColor": "#1434CB", "borderColor": "#FFFFFF", "borderWidth": 0, "tintColor": "#FFFFFF", // Button icon colour "opacity": 1 // Button opacity },`	1	`"textColor"`	Text color	`#FFFFFF`
	2	`"backgroundColor"`	Background color	`#1434CB`
	3	`"borderColor"`	Border color	#FFFFFF
		`"borderWidth"`	Border width	0-32pt
	4	`"tintColor"`	Icon colour	#FFFFFF
		`"opacity"`	Button opacity	0-1

Back and Close Buttons

	Code	Name	Values

	Code	Name	Values
`"backButtonAppearance": { "tintColor": "#282B2F" }, "closeButtonAppearance": { "tintColor": "#282B2F" },`	`"tintColor"`	Icon color	`#282B2F`

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

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

Heading 1 style

Text style used for the title of each screen

	Code	Name	Values

	Code	Name	Values
`"heading1TextAppearance": { "alignment": "center", "fontSize": 20, "fontWeight": 700, "lineHeight": 24, "textColor": "#282B2F" },`	`"alignment"`	Text alignment	left center right
	`"fontSize"`	Font size	16–48pt
	`"fontWeight"`	Font weight	100–800
	`"lineHeight"`	Line height	8–32pt
	`"textColor"`	Text color	`#282B2F`

Heading 2 style

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

	Code	Name	Values

	Code	Name	Values
`"heading2TextAppearance": { "alignment": "center", "fontSize": 16, "fontWeight": 700, "lineHeight": 18, "textColor": "#282B2F" },`	`"alignment"`	Text alignment	left center right
	`"fontSize"`	Font size	14–24pt
	`"fontWeight"`	Font weight	100–800
	`"lineHeight"`	Line height	8–32pt
	`"textColor"`	Text color	`#282B2F`

Normal text style

The body text

	Code	Name	Values

	Code	Name	Values
`"normalTextAppearance": { "alignment": "center", "fontSize": 16, "fontWeight": 400, "lineHeight": 18, "textColor": "#282B2F" },`	`"alignment"`	Text alignment	left center right
	`"fontSize"`	Font size	14–18pt
	`"fontWeight"`	Font weight	100–800
	`"lineHeight"`	Line height	8–32pt
	`"textColor"`	Text color	`#282B2F`

List text style

Text style used for the list

	Code	Name	Values

	Code	Name	Values
`"listTextAppearance": { "alignment": "left", "fontSize": 16, "fontWeight": 400, "lineHeight": 18, "textColor": "#282B2F" },`	`"alignment"`	Text alignment	left center right
	`"fontSize"`	Font size	14–18pt
	`"fontWeight"`	Font weight	100–800
	`"lineHeight"`	Line height	8–32pt
	`"textColor"`	Text color	`#282B2F`

Face Scan UI Configuration

These values define the appearance of the Face Scan UI, including the scan frame and feedback bar.

Face Scan frame (1)
The oval frame in the face capture
Feedback bar (2)

Face Scan Frame

	Code	Name	Values

Code

Name

Values

"faceScanUIConfiguration": {

  "faceScanFrame": {
    "borderColor": "#ffffff",
    "borderWidth": 2
  },
  
}

"borderColor"

Border color

#FFFFFF

"borderWidth"

Border width

0

Feedback bar

	Code	Name	Values

Code

Name

Values

"faceScanUIConfiguration": {

  "feedbackBar": {
    "backgroundColor": "#000000",
    "textColor": "#ffffff",
    "cornerRadius": 6
  }
  
}

"backgroundColor"

Background color

#282B2F

"textColor"

Text color

#FFFFFF

"cornerRadius"

Corner radius

0–32pt

Other components

Selection card

Selection card is a button that is used to choose the document.

		Code	Name	Values

		Code	Name	Values
`"selectionCardAppearance": { "backgroundColor": "#FFFFFF", "borderWidth": 1, "borderColor": "D3DAE2", "borderRadius": 12, "fontWeight": 500, "lineHeight": 20, "tintColor": "#D3DAE2" },`	1	`"backgroundColor"`	Background color	`#FFFFFF`
	2	`"borderWidth"`	Border width	0–32pt
		`"borderColor"`	Border color	`#D3DAE2`
	3	`"borderRadius"`	Border radius	0–32pt
	4	`"fontWeight"`	Font weight	100–800
		`"lineHeight"`	Line height	8–32pt
	5	`"tintColor"`	Tint color	`#D3DAE2`

Activity indicator

A style of the loader

		Code	Name	Values

		Code	Name	Values
`"activityIndicatorAppearance": { "color": "#1434CB" }`	1	`"color"`	Loader color	#D3DAE2

Ondato

Mobile SDK Whitelabeling