Linear 更新日志以近黑色画布和克制的文字，按时间顺序呈现产品动态。紧凑的导航与搜索围绕一列窄幅内容展开，界面预览为每条更新提供直观说明。
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.
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.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
功能色
页面底色 · Night Canvas主文字 · Cool Mist次要文字 · Paper Light描边 · Graphite Line
Headings, body copy, navigation, links, captions, and controls throughout the page.
角色
示例
字号
字重
行高
字距
一级标题
Page heading introducing the Now changelog feed.
Linear
48px
510
1
-0.022em
二级标题
Primary release titles in the chronological stream.
Linear
32px
590
1.13
-0.022em
三级标题
Feature titles nested within release entries.
The quick brown fox 敏捷的狐狸
24px
590
1.33
-0.012em
正文
Release descriptions, explanatory paragraphs, and lists.
The quick brown fox 敏捷的狐狸
17px
400
1.6
0
辅助文字
Compact dates, metadata, and small labels.
The quick brown fox 敏捷的狐狸
13px
510
1.6
0
按钮
Signup and compact interactive controls.
The quick brown fox 敏捷的狐狸
15px
510
1.6
-0.011em
导航
Global navigation and changelog category links.
The quick brown fox 敏捷的狐狸
15px
400
1.6
-0.011em
链接
Inline documentation and related-resource links.
The quick brown fox 敏捷的狐狸
17px
400
1.6
0
代码
Occasional inline technical or code references.
const style = 1;
15px
400
1.3
0
间距与布局
基准单位 4px · 密度：适中
72px版块间距
6px元素间距
—卡片内边距
624px内容最大宽度
1px
3px
4px
6px
8px
12px
16px
20px
24px
32px
48px
56px
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.
圆角与层次
按钮 · 8px
卡片 · 8px
图片 · 8px
徽标 · 9999px
导航 · 9999px
hairline · text
sm · button
inset · button
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.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
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.
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.
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.
✕ 不该做
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.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
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.
