Pixloop Design.md
Trigger.dev homepage design, full-page screenshot

Trigger.dev

A dark-mode, developer-platform interface built on a near-black canvas (#121317) with bright lime-green primary CTAs and a green-to-purple brand gradient. The system reads as confident modern devtool — code blocks shown directly inline, tight 4px-radius surfaces, pill-shaped status badges and category chips, Satoshi display headlines paired with Geist UI/body text. Brand voltage comes from the lime-green action color and accent trio (lime, electric purple, magenta-pink) glowing against deep neutral surfaces.

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
loading…

Color Palette

Accent

Neutrals

Typography

display 60px · 600 · 1.0
The quick brown fox jumps
title-lg 24px · 600 · 1.333
The quick brown fox jumps
title-md 20px · 600 · 1.4
The quick brown fox jumps
title-sm 18px · 600 · 1.556
The quick brown fox jumps
body 16px · 500 · 1.5
The quick brown fox jumps
button 14px · 400 · 1.429
The quick brown fox jumps

Spacing & Shape

Spacing

Name Value Preview
xxs 4px
xs 6px
sm 8px
md 12px
lg 16px
xl 24px
xxl 28px
xxxl 32px
huge 40px
section-sm 48px
section 64px
section-lg 80px

Border Radius

Name Value Preview
sm 4px
md 6px
full 9999px

FAQ

What colors does Trigger.dev use?
Trigger.dev's core palette includes #9c9af2, #a8ff53, #afec73, #e888f8, #2563eb. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Trigger.dev DESIGN.md.
What font does Trigger.dev use?
Trigger.dev's primary typeface is Satoshi. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Trigger.dev design system?
A dark-mode, developer-platform interface built on a near-black canvas (#121317) with bright lime-green primary CTAs and a green-to-purple brand gradient. The system reads as confident modern devtool…

More like this