<!-- Generated by ExtractVibe — https://extractvibe.com/brand/linear.app -->
<!-- Extracted: 2026-04-26T13:01:52.633Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Linear – The system for product development"
description: "Linear projects a vibe of sophisticated efficiency and cutting-edge innovation, tailored for product development teams embracing AI. It combines a serious, matter-of-fact tone with a subtle enthusiasm for advanced tooling, suggesting a brand that is both powerful and precise."
colors:
  primary: "#5e6ad2"
  neutral: "#8a8f98"
  surface: "#ffffff"
  border: "#d0d6e0"
  surface-dark: "#5e6ad2"
  on-surface-dark: "#f7f8f8"
typography:
  display-lg:
    fontFamily: "Inter Variable"
    fontSize: "64px"
    fontWeight: "510"
    lineHeight: "64px"
    letterSpacing: "-1.408px"
  headline-lg:
    fontFamily: "Inter Variable"
    fontSize: "48px"
    fontWeight: "510"
    lineHeight: "48px"
    letterSpacing: "-1.056px"
  headline-md:
    fontFamily: "Inter Variable"
    fontSize: "20px"
    fontWeight: "590"
    lineHeight: "26.6px"
    letterSpacing: "-0.24px"
  headline-sm:
    fontFamily: "Inter Variable"
    fontSize: "16px"
    fontWeight: "590"
    lineHeight: "24px"
  body-md:
    fontFamily: "Inter Variable"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "2px"
  md: "6px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#5e6ad2"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "0px 16px"
    fontSize: "14px"
    fontWeight: "510"
    borderColor: "#ffffff"
  button-secondary:
    backgroundColor: "#e5e5e6"
    textColor: "#08090a"
    rounded: "9999px"
    padding: "0px 12px"
    fontSize: "13px"
    fontWeight: "510"
    borderColor: "#e5e5e6"
    borderWidth: "1px"
    boxShadow: "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"
  button-outline:
    textColor: "#e2e4e7"
    rounded: "6px"
    padding: "0px"
    fontSize: "13.3333px"
    fontWeight: "400"
    borderColor: "#24282c"
    borderWidth: "1px"
  button-ghost:
    textColor: "#d0d6e0"
    rounded: "6px"
    padding: "0px 6px"
    fontSize: "13px"
    fontWeight: "510"
    borderColor: "#d0d6e0"
---

# Linear – The system for product development — Design System

## Overview

Linear's design system embodies the archetype of The Creator and The Sage, delivering a sophisticated and highly efficient user experience. It aligns with the design sensibilities of industry leaders like Notion, Figma, GitHub, and Vercel, prioritizing clarity, precision, and advanced functionality. The aesthetic is modern, technical, and purpose-built, designed to empower product development teams with cutting-edge AI tooling. Every element is streamlined for optimal performance and intuitive interaction, reflecting a brand that is both powerful and meticulously crafted. The emotional register is serious, matter-of-fact, yet subtly enthusiastic about technological advancement.

This design system is not ornamental or whimsical. It eschews gratuitous animations, overly bright or distracting color palettes, and any visual elements that do not directly contribute to user productivity or understanding. It avoids a 'friendly' or 'approachable' tone in favor of a 'competent' and 'authoritative' one. The focus remains on delivering a seamless, high-performance environment for complex product development workflows, ensuring that the interface is a tool, not a distraction.

**Key characteristics:**

- Vibe — efficient, innovative, technical, modern, purpose-built, streamlined
- Archetypes — The Creator, The Sage
- Comparable to — Notion, Figma, GitHub, Vercel
- Design era — contemporary-minimal
- Emotional tone — empowering-precise
- Target audience — Product development teams, software engineers, product managers, and technical leaders who value efficiency, cutting-edge tools, and AI-driven workflows in their product lifecycle management.
- Visual energy — 6/10 (moderate)

## Colors

The primary color, `#5e6ad2`, is a deep, authoritative blue that signifies trust, stability, and technological sophistication. It acts as a clear focal point, guiding user attention to critical actions and information. The dominant surface color, `#ffffff`, ensures maximum legibility and a clean, expansive canvas, fostering an environment of clarity and focus. This restrained palette underscores Linear's commitment to efficiency and precision, signaling a serious and modern approach to product development.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#5e6ad2` | Slate Blue |
| background | `#ffffff` | White |
| border | `#d0d6e0` | Light Gray |
| muted | `#8a8f98` | Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#5e6ad2` | Slate Blue |
| background | `#08090a` | Black |
| text | `#f7f8f8` | Off-White |
| secondary text | `#d0d6e0` | Light Gray |
| muted | `#d0d6e0` | Light Gray |

## Typography

The type system leverages Inter Variable for all primary UI text, ensuring optimal legibility across diverse screen sizes and resolutions. Its variable nature allows for precise typographic control, reinforcing the brand's commitment to efficiency and technical excellence. Berkeley Mono is reserved for code blocks and data displays, providing a distinct, monospace aesthetic that communicates precision and a direct connection to development workflows. This hierarchical approach prioritizes clarity and functional differentiation, supporting a streamlined and highly technical user experience.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter Variable | body | self-hosted | 400, 510 |
| Inter Variable | heading | self-hosted | 510, 590 |
| Berkeley Mono | mono | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter Variable | 64px | 510 | 64px | -1.408px |
| Heading 2 | Inter Variable | 48px | 510 | 48px | -1.056px |
| Heading 3 | Inter Variable | 20px | 590 | 26.6px | -0.24px |
| Heading 4 | Inter Variable | 16px | 590 | 24px | — |
| Body | Inter Variable | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px
- Monospace — Berkeley Mono

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| navigation | `rgba(0, 0, 0, 0.4) 0px 1px 0px 0px` |
| button | `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` |
| button | `rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px` |

### Gradients

- `linear-gradient(rgba(11, 11, 11, 0.8) 0px, oklab(0.149574 0.00000683218 0.00000298768 / 0.761905) 100%)`

## Shapes

Border-radius scale:

- `sm` — 2px
- `md` — 6px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#5e6ad2`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `0px 16px`
- Font size — `14px`
- Font weight — `510`
- Border — ` solid #ffffff`
- Sample copy — "Skip to content →"

**Secondary**

- Background — `#e5e5e6`
- Text — `#08090a`
- Radius — `9999px`
- Padding — `0px 12px`
- Font size — `13px`
- Font weight — `510`
- Border — `1px solid #e5e5e6`
- 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 copy — "Open app"

**Outline**

- Text — `#e2e4e7`
- Radius — `6px`
- Padding — `0px`
- Font size — `13.3333px`
- Font weight — `400`
- Border — `1px solid #24282c`

**Ghost**

- Text — `#d0d6e0`
- Radius — `6px`
- Padding — `0px 6px`
- Font size — `13px`
- Font weight — `510`
- Border — ` solid #d0d6e0`
- Sample copy — "Faster app launch"

## Do's and Don'ts

### Do

- Utilize Inter Variable for all body text at weights 400 and 510, ensuring a line-height of 24px for readability.
- Employ Inter Variable for all headings, specifically at weights 510 and 590, always in sentence-case.
- Render all code snippets and monospaced text using Berkeley Mono at 400 weight, self-hosted for consistent delivery.
- Implement the primary brand color #5e6ad2 for key interactive elements and primary buttons, paired with #ffffff text.
- Design primary buttons with a 0px border-radius (sharp corners), #5e6ad2 background, #ffffff text, and padding of 0px 16px.
- Design secondary buttons with a large border-radius of 9999px (pill-shaped), #e5e5e6 background, #08090a text, and a subtle multi-layer shadow: rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px.
- Apply subtle, single-layer shadows like rgba(0, 0, 0, 0.4) 0px 1px 0px 0px for navigation elements to provide minimal depth.
- Maintain a consistent base spacing unit of 2px for all layout and component spacing.
- Use a limited color palette primarily consisting of the brand's primary blue (#5e6ad2), stark white (#ffffff) for light mode backgrounds, and near-black (#08090a) for dark mode backgrounds and text.

### Don't

- Avoid using title case or all caps for headings; all headings must adhere to sentence-case.
- Do not incorporate emojis in any marketing or product copy.
- Refrain from excessive exclamations; use them rarely and judiciously.
- Do not use serif fonts; the brand's typography is exclusively sans-serif (Inter Variable) and monospaced (Berkeley Mono).
- Avoid bright, vibrant, or overly playful colors outside of the established brand palette; maintain a professional and focused aesthetic.
- Do not use complex, highly visible gradients; if a gradient is used, it should be subtle and dark, like linear-gradient(rgba(11, 11, 11, 0.8) 0px, oklab(0.149574)).
- Do not use large, dramatic, or colorful shadows; shadows should be subtle and primarily for depth or separation, as seen in navigation and secondary buttons.
- Avoid inconsistent border radii; adhere strictly to 0px for primary buttons, 6px for outline/ghost buttons, and 9999px for secondary buttons.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 3/10 | formal |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 10 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct, action-oriented, and benefit-driven with a sense of urgency
- Rhetorical devices — repetition, metaphor

### Sample copy

> The product development system for teams and agents

> A new species of product tool. Purpose-built for modern teams with AI workflows at its core, Linear sets a new standard for planning and building products.

> Make product operations self-driving

> Built for the future. Available today.

> Issue tracking is dead

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/linear.app) | 100% |
| favicon | — | ico | [link](brands/linear.app/logo-0.ico) | 95% |
| favicon | — | svg | [link](brands/linear.app/logo-1.svg) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-2.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-3.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-4.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-5.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-6.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-7.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-8.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-9.png) | 95% |
| favicon | — | png | [link](brands/linear.app/logo-10.png) | 95% |

## Sources

- Official brand guidelines — https://linear.app/brand
- Live brand page — https://extractvibe.com/brand/linear.app
- Raw JSON — https://extractvibe.com/api/brand/linear.app
- DESIGN.md (this file) — https://extractvibe.com/api/brand/linear.app/design.md
- Extracted — 2026-04-26T13:01:52.633Z
- Generator — ExtractVibe vv1
- Quality score — 100/100