Depot Design System

Depot's marketing site makes a specific typographic claim: "Build faster. Waste less time." That headline sits at 60px / weight 700 in Red Hat Display Variable against a near-black Radix Mauve canvas (#04040b), and the primary CTA below it is a dark-green button with grass-green text. Not an orange button, not a cobalt pill, not a gradient — a dark-green surface that reads as a CI success output more than a call-to-action. Where Buildkite leans on a green-voltage-on-white system and CircleCI uses a white-on-dark-green inversion, Depot keeps the dark-green both as the background and the text color, layering two tints of the same hue rather than reaching for a contrast pair. The effect is intentionally terminal-adjacent: the green reads as stdout before it reads as a brand color.

This DESIGN.md packages Depot's marketing system into a machine-readable spec. Inside: 17 color tokens derived from the Radix UI Mauve dark scale and a grass-green voltage family (ranging from near-black #1b2a1e to mid grass-green #71d083), a three-cut Red Hat type stack (Display Variable for headlines at 48-60px, Text Variable for body at 14-18px, Mono Variable for code and CI output at 14px), a compact radius scale centered on 6-10px, and 15 component definitions covering the dark-green CTA, nav, hero heading, the CI benchmark card grid, and the build-log strip.

Feed this file to Claude or Cursor and it reproduces Depot's specific moves: Radix Mauve near-black instead of a neutral gray, grass-green reserved for success-output contexts rather than generic CTAs, and the Red Hat triple-cut stack that lets the page shift from display editorial to body prose to terminal log without changing the brand family. The one move worth studying independently of the brand: the dark-green-on-dark-green CTA, which works only because the grass-green text (#71d083) carries enough lightness to read as a foreground value against the #1b2a1e fill — a contrast ratio that most design systems would reject as insufficient but that Depot uses precisely because it looks like a terminal prompt.