Linear

Sizes in use: 64px / 48px / 24px / 20px / 15px / 14px / 13px / 12px / 10px

# Linear design system

> Captured from https://linear.app/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/linear/). An independent analysis for reference: Linear and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Linear's homepage is almost entirely neutral: a #08090a ground, two steps of cool off-white ink, and hairline borders only a shade above the background. Headlines run large and tight at 64px with negative tracking while body copy stays at 15px. Color is rationed to small status marks inside the product screenshot.

- Theme: dark
- Mood: dark, monochrome, product-led
- Category: Product tool

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#08090a` | The page ground |
| Surface | `#101112` | Raised panels, bands and cards |
| Text | `#d0d6e0` | Primary ink, 13.6:1 on the background |
| Muted text | `#8a8f98` | Supporting copy, 6.1:1 on the background |
| Accent | `#e5e5e6` | Primary actions; this system has no brand hue in its controls |
| Highlight | `#27a644` | Brand color in artwork, marks and badges |
| Border | `#1b1c1d` | Hairlines and dividers |

Full palette, most used first: `#08090a`, `#8a8f98`, `#101112`, `#d0d6e0`, `#62666d`, `#f7f8f8`, `#e5e5e6`, `#27a644`.

## Typography

- **Inter Variable**: display and body, 94.5% of the text. Use Inter. The captured face is Inter, free under the SIL Open Font License.
- **Berkeley Mono**: code, 5.5% of the text. Use JetBrains Mono. Berkeley Mono is a paid typeface. JetBrains Mono is a free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | Inter Variable | 64px | 510 | 1 | -0.022em |
| Heading | Inter Variable | 48px | 510 | 1 | -0.022em |
| Subheading | Inter Variable | 20px | 590 | 1.33 | -0.012em |
| Body | Inter Variable | 15px | 400 | 1.6 | -0.011em |
| Small | Inter Variable | 12px | 400 | 1.17 | 0 |

Sizes in use, largest first: 64px, 48px, 24px, 20px, 15px, 14px, 13px, 12px, 10px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 2px, 10px, 14px, 16px, 24px, 30px, 32px.

## Shape

Corner radii, smallest first: 4px, 5px, 6px, 8px, 12px, pill (9999px).

Shadows, most used first:

- `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`
- `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- `rgba(0, 0, 0, 0.06) 0px 4px 4px -1px, rgba(0, 0, 0, 0.12) 0px 1px 1px 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`

## Components

### Primary button ("Sign up")

- Fill: #e5e5e6
- Text: #08090a, 13px at weight 510
- Border: none
- Ring or shadow: `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`
- Corner: pill (9999px)
- Height: 32px, padding 0px 12px

### Card

- Fill: #0f1011
- Border: 1px solid #222324
- Corner: 9px
- Shadow: `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`

## Do

- Keep the page neutral and let the product screenshot carry the color.
- Track display type tight, around -0.02em, and keep body copy near 15px.
- Separate surfaces with 1px lines a few shades above the ground rather than drop shadows.

## Don't

- Paint the primary button in a brand hue: here it is a light grey pill.
- Set body copy in pure white: the ink sits slightly cool and dimmed.
- Stack heavy shadows on dark cards.

## CSS variables

```css
:root {
  --color-background: #08090a;
  --color-surface: #101112;
  --color-text: #d0d6e0;
  --color-text-muted: #8a8f98;
  --color-accent: #e5e5e6;
  --color-highlight: #27a644;
  --color-border: #1b1c1d;
  --font-display: "Inter Variable", "Inter", system-ui, sans-serif;
  --text-display: 64px;
  --weight-display: 510;
  --font-heading: "Inter Variable", "Inter", system-ui, sans-serif;
  --text-heading: 48px;
  --weight-heading: 510;
  --font-subheading: "Inter Variable", "Inter", system-ui, sans-serif;
  --text-subheading: 20px;
  --weight-subheading: 590;
  --font-body: "Inter Variable", "Inter", system-ui, sans-serif;
  --text-body: 15px;
  --weight-body: 400;
  --font-small: "Inter Variable", "Inter", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 2px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 30px;
  --space-7: 32px;
  --radius-1: 4px;
  --radius-2: 5px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.

Linear and its marks belong to their owner. This page is an independent analysis of the public website, measured on 2026-10-05. We're not affiliated with or endorsed by Linear.