Визуальный стиль и дизайн-система Понедельника. Графические константы, цвета, шрифты, иллюстрации и веб-компоненты для оформления носителей.
Логотип
Есть четыре версии логотипа: горазонтальная, компактная, сокращённая и специальная стелла-версия
Цвета
Интерфейсная палитра
--ids__text-RGB
--ids__link-RGB
--ids__hover-RGB
--ids__accent-RGB
--ids__mark-RGB
--ids__surface-RGB
--ids__background-RGB
--ids__inverted-text-RGB
Брендовая палитра
--ids__pndlnk-black-RGB
--ids__pndlnk-dark-gray-RGB
--ids__pndlnk-red-RGB
--ids__pndlnk-red-tinted-RGB
--ids__ink-RGB
--ids__pndlnk-light-gray-RGB
--ids__pndlnk-gold-RGB
--ids__pndlnk-gold-tinted-RGB
Типографика
- Основной шрифт для текста и заголовков — CoFo Gothic, начертания Regular (400), Medium (500), Bold (700)
- Дополнительный шрифт — CoFo Sans Semi-Mono, начертания Regular (400) и Bold (700)
- Шрифт для глоссария и сравочной информации — Newton, начертания Regular (400), Italic, Bold (700), Bold Italic.
- Шрифт для имитации рукописного текста — CoFo Hand.
CoFo Gothic
Понедельник — это опыто-конструкторское бюро. Мы проектируем взаимодействия людей и компаний так, чтобы они были логичными, честными и выгодными для обеих сторон.
CoFo Sans Semi-Mono
Наши проекты — это очень разные истории, от дизайна тележек для супермаркетов до дизайна процессов найма в крупнейшие корпорации. Их объединяет одно: желание компании улучшить взаимодействие с людьми.
Newton
Ценностное предложение — это совокупность ответов на основные вопросы об обмене: кто клиент; что его приводит к покупке; что компания ему предлагает; почему нужно купить именно у нее, а не у конкурентов; каков денежный и неденежный вклад клиента; как организован обмен во времени; какой смысл покупка имеет для сторон.
CoFo Hand
Совместные сессии решают проблему «понять задачу, чтобы выбрать агентство» за счёт вводного интервью и карты открытых вопросов. Так создаётся понимание задачи, с которым согласен клиент, и которое понятно агентствам.
Текстовые компоненты
Заголовок страницы, h1.L
Дизайн-система
Уменьшенный заголовок страницы, h1.S
Юридическая информация для партнёров
Акцентный заголовок, h1.accent
Понедельник
Заголовок раздела, h2
Логотип и графика
Заголовок секции кейса, h2.S
Контекст
Подзаголовок, h3
Единый визуальный язык для всех носителей
Основной абзац, p
Мы используем системную типографику как основу для интерфейсов, презентаций и продуктовых материалов.
Крупный абзац, p.loud
Важные мысли и вводные тезисы выделяются более крупным набором.
Маркированный список, ul li
- Логика иерархии заголовков
- Единые интервалы и ритм
- Читаемость в длинных текстах
Текстовая ссылка, a
Промо-кнопка, a.promo-link
Инлайновые компоненты, em, strong,
mark, code
Текст может содержать акцент, усиление,
подсветку и кодовый фрагмент.
Тегообразный список, ul.inline-block
- Что продаётся?
- Какие у этого свойства?
- Кто продаёт?
- Почему ему можно доверять?
- Кому он это продаёт?
- Какие это люди?
- Зачем или почему они это покупают?
- Сколько это стоит?
- Когда и как платить?
- Что ещё нужно сделать, кроме денег?
- Зачем это нужно «на самом деле», в чём истинный смысл?
Крупный моно с акцентом, p.loud.mono +
mark
Открытый интенсив. Серия лекций и практик по сборке ценностного предложения.
Таблица, table.promo-table
| В какой ситуации применять | Кто применяет | Зачем применяет |
|---|---|---|
| Запуск нового продукта | Компания и её клиент | Покупка или понимание причины непокупки |
| Объединение портфеля в экосистему | Лидер трансформации и его сотрудники | Согласованные действия руководителей продукта |
| Выход фаундера из операционки | Фаундер и топ-менеджеры | Перенятие и развитие видения компании |