Дизайн-система НЛМК

Набор компонентов, инструментов и правил, которые упростят создание, визуальное и техническое обновление продуктов НЛМК

Логотип

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

Логотип в UI-kit

Палитра

Цвет помогает управлять вниманием пользователя, создавая акценты и раскрывая смысл элементов. Ниже для каждого цвета дизайн-системы приведены RGB и HEX значения.

Цвета бренда
Основные цвета
HEX: #112542 RGBA: 17 37 66 100%
HEX: #406280 RGBA: 64 98 128 100%
HEX: #0B3461 RGBA: 11 52 97 100%
HEX: #456B8C RGBA: 69 107 140 100%
HEX: #005291 RGBA: 0 82 145 100%
HEX: #4A7496 RGBA: 74 116 150 100%
HEX: #0060D1 RGBA: 0 96 209 100%
HEX: #0060D1 RGBA: 0 96 209 100%
HEX: #167FFB RGBA: 22 127 251 100%
HEX: #2A8CFF RGBA: 42 140 255 100%
HEX: #1492FF RGBA: 20 146 255 100%
HEX: #36A1FF RGBA: 54 161 255 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: #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%
Жёлтые акценты
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: #00B4F0 RGBA: 0 180 240 100%
HEX: #00B4F0 RGBA: 0 180 240 100%
HEX: #0FD1FF RGBA: 15 209 255 100%
HEX: #0FD1FF RGBA: 15 209 255 100%
HEX: #4CDDFF RGBA: 76 221 255 100%
HEX: #4CDDFF RGBA: 76 221 255 100%
Табличные цвета
HEX: #E8F5FF RGBA: 232 245 255 100%
HEX: #4C586A RGBA: 76 88 106 100%
HEX: #FF9E9E RGBA: 255 158 158 100%
HEX: #754B56 RGBA: 117 75 86 100%
HEX: #B2E5BE RGBA: 178 229 190 100%
HEX: #43614A RGBA: 67 97 74 100%
HEX: #FDDB99 RGBA: 253 219 153 100%
HEX: #7D7557 RGBA: 125 117 87 100%

Раскрасьте веер цветами из палитры!

  • Выберите цвет слева
  • Кликните выбранным цветом в любую область веера

Типографика

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

Типографика в UI-kit
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.
Доступны как в светлой, так и в тёмной теме

Ссылка на UI-kit

Графики, гистограммы

В гистограммах показаны количественные соотношения определённых параметров

Графики в гайдлайнах НЛМК

Иконки

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

Кастомные иконки

Иконки Material

Набор иконок в UI-kit

Модульная сетка

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

Интервалы  

16px

Интервалы  

48px

Панель фильтров Фильтры
Модульные сетки в UI-kit

Правила

Правила и рекомендации, прописанные в UI-kit, повышают качество и скорость разработки, а также снижают количество расхождений в дизайне между проектами.

Интервалы в модальных окнах

Подробнее

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

Длинный текст в ячейке таблицы

Подробнее

Максимальное количество строк для ячеек высотой 56 – 2 строки; для ячеек высотой 40 – 1 строка. Если текст не помещается в ячейку, показывается урезанная версия, а полный текст можно увидеть в тултипе

Ширина столбцов в таблицах

Подробнее

Ширина столбцов в таблице зависит от их количества и от количества символов в ячейке. Если в таблице менее 8 столбцов, тогда их минимальная ширина равна 192, а максимальная — 384. Если в таблице более 8 столбцов, тогда их минимальная ширина равна 128, а максимальная — 256

Работа с графиками

Подробнее

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

Работа с тултипами

Подробнее

Принципы работы с тултипом заимствованы из Material Design. В макетах в большинстве случаев тултип размещается над компонентом (над инпутами, иконками и т.д.). В некоторых случаях тултип размещается сбоку от компонента

Использование кнопок

Подробнее

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

Палитра компонентов темной темы

Подробнее

Для компонентов светлой и тёмной темы в UI-kit используются разные палитры. Рекомендуемый алгоритм создания макетов в темной теме: сначала проектируем, используя компоненты светлой темы, затем готовые макеты перекрашиваем с помощью плагина Themer

Интервалы для модуля «бар»

Подробнее

В модуле «бар» интервалы между компонентами равны 24, интервал между боковым меню и первым компонентом слева — 48. Верхний и нижний интервал данного модуля равен 12. В UI-kit можно найти аналогичные правила и для других модулей интерфейса