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

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

Логотип

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

Логотип в UI-kit
Как цвет вашего бренда будет использован в дизайне?
  • Введите HEX цвета
  • Нажмите Сгенерировать палитру

Палитра

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

Стандартная палитра в UI-kit

Цвет вашего бренда Введите цвет

Редактор цвета открывается по клику
Палитра 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%
Стандартная палитра в UI-kit

Типографика

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

Иконки

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

Линейные иконки

Плоские иконки

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

Мы используем модуль везде, где это не нарушает эстетики и не противоречит здравому смыслу. Сетка делает дизайн вычисляемым и более предсказуемым, а также ускоряет перенос дизайна в код. Стандартный размер фрейма 1600х1080. Параметры: 33 колонки с интервалами 24px, отступы от краев контентной области 20px.