📁 Table of Contents

Table of Contents

style	none

🛠️ Configuration

📚 Full Code

Expand

title	Here you can find full code of the JSON

Code Block

language	json

{
  "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
  }
}

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

1️⃣ Colours

Code

Name

Code Block

language	json

  "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”

Group 603.png

2️⃣ 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.

3️⃣ Fonts

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

Note
Guide how to do that is coming soon

4️⃣ Overwritable screens

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

Note
Guide how to do that is coming soon

Document selection.png

Identity card flow.png

Face capture flow55.png

🧩 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

Frame 29134.png

Button whitelabel is structured in 4 parts - primaryButtonAppearance, secondaryButtonAppearancewhich 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.

1️⃣ Button. Main Appearance.
These values will go thorough all primary button states - Normal, Highlighted and Disabled
Code
Name
Values
Code Block
language json
"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
"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
2️⃣ Button. Normal view
This view will be default look of a button.
Code
Name
Values
Code Block
language json
"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
3️⃣ Button. Highlighted state
Button style when it’s pressed down.
Code
Name
Values
Code Block
language json
"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
4️⃣ Button. Disabled state
Button style when it’s disabled
Code
Name
Values
Code Block
language json
"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
5️⃣ Back and Close Buttons
Code
Name
Values
Code Block
language json
"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

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

1️⃣ Heading 1 style
Text style used for the title of each screen
Code
Name
Values
Code Block
language json
"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
2️⃣ Heading 2 style
Used for the second hierarchy texts, for example - “Please check if” or “Make sure” texts
Code
Name
Values
Code Block
language json
"heading2TextAppearance": { "alignment": "center", "fontSize": 2016, "fontWeight": 700, "lineHeight": 2418, "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
3️⃣ Normal text style
The body text
Code
Name
Values
Code Block
language json
"normalTextAppearance": { "alignment": "center", "fontSize": 2016, "fontWeight": 700400, "lineHeight": 2418, "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
4️⃣ List text style
Text style used for the list
Code
Name
Values
Code Block
language json
"listTextAppearance": { "alignment": "centerleft", "fontSize": 2016, "fontWeight": 700400, "lineHeight": 2418, "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)

1️⃣ Face Scan Frame
Code
Name
Values
Code Block
language json
"faceScanUIConfiguration": { "faceScanFrame": { "borderColor": "#ffffff", "borderWidth": 2 }, }
"borderColor"
Border color
#FFFFFF
"borderWidth"
Border width
0
2️⃣ Feedback bar
Code
Name
Values
Code Block
language json
"faceScanUIConfiguration": { "feedbackBar": { "backgroundColor": "#000000", "textColor": "#ffffff", "cornerRadius": 6 } }
"backgroundColor"
Background color
#282B2F
"textColor"
Text color
#FFFFFF
"cornerRadius"
Corner radius
0–32pt
🗂️ Other components
1️⃣ Selection card
Selection card is a button that is used to choose the document.
Code
Name
Values
Code Block
language json
"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
2️⃣ Activity indicator
A style of the loader
Code
Name
Values
Code Block
language json
"activityIndicatorAppearance": { "color": "#1434CB" }
1
"color"
Loader color
#D3DAE2

Version	Old Version 2	New Version Current
Changes made by	Tomas Gecevicius	Tomas Gecevicius
Saved on	Jan 13, 2025	Mar 31, 2025

Versions Compared

Key

🛠️ Configuration