---
name: Depot
description: "Effective example of dark-mode developer tool design with clear performance messaging"
version: alpha

colors:
  background: "#04040B"
  primary: "#EEEFF0"
  secondary: "#B5B2BC"
  tertiary: "#71D083"
  neutral: "#7C7A85"
  bg-soft: "#121113"
  bg-quiet: "#323035"
  muted-soft: "#323035"
  line: "rgba(60, 57, 63, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.2px"
  headline:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  micro:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "0.3px"

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

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

---

## Overview

Depot accelerates every part of your build pipeline.

*A high-performance engine for modern development pipelines*

## Colors

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

- **Background (`#04040B`)** — uses `bg` token
- **Primary text (`#EEEFF0`)** — uses `ink` token
- **Secondary text (`#B5B2BC`)** — uses `ink-soft` token
- **Accent (`#71D083`)** — uses `accent` token
- **Muted (`#7C7A85`)** — uses `muted` token
- **Borders (`rgba(60, 57, 63, 1.0)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** 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

## Layout

Centered content with generous whitespace, organized in clear vertical sections

*Rhythm:* Consistent 4px base grid with logical spacing progression

## Elevation & Depth

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

## Shapes

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

## Components

- **button:** Pill-shaped primary buttons with green background, secondary buttons with subtle borders
- **card:** Dark cards with subtle borders and rounded corners, often containing performance metrics
- **chip:** Small pill-shaped labels for status indicators and categories
- **input:** Dark input fields with subtle borders and rounded corners
- **hero:** Full-width hero section with large headline, descriptive text, and prominent CTAs

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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