精選 · 開放 · 免費

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

章節顯示時的淡入效果 · 按鈕與連結懸停狀態的平滑過渡

細微的透明度變化或背景色轉換。 · 透過游標指標與過渡效果提供即時反饋。

08

組件

button 實心紅色膠囊形主要按鈕；外框或幽靈樣式的次要按鈕。
card 深色面板，帶有細微邊框與 8-12px 的圓角半徑。
chip 膠囊形分類標籤，帶有細微邊框與高對比文字。
input 深色輸入欄位，具有明顯的聚焦狀態與 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