# Общие настройки ### **Настройки внешнего вида** Эта страница позволяет управлять элементами брендинга вашего сайта: загружать **логотип**, **фон** и **фавикон**.\ Цель — сделать сайт более узнаваемым, удобным для пользователей и визуально привлекательным. #### **Вкладки настроек** 1. **Логотип -** будет отображаться в выбранном типе отображения «Изображение (логотип)» и поможет сформировать узнаваемость вашего бренда. Отображается в левой части хедера сайта. Используется как основной графический элемент сайта.
* **Требования к файлу:** * Форматы файлов: SVG, PNG, WEBP, JPG, JPEG * Рекомендуется: SVG для наилучшего качества * Минимальное разрешение: 120 px по высоте * Максимальный размер файла: 2 МБ * Загружается через кнопку *«Перетащите и отпустите или выберите файл»*.
2. **Фон -** будет отображаться как задний фон страниц и поможет создать целостный и привлекательный дизайн. Это сделает сайт визуально более приятным и узнаваемым.
* **Требования к файлу:**
* Форматы файлов: PNG, WEBP, JPG, JPEG, SVG, WEBM. * Рекомендуется: SVG для наилучшего качества * Минимальное разрешение: 1920×1080 px * Максимальный размер файла: 10 МБ Если вы выберите прозрачное изображение, вы сможете настроить цветовое заполнение фона сайта через раздел "Палитра" в данном меню настроек, в поле "Фон по умолчанию", более детально о настройках палитры цветов узнаете в 4 разделе данной страницы документации.\ Кроме изображения, вы можете установить **видео в качестве фона** — это позволит сделать внешний вид сайта более динамичным и современным.
3. **Фавикон -** будет отображаться во вкладках браузера, в списке закладок и при добавлении сайта на главный экран телефона. Это поможет пользователям быстро узнавать ваш сайт среди других вкладок браузера, списке задач, при сохранении сайта на главный экран телефона и сделает ваш бренд более заметным.
* **Требования к файлу:** * Форматы файлов: PNG, WEBP, JPG, JPEG, SVG * Рекомендуется: SVG для наилучшего качества * Минимальное разрешение: 200×200 px * Максимальный размер файла: 2 МБ #### **Доступные действия** * Загрузить или заменить файл через блок *Drag & Drop*. * Сохранить изменения кнопкой **«Сохранить»**. * В случае нежелательных изменений можно нажать **«Отменить»**. 4. **Палитра -** раздел даёт возможность влиять на большинство цветовых настроек на сайте, где вы можете настроить цветовую схему сайта под стиль вашего бренда. Здесь задаются основные цвета для кнопок, текстов, заголовков, уведомлений и фона. Все изменения сразу отражаются на внешнем виде сайта, поэтому вы можете подобрать такие оттенки, которые будут удобны пользователям и узнаваемы среди конкурентов. Ниже описаны разделы которые вы можете редактировать, описание для них Вы также можете найти возле каждого из полей, наведя на "?"
**Основные цвета** * Основной цвет — главный акцент сайта. Используется для основных кнопок, активных элементов и ключевых акцентов. Например, блок валют в калькуляторе обмена, счётчик переключателя активных элементов, окно статуса оператора * Блоки на основном цвете — цвет обводки, который отображается наведя на блоки в верхней части сайта(хедере). #### Цвета текста * Основной текст — Основной обычный текст на сайте. Используется в большинстве полей, подсветка названий разделов, перечень валют, текст внутри разделов. * Второстепенный текст — Вспомогательный текст, используемый в подписях контактов, названиях полей для ввода, подсказок введения данных при создании ордера, вспомогательная информация в описаниях истории AML-проверок. * Текст верхней части сайта - Цвет текста, используемый в шапке приложения и навигационных элементах. Применяется к пунктам меню, информации профиля пользователя и другому текстовому контенту, относящемуся к шапке сайта (верхней части). * Текст футера - Цвет текста, используемый в секции футера. Применяется к информации об авторских правах, ссылкам в футере, контактным данным и другим текстовым элементам футера сайта (нижней части). * Текст неактивных элементов — цвет для вспомогательного текста, если по нему была произведена ошибка. В основном более ярко красный, используется для выделения текста несоответствующего форматам введения, например - укзаанная сумма превышает максимальную, клиент не указал согласие на AML-проверку, ошибка при генерации реквизитов для оплаты во время создания ордера. * Текст-подсказка — серый текст внутри полей ввода, который исчезает при вводе. Например - подсказки к формату заполнению полей отображаемые преимущественно тускло. * Акцентный текст — Текст, используемый в ведущих к действию блоках, например - кнопка “Обмен”, текст блоков групп валют, текст оповещений, текст полей в хедере меню, которые направляют на пункты меню правил, текст раздела правил на котором находится клиент, текст блока авторизации. * Текст страницы - Изменение текстов которые не принадлежат секциям или блокам на сайте. Например, названия разделов расположенных прямо на фоне сайта вне остальных секций, по сути, как текст поверх бумаги (фона сайта). #### Фоновые цвета * Фон карточек/блоков — фон заливки цвета для карточек, новостей, маленьких блоков на страницах, панели авторизации или заполнения данных. * Фон верхней части сайта — цвет верхней панели сайта (хедера). * Фон нижней части сайта — цвет нижней панели сайта (футера). * Фон полей ввода — цвет фона форм подлежащих заполнению (где вводятся данные). Например - поля авторизации в личный кабинет, поля заполнения данных при создании ордера. * Фон по умолчанию — общий фон страницы, видно только если нет фона сайта, либо если он прозрачный.
#### Цвета статусов * Зелёный — подсветка статусов об успешном событии: Статус ордера “Выполнено”, статус верификации, статус AML-проверки * Красный — подсветка статусов о неудачном событии: Статус ордера “Отменено”, “Ошибка”, “Отменено”, отклонённый статус верификации, статус AML-проверки. * Оранжевый — подсветка статусов с промежуточным состоянием: Статус ордера “Проверка”, “Частичная оплата”, промежуточные статусы верификации * Синий — создание ордера или нового элемента. #### Цвет разделителей * Разделители — тонкие линии, которые отделяют блоки или строки в таблицах, списке валют, меню или разделы в мобильном интерфейсе. ## **Типографика** Данный раздел предназначен для массового изменения шрифтов на сайте.\ Настройки, выполненные в этом разделе, применяются ко всем стандартным текстовым элементам интерфейса. ### Описание функционала #### 1. Выбор шрифта В верхней части страницы расположен выпадающий список с доступными шрифтами (например: Ubuntu, Lato, Rubik и другие). После выбора шрифта изменения применяются ко всем основным текстовым элементам сайта, включая: * Заголовки (h1, h2, h3 и т.д.) * Основной текст (body) * Подписи * Элементы интерфейса * Кнопки * Меню * Формы Справа отображается превью (пример отображения заголовков и текста), позволяющее визуально оценить выбранный шрифт до сохранения. #### 2. Кнопка «Сохранить» Применяет выбранный шрифт ко всему сайту. После сохранения: * шрифт обновляется во всех стандартных компонентах интерфейса; * изменения становятся видимыми в публичной части сайта. #### 3. Кнопка «Сбросить к исходным настройкам» Возвращает системный (дефолтный Rubik) шрифт, установленный по умолчанию в шаблоне. Используется в случае необходимости отката изменений. #### Важно * Настройка типографики применяется ко всем стандартным элементам сайта. * Изменения не затрагивают блоки с кастомным HTML-кодом. #### Назначение раздела Раздел позволяет централизованно управлять шрифтовым стилем сайта без необходимости редактирования кода.\ Это упрощает адаптацию дизайна под бренд и обеспечивает единый стиль оформления. ## **Shape Border Radius** **Shape Border Radius** - это глобальная настройка дизайн-системы, которая позволяет централизованно управлять радиусом скругления углов элементов на всём сайте. Функционал работает как **коэффициент масштабирования**, который применяется к базовому значению радиуса (например, 8px). Формула расчёта: ``` Финальный border-radius = Коэффициент × Базовое значение (px) ``` Пример: * Коэффициент = 1 * Базовое значение = 8px * Результат: 1 × 8px = 8px #### Где применяется Изменение коэффициента влияет на все UI-элементы, которые используют системный border-radius: * Кнопки (Buttons) * Поля ввода (Inputs) * Выпадающие списки (Select) * Модальные окна * Карточки (Cards) * Dropdown-меню * Бейджи * Другие компоненты дизайн-системы #### Параметры #### **Border radius (coefficient)** Числовое значение, которое умножается на базовый радиус. * Минимальное значение: 0 (острые углы) * Значения >3 создают максимально скруглённый интерфейс *** #### Визуальные примеры | Коэффициент | Результат | Визуальный стиль | | ----------- | --------- | ------------------------------------------ | | 0 | 0px | Прямые углы (строгий, корпоративный стиль) | | 0.5 | 4px | Лёгкое скругление | | 1 | 8px | Стандартный баланс | | 2 | 16px | Мягкий современный стиль | | 3 | 24px | Скруглённый UI | Пример отображения коэффициента 0
Пример отображения коэффициента 5
#### Кнопки управления #### **Save** Сохраняет установленное значение и применяет его ко всем элементам сайта. #### **Reset to default** Возвращает значение к стандартному коэффициенту (4).