Linear – The system for product development — Design Report

Detected Language

Design Style

technical / mono accents

monospace font in use

Palette

Colors

primary

#3B3D45

10.83 on white · 1.94 on black · 228° 8% 25%

secondary

#000000

21 on white · 1 on black · 0° 0% 0%

Token Roles 5 tokens

background

#FFFFFF · 21:1 vs black

surface

#FFFFFF · 21:1 vs black

text-primary

#000000 · 21:1 vs white

text-secondary

#3B3D45 · 10.83:1 vs white

on-secondary

#FFFFFF · 21:1 vs black

Detected Palette 3 colors by frequency in source CSS

#000000

used 11× · 0° 0% 0%

#FFFFFF

used 7× · 0° 0% 100%

#3B3D45

used 1× · 228° 8% 25%

Type System

Typography

body-md

inherit

16px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14.4px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-sm

inherit

12.8px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

var(--font-monospace)

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

unit

4px

xs

2px

sm

8px

md

16px

lg

32px

xl

56px

detected

2px

detected

4px

detected

6px

detected

8px

detected

16px

detected

20px

detected

32px

detected

48px

detected

56px

Breakpoints

640px768px1024px1280px

Depth

Elevation & Depth

level 1

0 1px #0006

level 2

inset 0 0 0 1px #ffffff08,inset 0 1px #ffffff0a,0 0 0 1px #0009,0 4px 4px #0000001a

Geometry

Shapes

sm

5px

r2

6px

Tokens in Context

Components

card

background{colors.surface}

radius5px

boxShadow{elevation.md}

button-primary

radius5px

Animation

Motion

Keyframes 18 found

@keyframes grid-dot-0-0-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-0-1-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-0-2-upDown

0%{opacity:0.3;} 50%{opacity:1;} 50%{opacity:1;} 100%{opacity:0.3;}

@keyframes grid-dot-0-3-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-0-4-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-1-0-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-1-1-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-1-2-upDown

0%{opacity:0.3;} 50%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:0.3;}

@keyframes grid-dot-1-3-upDown

0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;}

Applied Animations

grid-dot-0-0-upDown 2800ms steps(1, end) infinitegrid-dot-0-1-upDown 2800ms steps(1, end) infinitegrid-dot-0-2-upDown 2800ms steps(1, end) infinitegrid-dot-0-3-upDown 2800ms steps(1, end) infinitegrid-dot-0-4-upDown 2800ms steps(1, end) infinitegrid-dot-1-0-upDown 2800ms steps(1, end) infinitegrid-dot-1-1-upDown 2800ms steps(1, end) infinitegrid-dot-1-2-upDown 2800ms steps(1, end) infinitegrid-dot-1-3-upDown 2800ms steps(1, end) infinitegrid-dot-1-4-upDown 2800ms steps(1, end) infinite

Transitions

color var(--speed-quickTransition).16s var(--ease-out-quad)var(--speed-quickTransition) var(--ease-out-quad)

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — Linear – The system for product development

Field	Value
Site / Project	https://linear.app
Analyzed on	2026-08-22
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000). All type is set in var(--font-monospace). Detected style signatures: technical / mono accents.

Logo asset(s): https://linear.app/favicon.ico?v=2

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#000000`	0, 0, 0	0° 0% 0%	11
`#FFFFFF`	255, 255, 255	0° 0% 100%	7
`#3B3D45`	59, 61, 69	228° 8% 25%	1

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-background`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-surface`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-text-primary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-secondary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-text-secondary`	`#3B3D45`	59, 61, 69	228° 8% 25%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Gradients

linear-gradient(180deg, transparent 0%, color-mix(in oklab, transparent 100%, transparent 5%) 100%)
linear-gradient(180deg, 0%, transparent 100%)

Typography

Primary typeface: var(--font-monospace) — stack: var(--font-monospace)

Font stacks (most used first)

var(--font-monospace)

Derived type scale

Token	Size
body-md	16px
label-md	14.4px
label-sm	12.8px

Font sizes (by frequency)

Size	Count
0.6em	61
0.9em	61
13px	2
14px	1
.8em	1
12px	1
16px	1

Line heights (by frequency)

Value	Count
1	1
22px	1

Spacing

Derived spacing scale

Token	Value
unit	4px
xs	2px
sm	8px
md	16px
lg	32px
xl	56px

Raw values (by frequency)

Value	Count
8px	3
16px	2
6px	2
32px	1
56px	1
48px	1
2px	1
20px	1
4px	1

Borders & Radius

Derived radius tokens

Token	Value
sm	`5px`

Raw values (resolved, by frequency)

Radius	Count
`5px`	1
`6px`	1

Shadows

Derived elevation

Token	Value
sm	`0 1px #0006`
md	`inset 0 0 0 1px #ffffff08,inset 0 1px #ffffff0a,0 0 0 1px #0009,0 4px 4px #0000001a`
lg	`0 0 0 1px #00000014`

All detected shadows

0 1px #0006
0 0 0 2px , 0 0 0 4px
inset 0 0 0 1px #ffffff08,inset 0 1px #ffffff0a,0 0 0 1px #0009,0 4px 4px #0000001a
0 0 0 1px #00000014

Layout

Container max-width: 768px

Grid columns (largest detected grid): 6

Breakpoints

640px
768px
1024px
1280px

Animation & Motion

Transitions

color
.16s

Keyframes

@keyframes grid-dot-0-0-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-0-1-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-0-2-upDown { 0%{opacity:0.3;} 50%{opacity:1;} 50%{opacity:1;} 100%{opacity:0.3;} }
@keyframes grid-dot-0-3-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-0-4-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-1-0-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-1-1-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-1-2-upDown { 0%{opacity:0.3;} 50%{opacity:1;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-1-3-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-1-4-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-2-0-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-2-1-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-2-2-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-2-3-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-2-4-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-3-0-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-3-1-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:0.3;} }
@keyframes grid-dot-3-2-upDown { 0%{opacity:0.3;} 50%{opacity:0.3;} 50%{opacity:0.3;} 100%{opacity:1;} }

Animations

grid-dot-0-0-upDown 2800ms steps(1, end) infinite
grid-dot-0-1-upDown 2800ms steps(1, end) infinite
grid-dot-0-2-upDown 2800ms steps(1, end) infinite
grid-dot-0-3-upDown 2800ms steps(1, end) infinite
grid-dot-0-4-upDown 2800ms steps(1, end) infinite
grid-dot-1-0-upDown 2800ms steps(1, end) infinite
grid-dot-1-1-upDown 2800ms steps(1, end) infinite
grid-dot-1-2-upDown 2800ms steps(1, end) infinite
grid-dot-1-3-upDown 2800ms steps(1, end) infinite
grid-dot-1-4-upDown 2800ms steps(1, end) infinite

CTA labels found on page

Product
Resources
Linear

Effects

backdrop-filter: blur(4px)
backdrop-filter: blur()

Source Design Tokens (CSS custom properties)

:root {
  --grid-columns: 12;
  --grid-gap: 32px;
  --button-corner-radius: var(--radius-rounded);
  --icon-replacement-color: currentColor;
  --button-height: 24px;
  --button-icon-size: 12px;
  --button-font-size: 12px;
  --button-padding: 0 10px;
  --button-gap: 4px;
  --kbd-size: 16px;
  --kbd-offset: -6px;
  --kbd-gap: 6px;
  --kbd-bg: #ffffff26;
  --kbd-text: var(--color-bg-primary);
  --header-border: transparent;
  --header-bg: transparent;
  --anchor-glass-bg: #ffffff14;
}

Do's and Don'ts

Do

Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
Do align spacing to the 4px base unit derived from the page.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #3B3D45;
  --color-on-secondary: #FFFFFF;
  --font-sans: var(--font-monospace);
  --font-size-body-md: 16px;
  --font-size-label-md: 14.4px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 5px;
  --shadow-sm: 0 1px #0006;
  --shadow-md: inset 0 0 0 1px #ffffff08,inset 0 1px #ffffff0a,0 0 0 1px #0009,0 4px 4px #0000001a;
  --shadow-lg: 0 0 0 1px #00000014;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 56px;
  --container-max: 768px;
}