Цветовая палитра

  • Цвета

  • Правила использования

Цвета сайта Tele2

Основные цвета

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

 
#000000 $color-black
 
#FFFFFF $color-white

Яркие цвета используются в макетах для создания акцентов, придания настроения и динамики. А также при необходимости для цветового кодирования информации.

 
#C882FF $color-violet
 
#38FFA6 $color-green2
 
#D7FF38 $color-yellow
 
#FF59A3 $color-pink
 
#3FCBFF $color-blue

Акцентные цвета

Эти цвета используются для служебных сообщений, например, об ошибке или об успешном завершении операции. Яркий желтый используется точечно для того, чтобы обратить внимание на особенные продукт или услугу в линейке Tele2.

 
#FFDA57 $color-yellow2
 
#D72F4B $color-red2
 
#41a674 $color-green3
 
#ff002a $color-red
 
#ff641e $color-orange

Цвета раздела «Бизнес» 

Эти цвета используются для всех цветных материалов раздела «Бизнес». Цвета не используются в тексте.

 
#AAC4D8 $color-blue-b2b
 
#B2CAB3 $color-green-b2b
 
#D1CFE1 $color-purple-b2b

Цвета текстов

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

 
#1f2229 $color-dark
 
#FFFFFF $color-white
 
#8F9399 $color-lightgray2

Цвета фоновых интерфейсных блоков

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

 
#1f2229 $color-dark
 
#FFFFFF $color-white
 
#8F9399 $color-lightgray2
 
#f0f1f2 $color-light0
 
#f9f9fa $color-extralight

Цвета фоновых блоков в Личном кабинете

Тоже нейтральные цвета, но немного с другим оттенком.

 
#F5F5FA $color-extralight2
 
#E8E8ED $color-light

Цвета для промо-блоков и stories

Для баннеров небольшого размера (например, баннер-лента) и stories в мобильном приложении «Мой Tele2» используются более светлые и темные оттенки базовых цветов.

 
#68C0E6 $color-blue-dark
 
#C185FF $color-violet-dark
 
#FB85BA $color-pink-dark
 
#E1FF66 $color-yellow-dark
 
#64D49E $color-green2-dark
 
#F4E6FF $color-violet-light
 
#FFE6F1 $color-pink-light
 
#E7FF85 $color-yellow-light

Цвета линий и разделителей

Нейтральные цвета для линий и разделителей.

 
#D1D8D6 $color-lightgray
 
#7A7A7A $color-gray0

Сочетания цветов

Сочетание цветов текста и подложки

$color-white + $color-red
$color-white + $color-red2
$color-white + $color-pink
$color-white + $color-violet
$color-white + $color-blue
$color-white + $color-green3
$color-white + $color-black
$color-white + $color-lightgray2
$color-dark + $color-light
$color-dark + $color-light0
$color-dark + $color-extralight2
$color-dark + $color-extralight
$color-dark + $color-white
$color-dark + $color-green2
$color-dark + $color-yellow
$color-dark + $color-yellow2

Общие правила работы с цветом на сайтах Tele2

Только один яркий цвет на странице

На странице должен быть только один доминирующий немонохромный цвет. Это может быть гильотина в тизере или на карусели с тарифами и другие подобные элементы, отвечающие за брендирование. Остальные цветы: белый, черный и оттенки серого. Исключение составляют цветные фотографии внутри блоков, где их использование допустимо (например, блок-крутилка программы «Больше»).

Использование двух однородных цветных заливок фирменных цветов не допускается. Можно добавлять маленькие вкрапления других цветов, которые визуально не конфликтуют с основной цветной заливкой: маленькие иконки соцсетей на карточках тарифов или шильдик «Хит».

Корректное использование одного яркого цвета

Некорректное использование одного яркого цвета