Цвета

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

Там, где это уместно, мы позволяем людям вводить свои собственные цветовые палитры. Наши продукты разумно и гибко адаптируются к различным потребностям и предпочтениям.

Основная палитра

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

Мы используем красный цвет (R345) для основных действий, кнопок, текстовых ссылок, для индикации прогресса и представления аутентификации. Черный и его отетнки (B220) используется для основного текста и заголовков, а белый (N0) используется для фона страниц.

Вторичная палитра

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

Расширенная палитра

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

Нейтралы

Нейтралы имеют различную степень насыщенности, что позволяет добиться соответствующего уровня теплоты в маркетинге и продукте. Обычно они используются для текста и малозаметных фонов, когда мы не хотим привлекать слишком много внимания к конкретной точке контакта или передавать информацию типа "сделать" или "отключить".

Темные нейтралы

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

Умеренно-темные нейтралы

Используйте умеренно-темные цвета для создания глубины в таких компонентах, как модальные дополняющие тексты, диалоговые окна и карточки. Избегайте использования умеренно-темных цветов в качестве фоновых цветов, так как контрастность обычно недостаточна для соответствия стандарту AA. Средне-нейтральные цвета BG600 - BG200 можно использовать для тонкого текста и значков на светло-нейтральном фоне.

Светлые нейтралы

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

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

Красный

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

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

Желтый

Желтый цвет означает предупреждение или препятствует чему-либо. Желтый хорошо чувствует себя в таких компонентах, как уведомления, баннеры, флаги и кнопки.

Зеленый

Мы используем зеленый цвет для обозначения успешных событий. Зеленый цвет хорошо сочетается с значками, переключателями, сообщениями и иллюстрациями. Имейте в виду, что наш зеленый очень яркий, что в больших дозах может вызвать напряжение глаз. Однако благодаря этой яркости он может хорошо выделяться среди многих других элементов на странице, поэтому он хорошо подходит для призывов к действию и кнопок в маркетинге.

Голубой

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

Фиолетовый

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

Розовый

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