---
title: "Depot design system"
variant: extended
source: https://depot.dev/
captured_at: 2026-10-12
theme: light
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/depot-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Depot · Design System

> Quiet infrastructure, vivid signals, machine-scale delivery.

**Theme:** light · **Industry:** devtools · **Source:** https://depot.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Depot pairs a cool, pale canvas and oversized black typography with restrained cyan-violet gradients. Abstract pipeline graphics and compact technical labels give the developer-focused homepage a precise, engineered character.

## North star

Keep the pale canvas and strong type quiet; use cyan-violet gradients as precise signals, not broad decoration.

## Overview

The page uses #eaecf0 as a near-continuous cool gray canvas, letting large black headings and fine gray supporting text carry the hierarchy without heavy section color changes. Cyan #00aaff and violet #a033ff appear as concentrated signals: CTA gradients, highlighted words, thin outlines, and the luminous trails in the abstract delivery artwork. Neue Montreal display typography is tightly tracked and generously scaled; body copy stays compact and muted, while uppercase mono labels mark section context. The composition alternates expansive, open hero and proof areas with denser product, security, and testimonial blocks. Content aligns to a broad centered frame, but individual sections shift between left-led, centered, and right-aligned arrangements. Product visuals are mostly diagrams and soft 3D-like pipeline ribbons rather than photography. Cards remain understated, defined by subtle hairlines and restrained corner rounding instead of pronounced shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Depot Mist | `#eaecf0` | `--color-depot-mist` | brand | Dominant page canvas and section background, including the spacious hero and footer. |
| Signal Cyan | `#00aaff` | `--color-signal-cyan` | accent | Gradient endpoint, highlighted navigation and text details, CTA fills, and luminous pipeline artwork. |
| Vivid Violet | `#a033ff` | `--color-vivid-violet` | accent | Pairs with cyan in CTA gradients, highlighted words, outlines, and abstract delivery artwork. |
| Soft Graphite | `#636365` | `--color-soft-graphite` | neutral | Muted navigation, secondary copy, captions, and supporting interface text. |
| Night Ink | `#04040b` | `--color-night-ink` | surface | Inverse dark surface color in the measured palette; use for dark product interface areas where present. |
| Carbon Black | `#080808` | `--color-carbon-black` | semantic | Primary heading, body, and link text against the light canvas. |
| Electric Iris | `#9066fc` | `--color-electric-iris` | accent | Minor button-level accent detail; not a dominant page color. |
| Lavender Haze | `#aaa4f8` | `--color-lavender-haze` | accent | Minor button accent tint and soft violet detail. |
| Cool Border | `#c6ced1` | `--color-cool-border` | semantic | Primary card, control, and other interface hairlines. |
| Pale Divider | `#d4d6d9` | `--color-pale-divider` | neutral | Secondary card borders and subtle footer or content separators. |
| Frosted Lilac | `#d8dcf2` | `--color-frosted-lilac` | surface | Soft-tinted section and card detail, mainly supporting gradient treatments. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Small contrast detail in text and navigation; not the main canvas. |
| Periwinkle Wash | `#bccaf0` | `--color-periwinkle-wash` | accent | Subtle section tint within gradient or atmospheric surface treatments. |

### Semantic aliases

`--color-canvas` → `#eaecf0` (Depot Mist) · `--color-surface` → `#04040b` (Night Ink) · `--color-text` → `#080808` (Carbon Black) · `--color-text-muted` → `#636365` (Soft Graphite) · `--color-border` → `#c6ced1` (Cool Border) · `--color-accent` → `#00aaff` (Signal Cyan) · `--color-accent-2` → `#a033ff` (Vivid Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#080808` | `#eaecf0` | 16.93:1 | AAA |
| `#080808` | `#04040b` | 1.02:1 | fail |
| `#636365` | `#eaecf0` | 5.07:1 | AA |
| `#636365` | `#04040b` | 3.41:1 | AA-large |
| `#00aaff` | `#eaecf0` | 2.17:1 | fail |
| `#00aaff` | `#04040b` | 7.98:1 | AAA |

### Gradients

- `conic-gradient(rgb(0, 170, 255), rgb(160, 51, 255), rgb(0, 170, 255))`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, rgb(234, 236, 240) 100%)`
- `linear-gradient(to right in oklab, rgb(234, 236, 240) 15%, rgba(0, 0, 0, 0) 30%)`
- `linear-gradient(to top in oklab, rgb(234, 236, 240) 0%, rgba(0, 0, 0, 0) 35%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Neue Montreal Text | `--font-body` | webfont | 400 | Body copy, navigation, and general interface text. | Inter |
| Neue Montreal | `--font-display` | webfont | 400, 500 | Display headings and large editorial statements. | Manrope |
| ABC Favorit Mono | `--font-mono` | webfont | 400 | Section captions, code-like labels, and technical microcopy. | IBM Plex Mono |
| Red Hat Text Variable | `--font-red-hat-text-variable` | webfont | 400 | Measured component text including buttons and navigation. | Red Hat Text |

- **Neue Montreal Text:** Regular weight; compact, slightly negative tracking; keep supporting copy clear and restrained.
- **Neue Montreal:** Regular to medium weight, tight leading and negative tracking; sentence case, not all caps.
- **ABC Favorit Mono:** Small uppercase labels with neutral tracking; use sparingly for technical signposting.
- **Red Hat Text Variable:** Regular weight for interface labels; button text uses uppercase in the measured samples.

### Type scale — Augmented Fourth (ratio ≈ 1.419, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 92px | 500 | 0.9 | -0.03em | — | Neue Montreal | Oversized hero statement and major brand message. |
| h1 | 72px | 500 | 0.9 | -0.03em | — | Neue Montreal | Primary page headline and prominent section titles. |
| h2 | 52px | 400 | 1.05 | -0.02em | — | Neue Montreal | Large feature, testimonial, and call-to-action headings. |
| h3 | 40px | 500 | 1.1 | -0.01em | — | Neue Montreal | Product and subsection headings. |
| h4 | 32px | 500 | 1.2 | -0.01em | — | Neue Montreal | Card titles and compact feature headings. |
| body | 16px | 400 | 1.4 | -0.005em | — | Neue Montreal Text | Paragraphs, explanations, and supporting product copy. |
| caption | 12px | 400 | 1.1 | 0 | uppercase | ABC Favorit Mono | Uppercase mono section labels and small technical captions. |
| nav | 16px | 400 | 1.4 | -0.005em | — | Neue Montreal Text | Header links and primary navigation labels. |
| link | 52px | 400 | 1.05 | -0.02em | — | Neue Montreal | Large feature links or oversized linked statements. |
| code | 12px | 400 | 1.1 | 0 | uppercase | ABC Favorit Mono | Compact uppercase technical labels and code-like annotations. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 11, 12, 16, 24, 32, 40, 48, 64 px.
- Section rhythm 48px · element gap 12px · card padding 24px · max content width 1344px.

Use a broad centered content frame, measured at a 1344px maximum width, with comfortable spacing and clear breathing room between major blocks. The page keeps a largely continuous light canvas, establishing rhythm through changes in alignment and content density rather than hard color bands. The hero is right-weighted against expansive abstract artwork; later sections alternate left-led split layouts, centered headings, and right-aligned proof statements. Feature cards and testimonial panels sit in measured grid arrangements, with fine separators and consistent internal padding. Keep paragraphs short and leave visible open space around large headings.

## Shape & elevation

- Radius: button `6px` · card `4px` · media `6px` · nav `6px` · link `6px` · xs `2px` · sm `4px` · md `6px` · lg `80px` · pill `9999px`
- Shadow `md` (other): `rgb(34, 153, 221) 0px 0px 10px 0px, rgb(34, 153, 221) 0px 0px 5px 0px`
- Shadow `md-2` (card): `rgba(116, 140, 255, 0.22) 0px 0px 12px 6px`
- Shadow `lg` (footer): `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, color(srgb 0.627451 0.2 1 / 0.28) 0px 0px 14px 0px, color(srgb 0 0.666667 1 / 0.22) 0px 0px 24px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: pale canvas, fine borders, and restrained card outlines do most of the separation. Use the measured 4px card and 6px control rounding where applicable. Glow appears selectively around accent artwork, selected cards, and CTA moments; avoid broad dark shadows or stacked, heavy panels.

## Imagery

The visual language avoids conventional product photography. The hero and footer use abstract, dimensional pipeline ribbons: translucent cyan, lavender, and violet tracks with small glowing blocks crossing the pale canvas. Product areas rely on interface-like diagrams, logos, and restrained technical visuals. Keep artwork airy and soft-edged, with low-contrast fades into the background; reserve brighter saturated color for selected paths and focal points.

## Components

### Header navigation

A light, quiet top bar with the Depot mark, muted gray navigation links, and compact right-side actions.

### Hero CTA pair

A filled cyan-to-violet primary action beside a light outlined secondary action; labels use compact uppercase technical styling.

### Product feature cards

Light-background cards with dark text, thin #c6ced1 or #d4d6d9 borders, and restrained rounded corners.

### Pipeline visual

An abstract ribbon diagram in cyan, violet, and pale lavender that suggests delivery stages without becoming a dense illustration.

### Section eyebrow

Small uppercase mono label above a large heading, used to identify problem, product, and advantage sections.

### Testimonial cards

A row of lightly bordered customer quote panels on the shared canvas, with restrained emphasis for the selected card.

### Footer CTA

A centered build prompt above the link-rich footer, supported by a soft cyan-violet glow.

### Measured component styles

- **Primary button**: background #c6ced1 · text #080808 · border 1px solid · radius 6px · padding 0px · 400 16px Red Hat Text Variable
- **Secondary button** (“LOG IN”): transparent background · text #080808 · border 1px solid · radius 6px · padding 11px 12px · 400 16px Red Hat Text Variable · uppercase
- **Link** (“LEARN MORE”): transparent background · text #080808 · radius 0px · padding 0px · 400 16px Red Hat Text Variable
- **Card** (“jack @jackw_xyz Building and releasing a”): transparent background · text #080808 · border 1px solid #c6ced1 · radius 4px · padding 24px · 400 16px Red Hat Text Variable
- **Navigation item** (“Depot Products Resources Customers Blog ”): transparent background · text #636365 · radius 0px · padding 0px · 400 16px Red Hat Text Variable

## Do

- Use #eaecf0 as the dominant page canvas.
- Set major headings in large, tightly tracked sans-serif type.
- Reserve cyan and violet gradients for calls to action and focal details.
- Use uppercase mono labels to signpost technical sections.
- Separate cards with subtle measured hairlines rather than heavy fills.
- Let abstract pipeline artwork fade softly into open space.

## Don't

- Do not turn the light page into a dark interface.
- Do not spread saturated gradients across every section.
- Do not use heavy shadows to define ordinary cards.
- Do not crowd hero copy or supporting paragraphs.
- Do not substitute stock photography for the abstract technical artwork.
- Do not make every heading uppercase or mono.

## Agent prompt

Build a new Depot-style developer-tools page on a calm #eaecf0 canvas with #080808 headings and #636365 supporting text. Use oversized, tightly tracked Neue Montreal-like sans typography for the primary message and small uppercase mono labels for section context. Treat #00aaff Signal Cyan and #a033ff Vivid Violet as deliberate accents: gradients on primary actions, selected words, and abstract pipeline details, not full-page decoration. Organize content in a broad centered frame with generous whitespace, alternating split, centered, and right-aligned sections. Use fine #c6ced1 and #d4d6d9 borders on restrained cards, modest rounded corners, and little elevation. Favor soft, translucent technical diagrams over photography. Keep copy concise, align controls cleanly, and preserve a clear hierarchy from headline to supporting copy to action.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Right-weighted headline and copy over full-width abstract pipeline artwork. | primary and secondary CTA, brand navigation | large black headline, cyan-violet gradient emphasis, soft abstract ribbons |
| 2 | logo-cloud | Compact horizontal trust band with a short heading and customer marks. | social proof, logo strip | muted logos, light section tint, subtle controls |
| 3 | comparison | Left-aligned problem statement with a two-column comparison and checklist. | problem framing, model comparison | mono eyebrow, bordered comparison panel, compact checklist |
| 4 | product-showcase | Large left-led title above pipeline graphic and product links. | product discovery, carousel controls | flowing pipeline artwork, product feature row, hairline separator |
| 5 | feature-grid | Two-column security introduction and grouped capability list. | security exploration, related links | plain text columns, fine separators, outlined action |
| 6 | other | Right-aligned customer statement with supporting copy and paired links. | customer proof, case-study action | oversized quote headline, open whitespace, compact CTA pair |
| 7 | feature-split | Centered section title above a split benefits list and visual panel. | selectable benefits, feature detail | numbered list, active accent rule, quiet visual frame |
| 8 | testimonials | Section heading above a horizontal row of quote cards and controls. | testimonial carousel, case-study link | outlined quote cards, selected-card highlight, compact arrow controls |
| 9 | cta | Centered brand mark, prompt, and paired actions over a soft accent glow. | free-start action, documentation link | centered composition, cyan-violet ambient glow, compact buttons |
| 10 | footer | Multi-column link groups above a large brand mark and decorative artwork. | site navigation, social links | uppercase mono group labels, light dividers, abstract ribbon illustration |

## Source CSS custom properties (selected)

```css
--color-radix-mauve-black: #04040b;
--color-radix-mauve1: #121113;
--color-radix-mauve2: #1a191b;
--color-dashboard-inset: #000;
--color-dashboard-contrast: #fff;
--color-radix-light-mauve1: #fdfcfd;
--color-radix-light-mauve2: #faf9fb;
--color-radix-light-mauve12: #211f26;
--ci-workspace-border: oklch(27.5% .006 285);
--ci-card-background: #232225;
--ci-card-shadow: inset 0 1px 0 #ffffff08, inset 0 0 0 1px #ffffff06, 0 0 0 1px #0000002e, 0 10px 24px -20px #0000009c;
--ci-card-hover-background: color-mix(in srgb, #2b292d 70%, transparent);
--ci-card-hover-shadow: inset 0 1px 0 #ffffff0e, inset 0 0 0 1px #ffffff0e, 0 0 0 1px #0000003d, 0 14px 30px -20px #000000db;
--ci-timeline-bar-background: linear-gradient(to right, #ffffff0f, #ffffff1b);
--ci-timeline-bar-shadow: inset 1px 0 10px #ffffff0a, 0 1px 6px #00000029;
--ci-timeline-ghost-background: linear-gradient(to right, #ffffff0a, #fff0);
--ci-timeline-milestone-background: #ffffff1b;
--ci-timeline-milestone-border: #ffffff29;
--tw-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-offset-color: #fff;
--tw-shadow-color: #eeeef01a;
--ci-api-accent: #8600fb;
--radius: .625rem;
--background: oklch(100% 0 0);
--foreground: oklch(14.5% 0 0);
--card-foreground: oklch(14.5% 0 0);
--popover-foreground: oklch(14.5% 0 0);
--primary: oklch(20.5% 0 0);
--primary-foreground: oklch(98.5% 0 0);
--secondary: oklch(97% 0 0);
--secondary-foreground: oklch(20.5% 0 0);
--muted-foreground: oklch(55.6% 0 0);
--accent: oklch(97% 0 0);
--accent-foreground: oklch(20.5% 0 0);
--border: oklch(92.2% 0 0);
--sidebar-foreground: oklch(14.5% 0 0);
--sidebar-primary: oklch(20.5% 0 0);
--sidebar-primary-foreground: oklch(98.5% 0 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/depot-dev