linear.app Designsystem

---
version: alpha
name: "linear.app"
description: "Design system extracted from https://linear.app/ on 2026-09-28"
colors:
  background: "#08090a"
  surface: "#101112"
  surface-2: "#1c1d1e"
  surface-3: "#07220a"
  foreground: "#f7f8f8"
  muted-foreground: "#8a8f98"
  primary: "#e5e5e6"
  on-primary: "#111111"
  secondary: "#5e6ad2"
  border: "#1c1d1e"
typography:
  headline-display:
    fontFamily: "Inter Variable"
    fontSize: "64px"
    fontWeight: 510
    lineHeight: "1"
    letterSpacing: "-1.408px"
  headline-lg:
    fontFamily: "Inter Variable"
    fontSize: "48px"
    fontWeight: 510
    lineHeight: "1"
    letterSpacing: "-1.056px"
  headline-md:
    fontFamily: "Inter Variable"
    fontSize: "13px"
    fontWeight: 510
    lineHeight: "1.5"
    letterSpacing: "-0.13px"
  body-md:
    fontFamily: "Inter Variable"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.54"
    letterSpacing: "-0.039px"
  label-md:
    fontFamily: "Inter Variable"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.17"
  button:
    fontFamily: "Inter Variable"
    fontSize: "13px"
    fontWeight: 400
    lineHeight: "1.4"
  code:
    fontFamily: "Berkeley Mono"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: "1.67"
    letterSpacing: "-0.182px"
rounded:
  none: "0px"
  full: "9999px"
  lg: "12px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "28px"
  8: "32px"
  9: "36px"
  10: "48px"
components:
  button-ghost:
    backgroundColor: "#08090a"
    textColor: "#8a8f98"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "0px 12px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#08090a"
    typography: "{typography.button}"
    rounded: "9999px"
    height: "32px"
    padding: "0px 12px"
  button-secondary:
    backgroundColor: "#ffffff03"
    textColor: "#d0d6e0"
    typography: "{typography.button}"
    rounded: "16px"
    height: "24px"
    padding: "0px 11px"
  card:
    backgroundColor: "#0f1011"
    rounded: "12px"
    padding: "0px"
---

# linear.app

## Overview

Linear – The system for product development: Purpose-built for planning and building products with AI agents.

Pill-shaped controls, layered shadows for depth, large display type at 64px / 510, a single neutral accent on neutrals. The site ships in dark mode by default (dark surfaces, light type). Measured from 4700 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/desktop-1440-light.png`: Desktop 1440, light mode
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#08090a` | Page background |
| surface | `#101112` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#1c1d1e` | Secondary surface |
| surface-3 | `#07220a` | Secondary surface |
| foreground | `#f7f8f8` | Primary text |
| muted-foreground | `#8a8f98` | Secondary text, captions |
| primary | `#e5e5e6` | Accent: primary buttons, links, focus |
| on-primary | `#111111` | Text on the accent |
| secondary | `#5e6ad2` | Secondary accent (violet) |
| border | `#1c1d1e` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#08090a`, `#101112`, `#e4f222`, `#1c1d1e`, `#07220a`, `#e5e5e6`, `#000000`, `#260809`.

Gradients in use: `radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%), linear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)`; `radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)`; `linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), none`.

The accent `#e5e5e6` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **Inter Variable** for h1, h2, h3, body, label, button: Google Fonts (Inter Variable).
- **Berkeley Mono** for code: unknown source; use **JetBrains Mono** as the stand-in if it does not load.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | Inter Variable | 64px | 510 | 1 | -1.408px |
| headline-lg | Inter Variable | 48px | 510 | 1 | -1.056px |
| headline-md | Inter Variable | 13px | 510 | 1.5 | -0.13px |
| body-md | Inter Variable | 13px | 400 | 1.54 | -0.039px |
| label-md | Inter Variable | 12px | 400 | 1.17 | normal |
| button | Inter Variable | 13px | 400 | 1.4 | normal |
| code | Berkeley Mono | 12px | 400 | 1.67 | -0.182px |

Type scale in use: 10px, 11px, 12px, 13px, 14px, 15px, 16px, 20px, 24px, 48px, 64px, 72px. Base body size 13px.

The H1 renders at 64px / 510, start aligned, up to 1282px wide, tracking -1.408px. Sample: "The product development system for teams and agentsThe product developmentsystem".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 28, 32, 36, 48 (px).
- Flex and grid gaps: 4, 8, 12, 16 px.
- Content max width: 1344px, centred.
- Breakpoints: 640px, 768px, 900px, 1024px, 1280px.
- Header: 73px tall, fixed, backdrop blur, background `rgba(0, 0, 0, 0)`, bottom hairline 1px solid rgba(255, 255, 255, 0.08); 7 nav links at 16px / 400 (Customers · Pricing · Now · Contact · Log in · Sign up).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- shadow-2: `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset`
- shadow-3: `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`
- shadow-4: `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`

## Shapes

- Buttons: 9999px
- Inputs: 0px
- Cards and panels: 12px
- Images and media: 9999px
- Radius scale: none 0px, full 9999px, lg 12px

## Components

### Button, ghost

Background transparent (it sits on `#08090a`, so place it on that colour), text `#8a8f98`, border none, radius 9999px, height 32px, padding 0px 12px, 13px / 400. Sample label: "Product".

### Button, primary

Background `#e5e5e6`, text `#08090a`, border 1px solid #e5e5e6, radius 9999px, height 32px, padding 0px 12px, 13px / 510, shadow `rgba(0, 0, 0, 0) 0px 8px 2px 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`. Sample label: "Sign up".

### Button, secondary

Background transparent (it sits on `#ffffff03`, so place it on that colour), text `#d0d6e0`, border 1px solid #2e2e32, radius 16px, height 24px, padding 0px 11px, 12px / 400. Sample label: "Performance".

### Card

Background `#0f1011`, border 1px solid #ffffff1f, radius 12px, padding 0px, shadow `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`. Typical size about 400×560px.

### Link

Colour `#8a8f98`, no underline at rest, weight 400.

## Dark Mode

Both themes exist; the default render is dark and the light theme was reached via data-theme=light. Token pairs, light → dark:

| Token | Light | Dark |
| --- | --- | --- |
| background | `#ffffff` | `#08090a` |
| surface | `#feedee` | `#101112` |
| surface-2 | `#e6ffe6` | `#1c1d1e` |
| foreground | `#282a30` | `#f7f8f8` |
| muted-foreground | `#6f6e77` | `#8a8f98` |
| primary | `#282a30` | `#e5e5e6` |
| on-primary | `#ffffff` | `#111111` |
| secondary | `#eb5757` | `#5e6ad2` |
| border | `#ebebeb` | `#1c1d1e` |

Light-theme shadows: `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`; `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset`; `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`; `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1344px | 78px | 16px | 64px, 2 lines, start | 73px, 6 links, 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| laptop 1024px | 968px | 34px | 16px | 56px, 2 lines, start | 73px, 5 links, 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| tablet 768px | 712px | 34px | 16px | 56px, 2 lines, start | 73px, hamburger (icon), 1 CTA | text only | 2→2 col; 2→1 col; 2→1 col | content-width |
| phone 390px | 358px | 23px | 16px | 38px, 4 lines, start | 65px, hamburger (icon), 1 CTA | text only | 2→2 col; 2→1 col; 3→3 col | content-width |

- H1 goes 64px → 38px (59%), 2 → 4 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 73px → 65px.
- Body text stays 16px at every width.
- Phone side gutter 23px.

## Interaction & Motion

394 elements carry transitions; typical 0.1s with cubic-bezier(0.25, 0.46, 0.45, 0.94), mostly on color, transform, filter. 10 running keyframe animations (fFDhtq_dotIn 0.42s 1; -VOcTG_agentLabelSweep 2s 1; grid-dot-0-0-upDown 2.8s infinite).

- Hover on button-primary ("Sign up"): no visible change; cursor pointer; transition border, background-color, color, box-shadow, opacity, filter, transform | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94).
- Hover on button-secondary: no visible change; cursor default.
- Hover on nav-link ("Customers"): no visible change; cursor pointer; transition color, background | 0.1s | cubic-bezier(0.25, 0.46, 0.45, 0.94).
- Hover on body-link ("NewLoops →"): no visible change; cursor pointer; transition filter | 0.16s | cubic-bezier(0.25, 0.46, 0.45, 0.94).
- Focus on button-primary: outline 1px solid rgb(94, 105, 209), offset 2px.
- Focus on body-link: outline 1px solid rgb(94, 105, 209), offset 2px.
- No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding.
- Hover/click menus: below the trigger, 12px gap, shifted right; #08090ae6, radius 14px, padding 0px 0px, shadow yes; 18 items, 206px tall, 16px, padding 0px 0px, with descriptions, 2 columns; fades in (opacity 0.00 at 40ms → 1.00); hides within 400ms of leaving (transition or unmount).
- 5 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#e5e5e6` for actions and focus; never paint large areas with it.
- Do keep body text at 13px in Inter Variable.
- Do match corner radii per element class (buttons 9999px, cards 12px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.
- Note: The primary action colour is the ink colour (monochrome palette); chromatic colours appear only as small accents.