精选 · 开放 · 免费

Linear

为开发者工具打造的深邃、精准、专注的SaaS设计系统。

SaaSProductivityApp UIDark Mode

Linear 网站截图

↓ 下载设计系统包 (10 MB)在 OpenDesign 中打开

原站: https://linear.app

📦 浏览包内文件 →

01

设计气质 DNA

精准速度技术清晰度结构化AI原生

面向软件团队的高端腕表仪器——深邃、精准、毫无装饰。

02

色彩

#F7F8F8Ink

#D0D6E0Ink soft

#08090ABG

rgba(255,255,255,0.05)BG soft

rgba(255,255,255,0.02)BG quiet

#62666DMuted

rgba(255,255,255,0.08)Line

极致对比以聚焦，辅以细微的噪点与半透明图层，营造深度感。

03

字体

geometric-sans · humanist-sans · monospace

display64px · 400
body16px · 400
mono13px · 400

大标题采用紧凑的负字距。 · 正文保持400字重，使界面保持轻盈。 · 仅对技术参考与标识符使用等宽字体。

04

间距

4px

8px

12px

16px

24px

32px

48px

64px

96px

严格的4px栅格，组件间距紧凑。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px

md · 6px

lg · 12px

pill · 9999px

1px solid rgba(255,255,255,0.08)

0px 1.2px 0px 0px rgba(0,0,0,0.03) · 0px 2px 4px 0px rgba(0,0,0,0.4) · inset 0px 0px 12px 0px rgba(0,0,0,0.2)

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

密集、全宽的深色画布，内嵌凸起的嵌套面板。

07

动效与交互

150msmicro

160mssmall

400msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

悬停时细微的淡入与滤镜过渡。 · 平滑的背景色变化。 · 光标与焦点状态下的微交互。

轻微的亮度提升或背景透明度变化。 · 即时状态切换，带有细微的缩放或颜色反馈。

08

组件

button 胶囊形或微圆角矩形，透明背景配细边框。
card 凸起的深色面板，带有细微的1px内边框与柔和的阴影。
chip 小巧的圆角矩形，用于标签与状态指示。
input 深色、半透明背景的输入框，边框样式极简。
hero 硕大、粗体的无衬线标题，搭配简洁的副标题与大型产品样机。

09

文案语气与禁用清单

语气技术性、精准、自信。
标题风格 直接、行动导向、权威。
按钮文案 极简清晰，通常仅为简单的文本链接或低强调按钮。

避免使用高饱和度颜色——截图显示的是严格的灰阶/白色调色板。
避免使用圆润、俏皮的形状——截图显示的是锐利或极微圆润的转角。
避免使用衬线或装饰性字体——截图显示的是干净、几何感强的无衬线字体。
避免使用明亮、多彩的渐变——截图显示的是深色、平面、带颗粒质感的背景。
避免使用粗重、显眼的边框——截图显示的是纤细的1px分割线。
避免使用复杂、多层的阴影——截图显示的仅为细微、低不透明度的阴影。
避免: 营销话术
避免: 模糊或歧义的术语
避免: 过多的感叹号
避免: 俏皮或随意的语言

10

包内真实截图

Linear — 桌面首屏（hero） — 桌面首屏（hero）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Linear — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

为开发者工具与AI时代的生产力设计一套高精度SaaS界面。该系统采用深邃的暗色模式调色板，主要背景色为#08090A，文字使用白色#F7F8F8以形成高对比。字体简洁几何，大标题采用负字距。关键十六进制颜色为#08090A、#F7F8F8，以及用于弱化元素的#62666D。不要使用高饱和度颜色或俏皮、圆润的形状；整体美学必须保持锐利、技术感与专业。布局密集且全宽，利用半透明面板营造深度。确保过渡动画快速而细微，以保持速度感。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko