Linear

# Linear — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Linear. "Linear" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Linear
**Owner:** Linear
**Official documentation:** https://linear.app
**Visual character:** Dark-mode-first velocity: micro-tuned Inter weights, keyboard-speed motion, and the indigo glow every dev tool now chases.

---

## Summary

The opinionated productivity system whose visual language defined a decade of dev-tool UI.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Linear's system (Orbiter) is internal; values are a careful reading of the served product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Linear Indigo | `#5e6ad2` | `--linear-accent` | Brand accent and primary actions |
| Text (dark theme) | `#f7f8f8` | `--linear-text` | Primary text on dark |
| Secondary Text | `#8a8f98` | `--linear-text-secondary` | Secondary text |
| Background Dark | `#08090a` | `--linear-bg` | Default dark canvas |
| Surface | `#1c1c1f` | `--linear-surface` | Panels and cards |
| Border | `#26262a` | `--linear-border` | Hairlines on dark |
| Success Green | `#4cb782` | `--linear-success` | Completed states |
| Warning Orange | `#f2994a` | `--linear-warning` | At-risk states |
| Error Red | `#eb5757` | `--linear-error` | Errors and urgent priority |

## Typography

- **Body:** Inter Variable — weights 400, 510, 590, 680 — `'Inter Variable', 'SF Pro Display', -apple-system, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| title-1 | `56px` | `61px` |
| title-3 | `24px` | `32px` |
| text-regular | `15px` | `24px` |
| text-small | `13px` | `19px` |
| micro | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| medium | `8px` |
| large | `12px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| floating | `0 8px 32px rgba(0,0,0,0.35)` |

## Motion

| Name | Value |
| --- | --- |
| fast | `100ms ease-out` |
| default | `250ms cubic-bezier(0.25, 0.46, 0.45, 0.94)` |

## Quick start (CSS)

```css
/* Linear — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://linear.app */

:root {
  /* Color */
  --linear-accent: #5e6ad2; /* Brand accent and primary actions */
  --linear-text: #f7f8f8; /* Primary text on dark */
  --linear-text-secondary: #8a8f98; /* Secondary text */
  --linear-bg: #08090a; /* Default dark canvas */
  --linear-surface: #1c1c1f; /* Panels and cards */
  --linear-border: #26262a; /* Hairlines on dark */
  --linear-success: #4cb782; /* Completed states */
  --linear-warning: #f2994a; /* At-risk states */
  --linear-error: #eb5757; /* Errors and urgent priority */

  /* Typography */
  --font-body: 'Inter Variable', 'SF Pro Display', -apple-system, sans-serif;

  /* Type scale */
  --text-title-1: 56px /* line-height 61px */;
  --text-title-3: 24px /* line-height 32px */;
  --text-text-regular: 15px /* line-height 24px */;
  --text-text-small: 13px /* line-height 19px */;
  --text-micro: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-floating: 0 8px 32px rgba(0,0,0,0.35);

  /* Motion */
  --motion-fast: 100ms ease-out;
  --motion-default: 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
```

## Origin

Linear's design language emerged with the product itself in 2019 — a deliberately small founding team building a project tracker for engineers, with a designer-engineer-CEO triangle at the centre. The system was never published as a separate set of docs; it lives inside the product and the engineering brand. Its influence shows up in every dev tool launched after 2021 — the keyboard-first command palette, the inline diff motion, the muted neutral palette with a single tuned accent, the typographic restraint with one display weight and one monospace.

## Governance

Centralized by default — a small core design team owns the system, and the same engineers who build the product implement the components. There is no public design-system site, no open contribution path, no semver discipline visible externally. The system evolves with the product release cadence (weekly). Documentation is internal; the public surface is the product itself and the occasional engineering blog post.

## Known for

- Keyboard-first command bar — ⌘K opens a unified surface for navigation, action invocation, and search. Linear normalized this pattern for productivity tools after it migrated from code editors.
- Motion as feedback — view transitions, list reorders, and modal entrances all use 120–180ms eased motion that signals state change without delaying the user. Other tools imitate the look; few match the timing.
- Restraint with a single accent — the palette is mostly neutral, with one tuned accent (often violet or product-purple) used as punctuation. The signature look that became the default for indie SaaS.

## Underrated

- The empty states have real personality — a single sentence, a hairline illustration, no marketing copy. They read as confident, not chirpy.
- Number formatting is consistent throughout — tabular numerics in tables, sentence-case durations ("2 weeks ago", not "2w"), no decoration around metric values. Reads as engineering-grade by avoiding fluff.
- Density choices are unusually consistent — list rows, table rows, and form rows share a 32px-or-40px rhythm. The system has fewer densities than competitors and uses them more deliberately.

## Watch out for

- There is no published design system. Learning Linear means reading the product surface and reverse-engineering — useful as study, not as a drop-in reference.
- The aesthetic is so distinctive that direct copies read as "Linear-clone" rather than your own brand. Treat as architectural reference, not visual template.
- Patterns assume engineering teams as the user — fast keyboard users, comfortable with density, working in long sessions. Lifting them onto consumer products imports those assumptions.

## Components worth studying

- **Command Menu** — ⌘K-summoned command palette with scoped contexts (issue, project, member), recent actions, and async search. The reference implementation for productivity-tool command bars.
- **Issue View** — Inline-editable issue surface with status pill, assignee, labels, priority, and a stream of activity — the dense detail view that other trackers benchmark against.
- **Triage Inbox** — Keyboard-first issue triage with bulk actions, status pivot, and timeline scrubbing — sets the bar for queue-style productivity UI.
- **Roadmap timeline** — Multi-track Gantt with project rollups, milestone diamonds, and zoom levels that snap to week / month / quarter — designed for long-horizon planning without the heaviness of Microsoft Project.

## When to choose Linear

Study Linear if you're building productivity or dev-tool surfaces — issue trackers, dashboards, project workspaces. The lessons travel best at the interaction layer (keyboard flows, motion timing, density rhythm) rather than the visual layer. Don't try to lift the look whole; lift the discipline.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Linear by Linear — The opinionated productivity system whose visual language defined a decade of dev-tool UI. Character: Dark-mode-first velocity: micro-tuned Inter weights, keyboard-speed motion, and the indigo glow every dev tool now chases. Use a primary colour near #5e6ad2, the typeface "Inter Variable" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Lean into what it's known for: Keyboard-first command bar — ⌘K opens a unified surface for navigation, action invocation, and search. Linear normalized this pattern for productivity tools after it migrated from code editors. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Linear](https://linear.app)
- [Linear engineering blog](https://linear.app/blog)
- [Linear method (operating principles)](https://linear.app/method)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/linear) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._