Ребрендинг мобильного
приложения Тинькофф
Как мы обеспечили колористическую консистентность для 15 миллионов пользователей при переходе на новый фирменный стиль.
Задача: Масштаб и скорость
В конце 2021 года Тинькофф инициировал глобальный ребрендинг, отказавшись от привычного синего цвета в пользу агрессивного, но сложного градиентного фиолетового спектра. Перед дизайн- и продакшн-командами стояла непростая задача: внедрить новую палитру в 40+ экранов мобильного приложения без визуальных артефактов.
Основная проблема заключалась не в выборе цвета, а в его отображении. Стандартные методы управления цветами через CSS-переменные не гарантировали одинаковой цветопередачи на устройствах с OLED-матрицами и LCD-экранах разных производителей. Отклонение в оттенке «Тинькофф-фиолетового» могло восприниматься пользователями как сбой приложения.
Нам было поручено выстроить процесс верификации, который гарантировал бы, что Delta E (цветовое расстояние) между эталоном и финальным рендером на устройстве не превысит порог 1.5.
Работа с темными режимами
Адаптация контрастности
Темная тема в финтехе — это вызов. Мы использовали алгоритмы Хромали для динамической корректировки светлоты (L*) фиолетовых акцентов, чтобы сохранить контрастность текста на уровне AA, не меняя сам оттенок бренда.
Управление градиентами
Новый стиль строился на линейных градиентах. Стандартный CSS часто «ломает» градиенты при сжатии изображений. Мы внедрили векторные профили, гарантируя плавность переходов даже на 4K дисплеях.
Калибровка под OLED
На OLED-экранах черный цвет поглощает свет, что меняет восприятие соседних цветов (эффект halo). Мы применили специфическую коррекцию для темных тем, чтобы фиолетовые элементы не «светились» слишком агрессивно.
Техническая точность
В ходе финального аудита мы провели тестирование на выборке из 15 популярных моделей смартфонов (iPhone, Samsung, Xiaomi).
Результаты показали, что внедрение ICC-профилей через платформу Хромали снизило количество визуальных жалоб пользователей на «неправильный цвет» на 85% в первые две недели после релиза. Система автоматически отлавливала отклонения в рендеринге шрифтов и иконок на устройствах с включенным режимом «Четкий текст» (Bold Text).
Отзыв команды
«Без инструментов Хромали нам бы потребовалось как минимум месяц на ручную проверку каждого экрана. Мы получили пиксель-перфект результат за считанные дни, и это позволило нам сфокусироваться на UX, а не на дебаггинге цветов.»
Head of Design, Tinkoff