Theming & Customization

Branding

Property	Type	Default Value	Notes
background	`light` or `dark`	`light`
color_page	`string` (hex code)	`#5251FD`	This property allows you to change the background color of the page (i.e. background color of the area outside the main card) Important: This area is not visible in phone view.
color_brand	`string` (hex code)	`#5251FD`	Your primary brand color. This gets applied to buttons, icons, etc.
color_brand_overlay	`string` (hex code)	`#FFFFFF`	This is the color of all items that are placed over your brand color. For example, color of the text inside your buttons. Or color of icons on layouts where the background color is the brand color.
font_name	`string`	`Plus Jakarta Sans`	The name should match exactly with the name mentioned on Google Fonts.
font_weights	`string`	`300,400,500,600,700`	This should be a single string with separated by commas. Important: This option needs to be modified ONLY if you are customizing the weights of the buttons, inputs, etc and using a value that is not present in the default list (for example 800).

Buttons

Property	Type	Default Value	Note
button_border_radius	`string`	`8px`
button_padding	`string`	`18px`	Any valid CSS value (like `rem`, `%`, etc) can be used here.
button_font_size	`string`	`16px`
button_font_weight	`string`	`400`	If you are changing it to any value apart from 300, 400, 500, 600 or 700, make sure to update the `font_weights` property.

Inputs

Property	Type	Default Value	Note
input_border_radius	`string`	`8px`
input_padding	`string`	`14px 18px`	Any valid CSS value (like `rem`, `%`, etc) can be used here.
input_font_size	`string`	`16px`
input_font_weight	`string`	`500`	If you are changing it to any value apart from 300, 400, 500, 600 or 700, make sure to update the `font_weights` property.
input_label_font_size	`string`	`16px`
input_label_font_weight	`string`	`500`	If you are changing it to any value apart from 300, 400, 500, 600 or 700, make sure to update the `font_weights` property

Other

Property	Type	Default Value	Note
layout_border_radius	`string`	`18px`	This is the border radius of the main card which contains our verification flow. Important: This value is not applicable in phone view as the card takes up the entire screen.
modal_border_radius	`string`	`12px`	Border radius for popups, modals, etc.
image_border_radius	`string`	`12px`	Border radius for captured images.

Updated over 1 year ago