` semantic; run IDs in ``

### Keyboard Navigation

- Tab order follows visual order; skip-link at page top
- Enter/Space activate buttons; Enter activates links
- Cmd/Ctrl+K opens command palette / docs search (when present)
- Escape closes modals, dropdowns, command palette
- Arrow keys move between segmented-toggle tabs

### Screen Reader Hints

- Run status (succeeded/failed) announced via text label, not lime/red colour alone
- Decorative purple gradient washes are `aria-hidden`
- Auto-streaming run-log demo carries `aria-live="off"` to avoid announcement spam; a static summary is exposed instead

### Reduced Motion

`prefers-reduced-motion: reduce` honored throughout — see §8.

## 10. Responsive Behavior

### Breakpoints

| Name | Min Width | Use |
|------|-----------|----|
| Mobile | — | default |
| Tablet | 640 | enlarged grids |
| Desktop | 1024 | full feature grid |
| Wide | 1280 | max page width |
| Ultra | 1536 | hero only |

### Touch Targets

- Minimum 44×44px for primary controls
- Pill badges expand hit-area to at least 32×24px
- Segmented toggle chips grow to full-width stacked on mobile

### Collapsing Strategy

- **Nav**: collapses to hamburger ≤ 768px; mobile menu on near-black sheet
- **Feature grid**: 3-col → 2-col @ 1024 → 1-col @ 640
- **Integration grid**: 4-col → 2-col @ 1024 → 2-col @ 640
- **Hero**: display-lg (60px) reduces to ~40px @ 640, tracking eases to `-0.02em`
- **Segmented toggle**: horizontal chips → stacked full-width buttons @ 640
- **Code/run-log blocks**: scroll horizontally on overflow; never reflow log lines

### Image Behavior

- Product screenshots and run-log demos are SVG/PNG; dark-on-dark, no light frames
- Integration logos lock at intrinsic size, monochrome on the near-black grid
- Lime accent stays flat at all sizes — never scaled into a gradient

## 11. Content & Voice

### Tone

Direct, technical, confident. Trigger.dev writes like an engineer explaining a system to another engineer — present tense, concrete nouns ("tasks", "runs", "deploys"), no marketing inflation. The headline register is operational: it describes what the product does, not how it will change your life. The lime brand is the visual equivalent of that voice — "it worked", said plainly.

### Microcopy Patterns

- **Button verbs**: "Start building", "Get started for free", "Read the docs", "View on GitHub", "Deploy" — short, imperative, developer-facing
- **Error message recipe**: concrete cause — "Run failed: the task threw `TimeoutError` after 60s." Surface the real error, not a euphemism
- **Success confirmations**: "[noun] [verb-past]" — "Task deployed", "Run succeeded", in lime
- **Empty states**: "No runs yet. Trigger your first task to see it stream here."
- **Status language**: "succeeded" / "failed" / "queued" / "in progress" — borrowed directly from the run lifecycle

### CTA Verb Conventions

- Top-level: "Start building", "Get started for free"
- Product: "Deploy", "Trigger a run", "Try it free"
- Documentation: "Read the docs", "View the quickstart"
- Open-source: "View on GitHub", "Star us"
- Sales: "Talk to us"

## 12. Dark Mode & Theming

Trigger.dev is **dark-only**. The near-black canvas (`#121317`) is the brand — it is the colour of the terminal, the editor, and the running log its users live in. Flipping to light would collapse the entire register: the lime brand reads as a high-voltage success signal *because* it sits on near-black, and on a light canvas it would lose all its voltage. There is no light-mode marketing variant.

The dashboard product runs the same dark palette, with the run-log views leaning even harder into the terminal aesthetic (Geist Mono throughout, lime/red status lines). Documentation maintains the dark canvas.

If a light variant were ever forced (e.g. an embedded docs widget on a light host), the mapping would be:
- `bg`: `#121317` → `#ffffff`
- `text`: `#d7d9dd` → `#1a1c20`
- `surface`: `#212327` → `#f4f5f6`
- `brand`: `#a8ff53` → darken to `#5fa312` so lime text/borders stay legible on white (the bright lime fails contrast on light)
- `accent`: `#7655fd` → stays (works on both substrates)

The recommendation is don't. The near-black canvas and high-voltage lime are a matched pair; separating them breaks the brand.

## 13. Lineage & Influences

Trigger.dev is the open-source background-jobs and AI-workflow brand taken to its terminal dark conclusion. The canvas is `#121317` — a near-black that reads colder and more clinical than Railway's eggplant or GitHub's charcoal, the colour of a terminal at rest. Display type is Satoshi at 60px / 600 weight with tight `-0.025em` tracking — a geometric grotesque that feels engineered rather than literary, the structural opposite of Railway's serif. Body is Geist (Vercel's open-source workhorse), placing Trigger.dev squarely in the modern Vercel-adjacent developer-tool lineage.

What sets it apart is the accent set. A single high-voltage lime `#a8ff53` carries every action — the colour of a `200 OK`, a passing test, a successful run — paired with an electric purple `#7655fd` reserved for documents, gradients, and secondary emphasis. The lime-on-black contrast is deliberately loud; it is the brand shouting "it worked" in the only palette a developer trusts. CTAs split their geometry: announcement and filter pills run full `9999px`, while action buttons and control chips hold a sharp `4px` — terminal-square rather than friendly-rounded. The result is a page that reads like a streaming run-log: dark, dense with signal, punctuated by green when something works.

- **Vercel** — https://vercel.com — Geist body font, near-black substrate, single confident accent against dark, generous vertical rhythm
- **Geist (font + design system)** — https://vercel.com/font — Geist Sans for body and Geist Mono for code anchor the modern Vercel-class dev aesthetic
- **Satoshi (Indian Type Foundry)** — https://www.fontshare.com/fonts/satoshi — geometric grotesque display at 600 weight, engineered and neutral
- **Linear** — https://linear.app — dark developer canvas, square-cornered control chips and segmented toggles
- **Supabase** — https://supabase.com — open-source dev-tool register: a single neon-green "it works" brand on a dark substrate
- **Terminal / log-file aesthetics** — https://en.wikipedia.org/wiki/Computer_terminal — lime-on-black as the visual language of a passing run

## 14. Do's and Don'ts

### Do

- **Do** keep the action palette to a single high-voltage lime (`#a8ff53`); secondary actions use the `#212327` surface chip, never a different hue
- **Do** put near-black text (`#121317`) on lime buttons — lime is too bright to carry white, and dark-on-lime hits 16:1
- **Do** hold the canvas at `#121317`; warming it toward eggplant reads as Railway, cooling it to pure `#000` reads as Vercel
- **Do** use Satoshi at 600 for display with `-0.025em` tracking — the engineered, compressed grotesque is the brand's voice
- **Do** set body in Geist at `#d7d9dd` (warm off-grey), with headings lifting to `#e8e9ec` — never full white
- **Do** split CTA geometry: `4px` square for action buttons/chips, `9999px` pill for announcements and status
- **Do** reserve electric purple `#7655fd` for documents, gradient washes, and emphasis — never as a second action colour
- **Do** use Geist Mono with `zero` + `tnum` for run IDs, timestamps, and identifiers so log columns align
- **Do** lift cards tonally (`#191b1f` / `#212327`) rather than with heavy drop shadows
- **Do** let the lime glow appear only on focus and primary-button hover — depth stays neutral
- **Do** keep semantic status as lime (succeeded) / red (failed), always paired with a text label

### Don't

- **Don't** put white text on the lime button — it fails contrast and breaks the "dark-on-lime" rule; use `#121317`
- **Don't** introduce a third brand hue; the palette is lime + purple + neutrals, full stop
- **Don't** use the lime as a gradient or large fill — it is a flat, high-voltage point accent, not a wash
- **Don't** flip to a light canvas; the lime loses all its voltage off near-black
- **Don't** swap Satoshi for a serif or a humanist sans — the engineered geometric grotesque is the structural identity
- **Don't** set Satoshi headlines loose — `-0.025em` compression is part of the typeset feel
- **Don't** make every control a pill; action buttons hold a sharp `4px`, pills are for status/filters only
- **Don't** set body copy in full white (`#ffffff`); the warm `#d7d9dd` grey is the calm-dark mood
- **Don't** use small purple body text — `#7655fd` on near-black is AA-Large only; keep purple ≥18px or decorative
- **Don't** layer heavy shadows on cards; depth on near-black is tonal-first
- **Don't** tint shadows lime; the glow is reserved for focus/hover, standard depth stays pure-black

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg: #121317
bg-deep: #0c0e0f
surface: #212327
surface-alt: #191b1f
text: #d7d9dd
text-heading: #e8e9ec
text-muted: #878c99
brand: #a8ff53
brand-hover: #b8ff73
on-brand: #121317
accent: #7655fd
border: #2a2d33
border-brand: rgba(168,255,83,0.4)
```

### Example Component Prompts

1. "Create a hero section: near-black `#121317` background, a 60px Satoshi headline at 600 weight in `#e8e9ec` with `-0.025em` tracking, body-large 18px Geist subhead in `#878c99`. Add a primary lime button (`#a8ff53` fill, near-black `#121317` text, 4px radius, 10px 16px padding, 15/600 button text) saying 'Start building', plus a secondary filled chip 'View on GitHub' (`#212327` bg, `#d7d9dd` text, 1px `#2a2d33` border, 4px radius). Optional electric-purple `#7655fd` gradient wash behind the copy."

2. "Build an announcement pill above the hero: full `9999px` radius, rgba(0,0,0,0.2) background, 1px `#2a2d33` border, 12px Geist at 600. Show a small lime `#a8ff53` 'NEW' tag then 'Errors — find and fix' in `#d7d9dd'. Hover: border brightens to `#3a3d44`."

3. "Design a 3-card feature grid: each card `#191b1f` bg, 24px padding, 12px radius, 1px `#2a2d33` border. Card title 20px Satoshi at 600 in `#e8e9ec`, body 14px Geist in `#878c99`, optional lime `#a8ff53` icon. Hover: border lifts to `#3a3d44`, ambient → standard shadow."

4. "Create a run-log code block: `#0c0e0f` background, 14px Geist Mono `#d7d9dd` with slashed-zero (`zero`) and tabular numerals (`tnum`), 16px 20px padding, 8px radius, 1px `#2a2d33` border. Success lines in lime `#a8ff53`, failed lines in red `#fb5151`, run IDs in mono. Inline backticks render lime on rgba(168,255,83,0.12) wash."

5. "Build a segmented toggle filter: two chips 'AI agents' and 'Media processing' at 4px radius. Active chip `#212327` bg with `#d7d9dd` 14/600 text; inactive label `#b5b8c0`. Use `role=tablist` with `aria-selected`. Transition active state over 240ms."

6. "Design a top navigation: near-black `#121317` background, 'Trigger.dev' wordmark in `#e8e9ec` Satoshi 600, nav links in 14px Geist 500 at `#878c99` (hover `#d7d9dd`), right-side secondary chip 'Read the docs' and a primary lime 'Get started for free' button at 4px radius with near-black text."

### Iteration Guide

1. **Start with the canvas** — `#121317` near-black; not eggplant (Railway), not pure `#000` (Vercel). The cold, clinical hex is the brand
2. **Lime carries dark text** — `#121317` on `#a8ff53`, never white; this single rule keeps the brand legible and on-voltage
3. **Satoshi at 600 for display** — engineered geometric grotesque with `-0.025em` tracking; a serif or humanist sans collapses the voice
4. **Geist for body** — the Vercel-class open-source sans places it in the modern dev-tool lineage; keep body at `#d7d9dd`, headings at `#e8e9ec`
5. **Split the geometry** — sharp `4px` for action buttons and chips, full `9999px` pills for announcements and status; mixing them up muddies the system
6. **Hold purple in reserve** — `#7655fd` is for documents, gradients, and emphasis only; never let it become a second action colour
7. **Depth is tonal-first** — lift panels through `#191b1f` / `#212327`, not heavy shadows; reserve the lime glow for focus and primary hover
8. **Think log file, not poster** — Geist Mono with aligned numerals, lime/red status lines, dense signal-rich panels; the page should feel operational

---

*Theme-toggle audit: score=0, signals=[none] — Trigger.dev is committedly dark; no light variant offered.*