# Depot · Design system migration spec

> Source: https://depot.dev  ·  Curated by OpenDesign  ·  en

> Effective example of dark-mode developer tool design with clear performance messaging

## 1. Identity DNA

Depot operates as a high-performance engine for modern development pipelines. This design system is the mechanical blueprint, establishing a dark, focused environment where speed and precision are communicated through material restraint and vibrant, sparingly applied accent.

**One-liner:** Depot accelerates every part of your build pipeline.
**Keywords:** Developer Tools · Performance · CI/CD · Speed · Infrastructure
**Analogy:** A high-performance engine for modern development pipelines

## 2. Color

The color palette is built on a foundation of deep dark backgrounds to reduce visual noise, with a vibrant green accent serving as a deliberate signal for speed and performance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#04040B` | main background |
| `--bg-soft` | `#121113` | card background |
| `--bg-quiet` | `#323035` | quiet area |
| `--ink` | `#EEEFF0` | body text |
| `--ink-soft` | `#B5B2BC` | secondary text |
| `--muted` | `#7C7A85` | placeholder |
| `--muted-soft` | `#323035` | weak hint |
| `--accent` | `#71D083` | single accent |
| `--line` | `rgba(60, 57, 63, 1.0)` | divider |

**Color principle:** Deep dark backgrounds create a focused environment for technical content, with vibrant green accents highlighting speed and performance.

The principle is one of focused contrast, where color is a functional indicator, not decoration.

## 3. Typography

Typography employs a clean humanist-sans for its legibility and modern voice, with monospace reserved strictly for technical data, creating a clear hierarchy between narrative and code.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1.2px | Hero headline |
| headline | 24px | 1.2 | 500 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Main content |
| small | 14px | 1.4 | 400 | 0px | Supporting text |
| micro | 12px | 1.3 | 500 | 0.3px | Labels and metadata |

**Type rules:**
- Display headlines use negative letter-spacing for a tight, modern feel
- Body text maintains comfortable line-height for readability
- Monospace font used for technical data and code-like elements

## 4. Spacing

A consistent 4px base grid establishes a logical rhythm, spacing elements to create order without rigidity.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base grid with logical spacing progression

## 5. Surfaces

Surfaces are defined by subtle depth through carefully calibrated inset shadows and minimal borders. This creates a tactile, layered interface that remains visually quiet.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px rgba(255, 255, 255, 0.06) inset
  - 0px 10px 15px -3px rgba(0, 0, 0, 0.1)
  - 0px 4px 6px -4px rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(60, 57, 63, 1.0)

## 6. Layout

The layout skeleton is centered and vertically organized, using generous whitespace to let content breathe. This structure prioritizes clarity and logical flow over density.

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

**Skeleton:** Centered content with generous whitespace, organized in clear vertical sections

## 7. Motion & Interaction

Motion is treated as functional feedback, not embellishment. All interactions use smooth, consistent transitions to confirm state changes and guide attention purposefully.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions for interactive elements
  - Opacity changes for hover states
  - Transform animations for micro-interactions

- **Hover:** Subtle color changes and opacity adjustments
- **Click:** Immediate visual feedback through color transitions
- **Transition:** All properties transition with 0.3s duration using cubic-bezier easing
- **Keyboard:** Standard keyboard navigation with visible focus states

## 8. Voice & Don'ts

The editorial voice is direct, confident, and technically precise, communicating with the authority of a well-documented API. It favors clarity over cleverness.

- **Tone:** Direct, confident, and technically precise
- **Headline style:** Short, impactful statements that emphasize speed and efficiency
- **CTA style:** Clear action-oriented labels with supporting information
- **Avoid:** Jargon without explanation / Overly casual language / Excessive exclamation marks

### Don'ts
- ❌ Don't use bright primary colors — screenshot shows muted green accent on dark background
- ❌ Don't use decorative fonts — screenshot shows clean humanist-sans typography
- ❌ Don't add heavy shadows or gradients — screenshot shows minimal depth effects
- ❌ Don't use excessive animations — screenshot shows subtle, purposeful transitions
- ❌ Don't overcrowd the layout — screenshot shows generous whitespace and clear hierarchy
- ❌ Don't use complex navigation patterns — screenshot shows simple, logical menu structure

The system deliberately excludes jargon without explanation, decorative typography, heavy shadows, and excessive animation.

## System Prompt (paste into AI tool)

```
Depot is a developer tool platform for CI/CD acceleration with a dark, performance-focused aesthetic. The design uses deep charcoal backgrounds (#04040B) with vibrant green accents (#71D083) to highlight speed and efficiency. Typography is humanist-sans for display and body text, with monospace for technical data. The layout is clean and centered with generous whitespace, organized in clear vertical sections. Key interactions include smooth color transitions and subtle hover effects. The voice is direct and technically precise, avoiding jargon while maintaining confidence. Critical design rules: use muted green accents sparingly, maintain dark color consistency, keep typography clean and readable, avoid excessive animations, preserve generous spacing, and maintain clear visual hierarchy.
```