linear.app Sample

## 设计思维

在编码之前，先理解上下文并选择一个大胆的美学方向：

- **目的：** 这个界面解决什么问题？谁在使用它？
- **风格：** 选择一个强烈的方向：极简主义、极繁主义、复古未来主义、有机/自然、奢华/精致、 playful/玩具感、杂志/编辑风格、粗粝/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义，或其他清晰的美学。
- **约束：** 技术要求，如框架、性能和可访问性。
- **差异化：** 是什么让它令人难忘？人们会记住的那一件事是什么？
  **关键：** 选择一个清晰的概念并精准执行。大胆的极繁主义和精致的极简主义都可以奏效。意图比强度更重要。

## 优美的默认设置

- 从构图开始，而不是从组件开始。
- 优先使用全出血 hero 图片或全画布视觉锚点。
- 让品牌或产品名称成为最突出的文字。
- 保持文案简洁且可扫描。
- 在添加边框之前，先使用留白、对齐、缩放、裁剪和对比。
- 默认限制系统：不超过两种字体和一种强调色。

# linear.app 设计系统

## 视觉 DNA

超深色开发者美学，带有玻璃态拟物表面，使用 Inter Variable 的精确字体排版和激进的负字距（-1.056px 到 -1.408px），以及严格的 4px 空间网格系统。通过等宽字体点缀（Berkeley Mono）用于标签和代码、层叠半透明界面与 backdrop-filter 模糊，以及以近黑色背景（rgb(8, 9, 10)）和高对比度灰白色文本（rgb(247, 248, 248)）为核心的克制配色方案来建立技术可信度。

## 工程 CSS 证据

### 字体排版

**标题：**
- **主字体：**
  - **Font Family:** Inter Variable
  - **Font Family Stack:** "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
  - **Font Size:** 48px
  - **Font Weight:** 510
  - **Line Height:** 48px
  - **Letter Spacing:** -1.056px
  - **Text Transform:** 证据不足
- **变体：** "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 48px | 510 | 48px (7), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 13px | 510 | 19.5px (5), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 16px | 590 | 24px (1), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 20px | 590 | 26.6px (1), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 64px | 510 | 64px (1), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 72px | 510 | 72px (1)

**正文：**
- **主字体：**
  - **Font Family:** Inter Variable
  - **Font Family Stack:** "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
  - **Font Size:** 14px
  - **Font Weight:** 400
  - **Line Height:** 24px
  - **Letter Spacing:** -0.165px
  - **Text Transform:** uppercase
- **变体：** "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace | 14px | 400 | 24px (70), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 15px | 400 | 24px (38), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 13.3333px | 400 (32), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 12px | 400 | 16.8px (24), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 13px | 400 | 19.5px (17), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 16px | 400 | 24px (11)

### 颜色

**模式：** 混合

**用法：**
- **背景：** rgba(0, 255, 5, 0.1), rgba(255, 255, 255, 0.05), rgba(0, 255, 5, 0.07), rgba(255, 0, 0, 0.1), rgb(8, 9, 10), rgba(255, 0, 0, 0.12)
- **表面：** 证据不足
- **主文本：** rgb(208, 214, 224), rgb(247, 248, 248), rgb(138, 143, 152), rgb(255, 255, 255), rgb(98, 102, 109), rgb(85, 205, 255)
- **次要文本：** rgb(208, 214, 224), rgb(138, 143, 152), rgb(255, 255, 255), rgb(247, 248, 248)
- **边框：** rgb(208, 214, 224), rgb(138, 143, 152), rgb(247, 248, 248), rgb(255, 255, 255), rgb(208, 214, 224) rgb(208, 214, 224) rgb(208, 214, 224) rgba(0, 0, 0, 0), rgb(98, 102, 109)
- **强调色：** 证据不足
- **渐变：** linear-gradient(rgba(11, 11, 11, 0.8) 0px, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 100%)

### 间距

**基础单位：** 4px
**比例尺：** 12px, 24px, 32px, 8px, 2px, 128px, 96px, 1px, 20px, 40px, 14px, 16px
**区块内边距：** 96px 0px 128px
**卡片内边距：** 证据不足
**间隙：** 12px, 40px

### 材质

**表面风格：** 玻璃 / 半透明
**圆角：** 2px, 4px, 12px, 2px 0px 0px 2px, 0px 2px 2px 0px, 12px 12px 0px 0px
**边框样式：** 0px none rgb(208, 214, 224), 0px none rgb(138, 143, 152), 0px none rgb(247, 248, 248), 0px none rgb(255, 255, 255), 0px none rgb(98, 102, 109), 0px none rgb(85, 205, 255), 0px none rgb(255, 196, 124), 0px none rgb(8, 9, 10)
**阴影样式：** rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px, rgba(0, 0, 0, 0.4) 0px 1px 0px 0px
**模糊：** blur(0px), blur(20px)

### 动效

**动效级别：** 适度
**持续时间：** 0s, 0.16s, 0.16s, 0.4s, 0.1s
**缓动函数：** ease, cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94), ease-out, cubic-bezier(0.25, 0.46, 0.45, 0.94)
**悬停模式：** all, filter, transform, background, border-color, background
**滚动模式：** 1 个 sticky/fixed 元素，36 个 flex 容器

### 组件示例

**导航：**
- **数量：** 2
- **字体排版：** 16px / 24px, weight 400
- **内边距：** 8px 14px 14px 8px
- **圆角：** 证据不足
- **颜色：** rgb(247, 248, 248)
- **背景：** 证据不足
- **边框：** 0px none rgb(247, 248, 248)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**hero：**
- **数量：** 1
- **字体排版：** 15px / 24px, weight 400
- **内边距：** 证据不足
- **圆角：** 证据不足
- **颜色：** rgb(138, 143, 152)
- **背景：** 证据不足
- **边框：** 0px none rgb(138, 143, 152)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**区块：**
- **数量：** 7
- **字体排版：** 16px / 24px, weight 400
- **内边距：** 96px 0px 128px
- **圆角：** 证据不足
- **颜色：** rgb(247, 248, 248)
- **背景：** 证据不足
- **边框：** 0px none rgb(247, 248, 248)
- **阴影：** 证据不足
- **过渡：** all 0s ease

### 提取诊断

- 从 3956 个总 DOM 元素中采样了 300 个可见元素。
- 置信度：高。
- 无提取警告。

## AI 视觉分析

### 核心风格

深色优先界面，使用近黑色背景（rgb(8, 9, 10)）和高对比度灰白色字体（rgb(247, 248, 248)）。技术/开发者聚焦的美学，强调以代码为中心的视觉效果，包括语法高亮差异和用于技术标签的等宽字体排版（Berkeley Mono）。激进的信息密度，搭配紧凑的行高（1.0-1.6）和紧密的字距（-0.165px 到 -1.408px）。

### 纹理与氛围

玻璃态拟物表面由 backdrop-filter blur(20px) 和半透明背景（rgba(11, 11, 11, 0.8)）定义。通过发丝边框（rgba(255,255,255,0.05)）和最小阴影堆栈（rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px）实现微妙的深度。层叠 UI 卡片浮于深色画布之上，带有圆角（2px-12px，药丸形为 9999px）。

### 布局与构图

功能区块采用非对称双列构图，带有粘性导航头部（72px 高度）。充裕的垂直区块内边距（顶部 96px，底部 128px）与紧凑的组件密度形成对比。产品 UI 模型主导 hero 区域，展示实际界面元素（问题追踪、路线图、分析）。基于 Flexbox 的网格系统，采用 12 列结构和一致的间隙间距（12px，40px）。

### 交互方向

微妙的状态变化，快速的过渡持续时间（按钮 0.1s，结构元素 0.16s-0.4s）。标准交互使用平滑的 cubic-bezier(0.25, 0.46, 0.45, 0.94) 缓动。药丸形交互元素（border-radius: 9999px），背景从透明过渡到填充状态。由粘性头部行为和网格点代理关键帧动画（3200ms 持续时间）暗示的滚动触发动画。

## 设计系统规则

### 应当

- 使用 Inter Variable 作为主字体族，标题 weight 510，正文 weight 400
- 对代码片段、标签和技术元数据应用 Berkeley Mono（观察到 70 处）
- 对标题实现负字距：48px 为 -1.056px，64px 为 -1.408px
- 保持严格的 4px 基础单位间距系统（观察值：8px, 12px, 16px, 20px, 24px, 32px, 40px, 96px, 128px）
- 使用 glassmorphism 表面，配合 backdrop-filter: blur(20px) 和 rgba(11,11,11,0.8) 背景
- 实现药丸形按钮，border-radius: 9999px，0.1s 颜色/背景过渡
- 对微标签和某些正文变体（14px/24px）应用 text-transform: uppercase
- 使用颜色层级：rgb(247, 248, 248) 用于主文本，rgb(208, 214, 224) 用于次要，rgb(138, 143, 152) 用于第三级
- 对主要内容分区设置区块内边距为 96px 0px 128px
- 对标准悬停过渡使用 cubic-bezier(0.25, 0.46, 0.45, 0.94) 缓动

### 不应当

- 使用纯黑色背景（证据指定 rgb(8, 9, 10) 或 #08090a 为基底）
- 超过 font-weight 680（系统中最大粗体重量）
- 应用低于 2px 圆角的尖锐角（最小观察值：2px）
- 对背景使用不透明的白色（系统依赖半透明）
- 用任意间距值打破 4px 空间网格
- 使用超过 rgba(0, 0, 0, 0.4) 不透明度的 box-shadow（证据显示仅微妙阴影）
- 对大型标题应用正字距（证据显示仅负 tracking）
- 使用没有 Inter Variable 回退栈的 system-ui 字体

### 实现备注

- 头部需要固定定位，72px 高度，blur(20px) backdrop-filter，和 border-bottom: rgba(255,255,255,0.08)
- 颜色系统利用 CSS 自定义属性，使用 oklab() 颜色空间进行渐变定义
- 字体排版实现可变字体 "Inter Variable"，连续权重范围 100-900
- 按钮组件使用透明背景过渡到 rgb(94, 106, 210) 用于主操作
- 网格系统依赖 36 个 flex 容器和 12 列网格结构（--grid-columns: 12）
- 动效系统区分快速过渡（0.1s）、常规（0.25s）和强调（0.4s）
- 对导航项实现非对称内边距（观察到 8px 14px 14px 8px）
- 在深色表面上使用 rgba(255,255,255,0.05) 作为 border-translucent 值

# 核心原则

1. 坚定的负面约束：

- 不要在白色背景上使用紫色/蓝色渐变。
- 不要使用通用字体，如 Inter, Roboto, Arial 或 system-ui。
- 不要使用可预测的 hero-CTA-功能-评价模板。
- 不要使用通用几何形状或抽象斑点。
- 不要使用看起来像素材的图片或陈词滥调的视觉效果。

## 性能

- 保持页面加载快速，避免不必要的大型资源。
- 使用现代图片格式，如 WebP，并配合适当的压缩。
- 对长页面媒体实现懒加载。

**重要：** 实现复杂度应与美学愿景相匹配。极繁主义设计可能需要更丰富的代码、动画和效果。极简或精致的设计需要克制、精确、间距和微妙细节。优雅来自于充分表达所选愿景。不要对独特、坚定的结果有所保留。