# Linear Design System

> High-contrast technical precision on a deep obsidian canvas, punctuated by indigo focus states and monospaced data.

**Source:** [https://linear.app](https://linear.app) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Linear is a "dark-mode first" system that prioritizes technical density and legibility. The interface is built on a foundation of near-black surfaces (`#090a0b`) and high-contrast off-white text (`#f7f8f8`). Brand "voltage" is concentrated in a single primary Indigo (`#5e6ad2`) used for focus rings and primary backgrounds. The system uses a dual-type approach: **Inter Variable** for high-performance UI and display, and **Berkeley Mono** for code and technical metadata. Components are characterized by sharp or tight radii (4px-8px) and translucent borders that create depth without heavy shadows.

## Signature DNA
1. **The Obsidian Canvas:** A tiered dark background system starting at `#090a0b` that uses subtle hex shifts (e.g., `#101112`, `#161718`) to signify elevation rather than traditional drop shadows.
2. **Indigo Precision:** The use of `#5e6ad2` as a surgical accent. It is the only high-saturation color used for functional UI states (focus, active buttons), ensuring brand recognition through utility.
3. **Monospaced Metadata:** Berkeley Mono is used consistently for technical strings and code snippets, signaling the product's "built for engineers" identity directly through typography.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-bg-primary` | `#090a0b` | Primary page background and panel floor | 24 | 1 | Computed Style |
| `--color-fg-primary` | `#f7f8f8` | Primary text and high-contrast labels | 475 | 1 | CSS Variable |
| `--color-fg-secondary` | `#d0d6e0` | Secondary body text and muted labels | 212 | 1 | CSS Variable |
| `--color-fg-tertiary` | `#8a8f98` | Tertiary text and metadata | 317 | 1 | CSS Variable |
| `--color-border-primary` | `#24282c` | Default component and section borders | 6 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-brand-bg` | `#5e6ad2` | Primary brand color, focus rings, indigo accents | 3 | 1 | CSS Variable |
| `--color-green` | `#27a644` | Success states and positive trends | 5 | 1 | CSS Variable |
| `--color-red` | `#eb5757` | Error states and destructive actions | 4 | 1 | CSS Variable |
| `--color-teal` | `#00b8cc` | Decorative accent / feature labeling | 3 | 1 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Inter Variable | 300, 400, 510, 590 | UI, Display, Body | Inter (Google Fonts) | SIL Open Font |
| Berkeley Mono | 400 | Code, Metadata, Technical | JetBrains Mono | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{type.display-mega}` | 72px | 72px | -1.584px | 510 | Hero Display | `h2.sc-d5151d0-0.cvEOJe` |
| `{type.display-xl}` | 64px | 64px | -1.408px | 510 | Page Headers | `h1.sc-d5151d0-0.bgDIHX` |
| `{type.display-lg}` | 48px | 48px | -1.056px | 510 | Section Headers | `h2.sc-d5151d0-0.exSLMF` |
| `{type.heading-md}` | 32px | 36px | -0.704px | 400 | Sub-headers | `p.sc-d5151d0-0.gACPou` |
| `{type.heading-sm}` | 24px | 31.92px | -0.288px | 510 | Feature Titles | `span.sc-d5151d0-0.jmyNRj` |
| `{type.body-lg}` | 17px | 27.2px | normal | 510 | Lead Body | `span.sc-d5151d0-0.glzMMa` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `a.Hero_newFeatureLink__PHt6b` |
| `{type.mono-sm}` | 14px | 24px | normal | 400 | Code Snippets | `span.line` |
| `{type.caption}` | 12px | 16.8px | normal | 400 | Metadata | `span.sc-d5151d0-0.buZxw` |

### Principles
1. **Weight 510 is the Display Standard:** Linear avoids standard "Bold" (700) for headers, preferring a custom 510 weight for a more refined, technical look.
2. **Negative Tracking on Display:** As type scales up, letter spacing tightens aggressively, reaching -1.584px at the 72px size.
3. **Monospace for Logic:** Any string representing a machine state, file path, or code must use Berkeley Mono.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 41 |
| `{space.sm}` | 12px | 39 |
| `{space.md}` | 16px | 13 |
| `{space.lg}` | 24px | 48 |
| `{space.xl}` | 32px | 206 |
| `{space.section}` | 96px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Layout containers | 1279 occurrences |
| `{radius.sm}` | 4px | Inputs and small controls | 40 occurrences |
| `{radius.md}` | 8px | Buttons and small cards | 16 occurrences |
| `{radius.lg}` | 12px | Feature cards | 24 occurrences |
| `{radius.pill}` | 9999px | Primary CTAs | 31 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Surface | `rgb(35, 37, 42) 0px 0px 0px 1px inset` | Card definition | Component Spec |
| Floating | `rgba(0, 0, 0, 0.4) 0px 2px 4px 0px` | Hovered cards | Shadow Evidence |
| Modal | `rgba(8, 9, 10, 0.6) 0px 4px 32px 0px` | Overlays | Shadow Evidence |

## Components

### Tier 1: Foundational

#### Pill Button (Invert)
**Role:** Primary "Get Started" CTA
**Pages observed:** [linear.app, pricing, about]
**Spec:** Background `#e5e5e6` / Text `#08090a` / Border `1px #e5e5e6` / Radius `9999px` / Padding `0px 20px` / Typography `16px 510`
**States observed:** Default | Hover: Captured (Background `#ffffff`)

#### Pill Button (Secondary)
**Role:** Navigation and secondary actions
**Pages observed:** [linear.app, about]
**Spec:** Background `rgba(255, 255, 255, 0.05)` / Text `#f7f8f8` / Border `none` / Radius `9999px` / Padding `0px 12px` / Typography `13px 510`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** [linear.app]
**Spec:** Background `rgba(255, 255, 255, 0.02)` / Text `#f7f8f8` / Border `1px rgba(255, 255, 255, 0.05)` / Radius `6px` / Padding `8px` / Shadow `rgba(0, 0, 0, 0.4) 0px 2px 4px 0px`
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Pricing plan selection
**Pages observed:** [pricing]
**Spec:** Background `#0f1011` / Text `#f7f8f8` / Border `1px inset #23252a` / Radius `12px` / Padding `24px`
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
|---|---|
| Max content width | 1200px |
| Section padding | 96px |
| Column gap | 32px |

## Do's
- Use `#f7f8f8` for all primary readable text on dark backgrounds.
- Apply `Berkeley Mono` for any technical metadata or code strings.
- Tighten letter spacing to at least `-1.0px` for any type above 48px.
- Use `1px inset` borders for card definition instead of heavy drop shadows.
- Reserve `#5e6ad2` for focus states and primary brand moments only.

## Don'ts
- **Wrong:** Using `#5e6ad2` for large background areas. **Right:** Use `#090a0b`. **Reason:** Linear is an obsidian-first system; the brand color is a signal, not a flood.
- **Wrong:** Using standard `700` weight for headers. **Right:** Use `510`. **Reason:** The system relies on the specific "Variable" weight for its technical aesthetic.
- **Wrong:** Using pure `#000000` for all backgrounds. **Right:** Use `#090a0b`. **Reason:** Pure black kills the depth created by the tiered surface system.

## Similar brands
- Vercel
- Supabase
- Raycast
- GitHub (Dark Mode)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-bg-primary: #090a0b;
  --color-fg-primary: #f7f8f8;
  --color-brand-indigo: #5e6ad2;
  --font-main: "Inter Variable", sans-serif;
  --font-mono: "Berkeley Mono", monospace;
  --radius-md: 8px;
  --space-xl: 32px;
}
```

## Known gaps
- The exact transition values for the "Indigo Glow" hover effects seen in screenshots were not captured in the CSS variable tokens.
- Mobile-specific spacing tokens (e.g., `--spacing-mobile`) were not explicitly declared in the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | [https://linear.app](https://linear.app) | 1440x900 | 2026-06-06 |
| Pricing | [https://linear.app/pricing](https://linear.app/pricing) | 1440x900 | 2026-06-06 |
| About | [https://linear.app/about](https://linear.app/about) | 1440x900 | 2026-06-06 |