version: alpha name: Linear-design-analysis description: "A near-black product-focused marketing canvas built around #010102 (the deepest dark surface of any tool in this collection), light gray text (#f7f8f8), and the signature Linear lavender-blue (#5e6ad2) used as the single chromatic accent. The system reads as software-craft documentation: dense, technical, and quietly luxurious. Display type is set in the Linear custom sans (SF Pro Display fallback) at 500–700 with measured negative tracking. Cards live as charcoal panels (#0f1011) with hairline borders. The accent lavender appears on the brand mark, focus rings, and a few intentional CTAs — never decoratively. Page rhythm leans on product UI screenshots framed in dark panels rather than atmospheric color."
colors: primary: "#5e6ad2" on-primary: "#ffffff" primary-hover: "#828fff" primary-focus: "#5e69d1" ink: "#f7f8f8" ink-muted: "#d0d6e0" ink-subtle: "#8a8f98" ink-tertiary: "#62666d" canvas: "#010102" surface-1: "#0f1011" surface-2: "#141516" surface-3: "#18191a" surface-4: "#191a1b" hairline: "#23252a" hairline-strong: "#34343a" hairline-tertiary: "#3e3e44" inverse-canvas: "#ffffff" inverse-surface-1: "#f5f6f6" inverse-surface-2: "#f6f7f7" inverse-ink: "#000000" brand-secure: "#7a7fad" semantic-success: "#27a644" semantic-overlay: "#000000"
typography: display-xl: fontFamily: Linear Display fontSize: 80px fontWeight: 600 lineHeight: 1.05 letterSpacing: -3.0px display-lg: fontFamily: Linear Display fontSize: 56px fontWeight: 600 lineHeight: 1.10 letterSpacing: -1.8px display-md: fontFamily: Linear Display fontSize: 40px fontWeight: 600 lineHeight: 1.15 letterSpacing: -1.0px headline: fontFamily: Linear Display fontSize: 28px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.6px card-title: fontFamily: Linear Display fontSize: 22px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.4px subhead: fontFamily: Linear Display fontSize: 20px fontWeight: 400 lineHeight: 1.40 letterSpacing: -0.2px body-lg: fontFamily: Linear Text fontSize: 18px fontWeight: 400 lineHeight: 1.50 letterSpacing: -0.1px body: fontFamily: Linear Text fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: -0.05px body-sm: fontFamily: Linear Text fontSize: 14px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0 caption: fontFamily: Linear Text fontSize: 12px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0 button: fontFamily: Linear Text fontSize: 14px fontWeight: 500 lineHeight: 1.20 letterSpacing: 0 eyebrow: fontFamily: Linear Text fontSize: 13px fontWeight: 500 lineHeight: 1.30 letterSpacing: 0.4px mono: fontFamily: Linear Mono fontSize: 13px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0
rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px pill: 9999px full: 9999px
spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px
components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px button-primary-pressed: backgroundColor: "{colors.primary-focus}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px button-tertiary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px button-inverse: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 14px pricing-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px pricing-card-featured: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px feature-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px product-screenshot-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 24px testimonial-card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-lg}" rounded: "{rounded.lg}" padding: 32px customer-logo-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-subtle}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 16px text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px text-input-focused: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 12px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-subtle}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 6px 14px pricing-tab-selected: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 6px 14px cta-banner: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.headline}" rounded: "{rounded.lg}" padding: 48px changelog-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.xs}" padding: 24px 0 status-badge: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink-muted}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 2px 8px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-subtle}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px
概览
Linear 的营销画布是本集合中最深的暗色表面——{colors.canvas} 是 #010102，本质上是带有微弱蓝调倾向的纯黑。其上叠有四级表面阶梯（{colors.surface-1} 到 {colors.surface-4}），用于卡片、面板与抬升瓦片，细线边框从 {colors.hairline}（#23252a）向上延伸到 {colors.hairline-strong} 与 {colors.hairline-tertiary}。浅灰文字（{colors.ink} #f7f8f8）承载正文与标题。
唯一的彩色点缀是 Linear 薰衣草蓝 {colors.primary}（#5e6ad2）——用于品牌标志、聚焦环与主 CTA 按钮。更浅的悬浮状态（{colors.primary-hover} #828fff）与聚焦变体（{colors.primary-focus} #5e69d1）延伸同一色相。Linear 在营销画布上避免使用饱和绿、橙、红等；唯一的语义色是 {colors.semantic-success}（#27a644），用于状态徽标与罕见的成功指示。
展示型字体使用 Linear 的定制无衬线（回退 SF Pro Display），字重 500–700，负字距从 80px 时的 -3.0px 缩放到正文时的 0。正文字族是 Linear 的文本切割，Linear Mono 留给产品截图中的代码片段。
页面节奏是密集的产品截图——Linear 的营销以产品 UI（议题列表、项目视图、仪表板）的高保真捕获为主，框在带 {rounded.xl} 16px 圆角的 {colors.surface-1} 面板中。界面刻意保持最少，让应用截图承担重任。
关键特征：
- 暗色画布营销系统——
{colors.canvas}（#010102）是本集合中最深的暗色。 - 薰衣草蓝品牌点缀（
{colors.primary}#5e6ad2）——稀缺地用于品牌标志、聚焦与主 CTA。 - 四级表面阶梯（canvas → surface-1 → surface-2 → surface-3 → surface-4）在无阴影下承载层级。
- 展示型字距向负方向拉开（80px 时 -3.0px）；正文保持 -0.05px。
- 卡片使用
{rounded.lg}12px 圆角配 1px 细线边框——永不胶囊，少用 16px。 - 产品 UI 截图主导页面。营销界面是应用的暗色画框。
- 无第二种彩色。无氛围渐变。无聚光卡片。
配色
来源页面：linear.app（首页）、/intake、/pricing、/contact/sales、/build。
品牌与点缀
- 薰衣草蓝（{colors.primary}）：Linear 标志性点缀——主 CTA、品牌标志、链接强调。
- 薰衣草 悬浮（{colors.primary-hover}）：更浅的薰衣草（#828fff）——主 CTA 的悬浮状态。
- 薰衣草 聚焦（{colors.primary-focus}）：聚焦环色（#5e69d1）——聚焦输入框、聚焦按钮。
- 品牌 安全（{colors.brand-secure}）：弱化的薰衣草灰（#7a7fad）——用于"Linear Security"表面。
表面
- 画布（{colors.canvas}）：默认页面背景——#010102，近乎纯黑带有微弱蓝调。
- 表面 1（{colors.surface-1}）：画布上一档——特性卡、价格卡、产品截图面板。
- 表面 2（{colors.surface-2}）：画布上两档——推荐价格卡、悬浮卡片。
- 表面 3（{colors.surface-3}）：画布上三档——line-tertiary 背景、子导航。
- 表面 4（{colors.surface-4}）：画布上四档——bg-level-3，最深的抬升表面。
- 细线（{colors.hairline}）：卡片与分隔线 1px 边框。
- 细线 强（{colors.hairline-strong}）：更强的 1px 边框——输入框聚焦环。
- 细线 第三（{colors.hairline-tertiary}）：嵌套表面的三级边框。
- 反色画布（{colors.inverse-canvas}）：纯白——少数段落开篇上的反色胶囊 CTA 的表面。
- 反色表面 1（{colors.inverse-surface-1}）：反色画布上一档。
- 反色表面 2（{colors.inverse-surface-2}）：反色画布上两档。
文字
- 墨色（{colors.ink}）：所有标题与强调正文——浅灰 #f7f8f8。
- 墨色 弱（{colors.ink-muted}）：次级文字 #d0d6e0——英雄面板上的元信息。
- 墨色 柔（{colors.ink-subtle}）：三级文字 #8a8f98——未选中的价格标签、页脚列。
- 墨色 第三（{colors.ink-tertiary}）：四级 #62666d——禁用、脚注。
语义
- 成功绿（{colors.semantic-success}）：状态徽标、成功指示。营销上唯一的语义色。
- 覆盖（{colors.semantic-overlay}）：纯黑覆盖蒙层，用于模态。
字体排版
字体族
- Linear Display —— Linear 的定制展示无衬线；回退
SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto。承载 display-xl 到 subhead。 - Linear Text —— Linear 的定制文本无衬线（针对正文字号微调的另一种切割）；相同回退栈。承载正文字号、按钮标签、说明。
- Linear Mono —— Linear 的定制等宽；回退
ui-monospace, SF Mono, Menlo。用于产品截图中的代码片段以及状态/ID token。
营销表面把 Display 与 Text 视为一个连续声音；字族切换是无声的。
层级
| Token | 字号 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
{typography.display-xl} | 80px | 600 | 1.05 | -3.0px | 最大英雄标题 |
{typography.display-lg} | 56px | 600 | 1.10 | -1.8px | 段落开篇标题 |
{typography.display-md} | 40px | 600 | 1.15 | -1.0px | 子段落标题 |
{typography.headline} | 28px | 600 | 1.20 | -0.6px | 价格档位标题、CTA 横幅标题 |
{typography.card-title} | 22px | 500 | 1.25 | -0.4px | 特性卡标题 |
{typography.subhead} | 20px | 400 | 1.40 | -0.2px | 引导正文、引入段 |
{typography.body-lg} | 18px | 400 | 1.50 | -0.1px | 英雄副标、引导段 |
{typography.body} | 16px | 400 | 1.50 | -0.05px | 默认正文 |
{typography.body-sm} | 14px | 400 | 1.50 | 0 | 卡片正文、页脚列 |
{typography.caption} | 12px | 400 | 1.40 | 0 | 说明、元信息、状态 |
{typography.button} | 14px | 500 | 1.20 | 0 | 所有按钮标签 |
{typography.eyebrow} | 13px | 500 | 1.30 | 0.4px | 段引标（轻微正向字距） |
{typography.mono} | 13px | 400 | 1.50 | 0 | 模拟中代码用 Linear Mono |
原则
- 展示型激进负字距（80px 时 -3.0px ≈ 字号 4%）。
- 展示到正文单一声音。display-xl 600 → body 400——同一字族，字重渐窄。
- 引标使用正字距（+0.4px）——与展示的负字距形成对比，标记引标为分类标签。
- 等宽字体仅用于代码场景。Linear Mono 位于产品截图内——不在营销界面。
字体替代说明
Linear 的定制字体未公开分发；文档化的回退 SF Pro Display, -apple-system, system-ui 是 macOS 上的推荐替代。跨平台实施中，Inter 字重 500 / 600 / 700 是最接近的免费替代。Geist Sans 也可用。Mono 方面，JetBrains Mono 或 Geist Mono 400 字重接近 Linear Mono。
布局
间距体系
- 基础单位：4px。
- Token（前言中）：
{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}32px ·{spacing.xxl}48px ·{spacing.section}96px。 - 卡片内边距：特性/价格卡
{spacing.lg}24px；证言卡{spacing.xl}32px；CTA 横幅{spacing.xxl}48px。 - 胶囊按钮内边距：垂直 8px · 水平 14px——Linear 的紧凑按钮规范。
- 表单输入内边距：垂直 8px · 水平 12px。
网格与容器
- 最大内容宽度约 1280px。
- 卡片网格：桌面 3 列，平板 2 列，移动 1 列。
- 价格档位网格 3 列；下方对比条按档位显示对勾。
- 产品截图面板横跨完整内容宽度——它们是主角。
留白哲学
暗色画布本身就是留白。段落之间靠抬升到 surface-1 面板分隔，而非白色空隙。面板内部，内容块之间留 {spacing.lg} 24px 间距；段落之间 {spacing.section} 96px。
层次与深度
| 层级 | 处理方式 | 用途 |
|---|---|---|
| 0（平面） | 无阴影、无边框 | 正文、英雄文字、页脚的默认 |
| 1（炭灰抬升） | 画布上 {colors.surface-1} 背景，1px {colors.hairline} | 默认卡片、产品面板 |
| 2（表面 2 抬升） | {colors.surface-2} 背景，1px {colors.hairline-strong} | 推荐价格卡、悬浮卡片 |
| 3（表面 3 抬升） | {colors.surface-3} 背景 | 子导航、下拉菜单 |
| 4（聚焦环） | 50% 透明度的 2px {colors.primary-focus} 描边 | 聚焦输入框、聚焦按钮 |
Linear 的深度由表面阶梯 + 细线边框承载。品牌几乎完全抵制暗色上的投影。
装饰性深度
- 产品 UI 截图作为装饰性深度主导。
- 无氛围渐变，无聚光卡片。
- 抬升面板顶边的微妙白色边缘高光——给暗色表面一种淡淡的"像素渲染"感。
形状
圆角体系
| Token | 数值 | 用途 |
|---|---|---|
{rounded.xs} | 4px | 小芯片、状态徽标 |
{rounded.sm} | 6px | 行内标签 |
{rounded.md} | 8px | 所有按钮、表单输入 |
{rounded.lg} | 12px | 价格卡、特性卡、证言卡 |
{rounded.xl} | 16px | 产品截图面板 |
{rounded.xxl} | 24px | 超大尺寸 CTA 横幅（罕见） |
{rounded.pill} | 9999px | 价格标签切换、状态徽标 |
{rounded.full} | 9999px | 头像圆形 |
摄影与插画几何
- 产品 UI 截图主导；它们位于
{rounded.xl}16px 瓦片中，配{spacing.lg}24px 外边距。 - 客户 Logo 瓦片在
{colors.canvas}上以小尺寸（约 24px Logo 高度）呈现，无边框。 - 证言卡中的头像圆形使用
{rounded.full}，尺寸 32–40px。
组件
按钮
button-primary —— 薰衣草 CTA。所有页面的默认主 CTA。
- 背景
{colors.primary}，文字{colors.on-primary}，字体{typography.button}，内边距 8px 14px，圆角{rounded.md}。 - 按下状态见
button-primary-pressed（背景切换到{colors.primary-focus}）。 - 悬浮状态见
button-primary-hover（背景切换到更浅的{colors.primary-hover}）。
button-secondary —— 炭灰按钮。用于次级 CTA（"Sign in"、"Read changelog"）。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.button}，内边距 8px 14px，圆角{rounded.md}。1px{colors.hairline}边框。
button-tertiary —— 纯文字按钮。
- 背景
{colors.canvas}，文字{colors.ink}，字体{typography.button}，圆角{rounded.md}，内边距 8px 14px。
button-inverse —— 暗底白字反色 CTA。
- 背景
{colors.inverse-canvas}，文字{colors.inverse-ink}，字体{typography.button}，圆角{rounded.md}，内边距 8px 14px。
价格标签页
pricing-tab-default + pricing-tab-selected —— /pricing 上的胶囊切换。
- 默认：
{colors.canvas}背景，{colors.ink-subtle}文字，圆角{rounded.pill}，内边距 6px 14px。 - 选中：
{colors.surface-2}背景，{colors.ink}文字——选中即表面抬升。
卡片与容器
pricing-card —— /pricing 上的每个档位。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.body}，圆角{rounded.lg}，内边距 24px。1px{colors.hairline}边框。
pricing-card-featured —— 推荐档位——surface 抬升到 surface-2。
- 背景
{colors.surface-2}，其余结构相同。
feature-card —— 通用特性亮点瓦片。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.body}，圆角{rounded.lg}，内边距 24px。
product-screenshot-card —— 主导卡型——框住高保真 Linear 应用 UI 截图。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.body}，圆角{rounded.xl}，内边距 24px。
testimonial-card —— 带头像 + 姓名 + 职位的客户引用。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.body-lg}，圆角{rounded.lg}，内边距 32px。
customer-logo-tile —— 客户跑马灯中的小瓦片。
- 背景
{colors.canvas}，文字{colors.ink-subtle}，字体{typography.caption}，圆角{rounded.xs}，内边距 16px。
cta-banner —— 页面底部的收尾 CTA 面板。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.headline}，圆角{rounded.lg}，内边距 48px。
输入与表单
text-input + text-input-focused —— /contact/sales 与注册覆盖层上的表单字段。
- 背景
{colors.surface-1}，文字{colors.ink}，字体{typography.body}，圆角{rounded.md}，内边距 8px 12px。 - 聚焦状态保持相同表面；聚焦环是 50% 透明度的 2px
{colors.primary-focus}描边。
状态与构建页
changelog-row —— /build（更新日志页）中列出版本、日期、更改内容的每行。
- 背景
{colors.canvas}，文字{colors.ink}，字体{typography.body}，圆角{rounded.xs}，内边距 24px 0。底部 1px{colors.hairline}线条。
status-badge —— 小型状态徽标。
- 背景
{colors.surface-2}，文字{colors.ink-muted}，字体{typography.caption}，圆角{rounded.pill}，内边距 2px 8px。
导航
top-nav —— 黏性暗色栏，左侧 Linear 字标，中间主导航链接，右侧 button-secondary（"Sign in"）+ button-primary（"Get started"）组合。
- 背景
{colors.canvas}，文字{colors.ink}，字体{typography.body-sm}，高度 56px。
页脚
footer —— {colors.canvas} 上的密集链接网格，左侧 Linear 字标。
- 背景
{colors.canvas}，文字{colors.ink-subtle}，字体{typography.caption}，内边距 64px 32px。
推荐与避免
推荐
- 保留
{colors.canvas}（#010102）作为系统的锚定表面——微弱的蓝调是有意为之。 {colors.primary}薰衣草仅用于：品牌标志、主 CTA、聚焦环、链接强调。- 使用四级表面阶梯建立层级。避免跳级。
- 展示 600 字重配正文 400 字重——Linear 抵制 700+ 展示字重。
- 激进地在展示型字号上应用负字距。
- 每个段落以产品 UI 截图作为主角。
- CTA 组合
{rounded.md}8px 圆角。
避免
- 不要发布浅色模式营销页。
- 不要把薰衣草用作段落背景或卡片填充。
- 不要引入第二种彩色点缀（橙、粉、绿用于营销）。
- 不要加氛围渐变或聚光卡片。
- 不要把 CTA 圆成胶囊。
- 不要把画布用 #000000 真黑。
- 不要在产品截图模拟中混用多个亮色点缀。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Desktop-XL | 1440px | 默认桌面布局 |
| Desktop | 1280px | 卡片网格 3 列保持 |
| Tablet | 1024px | 卡片网格 3 列 → 2 列 |
| Mobile-Lg | 768px | 价格对比变为手风琴；导航汉堡菜单 |
| Mobile | 480px | 单列；展示 xl 80px → ~36px |
触摸目标
- CTA 在各视口保持 ≥40px 点击高度。
- 价格标签胶囊保持 ≥36px 点击高度；触摸视口增长到 ≥44px。
- 表单输入在触摸上保持 ≥44px 点击目标。
折叠策略
- 顶导：768px 以下链接折叠为汉堡菜单。
- 卡片网格：1024px 时 3 列 → 2 列，768px 以下 1 列。
- 价格对比：768px 以下按档位手风琴。
- 展示型字体：
{typography.display-xl}80px 在移动端向{typography.display-md}40px 缩放。
图片行为
- 产品 UI 截图保持宽高比且永不裁剪。
- 跑马灯中的客户 Logo 768px 以下可从 6 列折叠为 3 列。
迭代指南
- 一次只聚焦一个组件，并以其
components:token 名引用。 - 引入段落时，先决定它位于哪一档表面抬升上。
- 正文默认
{typography.body}400 字重。 - 编辑后运行
npx @google/design.md lint DESIGN.md。 - 新增变体作为独立组件条目。
- 把薰衣草视为稀缺：品牌标志、主 CTA、聚焦、链接强调。
- 每个段落以产品 UI 截图开篇。
已知缺口
- 四级表面阶梯数值直接抽取自 Linear 的
--color-bg-level-3、--color-line-tint等 CSS 变量；它们是 Linear 的规范表面规格。 - 表单字段错误与校验样式在所检视页面中不可见。
- 浅色模式未文档化，因为营销站点不发布浅色主题。
- Linear 的实际产品 UI 使用更丰富的颜色标签调色板（红、橙、黄、绿、蓝、紫）用于议题优先级与项目标签——这些颜色位于模拟中显示的产品内表面。
- 定制展示、文本与等宽字族是专有的；可接受开源替代。