Визуальная система рабочего пространства: ясная, собранная, живая. Зелёный задаёт направление, светлый фон оставляет место работе, а лайм отмечает следующий шаг.
Знак объединяет цифры 1 и 8. Прямая линия задаёт направление, две связанные петли напоминают о непрерывном движении работы. Рядом — самостоятельно построенное векторное начертание «дел».
Название всегда пишется слитно: 18дел. В обычном тексте используем стандартное написание; в логотипе — только готовый SVG.
Дайте знаку пространство
Свободное поле со всех сторон — минимум четверть высоты знака. Полная версия: от 95 px по ширине. Отдельный знак: от 24 px. Для фавикона допустимо 16 px после проверки читаемости.
Не растягивать, не поворачивать, не добавлять обводку, тени и градиенты. Не менять пропорции цифр и букв. На сложном фоне использовать однотонную подложку.
Большую часть экрана занимают светлые поверхности и тёмный текст. Лесной зелёный выделяет действия и активные состояния. Лайм появляется точечно: в акцентах и крупных блоках.
Не кодируйте все статусы одним зелёным. Ошибки остаются красными, ожидание — янтарным. Цвет всегда сопровождается подписью.
Лесной
Основной цвет действий. Белый текст.
Лайм
Акцент и крупные плоскости. Тёмный текст.
Чернильный
Текст, тёмные секции и контур.
Бумажный
Основной фон страниц.
Мятный
Активная навигация и мягкие подложки.
Глубокий
Наведение на основную кнопку.
Линия
Разделители и границы.
Вторичный
Подписи, пояснения и метаданные.
Проверенные пары для текста
Aa БбБелый на лесномКонтраст 7.42:1 · AA для обычного текста
Aa БбЧернильный на лаймеКонтраст 10.99:1 · AA для обычного текста
Aa БбОсновной текст на бумагеКонтраст 12.71:1 · AA для обычного текста
Aa БбВторичный текст на бумагеКонтраст 4.55:1 · AA для обычного текста
Расчёт относительной яркости sRGB. Минимум для обычного текста: 4.5:1. Лайм на белом не используем для текста.
03 / ТИПОГРАФИКА
Manrope. Чётко по-русски.
Один шрифт для сайта и продукта. Кириллица и латиница размещены локально, без запросов к сторонним шрифтовым сервисам. Резерв — системный sans-serif.
Начертания: 400 для текста, 500 для навигации, 600 для кнопок, 700–800 для заголовков. Лицензия SIL Open Font License приложена к бренд-киту.
Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ Ыы Ьь Ээ Юю Яя
0123456789 / Aa Bb Cc / → ↗ +
Дела идут.Display / 64–84 / 750
Общая картинаH2 / 36–54 / 700
Контекст задачиH3 / 22–24 / 700
Работа движется. Команда в курсе.Body / 14–18 / 400
Срок, автор и учтённое времяCaption / 11–12 / 500
04 / КОМПОНЕНТЫ
Одна система. Каждый день в работе.
Действия и состояния
Основное действие — зелёное. Второстепенное — светлое с границей. На одном участке экрана выделяем одну главную кнопку.
Поля и обратная связь
Опишите ожидаемый результат одним предложением.
Укажите название задачи.
Статусы и приоритеты
Небольшие спокойные подложки. Текст передаёт смысл даже без различения цветов.
Контент сайта — до 1200 px с полями 40 px на десктопе и 18–24 px на телефоне. Сетка — 12 колонок. Продукт использует плотную сетку для задач и таблиц.
4
8
12
16
24
32
48
64
96
Границы
Один пиксель, цвет «Линия». Тень только для поднятых поверхностей: диалогов и больших скриншотов.
Скругления
8 px — элементы управления, 10–12 px — рабочие карточки, 16–24 px — крупные блоки и демонстрации.
Движение
Переходы 150–200 мс, без прыжков и бесконечной декоративной анимации. Учитываем prefers-reduced-motion.
06 / ГОЛОС БРЕНДА
По-человечески. По делу.
Говорим коротко и конкретно: что произошло и что можно сделать дальше. Не обещаем результат за команду, не торопим и не прячем ограничения.
Основная подпись: «Задачи, команда, результат.» Фраза для первого экрана: «Работа движется. Команда в курсе.»
ДЕЙСТВИЕ
Создать задачу. Записать время. Собрать дашборд.
Простые глаголы вместо абстрактных обещаний.
ОБРАТНАЯ СВЯЗЬ
Задача сохранена. Укажите название. Войдите в пространство.
Понятный результат или конкретный следующий шаг.
Скриншоты — из реального продукта, с вымышленными данными. Не используем чужие интерфейсы, отзывы и логотипы клиентов. Эта визуальная система не является заключением о регистрации товарного знака.
07 / ИСХОДНИКИ
Готово к работе. И к продолжению.
SVG-логотипы и иконки, светлая и тёмная версии, палитра в JSON, переменные CSS, локальный шрифт с лицензией и правила применения. Без зависимости от редактора или подписки.
