# UX & Branding

All the properties that define the layout are located in the file **uq-styles.plist** and **uq-styles-dark.plist**. Below we describe all the elements of the layout that can be customized and related properties.

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2FvI7vMSkXmyJXuVdE7soI%2Fscreen_all.png?alt=media\&token=a3c44e10-01bc-4af1-b5e4-273b2a3dc822)

**Element 1**:

* None

**Element 2**:

* **uq\_layout\_background\_image**: name of the image in your application’s asset. If defined, it takes precedence on the other properties
* **uq\_layout\_background\_color**: background colour

**Element 3**:

* **uq\_navigation\_back\_arrow\_image**
* **uq\_navigation\_item\_tint\_color**

**Element 4**:

* **uq\_layout\_logo\_image**
* **uq\_logo\_image\_hidden**: YES if you want to hide the logo

## Instructions for Scanning

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2FchuqhGgdfg3vm6tYRADx%2Fscreen_help_scan.png?alt=media\&token=d5fcf5a3-01eb-4aec-b126-5e5b6afee77a)

**Element 5:**

* **uq\_animation\_scan\_id**: for any ID 
* **uq\_animation\_scan\_passport**: for passport

**Element 6:**

* **uq\_title\_font\_name**
* **uq\_title\_font\_weight**
* **uq\_title\_font\_size**
* **uq\_title\_color**
* **uq\_title\_text\_uppercase**
* **uq\_description\_font\_name**
* **uq\_description\_font\_weight**
* **uq\_description\_font\_size**
* **uq\_description\_color**
* **uq\_text\_view\_position**: set to top if you want to have the text above the animation 
* **uq\_text\_view\_padding**
* **uq\_text\_view\_padding\_top**

**Element 7:**

* **uq\_button\_title\_font\_name**
* **uq\_button\_title\_font\_weight**
* **uq\_button\_title\_font\_size**
* **uq\_button\_title\_color**
* **uq\_button\_border\_color**
* **uq\_button\_background\_color**
* **uq\_button\_border\_width**
* **uq\_button\_corner\_radius**
* **uq\_button\_height**
* **uq\_button\_width**
* **uq\_button\_background\_image**
* **uq\_button\_indicator\_image**
* **uq\_button\_indicator\_image\_hidden**
* **uq\_button\_padding**

## Instructions for Reading

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2FTzf0BcVfRXCochkQuh4C%2Fscreen_help_nfc.png?alt=media\&token=193a15c6-6da8-4d79-b276-f8214ef9e33d)

**Element 1**:

* **uq\_button\_skip\_font\_size**
* **uq\_button\_skip\_color**

**Element 2**: Animation in GIF format (static PNG and JPEG is supported as well): 

* **uq\_animation\_read\_passport\_nfc**: for passport
* **uq\_animation\_read\_id\_nfc**: for any ID

**Element 3**:

* **uq\_press\_for\_help\_button\_title\_font\_name**
* **uq\_press\_for\_help\_button\_title\_font\_weight**
* **uq\_press\_for\_help\_button\_title\_font\_size**
* **uq\_press\_for\_help\_button\_title\_color**
* **uq\_press\_for\_help\_button\_border\_color**
* **uq\_press\_for\_help\_button\_background\_color**
* **uq\_press\_for\_help\_button\_border\_width**
* **uq\_press\_for\_help\_button\_corner\_radius**
* **uq\_press\_for\_help\_button\_width**
* **uq\_press\_for\_help\_button\_title\_underline**

## Help for Reading of Passport

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2FX5KycnJbXpZfpMSTdfR3%2Fscreen_help_nfc_passport.png?alt=media\&token=fc3f64f3-dbdb-4bbb-a7d3-34e3a12678a3)

**Element 1**: animation in GIF format. There are three animations from page 2 to 4. First page has a fixed image (static PNG and JPEG is supported as well):

* **uq\_animation\_read\_passport\_nfc\_help\_1**
* **uq\_animation\_read\_passport\_nfc\_help\_2**
* **uq\_animation\_read\_passport\_nfc\_help\_3**

**Element 2**:

* **uq\_page\_number\_color**

**Element 3**:

* **uq\_page\_indicator\_unselected\_color**
* **uq\_page\_indicator\_selected\_color**

## Progress Screen

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2FR9l44LAdCm0fMrem8sIW%2Fscreen_progress.png?alt=media\&token=3aeb18ea-538f-4726-bcb0-5faa82b8804a)

**Element 1 and 2**:

* **uq\_progress\_bar\_type** - circular (default) flat (standard progress bar)
* **uq\_progress\_bar\_text\_position** - bottom (default) top \[applies to circular and flat]
* **uq\_progress\_bar\_text\_padding** - the space between the progress bar and the text \[applies to circular and flat]
* **uq\_progress\_bar\_text\_color** - \[applies to circular and flat]
* **uq\_progress\_bar\_color** - \[applies to flat only]
* **uq\_progress\_bar\_height** - \[applies to flat only]
* **uq\_progress\_bar\_corner\_radius** - \[applies to flat only]
* **uq\_progress\_bar\_animation\_duration** - controls the speed of the animation in seconds, the higher the number the slower is the speed \[applies to circular and flat]
* **uq\_progress\_bar\_stripes\_color** - \[applies to flat only]
* **uq\_progress\_bar\_stripes\_opacity** - \[applies to flat only]
* **uq\_progress\_bar\_stripes\_orientation** - left | right | vertical \[applies to flat only] 
* **uq\_progress\_bar\_circular\_radius** - \[applies to circular only]
* **uq\_progress\_bar\_circular\_width** - \[applies to circular only]
* **uq\_progress\_bar\_circular\_start\_color\_opacity** - \[applies to circular only]
* **uq\_progress\_bar\_circular\_start\_color** - \[applies to circular only] 
* **uq\_progress\_bar\_circular\_end\_color** - \[applies to circular only] 
* **uq\_progress\_bar\_circular\_start\_angle** - \[applies to circular only] 
* **uq\_progress\_bar\_circular\_end\_angle** - \[applies to circular only] 
* **uq\_progress\_bar\_circular\_corner\_round** - \[applies to circular only]

## **Consent for Background Check**

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2Flg92C09fcBNt2zmAuMzK%2Fscreen_screening.png?alt=media\&token=b2451e76-73b9-4022-9cdb-aeb21e374e8e)

**Element 1**:

* **uq\_background\_check\_decline\_button\_title\_font\_name** 
* **uq\_background\_check\_decline\_button\_title\_font\_weight** 
* **uq\_background\_check\_decline\_button\_title\_font\_size** 
* **uq\_background\_check\_decline\_button\_title\_color** 
* **uq\_background\_check\_decline\_button\_border\_color** 
* **uq\_background\_check\_decline\_button\_background\_color** 
* **uq\_background\_check\_decline\_button\_border\_width** 
* **uq\_background\_check\_decline\_button\_corner\_radius** 
* **uq\_background\_check\_decline\_button\_height**
* **uq\_background\_check\_decline\_button\_width** 
* **uq\_background\_check\_decline\_button\_background\_image** 
* **uq\_background\_check\_decline\_button\_indicator\_image** 
* **uq\_background\_check\_decline\_button\_indicator\_image\_hidden**

**Element 2**:

* **uq\_background\_check\_confirm\_button\_title\_font\_name** 
* **uq\_background\_check\_confirm\_button\_title\_font\_weight** 
* **uq\_background\_check\_confirm\_button\_title\_font\_size** 
* **uq\_background\_check\_confirm\_button\_title\_color** 
* **uq\_background\_check\_confirm\_button\_border\_color** 
* **uq\_background\_check\_confirm\_button\_background\_color** 
* **uq\_background\_check\_confirm\_button\_border\_width** 
* **uq\_background\_check\_confirm\_button\_corner\_radius** 
* **uq\_background\_check\_confirm\_button\_height**
* **uq\_background\_check\_confirm\_button\_width** 
* **uq\_background\_check\_confirm\_button\_background\_image** 
* **uq\_background\_check\_confirm\_button\_indicator\_image** 
* **uq\_background\_check\_confirm\_button\_indicator\_image\_hidden**

## Face Match Error

![](https://1201843429-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0JZZSvL3DmX19a9SgDAt%2Fuploads%2FKiUgKg1Ka7pKpddozTkB%2Fscreen_help_face.png?alt=media\&token=e18dc448-d3d1-4a9a-8a0e-b6e36e8a6874)

**Element 1, 2, 3, 4 and 5:** Define your own image in your application asset catalog (requires @1x @2x @3x version). JPEG and PNG are supported but we recommend PNG

* **uq\_face\_perfect**
* **uq\_face\_far\_away**
* **uq\_face\_too\_close**
* **uq\_face\_too\_light**
* **uq\_face\_too\_dark**