Единая дизайн-система для всех дашбордов портфеля

Когда продуктов больше десяти и у каждого своя история появления — один родился как MVP за выходные, другой оброс личным кабинетом полгода спустя — дизайн почти неизбежно расползается: где-то цвет статуса зашит прямо в код HEX-кодом, где-то тёмная тема есть, а где-то нет, где-то кнопка в светлой теме внезапно становится нечитаемой. По отдельности каждое из этих расхождений — мелочь. Вместе они превращают портфель продуктов в набор случайно похожих сайтов, а не в одну систему. Решение — не чинить каждую мелочь по отдельности, а свести всё к одному эталону и раскатать его везде разом.

Один паттерн вместо десяти вариаций

Эталон называется AppleStyle — набор решений по форме входа, авторизации и оформления, который изначально появился в одном продукте и с тех пор копируется в каждый новый продукт с личным кабинетом, вместо повторного изобретения того же самого с нуля. В этот раз под него привели базовый layout всех дашбордов портфеля: переключили на светлую тему по умолчанию с автоматическим переходом в тёмную через системную настройку prefers-color-scheme — тот же паттерн, что уже работал в PULSE.

Хардкод обнаруживает себя сам, когда его ищешь целенаправленно

Один статусный цвет оказался зашит прямо HEX-кодом в восьми разных местах кода — типичный результат органического роста, когда цвет один раз скопировали, а потом ещё несколько раз по образцу. Вынесли в переменную. Заодно вычистили остальные захардкоженные цвета состояний (“всё в порядке” / “ошибка”) в пользу общих CSS-переменных темы — теперь смена акцентного цвета в одном месте меняет его везде, а не требует повторного грепа по всему коду. Отдельно обновили категориальную палитру графиков на дашбордах трейдинговых ботов и модельном дашборде — привели к валидированному набору цветов, который уже используется как эталон для визуализации данных в остальных местах.

Рефакторинг оформления неожиданно поймал два реальных бага

Самое полезное в таких сквозных проходах по коду — не сам рефакторинг, а то, что он вскрывает по пути. При переключении темы всплыла регрессия: текст на кнопках становился чёрным на чёрном в светлой теме, совершенно нечитаемым. А отдельно, пока разбирались с навигацией, нашли два самостоятельных бага, не имеющих отношения к цвету вообще: кнопка-гамбургер в меню была скрыта из-за обращения к несуществующему на этом домене эндпоинту проверки credentials — запрос тихо падал, и код на всякий случай прятал элемент интерфейса; а сетка блоков здоровья дашборда переполнялась и вылезала за границы экрана на мобильных устройствах. Ни один из этих багов не искали специально — их нашли только потому, что заново прошли весь интерфейс глазами в рамках другой задачи.

Тот же дашборд здоровья портфеля, о котором мы писали раньше, получил от этого прохода не только новую тему, но и починку реальных багов — наглядный пример того, что дизайн-система и надёжность интерфейса не отдельные задачи, а одна и та же работа с двух сторон.

Почему это не просто “покрасили в один цвет”

Ценность единой дизайн-системы не в эстетике самой по себе, а в том, что каждый новый продукт с личным кабинетом больше не начинает с нуля — форма входа, Passkey, вход через Telegram, базовая структура страницы уже готовы и проверены. Каждая находка вроде переменной --serious вместо восьми копий одного и того же HEX-кода снижает шанс, что при следующем изменении палитры кто-то забудет один из восьми файлов. Результат подтверждён визуально: после раскатки на прод получена прямая оценка “всё шикарно, закрывай” — и это как раз тот случай, когда работа считается законченной не потому что код прошёл тесты, а потому что реальный человек посмотрел на реальный результат и согласился, что стало лучше.

Один из продуктов, где этот же паттерн виден в деле каждый день, — PULSE: трекер энергии для тех, кто ведёт несколько проектов одновременно, с той же формой входа, тем же переключением тем и той же логикой, что теперь стоит под капотом у всех дашбордов портфеля.