Linear Design System

---
name: Linear
url: https://linear.app
version: 4.0.0
tokens:
  colors:
    primary: "#5e6ad2"
    primary-hover: "#6b77e8"
    background: "#0f0f13"
    surface: "#18181f"
    surface-hover: "#22222b"
    text-primary: "#eeeeee"
    text-secondary: "#8a8f98"
    accent: "#5e6ad2"
    border: "rgba(255, 255, 255, 0.08)"
  typography:
    font-sans: "Inter, -apple-system, BlinkMacSystemFont, sans-serif"
    font-mono: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    scale:
      - { name: display, size: "56px", weight: 600, lineHeight: 1.1, letterSpacing: "-0.04em" }
      - { name: heading-1, size: "36px", weight: 600, lineHeight: 1.2, letterSpacing: "-0.02em" }
      - { name: body, size: "15px", weight: 400, lineHeight: 1.6, letterSpacing: "0" }
  spacing:
    base: "4px"
    scale:
      space-1: "4px"
      space-2: "8px"
      space-3: "12px"
      space-4: "16px"
      space-6: "24px"
      space-8: "32px"
  radius:
    sm: "4px"
    md: "8px"
    lg: "12px"
  shadows:
    glow: "0 0 20px rgba(94, 106, 210, 0.3)"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
    xl: "1280px"
---

# Linear — Design System Specification

## 1. Overview & Visual Rationale
Linear set the standard for modern dark-first developer UI design. It features an ultra-dark background (`#0f0f13`), glowing purple-indigo accents (`#5e6ad2`), and micro-interactions designed for lightning-fast keyboard operation.

## 2. Color System
- Dark Void Canvas: `#0f0f13`
- Linear Indigo: `#5e6ad2`
- Elevated Surface: `#18181f`

## 3. Typography Scale
- Display: 56px / Weight 600 / LineHeight 1.1
- Body: 15px / Weight 400 / LineHeight 1.6

## 4. Button Variants
- Primary Button: `background: #5e6ad2`, `color: #ffffff`, `border-radius: 8px`

## 5. Card Examples
- Dark Glass Card: `background: #18181f`, `border: 1px solid rgba(255,255,255,0.08)`

## 6. Form Elements
- Command K Input: `background: #18181f`, `border-radius: 8px`

## 7. Spacing Scale
- 4px, 8px, 12px, 16px, 24px, 32px, 48px

## 8. Border Radius Scale
- `sm: 4px`, `md: 8px`, `lg: 12px`

## 9. Elevation & Depth
- `glow: 0 0 20px rgba(94, 106, 210, 0.3)`

## 10. Responsive Behavior
- `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`