CURATED · OPEN · FREE

Depot

Depot accelerates every part of your build pipeline.

devinfra
Depot screenshot
↓ Download design system (17 MB)Open in OpenDesign

Visit: https://depot.dev

📦 Browse pack contents →

01

Identity DNA

Developer ToolsPerformanceCI/CDSpeedInfrastructure

A high-performance engine for modern development pipelines

02

Color

#71D083Accent
#EEEFF0Ink
#B5B2BCInk soft
#04040BBG
#121113BG soft
#323035BG quiet
#7C7A85Muted
rgba(60, 57, 63, 1.0)Line

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

03

Typography

humanist-sans · monospace

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

04

Spacing

4px
8px
12px
16px
24px
32px
48px
64px
96px

Consistent 4px base grid with logical spacing progression

05

Surfaces

sm · 4px
md · 8px
lg · 12px
pill · 999px

1px solid rgba(60, 57, 63, 1.0)

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)

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered content with generous whitespace, organized in clear vertical sections

07

Motion & Interaction

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color transitions for interactive elements · Opacity changes for hover states · Transform animations for micro-interactions

Subtle color changes and opacity adjustments · Immediate visual feedback through color transitions

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Depot — 桌面首屏（hero）
桌面首屏（hero）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Depot — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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