---
version: alpha
name: "Trigger.dev"
website: "https://trigger.dev"
description: >-
  An open-source background-jobs platform whose marketing site sits on a near-black canvas of charcoal greys (#1c1e21 surface, #121317 deep), with a single electric-lime CTA pill in #a8ff53 holding the entire chromatic budget. The display tier is Satoshi Variable at weight 600 (60px hero, 48px section), running against body copy in Geist at the unusually thin weight 300 — a typographic split that lets two sans-serifs share the system without competition. GeistMono carries every code sample and tab label, and the radius scale is binary 4px-or-pill with no middle. Above-the-fold cards stack on a sharp visible grid of #1c1e21 hairlines that read as graph paper rather than borders.

seo:
  title: "Trigger.dev Design System for React — lime #a8ff53 on charcoal, Satoshi + Geist, 18 components"
  metaDescription: "Trigger.dev's marketing system on a charcoal canvas with one electric-lime CTA, dual-sans typography (Satoshi display, Geist 300 body), GeistMono code, and a 4px-or-pill radius scale. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Electric scarcity — lime #a8ff53 is the sole brand voltage, appearing 4 times total against a near-black canvas, all on the primary CTA"
    - "Dual-sans split — Satoshi Variable 600 carries display, Geist 300 carries body; one for shouting, one for talking quietly"
    - "Weight 300 body copy — Geist runs at the unusually thin 300 across paragraphs, half a step lighter than the dev-tools convention"
    - "Graph-paper hairlines — the #1c1e21 grid #e5e7eb-light line under cards reads as graph paper rather than card chrome, 1776 border occurrences"
    - "Binary radius — 4px (91 occurrences) for everything cardlike plus a full pill (33) for tag chips; no middle 8/12/16 tier"
  tags:
    - "Backend, Database & DevOps"
    - "Developer Tools & IDEs"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://trigger.dev"
      title: "Trigger.dev — official site"
      description: "Trigger.dev's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Trigger.dev's primary brand color?"
      answer: "Trigger.dev's brand voltage is electric lime #a8ff53, wired into the page CSS as `--primary`. It appears 4 times across the captured marketing surface — 3 as background fill, 1 as text — and all four occurrences live on the primary CTA pill at the bottom of the hero. Every other color visible on the page belongs to the charcoal ladder (#1c1e21 through #121317), the muted body greys (#878c99, #d7d9dd), or the violet-purple secondary that lives almost entirely inside CSS custom properties without rendering on the marketing chrome. The discipline is the point: one CTA, one volt of green, nothing else."
    - id: "typography"
      title: "What typefaces does Trigger.dev use, and what should I substitute?"
      answer: "Trigger.dev runs three sans-serif families with a strict division of labor. Satoshi Variable carries every display heading (60px / 600 for the hero h1, 48px / 600 for big section h2s, 30px / 600 for sub-section h3s). Geist carries every body paragraph and nav link at the unusually thin weight 300 — half a step lighter than the dev-tools convention. GeistMono carries every code sample, tab label, and inline metadata strip. Satoshi is licensed but free for personal use; the closest open substitutes are Inter at the same sizes for body and Geist itself (Vercel ships it open-source) is already deployed."
    - id: "canvas-color"
      title: "Why does Trigger.dev use charcoal rather than pure black?"
      answer: "The canvas sits at #1c1e21 — a near-black with a faint blue undertone (OKLCH 23% lightness, 6 chroma) wired as `--charcoal-800` and `--cc-bg`. Below the fold the page drops to a deeper #121317 (`--charcoal-850`) for the footer and code-block backgrounds. The deliberate choice of charcoal-over-black is the dev-tools convention — Linear, Vercel, and Railway all do the same thing — because pure black against white text produces an over-sharp contrast that fatigues developer eyes during long documentation reads. The charcoal softens that contrast without sacrificing the dark-mode discipline."
    - id: "rounded-style"
      title: "What is Trigger.dev's corner-radius philosophy?"
      answer: "The radius scale is binary: small or full pill, nothing in between. 4px carries 91 of the captured 126 radius occurrences — every card, code panel, feature cell, and dropdown surface. The remaining 33 occurrences are `9999px` full pills, used on tag chips, the primary CTA, and the company-logo wall avatar dots. There are only 2 captured occurrences of 6px and zero in the 8-24px middle range that most SaaS systems run. The effect is that nothing on the page reads as plump or friendly — surfaces are either sharp-cornered terminal panels or fully rounded label chips."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own background-jobs marketing site?"
      answer: "Yes — the file is structured for Claude, Cursor, Copilot, or any AI tool that reads structured design tokens. The agent will reproduce Trigger.dev's specific moves: charcoal canvas instead of pure black, single-volt lime CTA reserved for one above-fold position, Satoshi-plus-Geist dual-sans split, GeistMono for code, and the binary 4px-or-pill radius scale. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into a Tailwind config or a `:root` block. The one move worth borrowing only if your product is genuinely developer-facing is the graph-paper hairline grid — on a consumer surface it reads as wire-frame."

mockups:
  - "marketing-hero"
  - "code-editor-ide"

colors:
  primary: "#a8ff53"
  secondary: "#7655fd"
  accent-purple: "#9c9af2"
  accent-magenta: "#e888f8"
  accent-lime-soft: "#d9f07c"
  canvas: "#1c1e21"
  surface-deep: "#121317"
  surface-1: "#272a2e"
  surface-2: "#3b3e45"
  ink: "#e5e7eb"
  ink-bright: "#d7d9dd"
  ink-muted: "#878c99"
  ink-soft: "#b5b8c0"
  hairline: "#3b3e45"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 60px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: "2.4px"
  display-md:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 40px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 36px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 30px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"Satoshi Variable\", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 20px
    letterSpacing: 0
  button-md:
    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  nav-link:
    fontFamily: "Geist, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  mono-md:
    fontFamily: "GeistMono, ui-monospace, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "6px"
  full: "9999px"

spacing:
  xxs: "2px"
  xs: "4px"
  sm: "6px"
  base: "8px"
  md: "12px"
  lg: "16px"
  xl: "28px"
  2xl: "40px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "8px 16px"
    height: "40px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "8px 12px"
    height: "40px"
    borderColor: "{colors.surface-2}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-bright}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "12px 16px"
    height: "59px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink-bright}"
    typography: "{typography.nav-link}"
    padding: "8px 12px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-md}"
  tab-pill:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "0px 12px 0px 8px"
    height: "40px"
    borderColor: "{colors.canvas}"
  tag-chip:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-bright}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: "4px 8px"
    height: "24px"
  card-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-bright}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "16px"
    borderColor: "{colors.surface-1}"
  code-block:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.ink-bright}"
    typography: "{typography.mono-md}"
    rounded: "{rounded.sm}"
    padding: "16px"
    borderColor: "{colors.surface-1}"
  testimonial-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-bright}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.sm}"
    padding: "28px"
  feature-cell:
    backgroundColor: "transparent"
    textColor: "{colors.ink-bright}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "28px 16px"
    borderColor: "{colors.surface-1}"
  logo-chip:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    rounded: "{rounded.full}"
    padding: "8px 16px"
    height: "40px"
  footer:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "40px 16px"
---

## Overview

Trigger.dev's marketing site commits to a developer-tools chrome with three deliberate moves. **Electric scarcity**: the brand voltage is a lime green (`{colors.primary}` — #a8ff53) wired into the page CSS as `--primary`, and across the entire captured marketing surface it appears just 4 times — all of them on the primary CTA pill that closes the hero. Where Inngest paints itself in a violet-pink mesh and Resend carries a black-on-white editorial chrome, Trigger.dev sits on a near-black charcoal canvas with one volt of green and trusts a dual-sans typographic split to do the rest. Below the fold the page recedes to muted-grey paragraph copy and faint hairline cards; the lime never appears again.

**Dual-sans labor split**: the system runs two sans-serif families with no overlap in role. Satoshi Variable at weight 600 carries every display heading (60px hero h1, 48px section h2, 30-36px sub-section h3) — confidence through weight and counter shape. Geist carries every body paragraph at the unusually thin weight 300, half a step lighter than the dev-tools convention, with body sub-paragraphs in `{colors.ink-muted}` (#878c99). GeistMono completes the trio, doing every code sample and every tab label. The result reads as "documentation page" rather than "marketing page" — the typographic register signals to a developer that this site is the same surface as the docs.

The shape language is **binary 4px-or-pill**. 91 of the 126 captured radius occurrences are 4px (cards, code blocks, feature cells, dropdowns), and the remaining 33 are full pills (tag chips, the CTA, logo avatars). There is no 8/12/16/24px middle tier at all — a deliberate skip that keeps surfaces feeling like terminal panels rather than rounded SaaS boxes.

**Key Characteristics:**
- Single-volt lime CTA (`{colors.primary}` — #a8ff53) reserved for one above-fold position, 4 captured occurrences in total.
- Charcoal canvas (`{colors.canvas}` — #1c1e21), not pure black — wired as `--charcoal-800` / `--cc-bg`; the system softens contrast for long-form reading.
- Deeper #121317 (`{colors.surface-deep}`) carries the footer and code-block backgrounds, lifting them by ~5% lightness against the canvas.
- Three-family typographic split: Satoshi Variable 600 for display, Geist 300 for body, GeistMono for code/tabs.
- Body paragraphs run at Geist weight 300 — half a step lighter than the dev-tools convention.
- 1776 captured hairline occurrences in `{colors.hairline}` (#3b3e45 / #e5e7eb at low opacity), the dominant card-divider tone.
- Binary radius scale — 4px (91 captured) for every card-like surface, full pill (33) for tag chips and the CTA. Zero 8/12/16px middle.
- 8px base spacing unit; major tokens at `{spacing.md}` (12px) and `{spacing.xl}` (28px) for card padding.

## Colors

### Brand

- **Trigger Lime** (`{colors.primary}` — #a8ff53): frequency 4. Used as background (3) and text (1). Wired as `--primary`. The single brand voltage — appears exclusively on the primary CTA pill above the fold. Outside that one occurrence the lime is absent from the rendered marketing surface, making it the rarest-but-loudest color in the system.
- **Trigger Violet** (`{colors.secondary}` — #7655fd): frequency 1 (declared as `--secondary`). A purple-blue accent that lives almost entirely inside CSS custom properties rather than on the page; reserved for future product chrome or sub-brand expansion.
- **Accent Purple** (`{colors.accent-purple}` — #9c9af2): frequency 302 — text only. Used inside code samples and inline highlight badges; not part of the brand-chrome voltage despite the high count.
- **Accent Magenta** (`{colors.accent-magenta}` — #e888f8): frequency 26 — text only. Used for a single category of inline syntax highlighting in the embedded code blocks.
- **Accent Lime Soft** (`{colors.accent-lime-soft}` — #d9f07c): frequency 11 — text only. The muted-lime sibling that appears inside code-sample syntax coloring, not as a brand mark.

### Surface

- **Canvas** (`{colors.canvas}` — #1c1e21): frequency 216. Used as background (38), border (156), text (18), and gradient (4). The page floor — wired as `--charcoal-800`, `--cc-bg`, and `--grid-dimmed`. A near-black with a faint blue undertone; the contrast against ink text reads softer than pure black.
- **Surface Deep** (`{colors.surface-deep}` — #121317): frequency 63. Used as background (45), text (7), gradient (11). The deeper tier — carries the footer, code-block backgrounds, and the tabbed code-panel surface. Wired as `--charcoal-850` / `--cc-footer-bg`.
- **Surface-1** (`{colors.surface-1}` — #272a2e): frequency 5 — borders only. The third charcoal step, used as a slightly-lighter card divider on dropdown menus. Wired as `--charcoal-700`.
- **Surface-2** (`{colors.surface-2}` — #3b3e45): frequency 16. Used as border (14) and text (2). The secondary button background and the lightest charcoal step — wired as `--charcoal-600`.

### Text

- **Ink** (`{colors.ink}` — #e5e7eb): frequency 1778. Used as border (1776), text (2). Wired as `--text-bright` and `--charcoal-100`. The dominant light tone — also used (via opacity) as the hairline color across the page; the hex's role is split between brightest text and lightest border.
- **Ink Bright** (`{colors.ink-bright}` — #d7d9dd): frequency 1151. Used as text (1150), border (1). Wired as `--charcoal-200`. The workhorse body-text tone on the dark canvas.
- **Ink Muted** (`{colors.ink-muted}` — #878c99): frequency 307 — text only. Wired as `--charcoal-400`, `--text-dimmed`. Secondary paragraph copy, captions, footer text.
- **Ink Soft** (`{colors.ink-soft}` — #b5b8c0): frequency 102. Used as text (100), border (2). Wired as `--charcoal-300`. Tertiary text — sub-labels and link affordances.

### Hairline

- **Hairline** (`{colors.hairline}` — #3b3e45): the secondary card divider tone, used where the brighter `{colors.ink}` would feel too bold. Wired as `--charcoal-600`.

## Typography

### Font Families

The system runs three sans-serif voices with strict role separation. **Satoshi Variable** carries every display heading from 24px through 60px, always at weight 600 — a heavier register than most of the dev-tools category leans on. **Geist** carries every body paragraph, nav link, and button label, with the unusual choice of weight 300 for paragraph copy (most dev tools run body at 400-500). **GeistMono** completes the trio, handling every code sample, every tabbed panel label, and inline metadata strips. The fallback stacks walk `ui-sans-serif, system-ui, -apple-system, sans-serif` for the sans tier and `ui-monospace, monospace` for the mono tier.

### Hierarchy

| Token | Size | Weight | Family | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 60px | 600 | Satoshi | Hero h1 ("Build and deploy fully-managed AI agents and workflows") |
| `{typography.display-lg}` | 48px | 600 | Satoshi | Large section h2 with 2.4px tracking |
| `{typography.display-md}` | 36px | 600 | Satoshi | Mid-section h3 |
| `{typography.heading-lg}` | 30px | 600 | Satoshi | Sub-section h2 / h3 |
| `{typography.heading-md}` | 24px | 600 | Satoshi | Card titles, h3 |
| `{typography.heading-sm}` | 20px | 600 | Satoshi | Small headings, h3 |
| `{typography.body-lg}` | 18px | 500 | Satoshi | Testimonial copy, callouts |
| `{typography.body-md}` | 16px | 300 | Geist | Default paragraph running text |
| `{typography.body-sm}` | 14px | 300 | Geist | Caption rows, footnote text |
| `{typography.button-md}` | 16px | 400 | Geist | CTA and button labels |
| `{typography.nav-link}` | 14px | 400 | Geist | Top-nav link labels |
| `{typography.mono-md}` | 14px | 400 | GeistMono | Code samples, tab labels |

### Principles

Body weight 300 is the unusual choice. Most dev-tools brands run body at 400 or 500 — Trigger.dev drops it to Geist 300, half a step lighter than Linear, Vercel, or Inngest. The thinner stroke softens the long-form reading register and lets Satoshi 600 carry more typographic muscle by contrast. Paragraph copy below the fold reads almost like documentation prose rather than marketing copy — which is the point.

### Note on Font Substitutes

Satoshi Variable is licensed but free for personal use; the closest open substitute is **Inter** at weight 600 with -0.5% tracking, which transfers cleanly to the same display sizes. **Geist** itself is Vercel's open-source sans and ships free; if the production stack needs a fallback the system stack walks `ui-sans-serif, system-ui`. For the mono tier, **GeistMono** is also open-source — **JetBrains Mono** or **IBM Plex Mono** transfer cleanly at the same 14px size.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px as the dominant module.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 6px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 28px · `{spacing.2xl}` 40px.
- **Section padding (vertical):** ~80-128px between major sections on the dark canvas.
- **Card internal padding:** `{spacing.lg}` (16px) on small cards, `{spacing.xl}` (28px) on testimonial blocks.
- **Top-nav padding:** 12px vertical, 16px horizontal.

### Grid & Container

- **Max content width:** ~1024px on the hero text block, ~1280px on the feature grids and logo wall.
- **Hero:** centered text + sub-paragraph + single CTA pill, max-width 1024px on the headline.
- **Feature grid:** 4-column on the "Build invincible AI apps" row (Autonomous / Prompt chaining / Routing / Parallelization).
- **Logo wall:** monochrome grey company logos in a single horizontal row beneath the testimonial column.

### Rhythm

The page alternates between **dense text bands** (hero + testimonial column on the same row) and **wide feature grids** (4-up cards with diagrammatic illustrations). The graph-paper hairline grid runs underneath nearly every card surface, which gives the rhythm a documentation-page feel — sections terminate on visible 1px rules rather than on whitespace.

## Elevation

The system has essentially **no shadow tier**. The captured page has only 1 shadow occurrence in `#000000` and uses tonal lift instead — cards on the dark canvas read as elevated by sitting in `{colors.surface-deep}` (#121317) against `{colors.canvas}` (#1c1e21), a ~5% lightness gap that's enough to register without drawing a shadow.

- **Flat (no shadow):** hero, body bands, feature cells, footer — 99% of surfaces.
- **Tonal lift:** `{colors.surface-deep}` cards sit on `{colors.canvas}` — the small lightness gap reads as elevation without any shadow drawn.
- **Hairline outlines:** `{colors.hairline}` (#3b3e45) and the ink-at-low-opacity carry 1776 of the captured border occurrences — the dominant elevation mechanism.

## Shapes

The radius scale is **binary 4px-or-pill** with no middle tier:

- `{rounded.none}` 0px — used on feature-cell edges that meet the graph-paper grid.
- `{rounded.sm}` 4px (91 occurrences) — every card, code panel, feature cell, dropdown surface, and the primary CTA. The dominant radius in the system.
- `{rounded.md}` 6px (2 occurrences) — a rare middle value used on one or two minor UI surfaces.
- `{rounded.full}` 9999px (33 occurrences) — tag chips, logo avatars, certain pill labels.

The deliberate skip of 8/12/16px middle radii is the move. The surface either reads as a sharp-cornered terminal panel (4px) or as a fully rounded chip (pill); there is no rounded-but-not-pill option that would soften the dev-tools register.

## Components

**`button-primary`** — The signature CTA. Lime `{colors.primary}` (#a8ff53) fill, charcoal `{colors.canvas}` text, `{rounded.sm}` 4px radius, 8x16 padding, 40px height. "Start building now" is the canonical instance, sitting at the bottom of the hero stack.

**`button-secondary`** — Transparent fill, `{colors.ink}` text, 1px `{colors.surface-2}` border, `{rounded.sm}` radius, 8x12 padding, 40px height. Used for "10.5k · Open source" in the hero and "Login" in the top-nav.

**`top-nav`** — Charcoal `{colors.canvas}` surface, 59px height. Wordmark flush left, product-nav links (Products, How it works, Changelog, Pricing, Blog, Docs) center, "Our $13.5k" badge plus Login and "Get started" cluster flush right.

**`nav-link`** — Transparent background, `{colors.ink-bright}` text in `{typography.nav-link}` (14px / 400), 8x12 padding.

**`hero-heading`** — `{colors.ink}` text, `{typography.display-xl}` (60px / 600 Satoshi). The largest typographic moment in the system.

**`section-heading`** — `{colors.ink}` text, `{typography.display-md}` or `{typography.heading-lg}` Satoshi. Used for "Build invincible AI apps", "Deploy and scale to any size", "Find and fix bugs fast".

**`body-paragraph`** — Default Geist `{typography.body-md}` at weight 300 in `{colors.ink-muted}` (#878c99). The dimmed-paragraph treatment is deliberate — most marketing sites would use bright-white body, Trigger.dev runs muted.

**`tab-pill`** — Tabbed code-panel category labels. `{colors.surface-deep}` fill, `{colors.ink-soft}` text, `{rounded.sm}` 4px, 0x12 / 0x8 padding, 40px height, 1px `{colors.canvas}` border. Used for "AI agents / Media processing / Media generation / Human in the loop / Streaming / Run Python / Marketing / Browser automation".

**`tag-chip`** — Small `{rounded.full}` pill chips with `{colors.surface-1}` fill and `{colors.ink-bright}` text. Used for status labels like "Completed", "Executing", "Failed" in the task-queue illustration.

**`card-dark`** — Default content card. `{colors.canvas}` fill, `{colors.ink-bright}` text, `{rounded.sm}` 4px, 16px padding, 1px `{colors.surface-1}` border.

**`code-block`** — The tabbed code-sample panel. `{colors.surface-deep}` fill, `{colors.ink-bright}` text, `{typography.mono-md}` (14px GeistMono), `{rounded.sm}` 4px, 16px padding. Syntax coloring uses the accent-purple/magenta/lime-soft palette for keywords, strings, and comments.

**`testimonial-card`** — `{colors.canvas}` fill, `{colors.ink-bright}` text, `{rounded.sm}` 4px, 28px padding, `{typography.body-lg}` Satoshi 500. The right column of the hero row holds the canonical instance ("We decided to use Trigger.dev over Inngest…").

**`feature-cell`** — The 4-up feature-grid tile. Transparent fill, `{colors.ink-bright}` text, 28x16 padding, 1px `{colors.surface-1}` separator. Holds a small diagrammatic illustration, an h4 title, and a 1-2 line description.

**`logo-chip`** — Transparent fill, `{colors.ink-muted}` monochrome logo at 40px height. The customer-logo wall renders every mark in muted grey at uniform size — Papermark, Vidrovr, AXIOM, Linksy, Inkitty, and others.

**`footer`** — `{colors.surface-deep}` fill, `{colors.ink-muted}` text, `{typography.body-sm}` 14px / 300 Geist, 40x16 padding.

## Do's and Don'ts

**Do** treat the lime brand voltage as a single above-fold moment. The system has exactly one `{colors.primary}` (#a8ff53) CTA — multiplying it into nav-bar pills, sticky-button reuses, or inline-link colors would dilute the only chromatic signal in the system.

**Do** run paragraph copy in `{colors.ink-muted}` (#878c99) on Geist weight 300, not in bright white. The dimmed-body treatment is deliberate — it signals "documentation register" rather than "marketing register," and the bright white is reserved for headings and code samples.

**Do** use Satoshi Variable for every display heading and Geist for every body paragraph. Mixing the families (e.g., a Geist 600 heading or a Satoshi 300 body line) breaks the labor split that makes the dual-sans system read as deliberate rather than accidental.

**Do** stack tag chips at `{rounded.full}` and content cards at `{rounded.sm}` 4px. The binary radius scale is part of the system's identity — chips read as chips and panels read as panels because there's no middle radius softening either category.

**Don't** introduce a 12 / 16 / 20px middle radius tier. The system runs 91 captured 4px occurrences and 33 captured full-pill occurrences with nothing in between — adding a middle value would soften the terminal-panel feel that the binary scale is doing.

**Don't** use the accent-purple `{colors.accent-purple}` (#9c9af2) or accent-magenta `{colors.accent-magenta}` (#e888f8) outside code-syntax contexts. These are syntax-highlighting tokens inside the embedded code samples, not brand accents — using them on UI chrome would steal the lime's role as the sole chromatic voltage.

**Don't** swap the canvas from `{colors.canvas}` (#1c1e21) to pure black or to a softer slate-near-black. The charcoal tone is wired as `--charcoal-800` across the entire system, and the page's 1776 hairline borders are calibrated against it; switching the canvas would force a hairline rebalance.

**Don't** run body paragraphs at Geist weight 400 or above. The system commits to 300 across paragraph copy as a deliberate documentation-register move. Bumping to 400 turns the page into a generic dev-marketing site and loses the typographic register split.

## Known Gaps

- **Hover and focus states:** the captured marketing surface shows resting states only. Focus rings, disabled tints, error styling for forms — all live in the product app at `cloud.trigger.dev` rather than on the marketing site.
- **Form input:** the marketing site has no rendered input field; `text-input` is not captured here. The input chrome lives in the auth flow and the product editor.
- **Light mode:** the captured surface is dark-only. The Trigger.dev product app has both light and dark variants but only the dark marketing chrome is represented in this spec.
- **Motion:** several illustrations animate on scroll-into-view (the task-queue grid, the parallelization diagram) but the spec captures end-state values only. Easing curves and stagger timing live in the React runtime.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Trigger.dev dashboard, run-detail view, and queue-management surfaces carry a richer token set — log-level colors, run-status badges, retry-indicator chrome — that is not represented here.
- **Sub-brand purple tier:** `{colors.secondary}` (#7655fd) and a paired lighter hover variant are declared as CSS variables but render in just 1-2 places on the marketing surface; their primary use is in the product editor's selection states.
- **Syntax highlighting palette:** the accent purple/magenta/lime-soft trio inside embedded code blocks borrows from a standard dark-mode IDE palette but isn't tied to a specific theme (VS Code, Shiki, etc.); the exact mapping lives in the docs-site Shiki configuration.