# Linear

> `linear@1.0.0`

Linear is a project and issue-tracking tool built for software teams — "the purpose-built tool for planning and building products." The brand voice is precise, calm, and craft-forward: dark-first product surfaces, an angular sans-serif wordmark, a single desaturated indigo accent (#5E6AD2), and a near-monochrome neutral system that lets motion and typography carry the brand. Where competing trackers shout, Linear whispers.


**Tags:** `saas`, `productivity`, `linear`, `dark-first`, `minimal`, `developer-tools`

## Atoms

### Palette

**Linear** · `linear@1.0.0` · Proprietary — All Rights Reserved

> Linear's brand palette — a dark-first minimal identity built around a desaturated indigo-violet primary (#5E6AD2), Mercury White for light surfaces (#F4F5F8), and Nordic Gray for dark surfaces (#222326). The palette is deliberately restrained: one accent, two canvases, and a tight set of authored neutrals to support a near-monochrome product surface where typography, spacing, and motion carry the brand voice. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter Tight** `(inter-tight@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `linear-indigo` | Linear Indigo | `#5E6AD2` |
| `mercury-white` | Mercury White | `#F4F5F8` |
| `nordic-gray` | Nordic Gray | `#222326` |
| `linear-near-black` | Linear Near-Black | `#08090A` |
| `linear-surface-dark` | Linear Surface Dark | `#1A1B1F` |
| `linear-surface-elevated-dark` | Linear Surface Elevated (Dark) | `#2C2D31` |
| `linear-text-on-dark` | Linear Text on Dark | `#F7F8F8` |
| `linear-text-secondary-dark` | Linear Text Secondary (Dark) | `#B4BCD0` |
| `linear-text-tertiary-dark` | Linear Text Tertiary (Dark) | `#8A8F98` |
| `linear-text-on-light` | Linear Text on Light | `#0B0C10` |
| `linear-text-secondary-light` | Linear Text Secondary (Light) | `#3F4350` |
| `linear-text-tertiary-light` | Linear Text Tertiary (Light) | `#6B7280` |
| `linear-surface-light-elevated` | Linear Surface Elevated (Light) | `#FFFFFF` |
| `linear-indigo-hover` | Linear Indigo Hover | `#7A87F0` |
| `linear-success` | Linear Success | `#4CB782` |
| `linear-warning` | Linear Warning | `#F2C94C` |
| `linear-error` | Linear Error | `#E5484D` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `mercury-white` | `#F4F5F8` |
| `surface` | `linear-surface-light-elevated` | `#FFFFFF` |
| `surface-elevated` | `linear-surface-light-elevated` | `#FFFFFF` |
| `text-primary` | `linear-text-on-light` | `#0B0C10` |
| `text-secondary` | `linear-text-secondary-light` | `#3F4350` |
| `text-tertiary` | `linear-text-tertiary-light` | `#6B7280` |
| `primary` | `linear-indigo` | `#5E6AD2` |
| `primary-hover` | `linear-indigo-hover` | `#7A87F0` |
| `accent` | `linear-indigo` | `#5E6AD2` |
| `accent-hover` | `linear-indigo-hover` | `#7A87F0` |
| `warning` | `linear-warning` | `#F2C94C` |
| `warning-hover` | `linear-warning` | `#F2C94C` |
| `error` | `linear-error` | `#E5484D` |
| `success` | `linear-success` | `#4CB782` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `nordic-gray` | `#222326` |
| `surface` | `linear-surface-dark` | `#1A1B1F` |
| `surface-elevated` | `linear-surface-elevated-dark` | `#2C2D31` |
| `text-primary` | `linear-text-on-dark` | `#F7F8F8` |
| `text-secondary` | `linear-text-secondary-dark` | `#B4BCD0` |
| `text-tertiary` | `linear-text-tertiary-dark` | `#8A8F98` |
| `primary` | `linear-indigo` | `#5E6AD2` |
| `primary-hover` | `linear-indigo-hover` | `#7A87F0` |
| `accent` | `linear-indigo` | `#5E6AD2` |
| `accent-hover` | `linear-indigo-hover` | `#7A87F0` |
| `warning` | `linear-warning` | `#F2C94C` |
| `warning-hover` | `linear-warning` | `#F2C94C` |
| `error` | `linear-error` | `#E5484D` |
| `success` | `linear-success` | `#4CB782` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `nordic-gray` | `#222326` |
| `on-identity` | `linear-text-on-dark` | `#F7F8F8` |
| `background` | `nordic-gray` | `#222326` |
| `surface` | `linear-surface-dark` | `#1A1B1F` |
| `surface-elevated` | `linear-surface-elevated-dark` | `#2C2D31` |
| `text-primary` | `linear-text-on-dark` | `#F7F8F8` |
| `text-secondary` | `linear-text-secondary-dark` | `#B4BCD0` |
| `text-tertiary` | `linear-text-tertiary-dark` | `#8A8F98` |
| `primary` | `linear-indigo` | `#5E6AD2` |
| `primary-hover` | `linear-indigo-hover` | `#7A87F0` |
| `accent` | `linear-indigo` | `#5E6AD2` |
| `accent-hover` | `linear-indigo-hover` | `#7A87F0` |
| `success` | `linear-success` | `#4CB782` |
| `warning` | `linear-warning` | `#F2C94C` |
| `error` | `linear-error` | `#E5484D` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (7)

#### `colorChoice` → `logo.mark`

- **allowed:** linear-indigo, linear-text-on-dark, linear-text-on-light, mercury-white, nordic-gray
- **forbidden:** any-non-brand-color

> Linear's brand guidance prefers monochrome wordmark usage; the indigo primary is the only accent color sanctioned for the mark. Recoloring into off-brand hues violates Linear's brand-use policy ("do not alter these files in any way"). 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, cramped-clearspace

> Linear's brand guidelines instruct consumers to "provide plenty of space around Linear assets" and forbid alteration of the logo files. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Linear's near-white-on-Nordic-Gray reads at very high contrast, comfortably above AA. 

#### `variantSelection` → `logo`

- **use:** `wordmark-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces (the canonical Nordic Gray canvas), use the light-fill wordmark variant for legibility. 

#### `variantSelection` → `logo`

- **use:** `wordmark-dark`
- **when:** `backgroundColorScheme="light"`

> On Mercury White or other light surfaces, use the dark-fill wordmark variant. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** decorative-only, product-of-competitor, endorsement-implication

> Linear's brand guidance prohibits use of the mark in ways that imply endorsement or appear without permission on competing-product surfaces. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Linear's near-monochrome surfaces start well above AA; consumers must hold that floor. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Linear's wordmark and display lockups use medium-to-bold weights in the 500–700 band; lighter weights compromise the precise, institutional voice. 

### 💡 recommendation (2)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** nordic-gray, mercury-white

> The indigo primary is calibrated to read on both Nordic Gray and Mercury White. Pairing it with a third dominant hue breaks the calibrated quiet of Linear's identity. 

#### `numericRatio` → `typography.body.lineHeight`

- **min:** `1.5`
- **max:** `1.65`

> Linear's product surface reads with disciplined line-height in the 1.5–1.65 band. Tighter values feel cramped; looser values break the calm rhythm. 

## Provenance

- **Source:** <https://linear.app>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Linear and the Linear mark are trademarks of Linear Orbit, Inc. The primary brand color (#5E6AD2) is verified via the simple-icons brand database, which cites linear.app as the source. Mercury White (#F4F5F8) and Nordic Gray (#222326) are documented directly on Linear's brand page (linear.app/brand). Linear's brand guidance describes the primary as "a subtle desaturated blue," consistent with #5E6AD2. 
- **Imported:** `2026-05-17`
- **Notes:** Linear is a dark-first brand: the canonical product surface is Nordic Gray. The reference for body and display typography is Inter (for body) and Inter Tight (for tighter display lockups) — the closest open-source approximations to Linear's bespoke "Inter Display" cut. Both are already in the brand-atoms catalog. 

---

*Generated by the brand-atoms converter. Source: `linear@1.0.0` from the encyclopedia.*