Linear

Linear

Issue tracking for software teams

A project- and issue-tracking tool for software teams, built around an ultra-minimal, keyboard-first interface.

linear.app

Color palette

Accent

Primary#5e6ad2

Primary brand color — key actions and emphasis.

Primary Hover#828fff

Pressed or hover state of its base color.

Primary Focus#5e69d1

Accent color used within the product's own UI.

Brand Secure#7a7fad

Accent color used within the product's own UI.

Semantic Overlay#000000

Accent color used within the product's own UI.

Semantic

Semantic Success#27a644

Success state.

Neutral

On Primary#ffffff

Text and icon color on a solid primary fill.

Ink#f7f8f8

Primary text color.

Ink Muted#d0d6e0

Primary text color.

Ink Subtle#8a8f98

Primary text color.

Ink Tertiary#62666d

Tertiary supporting color.

Canvas#010102

Page background.

Surface 1#0f1011

Card and panel surfaces.

Surface 2#141516

Card and panel surfaces.

Surface 3#18191a

Card and panel surfaces.

Surface 4#191a1b

Card and panel surfaces.

Hairline#23252a

Borders and dividers.

Hairline Strong#34343a

Borders and dividers.

Hairline Tertiary#3e3e44

Tertiary supporting color.

Inverse Canvas#ffffff

Page background.

Inverse Surface 1#f5f6f6

Card and panel surfaces.

Inverse Surface 2#f6f7f7

Card and panel surfaces.

Inverse Ink#000000

Primary text color.

Type scale

Display Xl
80px · 600 · 1.05
Display Lg
56px · 600 · 1.1
Display Md
40px · 600 · 1.15
Headline
28px · 600 · 1.2
Card Title
22px · 500 · 1.25
Subhead
20px · 400 · 1.4
Body Lg
18px · 400 · 1.5
Body
16px · 400 · 1.5
Body Sm
14px · 400 · 1.5
Button
14px · 500 · 1.2
Eyebrow
13px · 500 · 1.3
Mono
13px · 400 · 1.5
Caption
12px · 400 · 1.4

Fonts

PrimaryLinear DisplayWeights 400, 500, 600
SecondaryLinear TextWeights 400, 500
CodeLinear MonoWeights 400

Spacing & shape

Xxs
4px
Xs
8px
Sm
12px
Md
16px
Lg
24px
Xl
32px
Xxl
48px
Section
96px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Xxl
24px
Pill
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (Linear Display, Linear Text, Linear Mono).
  • Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 24px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (4px, 8px, 12px, 16px, 24px, 32px, 48px, 96px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.