What are the linear.app brand colors?

The main linear.app colors are #e5e5e6 (accent), #08090a (background) and #f7f8f8 (text). The full palette of 10 colors, with the role of each, is on this page as hex codes.

What is the linear.app hex code?

The accent color on linear.app is #e5e5e6; the page background is #08090a and the main text color #f7f8f8. Each is measured from the rendered page, so it is what visitors see, not a value from a style guide.

How do I use the linear.app colors in Tailwind or CSS?

Copy the CSS variables or the Tailwind v4 theme on this page, or download the design pack: it includes tokens.json (W3C design tokens), tokens.css and tailwind.css with the same values.

linear.app color palette: hex codes and CSS

Palette

10 colors

Colors	Role	Hex	RGB	Light / dark
`background`	Page background	`#08090a`	`rgb(8 9 10)`	`#08090a`
`surface`	Cards, panels, raised or recessed surfaces	`#101112`	`rgb(16 17 18)`	`#101112`
`surface-2`	Secondary surface	`#1c1d1e`	`rgb(28 29 30)`	`#1c1d1e`
`surface-3`	Secondary surface	`#07220a`	`rgb(7 34 10)`
`foreground`	Primary text	`#f7f8f8`	`rgb(247 248 248)`	`#f7f8f8`
`muted-foreground`	Secondary text, captions	`#8a8f98`	`rgb(138 143 152)`	`#8a8f98`
`primary`	Candidate accent (semantic role inferred)	`#e5e5e6`	`rgb(229 229 230)`	`#e5e5e6`
`on-primary`	Text on the accent	`#111111`	`rgb(17 17 17)`	`#111111`
`secondary`	Secondary accent (violet)	`#5e6ad2`	`rgb(94 106 210)`	`#5e6ad2`
`border`	Hairlines, dividers, input borders	`#1c1d1e`	`rgb(28 29 30)`	`#1c1d1e`

CSS variables

Every color as a custom property, named by role. The dark block is there when the site has a dark theme.

1:root {
2  --color-background: #08090a;
3  --color-surface: #101112;
4  --color-surface-2: #1c1d1e;
5  --color-surface-3: #07220a;
6  --color-foreground: #f7f8f8;
7  --color-muted-foreground: #8a8f98;
8  --color-primary: #e5e5e6;
9  --color-on-primary: #111111;
10  --color-secondary: #5e6ad2;
11  --color-border: #1c1d1e;
12}
13
14[data-theme="dark"] {
15  --color-background: #08090a;
16  --color-surface: #101112;
17  --color-surface-2: #1c1d1e;
18  --color-foreground: #f7f8f8;
19  --color-muted-foreground: #8a8f98;
20  --color-primary: #e5e5e6;
21  --color-on-primary: #111111;
22  --color-secondary: #5e6ad2;
23  --color-border: #1c1d1e;
24}

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/linear.app/DESIGN.md

The linear.app color palette