taste-skill / Compare styles / Trigger.dev vs Neon

Trigger.dev vs Neon: design style comparison

Trigger.dev is Industrial Dark Slate & Electric Acid-Lime Telemetry; Neon is Serverless Pitch-Black & Luminous Cyber-Mint Postgres. Both were extracted with the same taste-skill pipeline, so every value below is directly comparable. 15 of 18 tracked tokens differ.

Side-by-side preview

Trigger.dev style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Trigger.dev canvas, text, muted and accent tokens.

AI agents Media processing

Card on extracted card recipe

Accent link: #A8FF53 · border #1C1E21

Neon style · dark

Ship the product, not the pixels.

Preview text rendered with the extracted Neon canvas, text, muted and accent tokens.

Card on surface + border tokens

Accent link: #34D59A · border #242628

Key differences

Both are dark-mode designs, but the canvases differ: #121317 vs #000000.
Accent: #A8FF53 (Trigger.dev) vs #34D59A (Neon).
Headings: Satoshi-Variable vs Inter.
Display type: Trigger.dev H1 is 60px / 1.0 (w600); Neon H1 is 56px / -0.04em (w400) — Trigger.dev sets 4px larger headlines.
Primary button radius: 4px vs 9999px; height 40px vs 36px.
Depth: Trigger.dev uses 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 most; Neon uses 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, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px most.

Token table

Token	Trigger.dev	Neon
Canvas	`#121317`	`#000000`
Surface	`#15171A`	`#131415`
Text	`#D7D9DD`	`#FFFFFF`
Muted text	`#878C99`	`#94979E`
Accent	`#A8FF53`	`#34D59A`
Border	`#1C1E21`	`#242628`
Heading font	`Satoshi-Variable`	`Inter`
Body font	`Inter / Satoshi`	`Inter`
Mono font	`Geist Mono`	`JetBrains Mono`
H1	`60px / 1.0 (w600)`	`56px / -0.04em (w400)`
Button radius	`4px`	`9999px`
Button height	`40px`	`36px`
Most-used radius same	`4px`	`4px`
Most-used shadow	`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`	`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, lab(100 -0.0000298023 0.0000119209 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
Easing same	`cubic-bezier(0.4, 0, 0.2, 1)`	`cubic-bezier(0.4, 0, 0.2, 1)`
Duration	`0.15s`	`0.2s`
Container max-width	`1224px`	`1600px`
Mode same	`dark`	`dark`

Primary buttons

Rendered	Height	Padding	Radius	Background / Text	Border	Font
AI agents	40px	`0px 12px`	`4px`	`#212327` `#D7D9DD`	`1px solid #1C1E21`	`16px / 400`
Media processing	40px	`0px 12px`	`4px`	`#121317` `#B5B8C0`	`1px solid #1C1E21`	`16px / 400`

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Sign up	36px	`0px 18px`	`9999px`	`#FFFFFF` `#000000`	`none`	`14px / 500`
Get started	44px	`0px 28px`	`9999px`	`#FFFFFF` `#1A1A1A`	`none`	`16px / 500`
Log in	36px	`0px 18px`	`9999px`	`transparent` `#FFFFFF`	`1px solid #61646B`	`14px / 500`

Which style should you pick?

Pick Trigger.dev if you want Deep gunmetal #121317 canvas with #15171A / #212327 workflow nodes, #1C1E21 structural borders, 60px Satoshi-Variable headings, Geist Mono logs, and #A8FF53 electric lime status accents — signals: background-jobs, workflows, acid-lime, trigger, satoshi, geist-mono, industrial.

Pick Neon if you want Pitch-black #000000 canvas with #242628 / #303236 dark structural borders, 56px tight -0.04em Inter display headings, and #34D59A / #00E599 luminous cyber-mint accents — signals: postgres, serverless, database, mint, pitch-black, neon.

Shared traits: dark, devtools, neon-green.

Rules that differ

Trigger.dev never:

NEVER substitute generic uncalibrated gray backgrounds for Trigger.dev’s exact #121317 canvas and #15171A surface pairing.
NEVER replace Satoshi-Variable display typography or ignore its signature scale (60px / 1.0 (w600)).
NEVER use thick opaque borders that clash with #1C1E21 (1px solid #1C1E21).

Neon never:

NEVER substitute generic uncalibrated gray backgrounds for Neon’s exact #000000 canvas and #131415 surface pairing.
NEVER replace Inter display typography or ignore its signature scale (56px / -0.04em (w400)).
NEVER use thick opaque borders that clash with #242628 (1px solid #242628).

Go deeper

Trigger.dev style guide Neon style guide Trigger.dev token spec Neon token spec Trigger.dev vs Inngest Supabase vs Neon Neon vs Upstash Resend vs Neon Railway vs Neon Turso vs Neon

Values extracted from https://trigger.dev and https://neon.tech. Not affiliated with either company.

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →