← OpenDesign CURATED · OPEN · FREE
Sourcegraph
An enterprise-grade code intelligence platform for managing and evolving massive codebases.
dev code
01
Identity DNA
developer code intelligence codebase enterprise
An industrial control panel for large-scale software engineering.
02
Color
#ED2D2DAccent
#EDEDEDInk
#606060Ink soft
#020202BG
#111111BG soft
#F7F7F7BG quiet
#A9A9A9Muted
rgba(237,237,237,1.0)Line
High-contrast dark mode with a single, aggressive red accent for primary actions.
03
Typography
geometric-sans · monospace
display 72px · 600h2 48px · 600body 16px · 400mono 15px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
4px base unit with generous vertical padding (48px, 64px, 96px) for content separation.
05
Surfaces
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
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered single-column hero transitioning into wide multi-column feature sections.
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.16, 1, 0.3, 1) easing
Fade-in for section reveals · Smooth hover state transitions on buttons and links
Subtle opacity change or background color shift. · Immediate feedback via cursor pointer and transition.
08
Components
button Solid red pill-shaped primary button; outlined or ghost secondary buttons. card Dark-surfaced panels with subtle borders and 8-12px border-radius. chip Pill-shaped category tags with subtle borders and high contrast text. input Dark-surfaced input fields with visible focus states and 8px border-radius. hero Large typography with subtle radial/gradient background patterns and a single primary CTA. 09
Voice & Don'ts
Tone Authoritative, technical, and direct. Headlines Short, action-oriented, and punchy. CTAs Direct and practical, often involving a demo or trial. don't use pastel or low-chroma accents — screenshot shows a high-saturation red accent don't use decorative or script display fonts — screenshot shows a geometric sans-serif for all headers don't use thin or light font weights for body text — screenshot shows standard weights for legibility don't use busy or photographic backgrounds — screenshot shows subtle, dark gradients and grid patterns don't use excessive drop shadows — screenshot shows restrained, functional shadows for elevation don't use large, rounded corner radii for primary containers — screenshot shows mostly 8px or pill shapes Avoid: Frivolous or overly casual language Avoid: Excessive use of superlatives Avoid: Unclear or vague value propositions 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Sourcegraph is a premium SaaS platform for enterprise developers. The design uses a dark mode (#020202) with white/gray text (#EDEDED, #A9A9A9) and a signature high-chroma red accent (#ED2D2D). Typography is dominated by geometric sans-serif for display and body, with monospace elements for technical labels. Key constraints: avoid pastel colors, keep typography clean and geometric, use generous vertical spacing (48-96px) to prevent clutter, and ensure CTAs are high-contrast and easily identifiable. The overall vibe is industrial, high-tech, and focused.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A quintessential example of a modern, high-end developer tool interface that balances technical complexity with clean, authoritative design.
