精选 · 开放 · 免费

Sourcegraph

一个企业级代码智能平台，用于管理和演进海量代码库。

devcode

Sourcegraph 网站截图

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

原站: https://sourcegraph.com

📦 浏览包内文件 →

01

设计气质 DNA

开发者代码智能代码库企业级

大规模软件工程的工业控制面板。

02

色彩

#ED2D2DAccent

#EDEDEDInk

#606060Ink soft

#020202BG

#111111BG soft

#F7F7F7BG quiet

#A9A9A9Muted

rgba(237,237,237,1.0)Line

采用单一强烈的红色强调色进行主要操作的高对比度深色模式。

03

字体

geometric-sans · monospace

display72px · 600
h248px · 600
body16px · 400
mono15px · 400

04

间距

4px

8px

16px

24px

32px

48px

64px

96px

以4px为基础单位，采用宽裕的垂直内边距（48px、64px、96px）进行内容分隔。

05

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

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(237,237,237,1.0)

rgba(0, 0, 0, 0.08) 0px 4px 24px 0px · rgba(0, 0, 0, 0.25) 0px 8px 30px 0px · rgba(0, 0, 0, 0.5) 0px 4px 16px 0px

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

居中的单栏主视觉区，过渡至宽幅多栏功能展示区。

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.16, 1, 0.3, 1)easing

版块淡入显现 · 按钮与链接平滑的hover状态过渡

微妙的透明度变化或背景色偏移。 · 通过光标指针和过渡效果提供即时反馈。

08

组件

button 实心红色药丸状主按钮；描边或幽灵样式次级按钮。
card 深色背景面板，带有微妙边框和8-12px圆角。
chip 药丸状分类标签，带有微妙边框和高对比度文本。
input 深色背景输入框，具有清晰的focus状态和8px圆角。
hero 采用大号字体，搭配微妙的径向/渐变背景图案和单一主行动号召按钮。

09

文案语气与禁用清单

语气权威、技术性强且直接。
标题风格 简短、以行动为导向且有力。
按钮文案 直接务实，通常涉及演示或试用。

不要使用柔和或低饱和度的强调色——截图显示为高饱和度红色强调色
不要使用装饰性或手写展示字体——截图显示所有标题均为几何无衬线字体
不要为正文使用纤细或轻量的字重——截图显示为保证可读性的标准字重
不要使用复杂或摄影背景——截图显示为微妙的深色渐变与网格图案
不要使用过多的投影效果——截图显示为用于提升层次感的克制功能性阴影
不要为主要容器使用大号圆角——截图显示大多为8px圆角或药丸形状
避免: 轻浮或过于随意的语言
避免: 过度使用最高级形容词
避免: 不清晰或模糊的价值主张

10

包内真实截图

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

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Sourcegraph — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Sourcegraph是一个面向企业开发者的高端SaaS平台。设计采用深色模式（#020202），搭配白色/灰色文本（#EDEDED，#A9A9A9）以及标志性的高饱和度红色强调色（#ED2D2D）。字体以用于展示和正文的几何无衬线字体为主，技术标签则使用等宽字体。关键约束：避免柔和色彩，保持字体简洁几何化，采用宽裕的垂直间距（48-96px）以防止杂乱，并确保行动号召按钮具有高对比度和易识别性。整体氛围是工业级、高科技且专注的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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