Customizations

by Unico's customization options allow you to tailor its interface to your company's visual identity and create a personalized user experience.

Logo Customization

You can customize the logo displayed to users who access by Unico journeys. This customization reinforces the partnership between your company and Unico, indicating that the verification is performed by Unico at the request of the client or partner.

To request the inclusion of the logo, send the Unico team a URL where the logo is hosted in an online directory (i.e., the logo must be accessible via URL in the browser).

• Ex: https://storage.googleapis.com/portal-orca-unico-prod/apps/orca/logo-default.png.

Base64 encoded URLs cannot be registered. (These URLs typically begin with "data:image/jpeg;base64,/9j/4AAQ...").

Logo customization

Accepted logo grids

Recommendations:

• Preferably send the logo in the icon logo format, due to its better readability in reduced sizes.

Rules:

• Make sure the logo is square, respects the proportional grid and ensures that it is exported with at least 192x192 pixels.

• Accepted formats: SVG, PNG and JPEG.

Unaccepted logo formats

Unaccepted logo formats

Rules:

• Prioritize the application of the logo on backgrounds that guarantee legibility.

• Do not use logos that do not respect the square grid.

• Avoid using low-resolution logos.

• Do not apply the logo on transparent backgrounds.

Recommendations:

• Prioritize colors with a readable contrast of at least 4.5:1, following WCAG accessibility parameters.

  • Use the hexadecimal of the colors to check the contrast scale. Example: Foreground ColorPicker: #000000, Background Color: #FFFFFF, Contrast Ratio: 21.00:1.

Customizing the color and shape of buttons

Customize the by Unico action buttons. Define the text color, background, and border radius of the button to reinforce your company's visual identity.

Button customization

Contrast examples

Recommendations:

• Choose accessible colors: When customizing button colors in By Unico, opt for an accessible color scheme that ensures visibility for all users, including those with visual impairments.

• Contrast ratios: Aim for a contrast ratio higher than 4.51:1 for the best results.

Accessible colors improve navigation for everyone, especially for people with low vision. Use hexadecimal color codes to check contrast and follow WCAG guidelines.

• Example: #FFFFFF (text) on #000000 (background) results in a contrast ratio of 21.00:1.

Rounding the button corners

In addition to text and background colors, you can also define the button's corner rounding (border-radius) in pixels, according to the scale below:

Rounding the button corners

Customization settings

To configure the visual identity of the client or partner for the button, share the following information with Unico's implementation team:

• Hexadecimal code for the button background color.

  • Example: #000000.

• Hexadecimal code for the button text color.

  • Example: #ffffff.

• Button corner rounding (border-radius) in pixels.

  • Example: 10px.