Брендбук
Логотипи та правила розміщення кнопки mono checkout на сайті
Логотип має бути виключно у монохромних кольорах
Категорично заборонено зміну в будь-якому вигляді, наприклад, міняти місцями елементи, збільшувати або зменшувати розміри без збереження пропорцій
Завантажити логотипи, кнопку та інші бренд-матеріали можна за цим посиланням
Де розміщувати кнопку mono checkout?
Кнопка mono checkout додається у тих же місцях, де і основна кнопка "Оформити покупку"
У кошику
У карточці товару
Які вимоги до кнопки?
Кнопка формується з фрази «Оформити через» та логотипу mono checkout. За замовчуванням використовується стандартне відображення кнопки. Також допускається скорочування кнопки по горизонталі. Кастомізація можлива, якщо необхідно витримати стиль сайту або застосунку. Докладніше про кастомізацію — в блоці «Стилі»
Шрифт
Для кнопок використовується шрифт Nunito Sans в двох стилях. Для написання «Оформити через» використовується Nunito Sans Semibold, а для логотипу — Nunito Sans Extrabold
Завантажити шрифт можна за цим посиланням
Простір навколо
Використовуючи кнопку в дизайні, ви повинні переконатися, що вона має достатньо місця навколо
Скруглення кутів
Допускається налаштування скруглення кутів кнопки, якщо цього потребує стилістика сторінки
Додаткові стилі
В якості альтернативи до основної кнопки можна використовувати Білу заливку Сіру заливку Білу заливку з чорним обведенням товщиною в 1px
Головне правило 💡
Кнопки мають бути контрастними до фону. Білу кнопку використовувати на темному тлі, чорну на світлому
Заборонено 🚫
Використовувати заливку фону довільного кольору, лише ті, що описані в гайді
Змінювати розміри логотипу, мінімальні відступи та колір
Поведінка кнопки
Для кнопок передбачено зміну станів при взаємодії з користувачем
Default — повідомляє, що компонент інтерактивний і включений
Hover — повідомляє, що користувач навів курсор на інтерактивний елемент
Active — користувач натиснув кнопку
Розмір
Мінімальний розмір - 32рх
При висоті кнопки з 32рх до 40рх шрифт — 12рх розмір кота — 9рх на 8рх висота лінії — 8
Середній розмір - 40-64рх
При висоті кнопки з 40рх до 64рх шрифт — 14рх розмір кота — 10рх на 9рх висота лінії — 10
Великий розмір — 64рх і більше
При висоті кнопки 64рх і більше шрифт — 18рх розмір кота — 14рх на 12рх висота лінії — 14
Last updated