Для названий кнопок на терминале используется фирменный шрифт QIWI — Museo Sans 700. На терминале используется несколько видов кнопок.
Общие правила использования кнопок.
Кнопки на главной странице
Кнопки на внутренних экранах
Кнопки с иконками
Кнопки пролистывания
Кнопка Стереть
Кнопки на главной странице
Названия кнопок на главном экране пишутся заглавными буквами. Рекомендуем выбирать размер шрифта 37px, высота строки — 44px.
Для фона плашек используется 3 фирменных цвета: синий, белый и оранжевый.
Цвет текста на белом фоне — #000, на синем и оранжевом — #FFF.
Нормальное состояние
 | Оплата услуг | #105397 rgb (16, 83, 151), #004387 rgb (0, 67, 135) |
 | Рекламная кнопка (заливка/обводка) | #FFF rgb (255, 255, 255)/ #E6E6E6 rgb (230, 230, 230) |
 | QIWI Кошелек | #FFB254 rgb (255, 178, 84), #FF8C00 rgb (255, 140, 0) |
Нажатое состояние
 | Оплата услуг | #004E9E rgb (0, 78, 158), #054396 rgb (5, 67, 150) |
 | Рекламная кнопка (заливка/обводка) | #F5F5F5 rgb (245, 245, 245)/ #ССС rgb (204, 204, 204) |
 | QIWI Кошелек | #FCA849 rgb (252, 168, 73), #EE7315 rgb (238, 115, 21) |
При нажатии происходит анимация: смещение на 2px вниз 0.2 секунды
Тени
| Тип | Цвет | Смещение по Y, px | Размытие, px |
| Тень 01 | #000, 12% rgba (0, 0, 0, 12) | 1 | 1 |
| Тень 02 | #000, 5% rgba (0, 0, 0, 5) | 8 | 16 |
Важно: Рекомендации по оформлению третьей кнопки можно прочитать здесь.
Внешний вид кнопки с новым оттенком
оранжевого на терминале
Оранжевая кнопка на терминале отличается по оттенку от брендированных кнопок на сайте и в приложении, она немного светлее. Это исключение основывается на том, что экран терминала иначепередает цвета и насыщенный оранжевый всегда кажется красным.
Кнопки на внутренних экранах
Для внутренних страниц терминала предусмотрено 2 вида кнопок, у каждой по 3 размера: Accent, Normal и Minor.
Цвета кнопок
 | Brand button gradient | сверху: #FFB254 rgb (255, 178, 84), снизу:#FF8C00 rgb (255, 140, 0) |
 | Brand button | #FF9F29 rgb (255, 159, 41) |
 | Simply button | #FFF rgb (255, 255, 255) |
Accent
| Параметр | Accent | Normal | Minor |
| Размер шрифта, px | 48 | 40 | 28 |
| Высота кнопки, px | 156 | 120 | 84 |
| Отступы боковые, px | 84 | 72 | 48 |
| Сверху/ снизу, px | 52 | 36 | 26 |
Normal
Minor
В размере Minor кнопки на терминале используются на поп-апах и на странице авторизованного пользователя. В белом блоке рекомендуем использовать их без тени.
Кнопки с иконками
Размер текста — 28px. Тени
 | Цвет иконки | #000 rgb (0, 0, 0) |
 | Обводка | #E6E6E6 rgb (230, 230, 230) |
 | Заливка | #FFF rgb (255, 255, 255) |
Кнопки пролистывания
| Активная иконка | #000 rgb (0, 0, 0) |
 | Неактивная иконка | #CCC rgb (204, 204, 204) |
Помимо обычной кнопки назад на терминале используются кнопки пролистывания поисковой выдачи вперед-назад.Они располагаются на круглой плашке с тенью.
Кнопка «Стереть»
Для удаления введенных данных на терминале используется кнопка Стереть. У кнопки есть активное и неактивное состояние. Когда инпут пуст, кнопка находится в состоянии Disabled.
| Состояние кнопки | Цвет Заливки | Цвет обводки |
| Нормальное | #FFF rgb (255, 255, 255) | #E6E6E6 rgb (230, 230, 230) |
| Нажатое | #FFF rgb (255, 255, 255) | #CCC rgb (204, 204, 204) |
| Неактивное | #F5F5F5 rgb (245, 245, 245) | #CCC rgb (204, 204, 204) |
