Linear design system

Linear's website (linear.app) uses a dark interface with #e4f222 as its primary color and Inter Variable as the main typeface, with Berkeley Mono alongside it. designlang measured 15 font sizes from 11px to 64px, 20 spacing values, 9 corner radii.

Captured 21 May 2026Dark UI3,943 elements read

Download tokens Read it yourself

Linear colors

The brand roles and neutrals linear.app renders, with how many elements use each one.

Brand colors

Primary#e4f2222 uses
Secondary#5e6ad23 uses
Accent#00ff0519 uses

Neutrals

#f7f8f86,042 uses
#62666d719 uses
#d0d6e0368 uses
#e2e4e7295 uses
#8a8f98273 uses
#08090a53 uses
#23252a12 uses
#383b3f6 uses
#0000006 uses
#1214143 uses

Backgrounds

#08090a
#090a0b
#101112
#121314
#ffffff
#161718
#0f1011
#e4f222

Text colors

#f7f8f818.73:1 on #08090a
#ffffff19.93:1 on #08090a
#8a8f986.13:1 on #08090a
#08090a1:1 on #08090a
#d0d6e013.64:1 on #08090a
#62666d3.45:1 on #08090a
#e2e4e615.63:1 on #08090a
#e2e4e715.64:1 on #08090a

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 83% of them pass.

Text	Background	Ratio	Result
`#6d78d5`	`#232534`	3.82:1	Fails AA
`#08090a`	`#e5e5e6`	15.83:1	AAA
`#ffffff`	`#5e6ad2`	4.7:1	AA

Linear fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Inter Variable: sans, most text (3,627 elements)
Berkeley Mono: mono, body (316 elements)

Body text: 14px at weight 510, line height 21px.

Weights in use: 400, 510, 590, 300.

Type scale

Size	Weight	Line height	Tracking	Used on
64px	510	64px	-1.408px	h1, span, br
40px	510	44px	-0.88px	h2, strong
32px	400	36px	-0.704px	p
24px	400	31.92px	-0.288px	blockquote
20px	590	26.6px	-0.24px	h3, p
18px	400	28.8px	-0.165px	span
17px	590	27.2px	normal	span
16px	400	normal	normal	html, head, meta, link
15px	400	24px	-0.165px	p, span, div, strong
14px	510	21px	normal	a, span, p, br
13.3333px	400	normal	normal	button, span, svg, path
13px	400	19.5px	normal	button, a, svg, path

Spacing and radii

Spacing scale

1px
39px
47px
51px
56px
69px
79px
91px
95px
99px
111px
123px
127px
131px

Corner radii

1px
4px
7px
12px
16px
20px
50px
400px
pill

Medium radii lead, with a few larger ones. 13 distinct box shadows.

Motion

The motion reads as responsive.

Durations

xs: 100ms
sm: 160ms
md: 400ms

Easing

ease-out (79 uses): cubic-bezier(0.25, 0.46, 0.45, 0.94)
ease-in-out (25 uses): ease

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

76/100, grade C

Components found: buttons (92), cards (41), inputs (5), links (72), navigation (81), footer (112).

By category

Color Discipline	80/100
Typography Consistency	82/100
Spacing System	70/100
Shadow Consistency	78/100
Border Radius Consistency	80/100
Accessibility	83/100
CSS Tokenization	100/100

1 WCAG contrast failures
81 !important rules — prefer specificity over overrides
90% of CSS is unused — consider purging
16723 duplicate CSS declarations

Download the tokens

The files designlang wrote for linear.app. Run it yourself for a fresh read: npx designlang linear.app.

The core values as CSS variables

:root {
  --color-primary: #e4f222;
  --color-secondary: #5e6ad2;
  --color-accent: #00ff05;
  --color-background: #08090a;
  --color-text: #f7f8f8;
  --color-neutral-1: #f7f8f8;
  --color-neutral-2: #62666d;
  --color-neutral-3: #d0d6e0;
  --color-neutral-4: #e2e4e7;
  --font-primary: "Inter Variable", sans-serif;
  --font-secondary: "Berkeley Mono", monospace;
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-lg: 7px;
}

Read linear.app yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Raycast design system

Dark UI, Inter, #ff6363

Netflix design system

Dark UI, Netflix Sans, #e50914

Retool design system

Dark UI, saansFont, #e9ebdf

GitHub design system

Dark UI, Mona Sans, #f0f6fc

Quick answers

What font does Linear use?

linear.app sets most of its text in Inter Variable (3,627 elements), with Berkeley Mono alongside it. designlang read this from the computed styles of the live page on 21 May 2026.

What are Linear's brand colors?

The brand roles on linear.app are primary #e4f222, secondary #5e6ad2 and accent #00ff05, on a #08090a background. The neutrals used most are #f7f8f8, #62666d and #d0d6e0.

How do I use the Linear design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang linear.app for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from linear.app's public pages on 21 May 2026, so it shows what the site renders, not Linear's internal source files. Linear is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of linear.app on 21 May 2026. Linear is a trademark of its owner; designlang is not affiliated with it. More: the full Linear brand kit, the token extraction guide and the markdown version of this page.