---
name: Sourcegraph
description: "A quintessential example of a modern, high-end developer tool interface that balances technical complexity with clean, authoritative design."
version: alpha

colors:
  background: "#020202"
  primary: "#EDEDED"
  secondary: "#606060"
  tertiary: "#ED2D2D"
  neutral: "#A9A9A9"
  bg-soft: "#111111"
  bg-quiet: "#F7F7F7"
  line: "rgba(237,237,237,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-2px"
  h2:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.256px"
  mono:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.256px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

An enterprise-grade code intelligence platform for managing and evolving massive codebases.

*An industrial control panel for large-scale software engineering.*

## Colors

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

- **Background (`#020202`)** — uses `bg` token
- **Primary text (`#EDEDED`)** — uses `ink` token
- **Secondary text (`#606060`)** — uses `ink-soft` token
- **Accent (`#ED2D2D`)** — uses `accent` token
- **Muted (`#A9A9A9`)** — uses `muted` token
- **Borders (`rgba(237,237,237,1.0)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* 4px base unit with generous vertical padding (48px, 64px, 96px) for content separation.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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