큐레이션 · 오픈 · 무료

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

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

컴포넌트

09

보이스와 금지 목록

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) 사용, CTA는 고대비이고 쉽게 식별 가능하도록 한다. 전체적인 분위기는 산업적, 하이테크, 그리고 집중적이다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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