Переменные

Долой «захардкоженные» значения! Для ключевых параметров (цвета, размеры, границы, тени) мы используем переменные.

Переменные — основа модульного дизайна. Все элементы и компоненты интерфейса основаны на них. Изменение переменной (например, акцентный цвет) изменит все элементы и компоненты, использующие её.

Они также облегчают общение — любой дизайн-параметр получает осмысленное название, которое отражает его задачу и область применения.

Базовые цвета

Основа основ. Эти цвета используются повсеместно, вне зависимости от типа и области применения проекта.

Назначение / Название Пример Значение
Основной чёрный цвет для текста, иконок и проч.$colorText ($colorBgContrast, $colorIcon) Текст #333333
Цвет для текста аннотаций, сносок и атрибутов$colorTextSecondary Подсказка #999999
Фон, инверсный цвет для шрифта на тёмных фонах и иконок на цветном фоне, z-index: 0$colorBg ($colorTextContrast, $colorIconContrast, $colorLinkContrast)
#ffffff
Дополнительный фоновый цвет для разграничения объектов, находящихся на одной плоскости. Заливка стандартных элементов управления, z-index: 0$cologBgSecondary
#f0f0f0
Второстепенная иконка$colorIconSecondary
#c7c7c7
Цвет для основных ссылок$colorLink Ссылка #0077cc
Цвет посещённых ссылок$colorLinkVisited Посещённая ссылка #6ea4db
Цвет положительных статусов$colorSuccess Успех #28c75d
Цвет ошибок и критичных предупреждений$colorError Ошибка #ff1100
Фоновый цвет для предупреждений. Может использоваться только что-то одно — либо цвет шрифта ($colorWarning), либо фон. Решение принимается на уровне продукта и не может варьироваться.$colorBgWarning
#fffce0
Используется в рейтингах. Для предупреждений ($colorWarning) может использоваться только что-то одно — либо цвет шрифта, либо фон ($colorBgWarning). Решение принимается на уровне продукта и не может варьироваться.$colorRating ($colorWarning)
#ffd400
Абсолютно чёрный. Используется для получения вспомогательного цвета через прозрачность$colorTrueBlack
#000000

Акцентные цвета проектов

У каждого проекта свой фирменный цвет, который транслирует его брендинг.
Используется в элементах управления и дополнительных акцентных элементах.

Акцентный цвет позволяет «отстроить» разные продукты Mail.Ru Group друг от друга.
Также через цвет в некоторой степени передается «настроение» проекта.

Важно не забывать, что у нас довольно насыщенные цвета и их не должно быть слишком много, чтобы интерфейс не «пестрил».

Следует соблюдать осторожность с цветами Авто и Леди, чтобы не ввести в заблуждение в том месте, где они могут быть приняты за предупреждение об ошибке.

Назначение / Название Пример Значение
Основной цвет Mail.Ru (Почта и productivity-сервисы, Новости, Спорт, Погода)$colorAccentMail
#168de2
Второй акцентный цвет Mail.Ru$colorAccentMailSecondary
#ffa930
Авто Mail.Ru$colorAccentAuto
#ff4f00
Дети Mail.Ru$colorAccentDeti
#ca9cf4
Добро Mail.Ru$colorAccentDobro
#ffd400
Здоровье Mail.Ru$colorAccentHealthNew
#3cd298
Здоровье Mail.Ru (текущий)$colorAccentHealth
#008079
Здоровье Mail.Ru (текущий второстепенный)$colorAccentHealthSecondary
#fde953
Кино Mail.Ru$colorAccentKino
#eaff00
Леди и Гороскопы Mail.Ru$colorAccentLady
#ff2d54
Недвижимость Mail.Ru$colorAccentRealty
#4c8ebc
Hi-Tech Mail.Ru$colorAccentHitech
#5856d6
My.com$colorAccentMycom
#fc2c38
My.com (второстепенный)$colorAccentMycomSecondary
#00ABF2

Цвета партнёрских сервисов

Для кнопок «поделиться в соц.сетях» и других отсылок к партнёрским сервисам используется механизм, аналогичный акцентным цветам (кнопка закрашивается этим цветом).

Назначение / Название Пример Значение
ВКонтакте$colorSocialVk
#4d75a2
Одноклассники$colorSocialOk
#ee8208
Мой Мир$colorSocialMir
#117eda
Facebook$colorSocialFb
#0561af
Twitter$colorSocialTwitter
#00bff3

Состояния элементов

Мы не используем «захардкоженные» значения цветов для создания эффекта наведения и активных состояний. За нас это делает SASS-функция.
Эта функция смешивает заданный нами цвет (акцентный цвет проекта или другой) с чёрным в определённой пропорции.
А чтобы было ещё удобнее, мы загоняем эту функцию в семантически названный миксин. Теперь нам остается лишь передать в него название цвета и всё работает.

Назначение / Название Пример Значение
Наведение для кнопок и производных от нихstateHover()
@mixin stateHover ($colorAccent) { background: mix($colorTrueBlack, $colorAccent, 4%); }
Активное / нажатое состояние для кнопок и производных от нихstateActive()
@mixin stateActive ($colorAccent) { background: mix($colorTrueBlack, $colorAccent, 8%); box-shadow: $depthInset; }
Недоступное состояние для элементовstateDisabled()
@mixin stateDisabled { opacity: $color-bg-disabled; cursor: default; pointer-events: none; }

Границы и разделители

1. Следует различать внешние границы и разделители, которые разделяют контент внутри блоков

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

Назначение / Название Пример Значение
Основной цвет границ элементов$colorBorder
1px solid rgba(0,0,0,0.12)
Стандартное наведение на границу (для интерактивных элементов)$colorBorderHover
1px solid rgba(0,0,0,0.24)
Активное состояние границы (для полей ввода, кнопок с множественными действиями)$colorBorderActive
1px solid rgba(0,0,0,0.48)
Цвет разделителей внутри блоков$colorDivider
1px solid rgba(0,0,0,0.08)
Толщина границы элемента управления и карточки$sizeBorderWidth
1px
Толщина границы вкладки$sizeBorderWidthTab
2px
Толщина границы для индикаторов загрузки$sizeBorderWidthBar
4px
Толщина основной акцентной полосы$sizeBorderWidthAccent
8px
Толщина основной акцентной полосы у элементов внутри страницы (например, заголовок таблицы)$sizeBorderWidthAccentSecondary
4px
Радиус скругления (Productivity, Touch)$sizeBorderRadiusProductivity, $sizeBorderRadiusTouch
2px
Радиус скругления (Медиапроекты, My.com)$sizeBorderRadiusMedia, $sizeBorderRadiusMycom
4px
Радиус скругления (промо-сайты)$sizeBorderRadiusPromo
8px

Тени

Назначение / Название Пример Значение
Стандартная тень всех «висящих в воздухе»; элементов (например, попапы), z-index: 2$depth2
0 4px 20px 0 rgba(0,0,0,.16)
Стандартная тень для «приподнятых» объектов (кнопка, ползунок слайдера, кнопка тумблера и т.п.), z-index: 1$depth-inset
0 2px 0 0 rgba(0,0,0,0.04)
Элемент на основном «полотне», без тени (иллюстрация, таблица и т.п.), z-index: 0$depth0
0
Внутренняя тень для «вдавленных» объектов (нажатая кнопка, фон тумблера и т.п.), z-index: -1$depthInset
inset 0 2px 0 0 rgba(0,0,0,0.04)

Тонирование

Тонирование позволяет выводить элементы интерфейса «слоями», друг над другом.
В результате видны оба «слоя».

Назначение / Название Пример Значение
Стандартное тонирование (попап, наложение на картинку) / Недоступный элемент управления$toneValueBase
0.48
Просмотрщик фото и документов$toneValueViewer
0.88
Заблокированная иконка в панели управления$toneValueToolbar
0.24

Базовые размеры шрифтов

Назначение / Название Пример Значение
Базовый размер шрифта для productivity-сервисов$fontBodyProductivity
Кнопка
15px
Базовый размер шрифта для медиапроектов$fontBodyMedia
Кнопка
17px