---
title: "Trigger.dev design system"
variant: extended
source: https://trigger.dev/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/trigger-dev)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Trigger.dev · Design System

> A dark, code-first canvas with vivid signals

**Theme:** dark · **Industry:** devtools · **Source:** https://trigger.dev/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A dark, editorial-style developer homepage uses restrained surfaces and hairline dividers to organize a long product story. Bright lime CTAs, compact code details, and dashboard imagery bring selective energy to an otherwise near-black interface.

## North star

Keep the interface nearly monochrome and let functional content and a few vivid accents carry the hierarchy.

## Overview

The page uses a near-black canvas throughout, with subtle charcoal surfaces and thin borders defining controls, cards, and section edges rather than large contrasting bands. Pale gray headlines sit against the dark background; muted gray copy keeps dense technical explanations readable without competing with the main message. Lime green is reserved for primary actions and small brand signals, while violet and green accents appear sparingly in badges, labels, and product visuals. Large Satoshi headings create a confident editorial hierarchy, paired with Geist for navigation, interface labels, and body copy; Geist Mono gives code samples their developer-tool character. The layout is a long, mostly single-canvas narrative, mixing centered hero content with left-aligned feature sections and occasional multi-column grids. Product screens, diagrams, and code snippets provide the visual substance instead of lifestyle photography. Compact spacing, generous section pauses, and restrained borders make the dense page feel structured rather than ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Night Canvas | `#121317` | `--color-night-canvas` | brand | Dominant page canvas, hero background, and the continuous backdrop behind most sections. |
| Slate Copy | `#878c99` | `--color-slate-copy` | neutral | Primary muted text for supporting copy, footer links, and secondary descriptions. |
| Divider Charcoal | `#1c1e21` | `--color-divider-charcoal` | surface | Hairline borders around cards, controls, footer areas, and subtle grid treatments. |
| Badge Violet Edge | `#481abd` | `--color-badge-violet-edge` | accent | Thin border on the small violet NEW badge; a limited badge detail, not a page-wide brand color. |
| Panel Charcoal | `#15171a` | `--color-panel-charcoal` | surface | Subtle filled surfaces for compact buttons, links, and interface elements. |
| Soft Headline | `#d7d9dd` | `--color-soft-headline` | neutral | Main headline, navigation, button, and foreground text against dark backgrounds. |
| Mist Gray | `#b5b8c0` | `--color-mist-gray` | neutral | Secondary button text and softer supporting copy. |
| Badge Lilac | `#bab2ff` | `--color-badge-lilac` | accent | Text inside the small NEW badge; primarily a badge-specific accent. |
| Badge Aubergine | `#311678` | `--color-badge-aubergine` | accent | Fill for the NEW badge, a small localized notification element. |
| Steel Gray | `#5f6570` | `--color-steel-gray` | neutral | Occasional subdued text and interface detail; also appears in consent-control styling. |
| Signal Lavender | `#9c9af2` | `--color-signal-lavender` | accent | Sparse accent text and small product or feature labels. |
| Trigger Lime | `#afec73` | `--color-trigger-lime` | accent | Bright primary CTA and brand signal, most visible in the header and hero. |
| Soft Citron | `#d9f07c` | `--color-soft-citron` | accent | Secondary lime accent in text and product details; use sparingly. |

### Semantic aliases

`--color-canvas` → `#121317` (Night Canvas) · `--color-surface` → `#15171a` (Panel Charcoal) · `--color-text` → `#d7d9dd` (Soft Headline) · `--color-text-muted` → `#878c99` (Slate Copy) · `--color-text-subtle` → `#b5b8c0` (Mist Gray) · `--color-border` → `#1c1e21` (Divider Charcoal) · `--color-accent` → `#9c9af2` (Signal Lavender) · `--color-accent-2` → `#afec73` (Trigger Lime) · `--color-accent-3` → `#d9f07c` (Soft Citron)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#d7d9dd` | `#121317` | 13.13:1 | AAA |
| `#d7d9dd` | `#15171a` | 12.71:1 | AAA |
| `#878c99` | `#121317` | 5.52:1 | AA |
| `#878c99` | `#15171a` | 5.34:1 | AA |
| `#b5b8c0` | `#121317` | 9.35:1 | AAA |
| `#b5b8c0` | `#15171a` | 9.05:1 | AAA |
| `#9c9af2` | `#121317` | 7.35:1 | AAA |
| `#9c9af2` | `#15171a` | 7.11:1 | AAA |

### Gradients

- `linear-gradient(90deg, rgb(28, 30, 33) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(90deg, rgba(18, 19, 23, 0), rgb(18, 19, 23) 25%, rgb(18, 19, 23) 75%, rgba(18, 19, 23, 0)), image-set(url("https://trigger.dev/patterns/crosses-64x64.png") 1dppx, url("https://trigger.dev/patterns/crosses`
- `linear-gradient(oklab(0 0 0 / 0) 0%, oklab(0.187446 0.000649907 -0.00823779 / 0.8) 50%, rgb(18, 19, 23) 100%)`
- `linear-gradient(to top, rgb(18, 19, 23) 0%, oklab(0.187446 0.000649907 -0.00823779 / 0.75) 50%, oklab(0 0 0 / 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-geist` | webfont | 400, 500, 600 | Navigation, body labels, buttons, captions, and interface copy. | Inter |
| Satoshi-Variable | `--font-body` | webfont | 500, 600 | Display and page-section headings. | Plus Jakarta Sans |
| Geist Mono | `--font-mono` | webfont | 400 | Code samples and technical snippets. | IBM Plex Mono |

- **Geist:** Mostly regular weight; compact UI text stays in sentence case, with uppercase reserved for tiny badges.
- **Satoshi-Variable:** Semibold headings; large display text is tight and confident, without added tracking.
- **Geist Mono:** Regular monospace with readable code-like line structure; avoid decorative tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1 | 0 | — | Satoshi-Variable | Oversized, centered hero headline. |
| h1 | 36px | 600 | 1.11 | 0 | — | Satoshi-Variable | Primary page or major feature heading. |
| h2 | 30px | 600 | 1.2 | 0 | — | Satoshi-Variable | Section headings such as How it works and feature groups. |
| h3 | 24px | 600 | 1.33 | 0 | — | Satoshi-Variable | Feature-card and secondary section headings. |
| body | 18px | 500 | 1.56 | 0 | — | Satoshi-Variable | Supporting product explanations and hero description. |
| caption | 16px | 400 | 1.5 | 0 | — | Geist | Compact labels and supporting interface text. |
| button | 16px | 400 | 1.5 | 0 | — | Geist | CTA and action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Geist | Header navigation and footer navigation. |
| link | 14px | 400 | 1.43 | 0 | — | Geist | Inline actions and feature links. |
| code | 14px | 400 | 1.43 | 0 | — | Geist Mono | Code examples and technical snippets. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 24, 28, 32, 40, 48 px.
- Section rhythm 32px · element gap 12px · card padding — · max content width 1222px.

The measured content max width is 1222px, with a compact 4px-based spacing system and a 32px section gap. The page is a long, mostly continuous dark canvas rather than a sequence of color-blocked bands. The centered hero gives way to left-aligned product sections, alternating feature splits and multi-column grids. Use a clear content rail and preserve generous pauses between major stories, while keeping cards, table-like lists, and interface labels compact. Media can extend broadly within its section; text stays organized into readable columns.

## Shape & elevation

- Radius: button `4px` · media `50%` · badge `9999px` · nav `4px` · link `4px` · xs `4px` · sm `6px` · pill `9999px`
- Shadow `hairline` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.917562 -0.136625 0.151101 / 0.3) 0px 0px 0px 3px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: rely on the dark canvas and fine charcoal borders for separation instead of raised cards or heavy shadows. Product previews can sit within outlined frames, with limited background overlays for legibility. Buttons have restrained depth, and the NEW badge uses a filled pill treatment. Avoid pronounced drop shadows.

## Imagery

There is no lifestyle photography in the first viewport. Use product videos, dashboard mockups, terminal/code panels, workflow diagrams, and small technology logos as the core imagery. Frame media in dark containers with restrained borders and keep contrast controlled so code and interface details feel embedded in the page. The hero uses blurred, angled code imagery behind centered copy; vivid greens, blues, and violets belong mostly to illustrative product content.

## Components

### Primary CTA

Compact lime-filled action with dark text, a small corner radius, and a right-facing arrow; prominent in the header and hero.

### Header navigation

A single dark horizontal bar with compact Geist links, a lime wordmark, community and GitHub affordances, and a bright Get started action.

### Announcement badge

A pill-shaped dark violet NEW badge with lilac text and a fine violet border, paired with the Ask Trigger announcement.

### Feature panel

Flat content areas use charcoal hairlines and restrained framing; technical explanations sit beside code, diagrams, or product media.

### Feature navigation strip

A compact row of bordered capability links with small colored icons and concise labels, placed immediately after the hero.

### Code sample

Dark, unraised code or terminal display with Geist Mono text, syntax color, and generous visual breathing room around the sample.

### Footer link columns

Multiple compact navigation columns on the dark canvas, introduced by the wordmark and grouped by product, developer, and company topics.

### Measured component styles

- **Primary button** (“Write tasks in regular code”): background #16181c · text #d7d9dd · radius 4px · padding 8px 12px · 400 16px Geist
- **Secondary button** (“Media processing”): transparent background · text #b5b8c0 · border 1px solid #1c1e21 · radius 4px · padding 0px 12px 0px 8px · 400 16px Geist
- **Link** (“Start building now”): transparent background · text #d7d9dd · radius 0px · padding 0px · 400 16px Geist
- **Card** (“Write tasks in your Trigger folder”): transparent background · text #d7d9dd · border 1px solid #1c1e21 · radius 0px · padding 0px · 400 16px Geist
- **Badge** (“NEW”): background #311678 · text #bab2ff · border 1px solid #481abd · radius 3.35544e+07px · padding 2px 8px · 600 10px Geist · uppercase
- **Navigation item** (“How it works Product Changelog Blog Docs”): transparent background · text #d7d9dd · radius 0px · padding 0px · 400 16px Geist

## Do

- Use #121317 as the dominant page canvas.
- Reserve #afec73 for primary actions and a few brand signals.
- Use Satoshi for headings and Geist for interface copy.
- Separate content with #1c1e21 hairlines rather than heavy shadows.
- Use code, diagrams, and product screens as the main visual material.
- Keep supporting copy muted and technical details compact.

## Don't

- Do not introduce bright section backgrounds or broad gradients.
- Do not use lime as a large text or surface color.
- Do not add lifestyle photography as the main product imagery.
- Do not make every section a rounded, elevated card.
- Do not use heavy shadows or thick decorative borders.
- Do not crowd the hero with navigation-like secondary content.

## Agent prompt

Build a new developer-focused SaaS page using Trigger.dev’s dark, restrained visual language. Set #121317 as the continuous canvas, use #d7d9dd for primary text, #878c99 for supporting copy, and #1c1e21 for fine dividers. Treat #afec73 as a scarce, high-visibility action accent; keep #9c9af2 and #d9f07c to small labels or technical details. Use Satoshi or a close substitute such as Plus Jakarta Sans for confident semibold headings, Geist or Inter for UI and body text, and Geist Mono for code. Structure content on a centered max-width rail, mixing aligned feature splits, compact grids, code examples, diagrams, and product previews. Keep surfaces flat and shadows minimal. Make the page feel detailed and technical without sacrificing clear section rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and description over full-bleed code video, with two actions. | Announcement link, Primary and secondary CTA | Dark code backdrop, Lime CTA, Centered heading |
| 2 | category-nav | Compact horizontal strip of capability links followed by a split code-and-copy feature. | Jump among capabilities, Explore feature | Icon links, Code preview, Hairline separators |
| 3 | how-it-works | Left-aligned section title above a wide video or process area. | Play, Replay, Fullscreen | Video controls, Minimal heading |
| 4 | video | Wide single-column video panel with a short label. | Watch product demo | Code video, Small caption |
| 5 | feature-split | Section heading and explanatory copy on a single content rail. | Learn about AI agents | Text-led feature, Inline link |
| 6 | feature-grid | Six visual feature cards in a multi-column grid. | View example | Workflow diagrams, Compact cards |
| 7 | feature-split | Large section title followed by alternating product preview and text rows. | Scan operational benefits | Queue preview, Short feature copy |
| 8 | feature-split | Text and billing visual arranged as a feature row. | Understand pricing model | Cost graphic, Muted label |
| 9 | feature-split | Infrastructure graphic paired with a short text block. | Review scaling benefit | Chart illustration, Feature copy |
| 10 | feature-grid | Two-column section with several feature descriptions and small interface previews. | Review alerts, Filter runs | Alert preview, Filter UI, Versioning panel |
| 11 | product-showcase | Text and product mockup arranged in a wide split, followed by another example. | Explore realtime status | App mockup, Status display |
| 12 | feature-split | Feature copy and streaming illustration in a single content section. | Explore streaming API | Stream preview, Inline action |
| 13 | feature-grid | Introductory heading followed by a three-column integration and runtime grid. | Learn more | Icon labels, Compact feature items |
| 14 | comparison | Long feature matrix grouped into Development, Production, and Observability columns. | View all features, Compare capabilities | Column headings, Dense link list |
| 15 | feature-split | Two-column section with selectable retry topics beside a code sample. | Select retry behavior, Open docs | Selected list item, Code block |
| 16 | integrations | Short heading aligned with a horizontal row of technology logos. | Scan supported stack | Logo strip, Minimal framing |
| 17 | feature-split | Centered statement with small supporting logos or graphic details. | Reinforce open-source trust | Centered text, Simple illustration |
| 18 | stats | Three horizontally aligned metrics followed by a community section heading. | Review community proof | Large figures, Small labels |
| 19 | testimonials | Several narrow testimonial columns with attribution and small profile images. | Read testimonials, Join community | Quote columns, Avatar and attribution |
| 20 | content-feed | Four-column content preview with a section heading and view-all link. | Browse updates, View all | Article cards, Compact metadata |
| 21 | cta | Three-column closing pitch with actions on the left and benefits alongside. | Get started for free, Copy setup prompt | Lime CTA, Benefit columns |
| 22 | footer | Wordmark and social icons beside several compact link columns. | Navigate documentation, Visit social channels | Grouped footer links, Brand mark, Social icons |

## Source CSS custom properties (selected)

```css
--cc-modal-border-radius: .375rem;
--cc-btn-border-radius: .375rem;
--cc-modal-transition-duration: .25s;
--cc-link-color: #b5b8c0;
--cc-bg: #1c1e21;
--cc-primary-color: #e8e9ec;
--cc-secondary-color: #878c99;
--cc-btn-primary-bg: #3b3e45;
--cc-btn-primary-color: #e8e9ec;
--cc-btn-primary-border-color: #3b3e45;
--cc-btn-primary-hover-bg: #5f6570;
--cc-btn-primary-hover-color: #e8e9ec;
--cc-btn-primary-hover-border-color: #5f6570;
--cc-btn-secondary-bg: #3b3e45;
--cc-btn-secondary-color: #e8e9ec;
--cc-btn-secondary-border-color: #3b3e45;
--cc-btn-secondary-hover-bg: #5f6570;
--cc-btn-secondary-hover-color: #e8e9ec;
--cc-btn-secondary-hover-border-color: #5f6570;
--cc-separator-border-color: #272a2e;
--cc-toggle-on-bg: #3b3e45;
--cc-toggle-off-bg: #525f6b;
--cc-toggle-on-knob-bg: #e8e9ec;
--cc-toggle-off-knob-bg: #e8e9ec;
--cc-toggle-enabled-icon-color: #e8e9ec;
--cc-toggle-disabled-icon-color: #e8e9ec;
--cc-toggle-readonly-bg: #343e45;
--cc-toggle-readonly-knob-bg: #5f6b72;
--cc-toggle-readonly-knob-icon-color: #343e45;
--cc-section-category-border: #1e2428;
--cc-cookie-category-block-bg: #1e2428;
--cc-cookie-category-block-border: #1e2428;
--cc-cookie-category-block-hover-bg: #242c31;
--cc-cookie-category-block-hover-border: #232a2f;
--cc-cookie-category-expanded-block-bg: transparent;
--cc-cookie-category-expanded-block-hover-bg: #343e45;
--cc-overlay-bg: rgba(0,0,0,.65);
--cc-webkit-scrollbar-bg: #1e2428;
--cc-webkit-scrollbar-hover-bg: #5f6570;
--cc-footer-bg: #0c0e0f;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/trigger-dev