# Create custom Hosted Pages

In the **Dashboard**, go to ****Settings**** **> Configuration > Web App V1: CSS** to add/change your customization settings.

Under **Settings** you can change the following elements in Token.io's HP:

- [TPP logo](#logo)
- [Font family](#font-family)
- [Styles](#styles)
- [Font weights](#font-weights)
- [Font sizes](#font-sizes)


### TPP logo 

Configures the TPP logo for the HP.

Click the **Choose file** button, and select a file from the **File explorer**.

The selected image:

- can have a can have a maximum size of 250 px (width) by 23 px (height); 220 x 20 px is commonly used.
- will appear in the HP as the TPP’s logo unless **Product Name** has been set under the **Web App - General** tab.
- can be tagged as {TPP_LOGO} throughout other HP configuration fields in the Dashboard.


### Font family

Configures the global font family for the HP.

Select the font family among the listed values in the **Font Family** dropdown.

### Styles

Configures the text and button styles for the HP.

The following styles can be configured.

| Style | Configuration |
|  --- | --- |
| **Title** | A color configuration for titles displayed in the global font family. |
| **Text** | A color configuration for special text and links displayed in the global font family. |
| **Normal 1** | A color configuration for default text on the HP consent page. |
| **Spinner** | A color configuration used for the spinners in the HP. |
| **Link** | A text color configuration used for links in the HP. |
| **Primary actions** | A color configuration used for primary actions such as hover on a list item and the color of an **Accept** button. |
| **Background color** | A color configuration used as a background color for lists in the HP. |
| **Primary text color** | A text color configuration used for the primary text for all primary actions in the HP. |
| **Secondary Actions** | A color configuration used for secondary actions. |
| **Secondary text color** | A text color configuration which is used for secondary text, for example, the label of a secondary button. |
| **Borders** | A color configuration for borders in the HP. |
| **Heading 2 & 3** | A text color configuration used for sub title text in the HP. |
| **Normal 2** | A text color configuration which is used for consent texts. |
| **Button Primary Focus** | A color configuration which only appears in the background of a primary button when the user tries to focus on it in the HP. |
| **Button Primary Press** | A color configuration which will only appear in the background of a primary button when the user tries to click it in the HP. |
| **Button Primary Hover** | A color configuration which will only appear in the background of a primary button when the user tries to hover over it in the HP. |
| **Button Secondary Focus** | A color configuration which only appears in the background of a secondary button when the user tries to focus on it in the HP. |
| **Button Secondary Press** | A color configuration which will only appear in the background of a secondary button when the user tries to click it in the HP. |
| **Button Secondary Hover** | A color configuration which will only appear in the background of a secondary button when the user tries to hover over it in the HP. |
| **Delete Actions** | A color configuration for delete actions in the HP. |
| **Button Delete Hover** | A color configuration which will only appear in the background of an error button when the user tries to hover over it in the HP. |
| **Button Delete Press** | A color configuration which only appears in the background of an error button when the user tries to click it in the HP. |
| **Button Delete Focus** | A color configuration which only appears in the background of an error button when the user tries to focus on it in the HP. |
| **Button Focus Color Outline** | A color configuration used to configure the focus outline color for actionable items in the HP. |


### Font weights

Configures the weight of the fonts for text in the HP.

The following font weights can be configured.

| Font weight | Configuration |
|  --- | --- |
| **Bold** | A font weight configuration generally used for Product Name and Title texts. |
| **Semi Bold** | A font weight configuration generally used for sub-title texts. |
| **Dark** | A font weight configuration used for consent details in the HP. |
| **Medium** | A font weight configuration used for consent data titles in the HP. |
| **Regular** | A font weight configuration used on list items, recent banks text, *etc* . |
| **Light** | A font weight configuration used in consent texts in the HP. |


### Font sizes

Configures the size of the fonts for text in the HP.

| Font weight | Configuration |
|  --- | --- |
| **Heading 1** | This size is used in Product Name texts as well as in the titles of HP. |
| **Heading 2** | This size is used in text inputs like IBAN and for selected items from lists. |
| **Heading 3** | This font size is used in sub titles and for consent details. |
| **Normal 1** | This font size is mainly used in consent-data-titles. |
| **Normal 2** | This font size is used in consent texts and on back button texts in the HP. |


If you have any feedback about the developer documentation, please contact [devdocs@token.io](mailto:devdocs@token.io)