---
title: "Linear — Changelog design system"
variant: extended
source: https://linear.app/changelog
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/linear-app-changelog)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Linear — Changelog · Design System

> Quiet dark canvas, precise product updates

**Theme:** dark · **Industry:** devtools · **Source:** https://linear.app/changelog · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Linear’s changelog pairs a nearly black canvas with restrained typography and a chronological stream of product updates. Compact navigation and search frame a narrow, image-led editorial column where interface previews support the release notes.

## North star

Keep the page quiet and readable: use a nearly black canvas, a narrow editorial column, and product imagery that supports rather than interrupts the changelog.

## Overview

The visual strategy is deliberately quiet: a nearly black canvas fills the page, while soft white headings and cool pale-gray body text establish a clear reading hierarchy. Muted borders separate navigation and content without introducing bright section bands. Inter Variable carries the interface and editorial copy, with compact captions, restrained negative tracking on headings, and comfortably open body leading. The page is organized as a chronological feed: dates sit in a slim left rail, while release titles, explanatory copy, lists, and product screenshots align in a narrow central column. Generous vertical gaps distinguish releases and subtopics, but the overall density remains editorial rather than sparse because each update can contain several features. Embedded product imagery stays dark and low-contrast, making the real interface details legible without competing with the text. Rounded search and signup controls provide the few prominent shapes; most content remains flat, with thin outlines used sparingly.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#08090a` | `--color-night-canvas` | brand | Dominant page canvas and navigation background; maintains the continuous dark field behind every release. |
| Cool Mist | `#d0d6e0` | `--color-cool-mist` | neutral | Pale cool text used mainly in badges and subdued interface details. |
| Graphite Line | `#34343a` | `--color-graphite-line` | semantic | Thin badge outlines and restrained separators against the dark canvas. |
| Soft Charcoal | `#151616` | `--color-soft-charcoal` | surface | Subtle card and media edging; present on embedded interface framing rather than broad page bands. |
| Paper Light | `#f7f8f8` | `--color-paper-light` | neutral | Primary headings, navigation labels, links, and selected accordion text. |
| Coal Detail | `#1b1c1d` | `--color-coal-detail` | surface | Small dark badge and navigation details, adding slight separation within the near-black interface. |

### Semantic aliases

`--color-canvas` → `#08090a` (Night Canvas) · `--color-text` → `#d0d6e0` (Cool Mist) · `--color-text-muted` → `#f7f8f8` (Paper Light) · `--color-border` → `#34343a` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#d0d6e0` | `#08090a` | 13.64:1 | AAA |
| `#f7f8f8` | `#08090a` | 18.73:1 | AAA |

### Gradients

- `linear-gradient(to top, lab(0 0 0 / 0.5) 0px, lab(0 0 0 / 0.45) 10px, lab(0 0 0 / 0.35) 24px, lab(0 0 0 / 0.25) 40px, lab(0 0 0 / 0.15) 58px, lab(0 0 0 / 0.08) 78px, lab(0 0 0 / 0.03) 98px, lab(0 0 0 / 0.005) 112px, rgba`
- `linear-gradient(rgba(11, 11, 11, 0.8) 0%, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 510, 590 | Headings, body copy, navigation, links, captions, and controls throughout the page. | Inter |

- **Inter Variable:** Use regular body and nav weights, medium-to-semibold headings, and subtle negative tracking on display headings; casing stays natural.

### Type scale — Augmented Fourth (ratio ≈ 1.413, base 17px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 510 | 1 | -0.022em | — | Inter Variable | Page heading introducing the Now changelog feed. |
| h2 | 32px | 590 | 1.13 | -0.022em | — | Inter Variable | Primary release titles in the chronological stream. |
| h3 | 24px | 590 | 1.33 | -0.012em | — | Inter Variable | Feature titles nested within release entries. |
| body | 17px | 400 | 1.6 | 0 | — | Inter Variable | Release descriptions, explanatory paragraphs, and lists. |
| caption | 13px | 510 | 1.6 | 0 | — | Inter Variable | Compact dates, metadata, and small labels. |
| button | 15px | 510 | 1.6 | -0.011em | — | Inter Variable | Signup and compact interactive controls. |
| nav | 15px | 400 | 1.6 | -0.011em | — | Inter Variable | Global navigation and changelog category links. |
| link | 17px | 400 | 1.6 | 0 | — | Inter Variable | Inline documentation and related-resource links. |
| code | 15px | 400 | 1.3 | 0 | — | Berkeley Mono | Occasional inline technical or code references. |

OpenType features in use: `"cv01", "ss03"`, `"cv01", "ss01", "ss03"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 6, 8, 12, 16, 20, 24, 32, 48, 56 px.
- Section rhythm 72px · element gap 6px · card padding — · max content width 624px.

A slim global header spans the viewport, followed by a broad page introduction with category links and right-aligned search. Below a hairline divider, releases form a single-column timeline: dates occupy a narrow left rail, while titles and content align to a narrow central reading measure. The measured content maximum is 624px. Keep headings and paragraphs left aligned, use generous section gaps between dated releases, and tighter spacing within each release. The feed is comfortable but information-rich, with lists and media interleaved.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `8px` · badge `9999px` · nav `9999px` · xs `4px` · sm `5px` · md `8px` · pill `9999px`
- Shadow `hairline` (text): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(62, 62, 68) 0px 0px 0px 1px`
- Shadow `sm` (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`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

The page is mostly flat, with no strong card-shadow system or alternating section surfaces. Thin dark-gray hairlines and subtle media edges define boundaries. Controls use restrained inset and soft shadow treatment; rounded search and signup elements provide depth without lifting the content feed off the canvas.

## Imagery

Use embedded product-interface previews rather than lifestyle photography. Images are dark, low-contrast screenshots or diagrams, framed within the content column and kept subordinate to release titles and copy. Some releases include video with native-style playback controls. Treat screenshots as product evidence: preserve legible interface detail, avoid decorative crops, and do not introduce unrelated illustration colors.

## Components

### Global navigation

Compact horizontal header with brand mark, subdued links, login, and a pale rounded signup control.

### Changelog masthead

Large Now heading, category links, search field, and notification icon above a subtle horizontal divider.

### Release timeline

Dated entries pair a small date rail with a wider content column, prominent release title, and stacked update material.

### Product preview

Dark interface screenshots and diagrams appear inline with release copy, using restrained framing and rounded media corners.

### Feature accordion

Compact rows such as Fixes and Improvements use minimal borders or separators and a small trailing chevron.

### Search control

Dark pill-shaped field with inset treatment, muted placeholder text, and a search icon.

### Measured component styles

- **Primary button** (“Sign up”): background #e5e5e6 · text #08090a · border 1px solid #e5e5e6 · radius 9999px · padding 0px 12px · 510 13px Inter Variable · shadow rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0
- **Secondary button** (“Search…”): background #141516 · text #8a8f98 · radius 100px · padding 0px 16px · 400 14px Inter Variable · shadow rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1
- **Link** (“GitHub-native stacks”): transparent background · text #f7f8f8 · radius 0px · padding 0px · 400 17px Inter Variable
- **Card** (“Elapsed 00:00 Seek to: 00:00 / Duration ”): transparent background · text #f7f8f8 · border 1px solid #151616 · radius 8px · padding 0px · 400 17px Inter Variable
- **Badge**: transparent background · text #d0d6e0 · border 1px solid #34343a · radius 9999px · padding 0px 8px · 510 13px Inter Variable
- **Navigation item** (“Product Resources Customers Pricing Now ”): transparent background · text #f7f8f8 · radius 0px · padding 0px · 400 16px Inter Variable

## Do

- Use #08090a as the continuous page canvas.
- Keep the reading content in a narrow, left-aligned editorial column.
- Distinguish releases by date and generous vertical rhythm.
- Use #f7f8f8 for prominent headings and links.
- Keep product screenshots dark and relevant to each update.
- Use borders sparingly and keep them low contrast.

## Don't

- Do not add bright section backgrounds or colorful gradients.
- Do not turn each update into a floating elevated card.
- Do not center the release copy or stretch it across the viewport.
- Do not use decorative stock photography.
- Do not make metadata compete with release titles.
- Do not introduce extra palette colors for product mockups.

## Agent prompt

Build a new page in Linear’s dark, editorial product-update style. Use Night Canvas (#08090a) as the continuous background, Paper Light (#f7f8f8) for headings and links, and Cool Mist (#d0d6e0) for quieter labels; reserve Graphite Line (#34343a), Soft Charcoal (#151616), and Coal Detail (#1b1c1d) for subtle outlines and small surfaces. Use Inter for the interface and prose, with restrained negative heading tracking and readable body leading. Create a compact horizontal header, then a masthead with category navigation and a pill-shaped search field. Present updates chronologically in a narrow, left-aligned content column with dates in a slim rail. Use generous gaps between releases, tighter spacing within them, and inline dark product screenshots or video only when relevant. Keep the page flat, calm, and precise.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | category-nav | Wide masthead beneath global header; title and category links left, search and notification control right. | category filtering, changelog search, notification access | large page heading, muted category links, dark pill search, subtle divider |
| 2 | timeline | Single-column release feed with a slim date rail beside the main content column. | chronological browsing, inline documentation links, expandable update rows | date markers, release headings, dark product previews, compact accordions |
| 3 | timeline | Continues the dated single-column feed with stacked subfeatures and occasional interface diagrams. | scan by release date, read nested feature notes, follow documentation links | timeline date rail, subfeature headings, inline diagrams, minimal separators |
| 4 | timeline | Dated release entry with an inline video and long-form explanatory content in one narrow column. | play product demo, read workflow details, scan trigger lists | video preview, feature subheads, bulleted triggers, dark callout screenshot |
| 5 | timeline | Chronological entry with successive feature blocks, inline screenshots, and a final compact update list. | browse related product updates, follow documentation links, scan feature descriptions | release date rail, inline UI previews, stacked feature headings, accordion rows |
| 6 | timeline | Dated release title and dark product image lead into a compact continuation of the chronological feed. | browse release details, view product demonstration | date marker, multiline release heading, dark interface preview, inline video controls |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/linear-app-changelog