Linear

linear.app ↗

Monochrome, engineering-grade dark UI for Linear — near-black canvas, crisp white type, confident AI-era product messaging.

The product development system for teams and agentsThe product developmentsystem for teams and agentsThe product development system for teams and agents

Build on these tokens

Download the file and seed any AI tool — or install it into a real Next.js project so every generated page shares this palette, type, and shape.

Download linear.mdthen, in your project:

$ npm i -g @getcoherent/cli
$ coherent import design linear.md

Colour

#08090a

brand · body background

#f7f8f8

text · body text

#ffffff

text · button-secondary text

#8a8f98

neutral · h2 text

#d0d6e0

neutral · h3 text

Typography

Families: Inter Variable · SF Pro Display · -apple-system · system-ui

display64pxw510/64px

h148pxw510/48px

h224pxw400/31.92px

h320pxw590/26.6px

h416pxw400/24px

body15pxw400/24px

small12pxw510/16.8px

Spacing

1px32px128px

Radius

0px

2px

4px

6px

7px

8px

12px

16px

22px

400px

9999px

Elevation

rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px

rgba(0, 0, 0, 0.1) 0px 0px 0px 2px

rgba(0, 0, 0, 0.2) 0px 0px 0px 1px

rgb(35, 37, 42) 0px 0px 0px 1px inset

rgba(0, 0, 0, 0.4) 0px 2px 4px 0px

rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px

rgba(0, 0, 0, 0.4) 0px 1px 0px 0px

rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset

rgba(8, 9, 10, 0.6) 0px 4px 32px 0px

rgba(8, 9, 10, 0.1) 0px 0px 0px 1px, rgba(8, 9, 10, 0.4) 0px 0px 64px 0px

rgb(35, 37, 42) 1px 0px 0px 0px inset

Gradients

linearlinear-gradient(rgba(11, 11, 11, 0.8) 0%, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 100%)

radialradial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%)

linearlinear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)

radialradial-gradient(50% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 90%)

linearlinear-gradient(-216deg, rgb(138, 143, 152) 0%, rgb(98, 102, 109) 60%, rgb(138, 143, 152) 80%, rgb(138, 143, 152) 100%)

radialradial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)

linearlinear-gradient(90deg, color(srgb 0 0 0 / 0) 0%, color(srgb 0.6 0.231373 0.231373 / 0.2) 100%)

linearlinear-gradient(90deg, color(srgb 0 0 0 / 0) 0%, color(srgb 0.129412 0.701961 1 / 0.2) 100%)

radialradial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 50%)

Borders

1px solid #e5e5e6

1px solid #ffffff

1px solid #24282c

1px solid #ffffff

1px solid #313234

1px solid #23252a

1px solid #323334

1px solid #383b3f

1px solid #ffffff

Motion

160mscubic-bezier(0.25, 0.46, 0.45, 0.94)filter

100mscubic-bezier(0.25, 0.46, 0.45, 0.94)border-color

100mscubic-bezier(0.25, 0.46, 0.45, 0.94)color

160mscubic-bezier(0.25, 0.46, 0.45, 0.94)border

160mscubic-bezier(0.25, 0.46, 0.45, 0.94)background

160mscubic-bezier(0.25, 0.46, 0.45, 0.94)transform

400msease-outbackground

Glassmorphism

blur(20px)

Surfaces

#08090a

page

Layout

Breakpoints

md · 600pxlg · 1024pxxl · 1280px

Container widths

1250px100%

z-index ladder

1350100

Extracted from live CSS by Coherent (dark mode). Numeric fields reflect the site at capture time; roles and the summary are inferred. Tokens and prose only — a description, not a copy.

Save linear.md to your device

Open it on your desktop to run the CLI.