Логотип
Ниже представлен официальный логотип Emailable и его варианты, а также рекомендации по использованию.
-
Главная
Окончательная версия логотипа Emailable. Используйте на светлых фонах.
Предпочтительный опыт работы:
-
-
-
-
Свет
Вариант основного логотипа с белым текстом. Используйте на темных фонах.
Предпочтительный опыт работы:
-
Черный
Используйте на светлых фонах в ситуациях, когда использование цвета ограничено. В остальных случаях используйте основную версию.
Предпочтительный опыт работы:
-
-
-
-
Белый
Используйте на темных фонах в ситуациях, когда использование цвета ограничено. В противном случае используйте светлую версию.
Предпочтительный опыт работы:
Делайте:
-
Обеспечьте логотипу достаточное пространство между ним и другими элементами или краями документа (используйте букву "e" из логотипа в качестве безопасного расстояния)
-
Используйте правильный вариант в зависимости от фона (см. выше)
Не делайте этого:
-
Любым образом изменять логотип (например, менять цвета, применять эффекты, поворачивать, непропорционально масштабировать и т.д.)
-
Размещайте логотип на фоне, на котором трудно разглядеть словесный знак или любой из цветов значка
Цвета
-
Главная
Скопировано!
50 #ecebffСкопировано!
100 #dedbffСкопировано!
200 #c7c2ffСкопировано!
300 #a899ffСкопировано!
400 #937affСкопировано!
500 #7e61ffСкопировано!
600 #6a4ce1Скопировано!
700 #5b33c7Скопировано!
800 #3e238bСкопировано!
900 #251452Скопировано!
950 #11082b
-
Шифер
Скопировано!
50 #f4f4fbСкопировано!
100 #e7e7f4Скопировано!
200 #d9d9edСкопировано!
300 #c4c4e3Скопировано!
400 #aeaed6Скопировано!
500 #9692c4Скопировано!
600 #8178b0Скопировано!
700 #655b95Скопировано!
800 #4b4276Скопировано!
900 #332b5aСкопировано!
950 #1d1641
-
Красный
Скопировано!
50 #fff1f3Скопировано!
100 #ffe3e6Скопировано!
200 #ffccd4Скопировано!
300 #ffa1b1Скопировано!
400 #ff708aСкопировано!
500 #f93a63Скопировано!
600 #e7174eСкопировано!
700 #c30d41Скопировано!
800 #a30e3dСкопировано!
900 #8b103bСкопировано!
950 #4e031b
-
Оранжевый
Скопировано!
50 #fff7edСкопировано!
100 #ffedd5Скопировано!
200 #fed7aaСкопировано!
300 #fdba74Скопировано!
400 #fb923cСкопировано!
500 #f97316Скопировано!
600 #ea580cСкопировано!
700 #c2410cСкопировано!
800 #9a3412Скопировано!
900 #7c2d12Скопировано!
950 #431407
-
Желтый
Скопировано!
50 #fff9ebСкопировано!
100 #fef0c8Скопировано!
200 #fddd8bСкопировано!
300 #fccb4fСкопировано!
400 #fbbd23Скопировано!
500 #f5af00Скопировано!
600 #f1a200Скопировано!
700 #e58e00Скопировано!
800 #c87200Скопировано!
900 #9c4f00Скопировано!
950 #7a3700
-
Зеленый
Скопировано!
50 #edfcf5Скопировано!
100 #d4f7e4Скопировано!
200 #abedcdСкопировано!
300 #78ddb3Скопировано!
400 #3dd198Скопировано!
500 #1bc58aСкопировано!
600 #0eb47dСкопировано!
700 #0d9c71Скопировано!
800 #0f805eСкопировано!
900 #0c644bСкопировано!
950 #085441
-
Циан
Скопировано!
50 #ecfeffСкопировано!
100 #cffafeСкопировано!
200 #a5f3fcСкопировано!
300 #67e8f9Скопировано!
400 #22d3eeСкопировано!
500 #06b6d4Скопировано!
600 #0891b2Скопировано!
700 #0e7490Скопировано!
800 #155e75Скопировано!
900 #164e63Скопировано!
950 #083344
-
Голубой
Скопировано!
50 #f0f8feСкопировано!
100 #deeefbСкопировано!
200 #c4e2f8Скопировано!
300 #9bd0f3Скопировано!
400 #6db6edСкопировано!
500 #549ee7Скопировано!
600 #4687ddСкопировано!
700 #3778d2Скопировано!
800 #2c5ca5Скопировано!
900 #213e6eСкопировано!
950 #192e4d
-
Фуксия
Скопировано!
50 #fdf4ffСкопировано!
100 #fae8ffСкопировано!
200 #f5d0feСкопировано!
300 #f0abfcСкопировано!
400 #e879f9Скопировано!
500 #d946efСкопировано!
600 #c026d3Скопировано!
700 #a21cafСкопировано!
800 #86198fСкопировано!
900 #701a75Скопировано!
950 #4a044e
Градиенты
Все градиенты являются радиальными градиентами и имеют круглую форму. Их начала расположены в 20 % от верхнего и правого краев фигур, содержащих их, и простираются по диагонали к левому нижнему углу (см. ниже).
-
Темный градиент
Основной градиент. Используется в качестве темного фона.
Остановка цвета:
-
Более темный градиент
Используется в качестве дополнительного темного фона для контраста с градиентом Dark.
Остановка цвета:
-
Фиолетовый градиент
Используется в качестве альтернативного или акцентного фона.
Остановка цвета:
Типография
Шрифт
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:;'"|\{}[]
-
Обычный 400
Вес по умолчанию. Используется для основного текста, описаний и т. д.
-
Средний 500
Используется для некоторых ссылок и меток.
-
Semibold 600
Используется для кнопок, значков, подзаголовков и некоторых фигур.
-
Смелый 700
Используется для заголовков, выделения и активных состояний.
Цвета шрифтов
-
Шифер 900
Цвет текста по умолчанию. Используется для заголовков, меток, выделяющегося текста и активных состояний. Только для светлых фонов.
-
Шифер 700
Используется для основного текста или текста, не имеющего большого значения. Только для светлых фонов.
-
Шифер 500
Используется для нейтральных значков.
-
Шифер 300
Используется для ввода текста-заполнителя или неактивных состояний.
-
Главная 500
Используется в качестве акцентного цвета для текстовых ссылок и некоторых подзаголовков.
-
Главная 200
Используется для основного текста или текста, не имеющего большого значения. Только для темных фонов.
-
Красный 500
Используется для сообщений об опасности/ошибках и значков.
-
Желтый 500
Используется для предупреждающих значков.
-
Зеленый 500
Используется для сообщений об успехах и значков.
-
Голубой 500
Используется для предупреждающих/информационных значков.
-
Белый
Используется для заголовков, ярлыков, выделяющегося текста и активных состояний. Только для темных фонов.