Прототипы

Насмотренность: Linear (web)

Гайд для агентов, которые собирают интерфейс. Источник — экраны веб-приложения Linear на Mobbin, приложение Linear. Разбор сделан по самим кадрам, не по описаниям карточек.

Linear здесь — образец тихого плотного инструмента, в котором человек проводит день. Красота получается из выравнивания, нейтрального поля и редкого акцента, а не из декора.

Когда применять

Бери этот вкус, если продукт — ежедневный рабочий инструмент: списки, очереди, карточки сущностей, настройки, поиск, комментарии.

Не переноси его на лендинг-праздник, магазин, детский продукт и экраны, где нужна крупная эмоция. Маркетинговая страница Linear (один тёмный кадр в онбординг-флоу) — отдельный регистр, он описан в конце и не задаёт хром приложения.

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

Что смотрели

Продуктовые флоу на Mobbin, светлая тема и тёмная, две волны съёмки (старый сайдбар с секцией Try и более новый с Ask Linear, Initiatives, More):

Отдельные кадры, на которые опираются правила ниже: меню Display, тёмная доска, тёмный проект, Preferences, тёмные Preferences, создание issue, создание проекта, таймлайн инициативы, обзор инициативы, список инициатив, знакомство с command menu.

В библиотеке почти нет Pulse, биллинга и агентского чата как отдельных длинных флоу. Эти поверхности не додумывай по этому файлу.

Цвета ниже — приблизительное чтение с кадров, не официальные токены Linear.

Тезис

  1. Поле нейтральное. Цвет почти весь уходит в статус, приоритет и одну акцентную кнопку.
  2. Плотность высокая, воздух есть. Строка списка короткая, но между группами и под последней строкой остаётся пустое полотно. Пустоту не заполняют карточками.
  3. Хром тонкий. Рабочая поверхность держится на hairline-границах. Тень есть у меню, модалки и плавающего бара выделения.
  4. Один акцент на экран. Индиго-кнопка, и всё. Выбранный пункт сайдбара — серая плашка, не цветная.
  5. Сущность читается в одну строку: статус, идентификатор, название, родитель, метки, дата, аватар. Второй строкой живут только инбокс и карточка доски.
  6. Свойства — чипы и инспектор, не форма из лейблов над полями.
  7. Текст короткий, sentence case, без заголовков капсом. Пустое состояние объясняет объект одним абзацем и предлагает одно действие или шорткат.

Каркас

Почти каждый рабочий экран — три зоны.

Сайдбар слева, примерно 220–248px, на полтона серее холста. Сверху переключатель воркспейса (иконка-марка + имя + шеврон) и иконки поиска. Ниже группы без карточек:

Активный пункт — серая заливка со скруглением около 6px. Вложенные пункты сдвинуты вправо на одну ступень, тот же кегль. Счётчик — серое число справа, не бейдж-пилюля.

Верх рабочей области — одна полоса около 48px. Слева крошки (команда › объект › идентификатор), справа иконки: уведомления, аналитика, Display, фильтр, звезда, меню. Под полосой hairline. Заголовка страницы в этой полосе часто нет: имя вида живёт внутри контента (My issues, All issues, High Priority Tasks).

Холст. Список на всю оставшуюся ширину. Документ и карточка issue — колонка чтения примерно 640–760px по центру оставшегося места, справа инспектор 280–320px с собственной hairline, без карточной рамки. Инспектор не перекрывает контент, он резервирует колонку.

Инбокс — исключение. Четыре колонки: сайдбар, список уведомлений около 340px, тред, инспектор. Пока ничего не выбрано, правая зона пустая, по центру контурная иконка лотка и подпись «7 unread notifications». Выбор строки подсвечивает её серым и открывает деталь рядом, список не исчезает.

Настройки — другой шелл. Кнопка Back to app вместо воркспейса. Слева длинное меню секциями (Preferences, Issues, Projects, Features, Customer requests, Administration, Teams). Справа одна колонка около 680px: заголовок, серый абзац, блоки через тонкий разделитель. Форма не растягивается на 12 колонок.

Онбординг вообще без хрома: белое поле, логотип, один заголовок, одна фраза, одна кнопка. Точки прогресса снизу по центру.

Модалка по центру, ширина около 560px для issue и шире для проекта и Customize sidebar. Подложка — приглушённый серый скрим, страница под ней узнаваема. У модалки одна мягкая тень и скругление около 12px.

Ритм и вёрстка

Строка списка около 36px, одна линия, вертикально по центру. Разделителя между строками почти нет: группы отделяет шапка группы (иконка статуса, имя, счётчик, «+» справа) и тонкая линия.

Колонки метаданных выровнены по правому краю и гаснут, если значения нет. Это таблица без сетки. Заголовок обрезается многоточием, идентификатор не обрезается.

Дерево подзадач — те же строки с отступом и шевроном, не вложенные карточки.

На доске колонка — статус в шапке и стопка карточек. Карточка: идентификатор, название в две строки, приоритет, проект, метки, аватар. Фон карточки на тон светлее холста (в тёмной теме заметнее). Между колонками щель около 12px, не рамка-контейнер на всю высоту. Горизонтальный скролл, если колонок много; скрытые колонки перечисляются справа чеклистом.

Таймлайн инициативы — месяцы по верхней шкале, проекты строками, тонкая вертикаль «сегодня», бар проекта — светлая капсула. Клик по бару открывает инспектор поверх правого края, таймлайн остаётся.

График прогресса живёт в инспекторе: маленькая площадь, пастельные заливки, три числа Scope / Started / Completed. График не становится героем страницы.

Массовое выделение не красит тулбар на всю ширину. Снизу по центру всплывает компактная плашка: «6 selected», сброс, Actions.

Типографика

Интерфейсный гротеск (по характеру — Inter), не сериф и не геометрический дисплей.

Межстрочный интервал плотный. Абзац в описании проекта — обычный 15–16px с комфортным интервалом, но колонка узкая, поэтому строка короткая.

Регистр — sentence case. «Create issue», «No issues matching the filters», «What's new». Капс не используется для навигации и кнопок.

Клавиши показываются как маленькие кейкапы: ⌘K, G then M, N then P, O then S. В онбординге кейкапы крупные, но всего два, по центру карточки.

Ссылки в настройках — текст с «›», не кнопки.

Цвет

Светлая тема, как на большинстве кадров:

Тёмная тема не является инверсией светлой:

Статус — единственная насыщенная система, и она маленькая:

Большие плоскости цветом не заливаются. Градиент встречается только внутри маленького графика в инспекторе.

Выделение фильтра — чип в строке фильтра (Status is In Progress ×) и счётчик спрятанных строк: «14 issues hidden by filters · Clear Filters».

Иконки

16px, контур около 1.5px, цвет currentColor. В сайдбаре, строке, меню и инспекторе один оптический размер.

Залитые значки — только статус, приоритет и редкие семантические маркеры (флаг проекта, цель). Командная марка — маленький скруглённый квадрат с буквой или глифом и собственным цветом команды. Аватар — круг 16–20px.

Не ставь разноцветные иконки в навигацию. Не заменяй системные иконки эмодзи. Эмодзи в Linear живут в пикере реакции и в пользовательском тексте, не в хроме.

Компоненты

Пункт сайдбара

Иконка, подпись, опционально число. Вертикальный паддинг около 6px, горизонтальный около 8px, радиус около 6px. Ховер светлее актива. Группы подписаны мелким серым («Your teams», «Workspace», «Try»), подпись не кликабельна, кроме шеврона сворачивания.

Строка сущности

Порядок слева направо, что есть из этого набора:

статус или чекбокс, приоритет, идентификатор, название, родитель через ›, метки, проект, цикл или майлстоун, дата, аватар.

Ховер проявляет … на строке. Клик по строке открывает сущность, чекбокс не открывает. Не превращай строку в карточку с тенью.

Чипы свойств

Высота около 22–24px, радиус 4–6px, иконка и текст. Пустое значение называется именем поля серым («Assignee», «Set priority»). Заполненное подменяет имя значением. В композере чипы стоят одной переносимой строкой под описанием, не гридом полей.

В инспекторе то же содержание разложено парами: серая подпись слева около 90px, значение справа. Секции (Properties, Labels, Milestones, Progress, Activity) сворачиваются шевроном.

Меню и поповеры

Белая панель (в тёмной теме — тёмная), радиус около 8–10px, тень мягкая, обводка 1px. Пункт около 32px: иконка, текст, справа шорткат или шеврон. Подменю вылетает вбок тем же хромом. Опасное действие — красный текст внизу, после разделителя (Delete). Фильтр — высокое меню со списком полей и счётчиками («High · 14 issues»), у активного пункта галка.

Display — отдельное меню, не страница настроек вида: переключатель List / Board, Grouping, Ordering, тумблеры (Show sub-issues, Show empty groups) и сетка свойств, которые можно включить в строку. Внизу Reset и Set default for everyone.

Кнопки

Основная: индиго, белый текст, высота около 32px, радиус около 6px, текст 13px medium. В диалоге она одна и стоит справа. Вторичная — текст или прозрачная кнопка слева от неё (Cancel, Back). Третичная в пустом состоянии — серая заливка рядом с основной (Documentation). Тумблер маленький, во включённом состоянии цвета акцента. Не делай кнопки-пилюли и не крась вторичные действия индиго.

Композер issue

Модалка, не новый маршрут. Первое поле — название без лейбла, плейсхолдер «Issue title». Под ним описание. Под описанием чипы. В подвале слева скрепка, справа «Create more» и «Create issue». «Save as draft» — тихий текст справа в шапке модалки. Создание подзадачи может быть инлайном прямо в списке подзадач: та же схема чипов, кнопки Cancel / Create на строке.

Композер проекта крупнее и уже похож на документ: иконка, название, краткое описание, чипы, затем секции Brief с заголовками. Кнопки Cancel и Create project прижаты вправо вниз.

Поиск

Два режима, оба оставляют сайдбар.

Бывший поиск по списку: поле на всю ширину контента, вкладки Issues / Documents / Projects со счётчиками, совпадение подсвечено жёлтым в теле строки. Пустая вкладка — одна серая фраза по центру («We couldn't find any project results matching "update"»).

Глобальный поиск новой волны: поле в верхней полосе, вкладки All / Issues / Projects / Documents, результаты группами с подписью типа (Initiative, Project, AS-6, Document) и серым временем справа. Пустой запрос и опечатка — одна строка «No results found for "…"», без иллюстрации и без «возможно, вы имели в виду» карточками.

Command menu в онбординге преподаётся отдельно: «Meet the command menu», два кейкапа ⌘ и K. В приложении меню воркспейса — короткий список с шорткатами (O then S для Settings), не палитра на пол-экрана.

Пустые состояния

Иконка-контур по центру оставшегося холста, заголовок, один абзац, что это за объект, иногда шорткат, одна основная кнопка и тихая вторичная. Пример проектов: иконка стопки, «Projects», объяснение в две строки, «Create new project · N then P», «Documentation».

Если фильтр всё спрятал, не подменяй экран пустым миром: оставь шапки групп или ноль строк и напиши «No issues matching the filters» плюс «Clear Filters». Счётчик скрытого важнее декоративной иллюстрации.

Онбординговый тултип по центру (My Issues) — белая карточка с иконкой, заголовком, двумя предложениями, шорткатом и кнопкой Ok. Фон приложения при этом уже настоящий, пустой.

Инбокс и активность

Строка инбокса двухэтажная: аватар или иконка типа, заголовок, серая причина («assigned to you», «Project update reminder»), время справа. Непрочитанное держится весом, не синей точкой на каждое письмо.

Внутри issue активность — лента мелких строк: аватар, серая фраза «moved the issue from Todo to In Progress · 10d ago». Комментарий — блок с текстом, реакцией и «Leave a reply». Поле нового комментария всегда внизу ленты, плейсхолдер «Leave a comment…», без огромного редактора.

Апдейт проекта или инициативы — карточка в ленте: бейдж On track, автор, дата, два абзаца, дифф свойств строками «было → стало».

Настройки

Паттерн секции: жирный короткий заголовок, серый абзац на 1–2 строки, контрол справа на той же горизонтали или на следующей. Селект на всю ширину колонки, если вариантов много. Инлайн-справка — светлая рамка с иконкой info и крестиком, не жёлтый баннер. Расписание — человеческая фраза в контроле («Every week on Friday between 2PM – 3PM»), не крон.

Список интеграций и coding tools — строки с маркой 16px, именем, серым пояснением и тумблером или ссылкой Open справа. Не грид из больших карточек, кроме блока Explore features, где карточки всё же есть: их мало, у каждой иконка, заголовок, одна фраза и текстовая ссылка.

Импорт — список источников строками с шевроном, затем степпер из точек (Select workspace, Select teams, Map users, Confirm) и одна основная кнопка Next.

Подсказки и помощь

What's new — маленькая белая карточка внизу сайдбара, заголовок и одна строка. Не модалка на входе.

«?» открывает либо меню ссылок, либо правую панель Help: поиск, три строки (Docs, Keyboard Shortcuts, Settings), крестик. Панель не забирает весь экран.

Текст

Говори названием объекта и одним следующим шагом. «Inbox» / «5 unread notifications». «Create a new project» / «Turn an idea into a well-scoped project». Ошибки спокойные: «No notifications matching the filters». Не извиняйся абзацем и не шути в хроме.

Кнопки — глагол + объект: Create issue, Create project, Send invites, Clear Filters. Откладывание — тихий текст: I'll do this later, Continue.

Правила, которые можно применять сразу

  1. Сначала нарисуй сайдбар, верхнюю полосу и холст. Не начинай экран с героя и сетки виджетов.
  2. Сайдбар серее холста на полтона. Актив — серая плашка. Цветная полоска слева у пункта не нужна.
  3. Навигация — список с иконками 16px. Вложенность одна, отступом. Лишнее уезжает в More.
  4. Список сущностей — строки одной высоты. Метаданные вправо. Группа имеет шапку со счётчиком.
  5. Идентификатор, статус и приоритет видимы без открытия карточки.
  6. Карточка сущности — колонка чтения плюс инспектор. Свойства не дублируй большим блоком и в теле, и в инспекторе, если места мало: в списке свойств хватает чипов под заголовком, подробности живут справа.
  7. Создание — модалка или инлайн. Первое поле без лейбла, если плейсхолдер и так говорит «Issue title». Свойства чипами.
  8. Одна индиго-кнопка на вид. Остальные действия текстовые, иконочные или в меню ….
  9. Меню фильтров и вида открываются поповером у кнопки, которая их вызвала. Не уводи Display на отдельную страницу.
  10. Пустое состояние центрируется в холсте, не в окне браузера, если сайдбар на месте. Иконка линейная, текст короткий, действий не больше двух.
  11. Тень только у слоя над контентом: меню, модалка, плашка выделения, карточка What's new. Строки, инспектор и сайдбар тени не имеют.
  12. Радиус маленький: 6px контролы, 8–10px меню, 12px модалка. Пилюли оставь аватарам, счётчикам-переключателям и барам таймлайна.
  13. Цвет кодирует состояние. Если элемент не статус, не приоритет, не ссылка и не основная кнопка, он серый или цвета текста.
  14. Тёмная тема — те же слои, те же правила, другие нейтрали. Не рисуй «тёмный режим» фиолетовым градиентом.
  15. Настройки — узкая колонка и ряды «объяснение слева, контрол справа». Не таблица на 1400px.
  16. Онбординг — один вопрос на экран, можно пропустить тихой ссылкой. Шорткат показывай кейкапами, когда учишь действию.
  17. Массовые действия — плашка у нижнего края, пока есть выделение. Она исчезает вместе с выделением.
  18. Обрезай длинные имена многоточием в своей колонке. Не давай строке расти на вторую линию, кроме инбокса и карточки доски.
  19. Пиши sentence case. Время — относительное и короткое («13min», «3d», «Apr 7»), абсолютную дату оставляй свойствам.
  20. Не добавляй стороннюю аналитику, маскотов, иллюстрации-сцены, стеклянные панели и крупные тени «как в маркетинге» внутрь приложения.

Что ломает этот вкус

Стартовые нейтрали

Приближение для прототипа, если своей палитры нет. Подгони контраст по месту.

:root {
  --bg: #fbfbfc;
  --sidebar: #f4f5f6;
  --surface: #ffffff;
  --ink: #242428;
  --muted: #6f737a;
  --line: #e6e7ea;
  --hover: #eceef1;
  --accent: #5e6ad2;
  --accent-ink: #ffffff;
  --danger: #e5484d;
  --radius-control: 6px;
  --radius-menu: 8px;
  --radius-modal: 12px;
  --shadow-pop: 0 8px 28px rgba(20, 20, 25, 0.12), 0 0 0 1px rgba(20, 20, 25, 0.06);
  --row: 36px;
  --sidebar-w: 232px;
  --inspector-w: 300px;
  --reading: 720px;
}

:root[data-theme="dark"] {
  --bg: #101113;
  --sidebar: #16171a;
  --surface: #1c1d21;
  --ink: #f2f3f5;
  --muted: #8b8e96;
  --line: #2a2c31;
  --hover: #23252b;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

Шрифт: "Inter", system-ui, sans-serif. Базовый размер 14px. Заголовок вида 20px / 600. Документ 28px / 600.

Композиции, которые стоит уметь собрать

Список. Сайдбар + полоса крошек + вкладки вида (All issues / Active / Backlog или Assigned / Created / Subscribed / Activity) + шапки групп + строки. Справа в полосе Filter, Display и иконка уведомлений.

Доска. Те же хром и вкладки. Колонки статусов, у колонки меню … и «+». Карточка кликабельна целиком.

Карточка. Крошки с идентификатором, колонка: заголовок, описание, вложения, подзадачи, связи, активность, комментарий. Инспектор на всю высоту.

Инбокс. Список уведомлений фиксированной ширины, деталь выбранного, инспектор. Пустая деталь не схлопывается в ноль — на ней пустое состояние со счётчиком.

Проект и инициатива. Вкладки Overview / Updates / Issues или Overview / Activity / Projects. Overview — документ. Issues — тот же список, но с инспектором проекта, который не уезжает. Projects у инициативы — таблица без сетки: имя, здоровье, приоритет, лид, дата, статус.

Поиск. Сайдбар остаётся. Результаты — те же строки, сгруппированные типом.

Настройки. Back to app, меню секций, узкая колонка, ряды контролов.

Пустой первый запуск. Сайдбар уже полный, холст — пустое состояние или домашний Ask: приветствие, поле «Ask Linear…», три тихие карточки-примера в один ряд. Карточки примеров — единственное место, где на домашнем экране сетка из равных блоков уместна, и их ровно три, с иконкой и двумя строками текста.

Маркетинговый регистр

Один кадр linear.com попал в онбординг-флоу. Это не приложение. Чёрное поле, текстовая шапка (Product, Resources, Customers, Pricing, Log in, белая Sign up), огромный левый заголовок в две строки, серый подзаголовок, текстовая ссылка на материал, ниже встроенное тёмное окно самого продукта. Если когда-нибудь понадобится внешняя страница в этом духе: один тезис, почти без декора, продукт показан своим интерфейсом, а не иллюстрацией. Внутрь приложения этот масштаб типа не приноси.

Чего файл не утверждает

Точные пиксели, официальные токены, анимации и поведение клавиатуры сверх того, что подписано на экранах. Шорткаты упоминай только те, что видны на кадрах (⌘K, G then M, N then P, O then S, O then W). Не выдумывай остальные.

Экраны разных лет стоят рядом. Если шелл расходится, предпочитай более новую волну: светлый сайдбар, More, Initiatives, Ask на домашнем экране. Грамматика строк, инспектора, чипов и одной акцентной кнопки совпадает в обеих волнах.

Исходник для агентов: ui-linear.md