> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fintoc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# UX Guidelines

We take customer experience and safety seriously. To ensure your success, our UX/UI experts have created this helpful guide for your organization.

### Best practices

✅Do:

* Only use images provided by Fintoc by embedding the URL provided.
* Use the same image style throughout your site.
* Button text should only include Fintoc-approved terminology.
* Make sure you choose a background color that contrasts with the image color.

❌ Do not:

* Do not modify the font, color, button radius, or padding inside the logo in any way.
* Do not utilize a png, jpg or non URL version of the buttons and images provided.
* Do not use a background color that is similar to the image color.
* Do not add shadow effects to the image.
* Do not add hover effects.
* Do not utilize any other terminology than the recommended one.

### Why use URLs in your website or app

We recommend that you use the URL links directly in your application or website to get the most up-to-date version of the images. This way you don't have to update manually every time there is a change.

```html theme={null}
src="https://assets.fintoc.com/?img_name=button_cl_light_trailing"
```

### Within the connection flow

**Accepted terminology:** *Conéctate* or *Conectar*.

In the process of your users connecting their account to Fintoc, use the recommended terminology for the button that will open our widget. You may also want to display our complete logo as a way to show that this process is powered by Fintoc.

| Preview                                                           | Description    | HTML                                                         |
| :---------------------------------------------------------------- | :------------- | :----------------------------------------------------------- |
| ![Dark logotype](https://assets.fintoc.com/?img_name=logo_dark)   | Dark logotype  | `<img src="https://assets.fintoc.com/?img_name=logo_dark">`  |
| ![Light logotype](https://assets.fintoc.com/?img_name=logo_light) | Light logotype | `<img src="https://assets.fintoc.com/?img_name=logo_light">` |

### Other logo usage

You may want to display our logo to show who your work with. We want to help you do this in the best way.

We are providing two URLs for you to embed within your website or app for this purpose. Leave the recommended safe space around our logo.

| Preview                                                                 | Description     | HTML                                                              |
| :---------------------------------------------------------------------- | :-------------- | :---------------------------------------------------------------- |
| ![Dark imagotype](https://assets.fintoc.com/?img_name=imagotype_dark)   | Dark imagotype  | `<img src="https://assets.fintoc.com/?img_name=imagotype_dark">`  |
| ![Light imagotype](https://assets.fintoc.com/?img_name=imagotype_light) | Light imagotype | `<img src="https://assets.fintoc.com/?img_name=imagotype_light">` |

<Frame>
  <img src="https://mintcdn.com/fintoc-49b8bee8/SkvJJ-DZ5D4yC6tQ/images/edbf04ab7028cb07548fd8cad9e5dc4453e28005ff7c92ecd1f803df4279d873-Clearance_explanation.png?fit=max&auto=format&n=SkvJJ-DZ5D4yC6tQ&q=85&s=802304f49619c947326b70e4e995ba47" width="3192" height="2160" data-path="images/edbf04ab7028cb07548fd8cad9e5dc4453e28005ff7c92ecd1f803df4279d873-Clearance_explanation.png" />
</Frame>

If you have any questions on how to implement these recommendations, contact our team.