# Linear · Design system migration spec

> Source: https://linear.app  ·  Curated by OpenDesign  ·  en

> Linear's design is a masterclass in modern, high-precision dark mode for professional tools.

## 1. Identity DNA

Linear's design system is engineered with the focused discipline of a high-end jet cockpit, where every element serves a purpose and nothing is decorative. The system is built on a foundation of precision, efficiency, and professional minimalism, creating a high-performance environment for product development teams.

**One-liner:** A dark, precision-focused SaaS design system for developer tools.
**Keywords:** precision · velocity · technical clarity · structured · AI-native
**Analogy:** A high-end watch instrument for software teams—dark, precise, zero decoration.

## 2. Color

The color system operates on a principle of extreme contrast, using a strict monochrome palette to emphasize clarity and focus. Near-black backgrounds, crisp white text, and muted grays form a hierarchy that guides the eye without distraction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#08090A` | main background |
| `--bg-soft` | `rgba(255,255,255,0.05)` | card background |
| `--bg-quiet` | `rgba(255,255,255,0.02)` | quiet area |
| `--ink` | `#F7F8F8` | body text |
| `--ink-soft` | `#D0D6E0` | secondary text |
| `--muted` | `#62666D` | placeholder |
| `--muted-soft` | `#8A8F98` | weak hint |
| `--line` | `rgba(255,255,255,0.08)` | divider |

**Color principle:** Extreme contrast for focus, with subtle noise and semi-transparent layers to create depth.

Color is used not for expression, but as a tool for precision and functional hierarchy.

## 3. Typography

Typographic voice is conveyed through clean grotesque-sans fonts, with tight tracking and bold weights creating a direct, confident statement. The scale serves clear functional roles, from impactful hero headlines to legible body text.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -1px | Primary hero headlines |
| body | 16px | 1.5 | 400 | 0px | General body text and UI labels |
| mono | 13px | 1.5 | 400 | 0px | Code snippets, issue IDs, and terminal output |

**Type rules:**
- Use tight negative tracking on large headlines.
- Maintain 400 weight for body text to keep the interface light.
- Use mono fonts exclusively for technical references and identifiers.

## 4. Spacing

Rhythm is established through generous whitespace and a tight vertical cadence in navigation, creating a measured, efficient flow through the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict 4px grid with tight component spacing.

## 5. Surfaces

Surfaces are defined by extreme minimalism, relying on subtle, thin borders for separation rather than shadows or depth effects. This approach maintains a flat, precise field where content remains the primary focus.

- **Radius:** sm 4px · md 6px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 1.2px 0px 0px rgba(0,0,0,0.03)
  - 0px 2px 4px 0px rgba(0,0,0,0.4)
  - inset 0px 0px 12px 0px rgba(0,0,0,0.2)
- **Borders:** 1px solid rgba(255,255,255,0.08)

## 6. Layout

The layout skeleton is built on a standard top navigation structure, providing immediate access to core functions. A large, left-aligned hero section establishes a strong, focused entry point, using space to command attention.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Dense, full-width dark canvas with nested elevated panels.

## 7. Motion & Interaction

Motion is philosophy of speed and subtlety, with fast, micro-interactions that acknowledge user input without lingering. Transitions are smooth but rapid, reinforcing the system's high-performance character.

- **Durations:** micro 150ms · small 160ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Subtle fade-in and filter transitions on hover.
  - Smooth background color shifts.
  - Micro-interactions on cursor and focus states.

- **Hover:** Slight brightness increase or background opacity shift.
- **Click:** Immediate state change with subtle scale or color feedback.
- **Transition:** Smooth 160ms ease-out for most interactive elements.
- **Keyboard:** Clear focus outlines and logical tab order for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, precise, and confident, matching the system's design with direct statements about product development. It avoids playful language and excessive decoration, favoring clarity and functional communication.

- **Tone:** Technical, precise, and confident.
- **Headline style:** Direct, action-oriented, and authoritative.
- **CTA style:** Minimalist and clear, often just a simple text link or a low-emphasis button.
- **Avoid:** Marketing fluff / Vague or ambiguous terminology / Excessive exclamation points / Playful or casual language

### Don'ts
- ❌ Don't use high-saturation colors — screenshot shows a strictly grayscale/white palette.
- ❌ Don't use rounded, playful shapes — screenshot shows sharp or very subtly rounded corners.
- ❌ Don't use serif or decorative fonts — screenshot shows a clean, geometric sans-serif.
- ❌ Don't use bright, colorful gradients — screenshot shows a dark, flat, grain-textured background.
- ❌ Don't use thick, heavy borders — screenshot shows hairline 1px dividers.
- ❌ Don't use complex, multi-layered shadows — screenshot shows only subtle, low-opacity drop shadows.

The system deliberately excludes bright, saturated colors, decorative serifs, heavy shadows, and centered hero text, enforcing a disciplined, minimalist aesthetic.

## System Prompt (paste into AI tool)

```
Design a high-precision SaaS interface for developer tools and AI-era productivity. The system uses a deep dark mode palette, primarily #08090A for backgrounds with white #F7F8F8 text for high contrast. Typography is clean and geometric, with negative tracking for large headlines. Key hex colors are #08090A, #F7F8F8, and #62666D for muted elements. Do not use high-saturation colors or playful, rounded shapes; the aesthetic must remain sharp, technical, and professional. The layout is dense and full-width, utilizing semi-transparent panels to create depth. Ensure transitions are fast and subtle to maintain a sense of velocity.
```
