Логотип
У логотипа компании есть цветная и черно-белая версия, а также версии на русском и английском. Лого одинаково хорошо выглядит на фоне всех корпоративных цветов.
Как цвет вашего бренда будет использован в дизайне?
- Введите HEX цвета
- Нажмите Сгенерировать палитру
Палитра
Цвет помогает управлять вниманием пользователя, создавая акценты и раскрывая смысл элементов. Ниже для каждого цвета дизайн-системы приведены RGB и HEX значения.
Цвет вашего бренда Введите цвет
Редактор цвета открывается по клику
Палитра Primary
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #E00000
RGBA: 224 0 0 100%
Красные акценты
HEX: #E00000
RGBA: 224 0 0 100%
HEX: #FF4545
RGBA: 255 69 69 100%
HEX: #FF4545
RGBA: 255 69 69 100%
HEX: #FF7A7A
RGBA: 255 122 122 100%
HEX: #FF7A7A
RGBA: 255 122 122 100%
HEX: #FF9F9F
RGBA: 255 159 159 100%
Желтые акценты
HEX: #FF8B0F
RGBA: 255 139 15 100%
HEX: #FF8B0F
RGBA: 255 139 15 100%
HEX: #FFAD0F
RGBA: 255 173 15 100%
HEX: #FFAD0F
RGBA: 255 173 15 100%
HEX: #FFC30F
RGBA: 255 195 15 100%
HEX: #FFC30F
RGBA: 255 195 15 100%
Зеленые акценты
HEX: #2ABA4A
RGBA: 42 186 74 100%
HEX: #2ABA4A
RGBA: 42 186 74 100%
HEX: #39CC59
RGBA: 57 204 89 100%
HEX: #39CC59
RGBA: 57 204 89 100%
HEX: #47DC68
RGBA: 71 220 104 100%
HEX: #47DC68
RGBA: 71 220 104 100%
Типографика
PT Root UI – интерфейсный шрифт с фиксированной шириной каждого знака в разных начертаниях. Эта особенность позволяет переключаться между начертаниями без изменения длины строки, что удобно для заголовков и элементов интерфейса.
| Style | Font weight | Font size | Line height |
| Heading 1 | Bold | 48 px | 56 px |
| Heading 2 | Bold | 32 px | 40 px |
| Heading 3 | Bold | 24 px | 32 px |
| Heading 4 | Bold | 20 px | 28 px |
| Subheading 1 | Regular | 32 px | 40 px |
| Subheading 2 | Regular | 24 px | 32 px |
Показать все стили Скрыть все стили
| Subheading 2 – Medium | Medium | 24 px | 32 px |
| Subheading 3 | Regular | 20 px | 28 px |
| Subheading 3 – Medium | Medium | 20 px | 28 px |
| Body | Regular | 16 px | 22 px |
| Body – Medium | Medium | 16 px | 22 px |
| Body Mono – Medium | Medium | 16 px | 22 px |
| Body – Bold | Bold | 16 px | 22 px |
| Caption | Regular | 12 px | 16 px |
| Caption – Medium | Medium | 12 px | 16 px |
| Caption – Bold | Bold | 24 px | 32 px |
Компоненты
Компоненты дизайн-системы универсальны и подходят для большинства проектов MES. Доступны как в светлой, так и в темной теме
Иконки
Если в дизайн-системе не хватает нужной иконки, она может быть создана дизайнером исходя из требований проекта
Линейные иконки
Плоские иконки
Модульная сетка
Мы используем модуль везде, где это не нарушает эстетики и не противоречит здравому смыслу. Сетка делает дизайн вычисляемым и более предсказуемым, а также ускоряет перенос дизайна в код. Стандартный размер фрейма 1600х1080. Параметры: 33 колонки с интервалами 24px, отступы от краев контентной области 20px.
