Mission Control

Artifacts

K
← Back to artifactsOpen JAM-7

Linear Mobile UI Patterns: What to Borrow for Mission Control

Research BriefDraftJAM-7Created Apr 2, 20266 min readFull screen ↗

Exec Summary

Borrow three things from Linear mobile: sticky status group headers that keep context as you scroll, a compact single-row card anatomy with icon-based metadata on the right, and a persistent bottom toolbar for fast navigation between views. Skip everything else. Our board is a fraction of Linear's complexity, so the pattern to match is "readable at a glance" without building the full customization surface they needed.


Linear's Mobile List View Patterns

Card Anatomy

Linear's issue list rows are single-line by default. Each row shows:

  • Left side: priority icon (colored dot or arrow) + status indicator (circle with a color/fill matching workflow state) + issue title
  • Right side: assignee avatar (small, circular) + label chips (truncated if many)

The title takes most of the horizontal space. Supporting metadata is icon-only on the right, never spelled out in words. The row is tall enough to tap comfortably (approximately 44-48pt) but no taller. No description text appears in the list row. That content lives exclusively on the detail view.

Sources: Linear display options docs, Linear mobile page

Information Density

Linear keeps list rows tight by using icons over text labels everywhere. Status is a small colored circle (not a word like "In Progress"). Priority is a four-level icon set. Assignee is an avatar, not a name. Labels are small color chips. This means roughly 3-4 metadata signals fit in the trailing third of a row without crowding the title.

The Oct 2025 mobile redesign introduced a custom frosted glass material that adds perceived depth and contrast without increasing content density. Visual layering does the work that extra whitespace would otherwise need.

Status/Priority/Assignee Indicators

  • Status: Colored circle with fill variation (empty = backlog, partial fill = in progress, full = done, X = canceled). The color palette is muted, not saturated, so it reads without screaming.
  • Priority: Four icon states (no priority, low, medium, high, urgent). Uses a simple chevron/bar motif.
  • Assignee: Circular avatar, approximately 20pt. If unassigned, the slot is empty or shows a ghost circle.
  • Labels: Small rounded rectangles with a color dot. Stack horizontally, truncate after 2.

Source: Linear docs - display properties

The Oct 2025 redesign moved primary navigation to a bottom toolbar. Five or fewer items live there. The Jan 2026 update made it customizable: users can pin specific projects or workflows, rearrange items, or swap in views like "My Issues" or "Pulse."

A persistent "Create Issue" button appears at the top of every screen. It does not live in the bottom toolbar.

There is no hamburger menu. All primary navigation is reachable from the bottom bar with one tap.

Card Detail View

Tapping a row opens a full-screen detail view. The detail view shows:

  • Title (large, editable inline)
  • Metadata bar: status, priority, assignee, labels, project (tappable to edit each)
  • Description (markdown rendered)
  • Activity/comments below the fold

The metadata bar on the detail screen uses the same icon language as the list row, but with text labels alongside the icons since there is more space.

Filtering and Grouping

Grouping is persistent and sticky: as you scroll, the group header stays pinned at the top so you always know which section you're in. Groups are collapsed/expanded by tapping the header.

Filtering is accessed via a filter button in the top right of the list view. Filters apply inline without navigating away.


What to Borrow for MC

Linear PatternMC Adaptation
Icon-only metadata on the right of each row (status circle, priority chevron, assignee avatar)Use the same spatial layout: title fills the left, 2-3 icons on the right
Sticky group headers when grouping by statusUse this on the "All Tasks" list view: group by column (status), keep headers sticky
Bottom toolbar for navigation4 items: Board, List, My Tasks, New Task
No description text in list rowsKeep list rows title-only; description only in detail view
Assignee as avatar onlyPete/Vinny/David get small avatar circles, no names in the row
Color-coded status circlesMap our 5 columns to 5 distinct colors with the same muted palette (not neon)
Persistent "Create" button at topFloating or pinned "New Task" button visible on all views
Swipe to snooze/delete on inboxSwipe to move status column or mark blocked

The blocked flag Linear doesn't have natively. Add a small red dot or warning icon overlay on the assignee avatar position when blocked=true. That's a cheap way to surface it without a dedicated column.


What to Skip

  • Teams and multi-project navigation: We have one board, not teams across projects. The full left-sidebar/workspace switcher pattern is irrelevant.
  • Cycles/sprints: We don't run sprints.
  • Label filtering UI: We have tags, but they're secondary. No need for a full filter panel.
  • "Pulse" and activity feeds: No team presence to monitor.
  • Custom navigation toolbar settings: Our toolbar is fixed at 4 items. Don't build configurability for 3 users.
  • Estimates and SLAs: Not part of our model.
  • Inbox with snooze: Useful for large teams with high notification volume. We have 3 people.

Bottom Toolbar (4 items)

[ Board ] [ List ] [ Mine ] [ + New ]
  • Board: Kanban view, 5 columns, horizontal scroll
  • List: All tasks, grouped by status column, sticky headers, sorted by priority within each group
  • Mine: Filter to tasks assigned to the current user (Pete on Pete's phone, etc.)
  • + New: Opens quick-compose task sheet

List Row (each task)

[ status-circle ]  Task Title Here                [ priority-icon ] [ assignee-avatar ]

Row height: 44pt minimum. No second line. Title truncates with ellipsis.

If blocked=true, add a small red dot badge on the assignee avatar (top-right corner).

Tags/project labels appear only on the detail view, not the list row. Keep the row clean.

Detail View

Tapping a row opens a sheet (slide-up modal, not a full navigation push) with:

  • Title (editable)
  • Metadata row: status selector, priority selector, assignee selector, blocked toggle
  • Tags/project pills
  • Description (markdown)

Sheet dismisses with swipe down.

Status Color Map (muted palette)

ColumnColor
BacklogGray
Up NextBlue
In ProgressYellow/Amber
Needs ReviewPurple
DoneGreen

This maps directly to Linear's own status color conventions (backlog=gray, in-progress=yellow, done=green), making it intuitively readable for anyone who has used Linear.


Confidence: High on structural patterns (navigation, row anatomy, grouping). Medium on exact pixel/spacing specs since screenshots were not directly accessible. The changelog and docs confirm the overall layout direction clearly.

What would change this: Viewing the actual app on device might reveal row-level details (exact icon sizing, spacing between elements) that would refine the spacing recommendations.