# Sourcegraph · Design system migration spec

> Source: https://sourcegraph.com  ·  Curated by OpenDesign  ·  en

> A quintessential example of a modern, high-end developer tool interface that balances technical complexity with clean, authoritative design.

## 1. Identity DNA

The Sourcegraph system operates as an industrial control panel for large-scale software engineering, where every interface element is a precise instrument. Its identity is defined by developer-centric utility: code intelligence, codebase management, and enterprise-grade control.

**One-liner:** An enterprise-grade code intelligence platform for managing and evolving massive codebases.
**Keywords:** developer · code intelligence · codebase · enterprise
**Analogy:** An industrial control panel for large-scale software engineering.

## 2. Color

The palette is a high-contrast dark mode, a deep field of #020202 that recedes to let content and action dominate. A single, aggressive red accent is the system's sole chromatic voice, reserved for primary actions to cut through the darkness with unambiguous intent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#020202` | main background |
| `--bg-soft` | `#111111` | card background |
| `--bg-quiet` | `#F7F7F7` | quiet area |
| `--ink` | `#EDEDED` | body text |
| `--ink-soft` | `#606060` | secondary text |
| `--muted` | `#A9A9A9` | placeholder |
| `--accent` | `#ED2D2D` | single accent |
| `--line` | `rgba(237,237,237,1.0)` | divider |

**Color principle:** High-contrast dark mode with a single, aggressive red accent for primary actions.

The principle is functional contrast: color is not decoration, but a direct signal for priority.

## 3. Typography

Typography is set in a geometric sans-serif, its clean lines and consistent stroke weights forming a voice that is authoritative and technical. The scale supports clear hierarchy, from hero headlines down through general text and monospace elements for technical labels.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 600 | -2px | Hero headlines |
| h2 | 48px | 1.1 | 600 | -1px | Section headers |
| body | 16px | 1.5 | 400 | 0.256px | General text |
| mono | 15px | 1.5 | 400 | 0.256px | Code and UI labels |

## 4. Spacing

Rhythm is established by a strict 4px base unit, with generous vertical padding—48px, 64px, 96px—creating deliberate separation between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit with generous vertical padding (48px, 64px, 96px) for content separation.

## 5. Surfaces

Depth is communicated through restrained shadow and border work on dark surfaces. Subtle borders and a limited shadow palette—functional, not decorative—define elevation without visual clutter.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 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
- **Borders:** 1px solid rgba(237,237,237,1.0)

## 6. Layout

The layout skeleton begins as a centered, single-column stage for hero messaging. It then expands into wide, multi-column sections for detailed feature exploration, guiding the user from proposition to proof.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered single-column hero transitioning into wide multi-column feature sections.

## 7. Motion & Interaction

Motion is minimal and purposeful, used for functional feedback rather than flourish. Section reveals use a simple fade-in, while interactive elements employ smooth, immediate transitions to confirm user input.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Fade-in for section reveals
  - Smooth hover state transitions on buttons and links

- **Hover:** Subtle opacity change or background color shift.
- **Click:** Immediate feedback via cursor pointer and transition.
- **Transition:** all 0.2s ease-out.
- **Keyboard:** Standard focus ring for accessibility.

## 8. Voice & Don'ts

The editorial voice is authoritative, technical, and direct. Headlines are short and action-oriented, CTAs are practical and specific, and the language avoids any hint of frivolity or vague superlatives.

- **Tone:** Authoritative, technical, and direct.
- **Headline style:** Short, action-oriented, and punchy.
- **CTA style:** Direct and practical, often involving a demo or trial.
- **Avoid:** Frivolous or overly casual language / Excessive use of superlatives / Unclear or vague value propositions

### Don'ts
- ❌ 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

The system deliberately avoids pastel accents, decorative fonts, thin type weights, photographic backgrounds, and excessive shadow or radius treatments.

## System Prompt (paste into AI tool)

```
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.
```