---
name: Trigger.dev
description: "The site effectively uses a dark, developer-centric aesthetic with a single, high-impact accent color to guide attention, making it a strong example of focused, professional SaaS design."
version: alpha

colors:
  background: "#121317"
  primary: "#D7D9DD"
  secondary: "#878C99"
  tertiary: "#BFFF00"
  neutral: "#878C99"
  bg-soft: "#1C1E21"
  bg-quiet: "#15171A"
  muted-soft: "#B5B8C0"
  line: "rgba(59, 62, 69, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1px"
  heading-2:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 6px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A dark, developer-focused platform for building and deploying AI agents and workflows with full runtime control.

*An industrial-grade power strip for AI workflows*

## Colors

Deep dark surfaces with high-contrast neutral text and a single neon-green accent for primary actions.

- **Background (`#121317`)** — uses `bg` token
- **Primary text (`#D7D9DD`)** — uses `ink` token
- **Secondary text (`#878C99`)** — uses `ink-soft` token
- **Accent (`#BFFF00`)** — uses `accent` token
- **Muted (`#878C99`)** — uses `muted` token
- **Borders (`rgba(59, 62, 69, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Use Geometric Sans for large display headlines.
- Use Monospace for inline code references and terminal UI elements.

## Layout

Standard centered layout with a prominent full-width hero section followed by grid-based feature sections.

*Rhythm:* Consistent 4px grid with generous padding for large container elements.

## Elevation & Depth

- 0 1px 2px 0 rgba(0, 0, 0, 0.05)
- Borders: 1px solid rgba(59, 62, 69, 1)

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Primary buttons use a high-chroma neon-green background with black text, slightly rounded (4px), and dark text.
- **card:** Cards have subtle borders and dark backgrounds, often containing a list of features with a clear title and description.
- **chip:** Small, rounded (pill) badges with dark backgrounds and subtle borders used for feature tags.
- **input:** Dark-themed input fields with subtle borders and rounded corners.
- **hero:** A full-width, dark-background section featuring a large, bold white headline and a high-contrast CTA button.

## Do's and Don'ts

**Don't:**
- don't use bright, saturated multi-color palettes — screenshot shows a predominantly dark, near-monochromatic background with very limited accent colors.
- don't use decorative or script typography — screenshot shows clean geometric and humanist sans-serifs for all text.
- don't use large, complex border-radius values on cards or containers — screenshot shows mostly 4px to 12px rounded corners.
- don't use heavy drop shadows or glows for elevation — screenshot shows very subtle, almost non-existent shadows.
- don't use light-mode color schemes — screenshot shows a deeply dark, low-brightness interface.
- don't use centered, multi-column layouts for body text — screenshot shows left-aligned text in most non-hero sections.

---

## System Prompt (paste into AI agent)

```
This is a developer-focused AI platform with a dark, industrial aesthetic. The design DNA centers around a deep charcoal background (#121317) with high-contrast neutral text (#D7D9DD) and a single, high-chroma neon-green accent (#BFFF00) for primary calls to action. Typography is a clean combination of geometric and humanist sans-serifs for headlines and body text, with a monospace font for technical references. The layout is centered and spacious, using a consistent 4px spacing grid. Critical don'ts: never use a light-mode palette, never use decorative fonts, and never use heavy drop shadows or multi-color accents that distract from the technical, focused nature of the product. The system should maintain a professional, authoritative, and technical tone throughout.
```