Trigger.dev Design System

Trigger.dev's marketing site does what most async-infrastructure brands talk about but rarely commit to: it holds one brand color and uses it exactly once above the fold. The canvas is a near-black charcoal, the headline ("Build and deploy fully-managed AI agents and workflows") sits at 60px in Satoshi Variable weight 600, and the only chromatic moment in the whole hero is a single lime-green pill labeled "Start building now" — electric lime against carbon, no gradient, no glow. Where Inngest leans into a violet-pink mesh and Resend carries a black-on-white editorial chrome, Trigger.dev commits to a dev-tools dark canvas with one volt of green and trusts the typographic split to do the rest.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 15 color tokens drawn from a charcoal ladder (#1c1e21 surface, #121317 deep, #3b3e45 hairline, all wired into a `--charcoal-100/850` scale) plus the lime brand voltage and a violet secondary tier that lives almost entirely in CSS variables rather than on the rendered page; 12 typography tokens split across three families — Satoshi Variable for display headlines at weight 600, Geist for paragraph copy at the unusually thin weight 300, and GeistMono for code samples and tab labels; a binary radius scale (4px or full pill); and 16 component definitions covering the lime CTA, the charcoal navigation pill, the tabbed code panel, the testimonial column, and the dark feature cell.

Feed this file to an AI coding tool and it reproduces Trigger.dev's specific moves: the charcoal-over-black canvas instead of pure-black or near-white, the single-volt lime CTA reserved for one above-fold position, the Satoshi-plus-Geist dual-sans split where one carries display and the other carries body, GeistMono for every code surface, and the 4px-everywhere radius that keeps cards feeling like terminal panels rather than rounded SaaS boxes. The graph-paper hairline grid is the move worth borrowing only if your product is itself developer-facing — on a consumer surface it reads as wire-frame rather than as documentation.