Linear以克制的深色底、清晰字体和大幅产品界面预览，呈现精致的产品开发平台。页面将编辑式叙事与真实软件界面结合，并用明亮的客户评价卡片和简洁行动按钮形成重点对比。
North star · Keep the near-black canvas and precise, restrained typography dominant; let detailed product UI provide the color and visual evidence.
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.
配色 点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
Obsidian Canvas
#08090a
Dominant page canvas, navigation background, and dark gradient base.
Soft White
#f7f8f8
Primary headings, prominent copy, and high-contrast interface text.
强调色
Apricot Signal
#f7bf8b
Occasional accent text; a minor highlight, not a page-wide color.
Glacier Blue
#b2d5ff
Gradient color in isolated link or testimonial-adjacent treatments.
Lilac Haze
#dfd1ff
Pairs with glacier blue in a restrained gradient detail.
Lime Spotlight
#e4f222
Bright testimonial-card treatment and isolated interface highlight, not the main CTA palette.
Orchid Glint
#f79ce0
Rare accent text within the measured palette.
Warm Champagne
#ffdf9f
Rare warm accent text within the measured palette.
表层色
Lifted Charcoal
#0f1011
Raised card and product-interface surface against the main canvas.
Deep Panel
#161718
Secondary raised panels, badges, and compact control surfaces.
中性色
Divider Charcoal
#1c1d1e
Fine borders and restrained separators across sections and controls.
Muted Graphite
#62666d
Low-priority text details, especially in dense interface and footer areas.
Panel Outline
#222324
Subtle borders around product cards, badges, and interface elements.
Dim Link Gray
#6b6b6c
Muted link treatment appearing in subtle gradient or interface details.
Card Edge
#262728
Borders and outlines that separate dark cards from their surroundings.
Smoke Border
#2c2d2e
Occasional control and card outlines in the measured interface.
功能色
Cool Mist
#d0d6e0
Secondary headings, body copy, and subdued interface labels.
Slate Text
#8a8f98
Navigation, footer links, captions, and lower-emphasis copy.
文字 背景 对比度 WCAG #f7f8f8 Soft White#08090a Obsidian Canvas18.73:1 AAA #f7f8f8 Soft White#0f1011 Lifted Charcoal17.9:1 AAA #f7f8f8 Soft White#161718 Deep Panel16.87:1 AAA #d0d6e0 Cool Mist#08090a Obsidian Canvas13.64:1 AAA #d0d6e0 Cool Mist#0f1011 Lifted Charcoal13.04:1 AAA #d0d6e0 Cool Mist#161718 Deep Panel12.29:1 AAA
字体 字号阶梯：Augmented Fourth（比例约 1.437，正文 15px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Inter Variable 网络字体 · 字重 400 / 510 / 300 / 500 / 590 · 占比 84%
免费替代：Inter
Headings, body copy, navigation, and buttons
Aa 设计
Berkeley Mono 网络字体 · 字重 400 · 占比 16%
免费替代：IBM Plex Mono
Code, technical labels, and compact metadata
角色 示例 字号 字重 行高 字距 特大标题 Large homepage statement and prominent editorial display copy.
Linear
64px 510 1 -0.022em 一级标题 Primary hero heading.
Linear
48px 510 1 -0.022em 二级标题 Section and major feature headings.
Linear
32px 400 1.13 -0.022em 三级标题 Subsection headings within feature content.
The quick brown fox 敏捷的狐狸
24px 400 1.33 -0.012em 正文 Supporting descriptions and testimonial copy.
The quick brown fox 敏捷的狐狸
15px 400 1.6 -0.011em 辅助文字 Compact monospaced captions and technical metadata.
The quick brown fox 敏捷的狐狸
14px 400 1.71 0 按钮 Small, medium-weight interface action labels.
The quick brown fox 敏捷的狐狸
12px 510 1.17 0 导航 Navigation links and compact menu labels.
The quick brown fox 敏捷的狐狸
13px 400 1.5 0 代码 Code examples and technical interface content.
const style = 1;
14px 400 1.71 0
间距与布局 基准单位 4px · 密度：宽松
128px 版块间距
8px 元素间距
11px 卡片内边距
1310px 内容最大宽度
2px
4px
5px
6px
7px
8px
10px
11px
12px
14px
16px
24px
32px
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.
圆角与层次 hairline · text, card
inset · other
lg · card
inset · other
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.
组件 下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
页面版块 共 18 个版块，按页面从上到下排列，每个都标了类型、布局和交互套路。
该做与不该做 ✓ 该做 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. ✕ 不该做 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. 给 AI 的提示词 想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
复制 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.
DESIGN.md Tailwind v4 CSS 变量 Design Tokens
---
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 (## Colors
| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | ` | `--color-obsidian-canvas` | brand | Dominant page canvas, navigation background, and dark gradient base. |
| Lifted Charcoal | ` | `--color-lifted-charcoal` | surface | Raised card and product-interface surface against the main canvas. |
| Cool Mist | ` | `--color-cool-mist` | semantic | Secondary headings, body copy, and subdued interface labels. |
| Slate Text | ` | `--color-slate-text` | semantic | Navigation, footer links, captions, and lower-emphasis copy. |
| Divider Charcoal | ` | `--color-divider-charcoal` | neutral | Fine borders and restrained separators across sections and controls. |
| Muted Graphite | ` | `--color-muted-graphite` | neutral | Low-priority text details, especially in dense interface and footer areas. |
| Panel Outline | ` | `--color-panel-outline` | neutral | Subtle borders around product cards, badges, and interface elements. |
| Soft White | ` | `--color-soft-white` | brand | Primary headings, prominent copy, and high-contrast interface text. |
| Dim Link Gray | ` | `--color-dim-link-gray` | neutral | Muted link treatment appearing in subtle gradient or interface details. |
| Deep Panel | ` | `--color-deep-panel` | surface | Secondary raised panels, badges, and compact control surfaces. |
| Card Edge | ` | `--color-card-edge` | neutral | Borders and outlines that separate dark cards from their surroundings. |
| Apricot Signal | ` | `--color-apricot-signal` | accent | Occasional accent text; a minor highlight, not a page-wide color. |
| Glacier Blue | ` | `--color-glacier-blue` | accent | Gradient color in isolated link or testimonial-adjacent treatments. |
| Lilac Haze | ` | `--color-lilac-haze` | accent | Pairs with glacier blue in a restrained gradient detail. |
| Smoke Border | ` | `--color-smoke-border` | neutral | Occasional control and card outlines in the measured interface. |
| Lime Spotlight | ` | `--color-lime-spotlight` | accent | Bright testimonial-card treatment and isolated interface highlight, not the main CTA palette. |
| Orchid Glint | ` | `--color-orchid-glint` | accent | Rare accent text within the measured palette. |
| Warm Champagne | ` | `--color-warm-champagne` | accent | Rare warm accent text within the measured palette. |
### Semantic aliases
`--color-canvas` → ` (Obsidian Canvas) · `--color-surface` → ` (Lifted Charcoal) · `--color-surface-2` → ` (Deep Panel) · `--color-text` → ` (Soft White) · `--color-text-muted` → ` (Cool Mist) · `--color-text-subtle` → ` (Slate Text) · `--color-border` → ` (Divider Charcoal) · `--color-accent` → ` (Apricot Signal) · `--color-accent-2` → ` (Orchid Glint) · `--color-accent-3` → ` (Warm Champagne)
### Contrast (WCAG 2.x)
| Text | Background | Ratio | Level |
|---|---|---|---|
| ` | ` | 18.73:1 | AAA |
| ` | ` | 17.9:1 | AAA |
| ` | ` | 16.87:1 | AAA |
| ` | ` | 13.64:1 | AAA |
| ` | ` | 13.04:1 | AAA |
| ` | ` | 12.29:1 | AAA |
| ` | ` | 6.13:1 | AA |
| ` | ` | 5.86:1 | AA |
| ` | ` | 5.52:1 | AA |
| ` | ` | 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 ## 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 (## 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 
