# Trigger.dev — Marketing Site Design Spec

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

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces
| 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 |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| heading | `#e8e9ec` | Near-white headlines |
| body | `#d7d9dd` | Primary body text |
| muted | `#878c99` | Secondary text |
| muted-2 | `#b5b8c0` | Tertiary text |

### Accents
| 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.

## 3. Typography Rules

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

## 4. Component Stylings

### Buttons
- **Primary**: bg lime `#a8ff53`, text near-black `#121317`, radius `4px`, height `32–40px`, Geist 16px/400 (e.g. "Get started", "Start building now").
- **Ghost**: transparent, light-gray text, radius `4px` (nav "Login").
- Small radius (4px) throughout — crisp, not pill.

### Badges
- Pill announcement badge ("NEW · v4.5.0: AI Agents are GA") with a violet `#7655fd` "NEW" tag on a dark rounded chip.

### Cards / panels
- Dark surface `#1c1e21` with thin `#272a2e` borders, radius `4px`; subtle depth from product screenshots.

### Nav
- Lime triangle logo + "Trigger" (white) + ".dev" (lavender); How it works, Product, Changelog, Blog, Docs, Pricing; right Discord + GitHub star count, Login, lime "Get started".

### Product screenshot
- Full-bleed tilted 3D perspective render of the dashboard (runs table, filters) receding into the dark — the signature hero element.

### Inputs
- Not deeply captured; dark, 4px radius, hairline border.

## 5. Layout Principles

- Dark hero built around a tilted 3D product screenshot, with a centered badge, big Satoshi headline, Geist sub and a lime CTA.
- Sections on near-black with dark hairline-bordered cards; occasional violet glow accents.
- Content centered; generous scale on headlines; developer-console tone.

## 6. Depth & Elevation

- Radii: `4px` almost everywhere (crisp system), `6px` minor.
- Elevation: subtle — product screenshots carry a soft `rgba(0,0,2,.3) 0 10px 30` shadow; cards use dark hairline borders; faint violet glows.
- Depth is the tilted product render and thin borders, not heavy grey shadows.

## 7. Motion

- Not captured in detail; the tilted product render and glow accents suggest lively but restrained motion.

## 8. Backgrounds, Effects & WebGL

- Near-black canvas with a full-bleed tilted 3D product-screenshot hero.
- Rationed vivid accents (lime, violet, pink) and faint violet glows.
- No heavy WebGL observed; dark, screenshot-led surfaces with hairline-bordered cards.

## 9. Do's and Don'ts

### Do
- Use a near-black `#121317` canvas with thin dark hairline borders and a tight 4px radius system.
- Lead with a full-bleed tilted 3D screenshot of the real product.
- Set headlines in Satoshi at weight 600; keep all UI/body in Geist 400 and code in Geist Mono.
- Make lime `#a8ff53` the single action colour (and logo mark), with dark text on it.
- Ration violet/lavender/pink to badges, accents and syntax; add faint violet glows.

### Don't
- Don't make it a flat mono-only terminal — headlines are Satoshi, and product screenshots lead.
- Don't round to pills; the system is a crisp 4px radius.
- Don't over-saturate the chrome — lime is the one action colour, the rest are rationed accents.
- Don't rely on heavy grey shadows; depth is the product render and hairline borders.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). No cookie banner encountered on this pass.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#121317` · Surface `#1c1e21` · Border `#272a2e` · Text `#d7d9dd` / heading `#e8e9ec` · Lime `#a8ff53` · Violet `#7655fd`
- Fonts: `Satoshi` (display 600) / `Geist` (UI/body 400) / `GeistMono` (code) · Hero 60/60 · Radius 4px · Button 32–40px
- Buttons: lime `#a8ff53` fill, dark text, radius 4px · Dark hairline-bordered cards · Tilted product-screenshot hero

<trigger-dev_design_language>
Use the Trigger.dev design language: a dark, product-forward developer brand on a near-black `#121317` canvas. Lead the hero 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 &mdash; 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 hairline borders (`#272a2e`) around `#1c1e21` cards, and subtle depth from the product screenshots and faint violet glows rather than heavy grey shadows. Feels: dark, modern, product-led, technical. Avoid: a flat mono-only terminal treatment (headlines are Satoshi and screenshots lead), pill radii, over-saturated chrome, and heavy grey shadows.
</trigger-dev_design_language>