# 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.

![](/files/kwSFtitq8fYGBI5NLLfi)

**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

![](/files/PtXcF4MaQEuAXFbyGD7G)

**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

![](/files/aqZxAJh3mYNXzdPumljO)

**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

![](/files/ltosEuLCqSPUVZ31vmFp)

**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

![](/files/qNnDiG9hqRLIGxdMI3Ut)

**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**

![](/files/pqWKf2nndje781rlk8Ia)

**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

![](/files/Px98uqWwaNBxgkPEw1wG)

**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**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uqudo.com/docs/kyc/uqudo-sdk/integration/ios/ui-customisation/ux-and-branding.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.