Партнерские кнопки

Обновлено 31 марта 2026

Партнерские кнопки СберБизнес — это кнопки входа, оплаты и других действий пользователя на онлайн-ресурсах партнеров с использованием СберБизнес ID. Они предназначены для упрощения взаимодействия клиентов c партнерским онлайн-сервисом, а также обеспечивают удобство навигации, повышают узнаваемость бренда и способствуют увеличению конверсии.

Общие правила

• Кнопка всегда не меньше остальных кнопок на странице.
• В кнопке обязательно есть логотип.
• На экране должно быть только одно ключевое действие (нельзя применять две Button General рядом).
• Название кнопки пишется с заглавной буквы.
• Кнопки используются только в соответствии с правилами, описанными в этом разделе.

Ресурсы

Стиль и размеры партнерских кнопок СберБизнес можно посмотреть в спецификации.

• Библиотека в Figma

Цвета и стили

Кнопка по умолчанию представлена в основном стиле General. Дополнительный стиль Secondary необходимо использовать, если есть другие способы авторизации или необходимо выдержать стиль сайта. В качестве альтернативы Secondary используется стиль Secondary Light.

Стили кнопок для светлого фона:

• General: кнопка - #21А19А, текст - #FFFFFF

• Secondary: кнопка - #F2F4F7, текст - #008985

• Secondary Light: кнопка - #FFFFFF, текст - #008985 (допустима обводка #008985)

Стили кнопок для темного фона:

• General: кнопка - #21А19А, текст - #FFF

• Secondary: кнопка - #424245, текст - #19BDB0

• Secondary Light: кнопка - #2D2D30, текст - #19BDB0 (допустима обводка #19BDB0)

Шрифт

Шрифт по умолчанию SB Sans Text в начертании Semibold. Можно использовать шрифт вашего сервиса или любой другой шрифт. Необходимое условие — шрифт должен быть без засечек.

Другое ограничение — соблюдение соразмерности шрифта, логотипа и высоты кнопки.

Рекомендованы следующие соотношения при высоте кнопки:

• 56px и больше: логотип — 26 px (контейнер 32 px), шрифт — 16 px;
• 36px до 54px: логотип — 20 px, шрифт — 14 px;
• 34px и меньше: логотип — 16 px, шрифт — 12 px.

Полная кнопка

Облик

Архитектура

Кнопки строятся по принципу добавления одинаковых боковых отступов к длине текстовой части. Установлены минимальные боковые и вертикальные отступы.

Кнопки имеют три базовых размера: большой — LG, средний — MD и маленький — SM. Ниже показаны размеры кнопки, логотипа и отступы между логотипом и текстом.

Скругления меняются в зависимости от высоты кнопки.

Рекомендуется использовать скругление кнопки в соответствии с вашим дизайном. Если все кнопки в вашем сервисе без скругления, тогда кнопка СберБизнес должна иметь такой же вид. И наоборот: если все кнопки в вашем сервисе имеют скругление 100 %, тогда оно применяется и для кнопки СберБизнес ID.

Компактная кнопка

Облик

Архитектура

Кнопки строятся по принципу добавления одинаковых боковых отступов к логотипу. Установлены минимальные боковые и вертикальные отступы.

Кнопки имеют три базовых размера: большой — LG, средний — MD и маленький — SM. Ниже показаны размеры кнопки и логотипа.

Скругления меняются в зависимости от высоты кнопки.

Рекомендуется использовать скругление кнопки в соответствии с вашим дизайном. Если все кнопки в вашем сервисе без скругления, тогда кнопка СберБизнес должна иметь такой же вид. И наоборот: если все кнопки в вашем сервисе имеют скругление 100 %, тогда оно применяется и для кнопки СберБизнес ID.

Текст в кнопке

Текст в кнопке зависит от пользовательского сценария и может иметь полную и краткую форму. Краткий вариант формулировки применяется при условии, что смысл действия в кнопке понятен и не требует полной формулировки.

Сценарий	Текст полностью	Краткий текст
Авторизация	Войти по СберБизнес ID	СберБизнес ID
Оплата товара или услуги	Оплатить через СберБизнес	Оплатить
Пополнение баланса	Пополнить через СберБизнес	Пополнить
Заполнение анкеты	Заполнить через СберБизнес	-
Покупка в кредит	Купить в кредит	-
Корпоративная подписка	Оформить подписку через СберБизнес	Оформить через Сбербизнес

Применение

Неправильно менять цвет кнопки, текстовую формулировку, нарушать выравнивание и минимальные отступы. Нельзя использовать кнопку без логотипа.

Правильно использовать понятные пользователям текстовые формулировки и центрировать содержание кнопки по вертикали и горизонтали.