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

# Linear · Design System

> Quiet darkness, precise product craft

**Theme:** dark · **Industry:** productivity · **Source:** https://linear.app/ · **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 presents a polished product-development platform through a restrained dark canvas, crisp typography, and expansive product interface previews. The homepage balances editorial storytelling with realistic software UI, then uses bright testimonial cards and compact calls to action as deliberate contrast.

## North star

Keep the near-black canvas and precise, restrained typography dominant; let detailed product UI provide the color and visual evidence.

## Overview

The page is anchored by a near-black canvas (#08090a), with slightly lifted charcoal surfaces for interface previews and cards. Pale near-white headings carry the strongest contrast; muted gray copy keeps supporting information legible without competing. Fine dark borders define panels and section transitions rather than relying on heavy shadows. Inter Variable supplies a contemporary, tightly tracked sans-serif voice, while Berkeley Mono appears in code, labels, and compact technical details. The layout is spacious and editorial: a large left-aligned hero leads into broad product demonstrations, alternating feature narratives, and a structured footer. Interface imagery is treated as the main visual proof, framed in dark, layered panels with fine separators. Accent colors appear sparingly in interface details and gradients; vivid yellow and pastel testimonial areas are isolated content treatments, not the base brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#08090a` | `--color-obsidian-canvas` | brand | Dominant page canvas, navigation background, and dark gradient base. |
| Lifted Charcoal | `#0f1011` | `--color-lifted-charcoal` | surface | Raised card and product-interface surface against the main canvas. |
| Cool Mist | `#d0d6e0` | `--color-cool-mist` | semantic | Secondary headings, body copy, and subdued interface labels. |
| Slate Text | `#8a8f98` | `--color-slate-text` | semantic | Navigation, footer links, captions, and lower-emphasis copy. |
| Divider Charcoal | `#1c1d1e` | `--color-divider-charcoal` | neutral | Fine borders and restrained separators across sections and controls. |
| Muted Graphite | `#62666d` | `--color-muted-graphite` | neutral | Low-priority text details, especially in dense interface and footer areas. |
| Panel Outline | `#222324` | `--color-panel-outline` | neutral | Subtle borders around product cards, badges, and interface elements. |
| Soft White | `#f7f8f8` | `--color-soft-white` | brand | Primary headings, prominent copy, and high-contrast interface text. |
| Dim Link Gray | `#6b6b6c` | `--color-dim-link-gray` | neutral | Muted link treatment appearing in subtle gradient or interface details. |
| Deep Panel | `#161718` | `--color-deep-panel` | surface | Secondary raised panels, badges, and compact control surfaces. |
| Card Edge | `#262728` | `--color-card-edge` | neutral | Borders and outlines that separate dark cards from their surroundings. |
| Apricot Signal | `#f7bf8b` | `--color-apricot-signal` | accent | Occasional accent text; a minor highlight, not a page-wide color. |
| Glacier Blue | `#b2d5ff` | `--color-glacier-blue` | accent | Gradient color in isolated link or testimonial-adjacent treatments. |
| Lilac Haze | `#dfd1ff` | `--color-lilac-haze` | accent | Pairs with glacier blue in a restrained gradient detail. |
| Smoke Border | `#2c2d2e` | `--color-smoke-border` | neutral | Occasional control and card outlines in the measured interface. |
| Lime Spotlight | `#e4f222` | `--color-lime-spotlight` | accent | Bright testimonial-card treatment and isolated interface highlight, not the main CTA palette. |
| Orchid Glint | `#f79ce0` | `--color-orchid-glint` | accent | Rare accent text within the measured palette. |
| Warm Champagne | `#ffdf9f` | `--color-warm-champagne` | accent | Rare warm accent text within the measured palette. |

### Semantic aliases

`--color-canvas` → `#08090a` (Obsidian Canvas) · `--color-surface` → `#0f1011` (Lifted Charcoal) · `--color-surface-2` → `#161718` (Deep Panel) · `--color-text` → `#f7f8f8` (Soft White) · `--color-text-muted` → `#d0d6e0` (Cool Mist) · `--color-text-subtle` → `#8a8f98` (Slate Text) · `--color-border` → `#1c1d1e` (Divider Charcoal) · `--color-accent` → `#f7bf8b` (Apricot Signal) · `--color-accent-2` → `#f79ce0` (Orchid Glint) · `--color-accent-3` → `#ffdf9f` (Warm Champagne)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f7f8f8` | `#08090a` | 18.73:1 | AAA |
| `#f7f8f8` | `#0f1011` | 17.9:1 | AAA |
| `#f7f8f8` | `#161718` | 16.87:1 | AAA |
| `#d0d6e0` | `#08090a` | 13.64:1 | AAA |
| `#d0d6e0` | `#0f1011` | 13.04:1 | AAA |
| `#d0d6e0` | `#161718` | 12.29:1 | AAA |
| `#8a8f98` | `#08090a` | 6.13:1 | AA |
| `#8a8f98` | `#0f1011` | 5.86:1 | AA |
| `#8a8f98` | `#161718` | 5.52:1 | AA |
| `#f7bf8b` | `#08090a` | 12.13:1 | AAA |

### Gradients

- `radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%), linear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)`
- `radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)`
- `linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)), none`
- `linear-gradient(0deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%), linear-gradient(rgb(178, 213, 255) 0%, rgb(223, 209, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 510, 300, 500, 590 | Headings, body copy, navigation, and buttons | Inter |
| Berkeley Mono | `--font-mono` | webfont | 400 | Code, technical labels, and compact metadata | IBM Plex Mono |

- **Inter Variable:** Use restrained medium weights; display headings are tightly tracked and sentence case, with concise UI labels.
- **Berkeley Mono:** Reserve for code and data-like details; use regular weight and avoid decorative emphasis.

### Type scale — Augmented Fourth (ratio ≈ 1.437, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 510 | 1 | -0.022em | — | Inter Variable | Large homepage statement and prominent editorial display copy. |
| h1 | 48px | 510 | 1 | -0.022em | — | Inter Variable | Primary hero heading. |
| h2 | 32px | 400 | 1.13 | -0.022em | — | Inter Variable | Section and major feature headings. |
| h3 | 24px | 400 | 1.33 | -0.012em | — | Inter Variable | Subsection headings within feature content. |
| body | 15px | 400 | 1.6 | -0.011em | — | Inter Variable | Supporting descriptions and testimonial copy. |
| caption | 14px | 400 | 1.71 | 0 | — | Berkeley Mono | Compact monospaced captions and technical metadata. |
| button | 12px | 510 | 1.17 | 0 | — | Inter Variable | Small, medium-weight interface action labels. |
| nav | 13px | 400 | 1.5 | 0 | — | Inter Variable | Navigation links and compact menu labels. |
| code | 14px | 400 | 1.71 | 0 | — | Berkeley Mono | Code examples and technical interface content. |

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

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 7, 8, 10, 11, 12, 14, 16, 24, 32 px.
- Section rhythm 128px · element gap 8px · card padding 11px · max content width 1310px.

Use a centered content frame capped at the measured 1310px, with broad side margins and spacious vertical section intervals. The hero is left-aligned and pairs a large statement with a single muted supporting line; product demonstrations then occupy broad, carefully framed areas. Feature sections alternate concise text blocks and wide UI showcases, often in two-column compositions. Keep card padding compact relative to the surrounding whitespace. Maintain a low-density editorial rhythm, with thin separators marking key transitions and a multi-column footer.

## Shape & elevation

- Radius: button `8px` · card `9px` · media `50%` · badge `4px` · nav `9999px` · link `4px` · xs `2px` · sm `4px` · md `5px` · lg `6px` · xl `8px` · 2xl `9px` · pill `9999px`
- Shadow `hairline` (text, card): `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.25) 0px 2px 32px 0px`
- Shadow `inset-2` (other): `rgba(255, 255, 255, 0.08) 0px 0px 0px 0.5px inset`
- Shadow `inset-3` (button, other): `rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset`
- Shadow `inset-4` (section): `rgb(35, 37, 42) 0px 0px 0px 1px inset`
- Motion: standard transition `0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)` on interactive elements.

The page is mostly flat, with thin charcoal borders defining the UI and cards. Product-preview cards gain depth through layering and restrained dark shadows rather than prominent glow. Inset highlights and faint surface changes distinguish controls, while section boundaries stay quiet.

## Imagery

Product imagery is predominantly detailed software UI: issue lists, roadmaps, code, and AI-assisted workflows rendered in dark interface panels. Use cropped, layered product screenshots or faithful UI mockups rather than stock photography. Small geometric illustrations and partner marks support the story without overpowering it. Treat bright testimonial blocks and colorful UI signals as isolated moments against the dark page.

## Components

### Top navigation

Compact inline links on the dark canvas, with subdued secondary text and a bright rounded Sign up action.

### Hero statement

Large left-aligned heading, short muted supporting sentence, and a small contextual link.

### Product preview

Large, dark interface showcase with fine outlines, nested panels, compact labels, and realistic product details.

### Feature introduction

A concise section heading and explanatory copy arranged in a restrained split layout, followed by product UI.

### Feature chips

Compact feature labels and plus-marked links beneath a demonstration area.

### Testimonial cards

Large high-contrast quote panels with pale blue and vivid yellow treatments, visually distinct from the dark canvas.

### Footer

Thin top divider, brand mark, and compact multi-column groups of muted links.

### 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** (“Performance”): transparent background · text #d0d6e0 · border 1px solid #2e2e32 · radius 16px · padding 0px 11px 0px 7px · 400 12px Inter Variable
- **Link** (“Learn more →”): transparent background · text #f7f8f8 · radius 4px · padding 0px · 400 16px Inter Variable
- **Input** (“import React from 'react' import { View,”): transparent background · radius 0px · padding 0px 32px 0px 63.8px · 400 14px Berkeley Mono
- **Card** (“ENG-2085 Reduce UI flicker during autono”): transparent background · text #f7f8f8 · border 1px solid #222324 · radius 9px · padding 8px 10px 12px 12px · 400 16px Inter Variable
- **Badge** (“Opus 5”): transparent background · text #8a8f98 · border 1px solid #222324 · radius 4px · padding 1px 4px · 400 11px Inter Variable
- **Navigation item** (“Product Resources Customers Pricing Now ”): transparent background · text #f7f8f8 · radius 0px · padding 0px · 400 16px Inter Variable

## Do

- Keep the near-black canvas dominant.
- Use Soft White for primary headings.
- Reserve Cool Mist and Slate Text for supporting hierarchy.
- Frame software previews with thin charcoal borders.
- Pair Inter with mono details only where functional.
- Keep accent color limited to isolated highlights.
- Preserve generous space between editorial sections.

## Don't

- Do not turn the page into a bright, colorful dashboard.
- Do not use thick borders or heavy shadows everywhere.
- Do not make every paragraph high contrast.
- Do not use accent colors as broad section backgrounds.
- Do not replace product UI with generic stock imagery.
- Do not crowd the hero or feature sections with extra copy.

## Agent prompt

Build a new page in Linear’s visual style: use Obsidian Canvas (#08090a) as the dominant background, with Lifted Charcoal (#0f1011) and Deep Panel (#161718) for restrained interface surfaces. Set headings in Inter, using Soft White (#f7f8f8) for primary emphasis and Cool Mist (#d0d6e0) or Slate Text (#8a8f98) for secondary copy. Use Berkeley Mono or a close monospace substitute only for code and technical labels. Favor spacious editorial sections, left-aligned statements, compact copy, and realistic dark product-interface showcases. Define panels with fine borders such as #1c1d1e and #222324; keep shadows subtle. Use accents like Glacier Blue (#b2d5ff), Lilac Haze (#dfd1ff), or Lime Spotlight (#e4f222) sparingly and only as isolated details. Avoid generic stock imagery and bright full-page backgrounds.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and supporting line with a small contextual link. | Brand positioning, Supporting description | Large sans-serif heading, Muted copy, Text link |
| 2 | product-showcase | Broad, two-column application preview with full-bleed product framing. | Product proof, Issue workflow preview | Dark application shell, Nested panels, Fine outlines |
| 3 | logo-cloud | Compact brand marks followed by a short positioning statement. | Social proof, Brand recognition | Monochrome logos, Editorial copy |
| 4 | feature-grid | Introductory copy above three evenly distributed illustrated principles. | Principle overview, Scannable feature grouping | Fine-line illustrations, Compact captions |
| 5 | feature-split | Feature heading and description arranged in a two-column introduction. | Feature explanation, Learn more link | Text split, Muted link |
| 6 | product-showcase | Multi-column product interface collage beneath the feature introduction. | Workflow visualization, Interface evidence | Overlapping dark panels, Issue cards, Compact controls |
| 7 | feature-split | Two-column heading and supporting paragraph with a contextual link. | Feature explanation, Learn more link | Editorial heading, Muted copy |
| 8 | product-showcase | Two-column roadmap and workflow preview. | Planning workflow, Timeline exploration | Timeline interface, Dense data visualization |
| 9 | category-nav | Compact feature label and grouped plus-marked navigation links. | Feature discovery, Related navigation | Small text links, Plus markers |
| 10 | feature-split | Split feature heading and explanatory copy with a text link. | Feature explanation, Learn more link | Two-column text, Low-contrast link |
| 11 | product-showcase | Four-column sequence of agent and product interface panels. | Agent task preview, Workflow comparison | Dark cards, Compact interface text, Layered panels |
| 12 | feature-split | Heading and explanatory copy in a split introduction. | Feature explanation, Learn more link | Editorial text block, Subtle divider |
| 13 | product-showcase | Two-column issue list and code review interface. | Review workflow, Issue-to-code context | Code panel, Issue list, Compact controls |
| 14 | category-nav | Compact feature label with grouped related links. | Feature discovery, Related navigation | Small links, Plus markers |
| 15 | content-feed | Four-column update feed beneath a section heading. | Recent updates, Read more | Small cards, Fine horizontal rules |
| 16 | testimonials | Two contrasting quote cards with supporting customer context. | Customer proof, Quote-led storytelling | Pale blue card, Lime card, Large quotations |
| 17 | cta | Centered headline and two concise action links. | Get started, Contact sales | Centered display type, Rounded primary button |
| 18 | footer | Multi-column link groups below a thin horizontal divider. | Site navigation, Resource discovery | Brand mark, Muted link columns, Fine divider |

## Source CSS custom properties (selected)

```css
--tweet-border: 1px solid #cfd9de;
--tweet-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--tweet-font-color: #0f1419;
--tweet-font-color-secondary: #536471;
--tweet-bg-color: #fff;
--tweet-bg-color-hover: #f7f9f9;
--tweet-quoted-bg-color-hover: #00000008;
--tweet-color-blue-primary: #1d9bf0;
--tweet-color-blue-primary-hover: #1a8cd8;
--tweet-color-blue-secondary: #006fd6;
--tweet-color-blue-secondary-hover: #006fd61a;
--tweet-color-red-primary: #f91880;
--tweet-color-red-primary-hover: #f918801a;
--tweet-color-green-primary: #00ba7c;
--tweet-color-green-primary-hover: #00ba7c1a;
--tweet-verified-old-color: #829aab;
--btn-highlight-bg: transparent;
--btn-highlight-color: inherit;
--btn-overlay-shadow: none;
--btn-overlay-shadow-hover: none;
--editor-bg-border-thin: #323439;
--editor-block-spacing: 1rem;
--editor-block-spacing-large: calc(1.375 * 1rem);
--editor-block-spacing-small: calc(.375 * 1rem);
--editor-block-radius: 6px;
--editor-last-invisible-paragraph-spacing: 10px;
--editor-font-weight: 400;
--editor-letter-spacing: -.00666667em;
--editor-font-size: .9375rem;
--editor-text-color: #e4e5e9;
--editor-surface-background: #1e2022;
--focus-ring-color: #5e69d1;
--icon-color: initial;
--icon-default-color: initial;
--icon-replacement-color: initial;
--link-text-decoration: none;
--selection-bg: color-mix(in srgb, #9c9da1 20%, transparent);
--selection-bg-active: color-mix(in srgb, #5e69d1 40%, transparent);
```

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