Визуальный стиль и дизайн-система Понедельника. Графические константы, цвета, шрифты, иллюстрации и веб-компоненты для оформления носителей.
Логотип
Есть четыре версии логотипа: горазонтальная, компактная, сокращённая и специальная стелла-версия
Токены
Сайт построен на дизайн-системе
IDS — её ядро
завендорено в проект и адаптировано под Понедельник. Токены — жёсткий
контракт системы: именованные CSS-переменные с конкретными
значениями. Использовать как есть: не переименовывать, не заводить
алиасы, не обобщать. Все списки ниже собираются из живого CSS при
загрузке страницы. Клик по токену копирует var(…).
Палитра
Сырые значения цвета, не зависящие от темы. В вёрстке напрямую не используются — только через семантические роли.
Семантические роли
Каждая роль ссылается на палитру. Тёмные блоки
(.dark) переключают значения ролей — палитра при этом не
меняется. Сначала светлый набор, ниже — тёмный.
Брендовые роли
Роли для витрины, графики и логотипов — тоже алиасы палитры. В вёрстке компонентов использовать семантические роли.
Шкалы
Именованные шаги размеров. Спейсеры и гэпы — в em (масштабируются от фонт-сайза окружения), радиусы — в em (масштабируются с текстом компонента).
Спейсеры
Гэпы
Радиусы
Толщины границ
Движение
Наведите на строку: полоска анимируется с длительностью токена.
Ховер всегда мгновенный (--ids__duration-instant),
возврат — плавный.
Типографика
Шрифты
--gothic
Понедельник — это опыто-конструкторское бюро. Мы проектируем взаимодействия людей и компаний так, чтобы они были логичными, честными и выгодными для обеих сторон.
500
700
--mono
Наши проекты — очень разные истории, от дизайна тележек для супермаркетов до процессов найма в крупнейшие корпорации.
700
--serif
Ценностное предложение — совокупность ответов на основные вопросы об обмене: кто клиент, что его приводит к покупке, что компания ему предлагает.
italic
700
--hand
Совместные сессии решают проблему «понять задачу, чтобы выбрать агентство» за счёт вводного интервью и карты открытых вопросов.
--ids__ink
Текстовые элементы
h1.L
Дизайн-система
4em
h1.S
Юридическая информация
2.8em
h1.accent
Чекап
3.9em
--ids__accent
h2
Логотип и графика
2.8em
h2.S
Контекст
1.65em
h3
Единый визуальный язык для всех носителей
1.15em
p
Мы используем системную типографику как основу для интерфейсов, презентаций и продуктовых материалов.
1em
p.loud
Важные мысли и вводные тезисы выделяются более крупным набором.
1.5em
ul li
- Логика иерархии заголовков
- Единые интервалы и ритм
- Читаемость в длинных текстах
1em
em strong mark code
Текст может содержать акцент, усиление, подсветку и кодовый фрагмент.
--ids__mark
--ids__code
ul.inline-block
- Что продаётся?
- Кто продаёт?
- Кому он это продаёт?
- Сколько это стоит?
--ids__text
p.loud.mono mark
Открытый интенсив. Серия лекций и практик.
1.35em
--ids__accent
table.promo-table
| Ситуация | Кто применяет |
|---|---|
| Запуск нового продукта | Компания и её клиент |
| Питчинг инвестору | Компания и инвестор |
0.75em
Компоненты
Компоненты — референсные образцы: показывают, как элемент выглядит и ведёт себя. В третьей колонке — токен-контракт: токены и значения, которые компонент потребляет.
button.promo-link
--ids__hover
white
button.promo-link.second
--ids__hover
button.promo-link.third
--ids__hover
button.lets-talk-button
--ids__text
--ids__hover
button.outline-button
--ids__text
--ids__hover
div.form-field
--ids__surface
--ids__accent
div.form-field.filled
--ids__text
div.promo-switcher
--ids__accent
.case-principle-pill.case-page
.review .review-author.review-text
«Короткий текст отзыва.»
