A dark, product-forward developer brand on a near-black #121317 canvas — not the flat mono-only terminal its category implies. The hero leads with a full-bleed, tilted 3D perspective screenshot of the real dashboard receding into the dark, so the product is seen before it is read. Type is calm and modern: big near-white Satoshi headlines at a medium weight 600 (60/60), Geist for all UI, nav and body (400), and Geist Mono for code and small labels. Colour is rationed but vivid — electric lime #a8ff53 is the single action colour (and the logo mark), carrying dark text on lime buttons at a crisp 4px radius, with violet #7655fd, lavender #9c9af2 and pink #fa3abf reserved for badges, accents and syntax. Everything is tight: a consistent 4px radius system, thin dark #272a2e hairline borders around #1c1e21 cards, and subtle depth from the product screenshots and faint violet glows rather than heavy grey shadows.
Browse Trigger.dev in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: trigger.dev (live DOM, computed styles), 2026-07-25 (desktop 1512px). Coverage: home. Dashboard: behind login (needs-dashboard). Responsive: breakpoints not captured. Motion: not captured in detail.
Trigger.dev is a dark, product-forward developer brand. The canvas is near-black #121317, and the hero leads with a full-bleed, tilted 3D perspective screenshot of the actual dashboard (blurred, receding into the dark) so you see the product before you read a word. Type is calm and modern: big near-white Satoshi headlines at a medium weight, Geist for all UI and body, and Geist Mono for code and small labels. Colour is rationed but vivid — an electric lime green is the single hero action colour (and the logo mark), with violet, lavender and pink used for badges, accents and syntax. Everything is tight and crisp: a consistent 4px radius system, thin dark hairline borders around cards, and subtle depth from the product screenshots and faint violet glows rather than heavy shadows. Feels: dark, modern, product-led, technical.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #121317 | Near-black page background |
| surface | #15171a | Slightly raised surface |
| surface-2 | #1c1e21 | Card fill / hairline border |
| surface-3 | #0d0e12 | Deepest panel |
| border | #272a2e | Card border |
| border-2 | #3b3e45 | Stronger border |
| Token | Hex | Role / usage |
|---|---|---|
| heading | #e8e9ec | Near-white headlines |
| body | #d7d9dd | Primary body text |
| muted | #878c99 | Secondary text |
| muted-2 | #b5b8c0 | Tertiary text |
| Token | Hex | Role / usage |
|---|---|---|
| lime | #a8ff53 | Primary CTA + logo mark |
| lime-2 | #d9f07c | Secondary lime tint |
| violet | #7655fd | Badges, glows, accents |
| lavender | #9c9af2 | ".dev" wordmark, accent text |
| pink | #fa3abf | Accent / syntax |
| light-purple | #e888f8 | Accent / syntax |
Rule: dark near-black surfaces with thin dark hairline borders; lime is the one action colour, violet/lavender/pink are rationed accents.
Satoshi-Variable — display headlines (weight 600).Geist-Regular — UI, body, nav, buttons (weight 400).GeistMono-Regular — code, terminal, small labels.| Role | Family | Size/Line | Weight | Case |
|---|---|---|---|---|
| Hero display (h1) | Satoshi | 60 / 60 | 600 | sentence |
| Section (h2) | Satoshi | 20 / 28 | 600 | sentence |
| Body | Geist | 16 / 24 | 400 | sentence |
| Nav / UI | Geist | 14 | 400 | sentence |
| Button | Geist | 16 | 400 | sentence |
| Code / label | GeistMono | 13–14 | 400 | — |
Patterns: headlines are Satoshi at a medium 600 weight (not heavy); all chrome and body is Geist at 400; mono is reserved for code and small technical labels.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.