Depot
A dark-mode developer-infrastructure interface built on a near-black canvas (#04040b) with terminal-green accents and the Red Hat type family. The system reads as engineered-for-engineers — high-contrast off-white headlines, dense product UI fragments (CI workflow panels, code blocks, benchmark bars) shown directly inside cards, green as the single brand action color, and tight modular radii (2–10px) that signal precision tooling rather than consumer softness.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
60px · 700 · 1.0
The quick brown fox jumps
body
18px · 500 · 1.375
The quick brown fox jumps
button
15px · 500 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxxs | 4px | |
| xxs | 6px | |
| xs | 8px | |
| sm | 10px | |
| smd | 12px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 32px | |
| xxxl | 48px | |
| section-sm | 64px | |
| section | 96px | |
| section-lg | 128px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 4px | |
| md | 6px | |
| lg | 8px | |
| xl | 10px | |
| xxl | 14px | |
| pill | 24px |
FAQ
- What colors does Depot use?
- Depot's core palette includes #04040b, #0c0c0c, #121113, #1a191b, #2b292d. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Depot DESIGN.md.
- What font does Depot use?
- Depot's primary typeface is Red Hat Display Variable. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Depot design system?
- A dark-mode developer-infrastructure interface built on a near-black canvas (#04040b) with terminal-green accents and the Red Hat type family. The system reads as engineered-for-engineers — high-cont…