General settings

Appearance settings

This page allows you to manage the branding elements of your site: upload logo, background and favicon. The goal is to make the site more recognizable, user-friendly and visually appealing.

Settings tabs

1. Logo - will be displayed in the selected display type “Image (logo)” and will help build recognition for your brand. It is displayed on the left side of the site header. Used as the main graphic element of the site.

   • File requirements:

     • File formats: SVG, PNG, WEBP, JPG, JPEG

     • Recommended: SVG for best quality

     • Minimum resolution: 120 px height

     • Maximum file size: 2 MB

   • Uploaded via the button "Drag and drop or choose a file".

2. Background - will be displayed as the background of pages and will help create a cohesive and attractive design. This will make the site visually more pleasant and recognizable.

   • File requirements:

     • File formats: PNG, WEBP, JPG, JPEG, SVG, WEBM.

     • Recommended: SVG for best quality

     • Minimum resolution: 1920×1080 px

     • Maximum file size: 10 MB

   If you choose a transparent image, you will be able to set the site's background fill color through the “Palette” section in this settings menu, in the “Default background” field; you can learn more about color palette settings in section 4 of this page of the documentation. In addition to an image, you can set video as a background — this will make the site's appearance more dynamic and modern.

1. Favicon - will be displayed in browser tabs, in the bookmarks list and when adding the site to the phone's home screen. This will help users quickly recognize your site among other browser tabs, in task lists, when saving the site to the home screen, and make your brand more noticeable.

   • File requirements:

     • File formats: PNG, WEBP, JPG, JPEG, SVG

     • Recommended: SVG for best quality

     • Minimum resolution: 200×200 px

     • Maximum file size: 2 MB

Available actions

• Upload or replace the file via the Drag & Drop.

• Save changes with the button "Save".

• In case of unwanted changes you can press "Cancel".

1. Palette - section allows you to influence most of the color settings on the site, where you can adjust the site's color scheme to your brand style. Here the main colors for buttons, texts, headings, notifications and background are set. All changes are immediately reflected in the site's appearance, so you can choose shades that will be convenient for users and recognizable among competitors. The sections you can edit are described below; you can also find descriptions for them next to each field by hovering over the “?”

Primary colors

• Primary color — the main accent of the site. Used for primary buttons, active elements and key accents. For example, the currency block in the exchange calculator, the counter of active element toggles, the operator status window

• Blocks on primary color — the outline color that appears when hovering over blocks at the top of the site (header).

Text colors

• Primary text — the main regular text on the site. Used in most fields, highlighting section titles, list of currencies, text within sections.

• Secondary text — auxiliary text used in contact labels, field names for input, input hints when creating an order, auxiliary information in descriptions of AML check history.

• Inactive element text — color for auxiliary text when an error has occurred related to it. Usually a brighter red, used to highlight text that does not meet input formats, for example - the specified amount exceeds the maximum, the client did not indicate consent for an AML check, an error occurred while generating payment details during order creation.

• Placeholder text — grey text inside input fields that disappears when typing. For example - hints for the format of field entries displayed mostly dimly.

• Top section text — The text color used in the application header and navigation elements. It applies to menu items, user profile information, and other textual content related to the top section (header) of the site.

• Footer text — The text color used in the footer section. It applies to copyright information, footer links, contact details, and other text elements located in the bottom section of the website.

• Accent text — text used in call-to-action blocks, for example - the “Exchange” button, text in currency group blocks, notification text, text of fields in the header menu that point to rule menu items, the text of the rules section the client is on, the text of the authorization block.

• Page text - Changing texts that do not belong to sections or blocks on the site. For example, titles of sections placed directly on the site background outside other sections, essentially like text on top of paper (site background).

Background colors

• Cards/blocks background — fill background color for cards, news, small blocks on pages, the authorization panel or data entry panels.

• Top part background — the color of the site's top panel (header).

• Bottom part background — the color of the site's bottom panel (footer).

• Input fields background — the background color of forms to be filled in (where data is entered). For example - login fields in the personal account, data entry fields when creating an order.

• Default background — the general page background, visible only if there is no site background or if it is transparent.

Status colors

• Green — highlighting statuses of a successful event: Order status “Completed”, verification status, AML check status

• Red — highlighting statuses of an unsuccessful event: Order status “Cancelled”, “Error”, “Cancelled”, rejected verification status, AML check status.

• Orange — highlighting statuses with an intermediate state: Order status “Checking”, “Partial payment”, intermediate verification statuses

• Blue — creating an order or a new item.

Divider color

• Dividers — thin lines that separate blocks or rows in tables, currency lists, menus or sections in the mobile interface.

Typography

This section is designed for bulk changing fonts on the site. Settings made in this section apply to all standard text elements of the interface.

Feature description

1. Font selection

At the top of the page there is a dropdown list with available fonts (for example: Ubuntu, Lato, Rubik and others).

After selecting a font, the changes are applied to all main text elements of the site, including:

• Headings (h1, h2, h3, etc.)

• Main text (body)

• Captions

• Interface elements

• Buttons

• Menus

• Forms

On the right a preview is displayed (an example of how headings and text look), allowing you to visually evaluate the selected font before saving.

2. “Save” button

Applies the selected font to the entire site.

After saving:

• the font is updated in all standard interface components;

• the changes become visible on the public part of the site.

3. “Reset to default” button

Returns the system (default Rubik) font that is set by default in the template.

Used in case you need to roll back changes.

Important

• Typography settings apply to all standard elements of the site.

• Changes do not affect blocks with custom HTML code.

Purpose of the section

The section allows centralized management of the site's font style without the need to edit code. This makes it easier to adapt the design to the brand and ensures a unified styling.

Shape Border Radius

Shape Border Radius is a global design system setting that allows centralized control of the corner rounding radius of elements across the entire site.

The feature works as a scaling coefficientthat is applied to the base radius value (for example, 8px).

Calculation formula:

Final border-radius = Coefficient × Base value (px)

Example:

• Coefficient = 1

• Base value = 8px

• Result: 1 × 8px = 8px

Where it is applied

Changing the coefficient affects all UI elements that use the system border-radius:

• Buttons

• Input fields

• Dropdowns

• Modal windows

• Cards

• Dropdown menus

• Badges

• Other design system components

Parameters

Border radius (coefficient)

A numeric value that is multiplied by the base radius.

• Minimum value: 0 (sharp corners)

• Values >3 create a maximally rounded interface

---

Visual examples

Coefficient	Result	Visual style
0	0px	Straight corners (strict, corporate style)
0.5	4px	Slight rounding
1	8px	Standard balance
2	16px	Soft modern style
3	24px	Rounded UI

Example display for coefficient 0

Example display for coefficient 5

Control buttons

Save

Saves the set value and applies it to all elements of the site

Reset to default

Returns the value to the standard coefficient (4).