# Linear design system: colors, fonts and tokens

> 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.

Source: https://linear.app, captured 21 May 2026. Page: https://designlang.app/design-system/linear

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#e4f222` | 2 |
| Secondary | `#5e6ad2` | 3 |
| Accent | `#00ff05` | 19 |

Neutrals: `#f7f8f8`, `#62666d`, `#d0d6e0`, `#e2e4e7`, `#8a8f98`, `#08090a`, `#23252a`, `#383b3f`, `#000000`, `#121414`

Backgrounds: `#08090a`, `#090a0b`, `#101112`, `#121314`, `#ffffff`, `#161718`, `#0f1011`, `#e4f222`

## Fonts

- Inter Variable (sans), 3627 elements
- Berkeley Mono (mono), 316 elements

## 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 |
| 12.25px | 400 | 15.925px | -0.182px | code |
| 12px | 510 | 16.8px | normal | span, div, img, button |
| 11px | 510 | 15.4px | normal | span |

## Spacing

1px, 39px, 47px, 51px, 56px, 69px, 79px, 91px, 95px, 99px, 111px, 123px, 127px, 131px, 135px, 152px, 155px, 159px, 166px, 199px

## Radii

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

## Motion

Feel: responsive. Durations: 100ms, 160ms, 400ms.

## Audit

Overall 76/100 (grade C).

- 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

## CSS variables

```css
: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;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/linear-app/linear-app-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/linear-app/linear-app-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/linear-app/linear-app-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/linear-app/linear-app-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/linear-app/linear-app-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/linear-app/linear-app-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/linear-app/linear-app-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/linear-app/linear-app.brand.pdf)

Regenerate: `npx designlang linear.app`