Дизайн-система Saby

Источник стилей для генераций. Клик по разделу — деталь со спекой.
Заполнено 27 из 27 разделов
Базовое
ЛогобукАссеты
check_circleЗаполнено
Лого: горизонт./вертик./фирм. знак · цвет #0C94FF · шрифт Maison Neue Extended Book · PNG+SVG
visibilityОткрыть
СеткаТокены
check_circleЗаполнено
Desktop 1164/12×86 · Tablet 728 · Mobile 343/3×106 · gutter 12
visibilityОткрыть
ОтступыТокены
check_circleЗаполнено
кратны 4 · @offset 4…128px · межблочные 56/80/100
visibilityОткрыть
ПалитраТокены
check_circleЗаполнено
interface #0A85E6 / secondary #F87045 · акцент на продукт
visibilityОткрыть
ТипографияТокены
check_circleЗаполнено
Inter, −1.41% · 400/600 · T1 65/80 … Standart 16/24
visibilityОткрыть
Стили, скругление и эффектыТокены
check_circleЗаполнено
радиус Saby 24/16px · тень 0 4px 30px rgba(0,0,0,.15) · блюр-эллипсы
visibilityОткрыть
ИконкиАссеты
check_circleЗаполнено
лайн 1px · 16/24/48/56 · two-tone #333 + цвет продукта
visibilityОткрыть
Библиотека иконокАссеты
check_circleЗаполнено
outline two-tone + solid · 24/48/56 · 18 категорий
visibilityОткрыть
Логотипы банковАссеты
check_circleЗаполнено
цветной + монохром SVG · 11 банков
visibilityОткрыть
Элементы навигации
ШапкаКомпонент
check_circleЗаполнено
динамичная, 2 вида · меню + кнопка #F87045 · тёмная #05111D · 9 шаблонов · адаптивы планш/моб · окно «Контакты»
visibilityОткрыть
Бургер-менюКомпонент
check_circleЗаполнено
иконка 24px (line 20px) · окно со всеми провалами · затемнение rgba(0,0,0,.6) · провал 1ур 17px CAPS
visibilityОткрыть
ФутерКомпонент
check_circleЗаполнено
2 вида: основной (4 раздела + контакты + соцсети + «Оставить отзыв») / второстепенный (мин. + setty.kz)
visibilityОткрыть
Элементы ввода
СелекторыКомпонент
check_circleЗаполнено
чипсы (одиночный выбор) + чекбоксы · Saby fill #E5E6EB→active #202020 · text Small 15/20
visibilityОткрыть
Поле вводаКомпонент
check_circleЗаполнено
линия снизу · метка #949494 · высота inline_3xl (40px с линией) · между полями 16px
visibilityОткрыть
КнопкаКомпонент
check_circleЗаполнено
Primary #F87045 (hover #E4662F) / Secondary #202020 · L56/M48/S40/XS32 · mobile full-width · link-кнопки
visibilityОткрыть
Выбор языкаКомпонент
check_circleЗаполнено
платформенный · «RU» в шапке/футере · переключение требует перевода всего лендинга
visibilityОткрыть
Заявка
Открытая формаФорма
check_circleЗаполнено
H2 + 2 поля (16px) + чекбокс согласия + кнопка M #F87045 · нижний отступ 56/48/32 (desk/tab/mob)
visibilityОткрыть
Закрытая форма (окно)Форма
check_circleЗаполнено
всплывающее окно заявки · регион + поля + согласие · с описанием для баннеров · экраны «Спасибо/Заявка создана»
visibilityОткрыть
Анимация
Горизонтальная / вертикальная анимацияЭффект
check_circleЗаполнено
линейная: горизонт. (демо контента) / вертик. (барабан 1 экрана) · скорость по формуле t=(h|w)/v
visibilityОткрыть
Готовые компоненты
ОтзывыКомпонент
check_circleЗаполнено
карточки видео/текст · видеоотзывы (Presto/Retail) · карусель · лента логотипов · попап отзыва · выбор города
visibilityОткрыть
Выбор региона / городаКомпонент
check_circleЗаполнено
окно: заголовок + поиск + список (3-5 колонок) + закрыть · ширина 1024 (мин 772) · центр, ≥24px сверху
visibilityОткрыть
ОборудованиеКомпонент
check_circleЗаполнено
карточки 220×220 + цена + описание 4 строки · темы Saby/Presto · «Смотреть все» + «Можно в рассрочку» (popup)
visibilityОткрыть
Видео-блокиКомпонент
check_circleЗаполнено
3 направления: отзывы/промо/вебинары · лента видео · видео-превью · блок с цитатой · акцентный блок
visibilityОткрыть
ВебинарыКомпонент
check_circleЗаполнено
плитка вебинаров: информер (анонс/new) + теги (макс 2) + заглушки PNG · ⛏ в работе
visibilityОткрыть
ТарифыКомпонент
check_circleЗаполнено
колонки: название+описание+цена+пункты · компоновка 4/3/2/1 · заголовок T3 24/600, цена 33/600 · + Тарифы Small
visibilityОткрыть
Логотипы и иконки
Иконки saby-приложений (Маркет)Ассеты
check_circleЗаполнено
иконки приложений Saby для Маркета · только @2x, масштабирование запрещено · ⛏ в работе
visibilityОткрыть
Другое
Страница ПОКомпонент
check_circleЗаполнено
юр. страница «Web-система Saby/СБИС» для реестра ПО · документация разработчика + каталог-меню + футер
visibilityОткрыть