Typography
scale ratio 1.188- Satoshicss: Satoshi-Variabledisplay500 60061%
- Geistbody400 50030%
- Geist Monomono4009%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Satoshi | 60px | 600 | 1 | 0em |
| headline | Satoshi | 30px | 600 | 1.2 | 0em |
| title | Satoshi | 20px | 600 | 1.5 | 0em |
| body | Satoshi | 18px | 500 | 1.556 | 0em |
| body-sm | Geist | 16px | 400 | 1.5 | 0em |
| label | Geist | 14px | 400 | 1.429 | 0em |
| mono | Geist Mono | 14px | 400 | 1.429 | 0em |
Type scale
Aa13Aa14Aa16Aa18Aa20Aa24Aa30Aa36Aa37.5Aa48Aa60
- Body size
- 18px / 1.556
- Display size
- 60px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 15.29:1
- Muted on bg
- 5.52:1
- Accent on bg
- 15.11:1
- Dark mode
- none
Declared accent tokens
- --color-accent#45711Anot on page
- --primary#A8FF53painted
- --color-primary#A8FF53painted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 12
- 16
- 24
- 28
- 32
- 40
- 48
- 108
Corner radii
4pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 105px
Components
exact computed valuesbutton-primary
- backgroundColor
- #A8FF53
- textColor
- #D7D9DD
- rounded
- 0px
- padding
- 0px 0px
- height
- 32px
- fontFamily
- Geist
- fontSize
- 16px
- fontWeight
- 400
button-secondary
AI agents
- textColor
- #D7D9DD
- rounded
- 4px
- padding
- 0px 12px
- height
- 40px
- fontFamily
- Geist
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #1C1E21
- 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) 0
card
- rounded
- 4px
- padding
- 0px
- backgroundColor
- #15171A
- border
- 1px solid #1C1E21
Layout & motion
- Container
- 1224px
- Grid columns
- 12
- Hero
- centered-over-media
- Navigation
- top-sticky
- Page height
- 12,424px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 396
- Keyframes
- 1
- Stack
- remix, tailwind, radix-ui, shadcn/ui, vercel, cloudflare
Page sections (16)
section labels are heuristic
01nav
02heroBuild and deploy durable AI agents and workflows
03logos
04feature detail?How it works
05features?Build invincible AI apps
06feature detail?Deploy and scale to any size
07features?Find and fix bugs fast
08feature detail?Bring your tasks to the foreground
09features?Custom build extensions
10features?All the tools you need to ship
11code sample?Reliable by default
12feature detail?Trigger.dev is Apache 2.0 licensed so you can view the source code, contribute a
13testimonialsLoved by developers
14features?Changelog
15logosDeploy your first
16footer
How Trigger.dev compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 86% of indexed sites (median 1.28×).
- Container
- 1224px: narrower than 55% of indexed sites (median 1242px).
- Text contrast
- 15.3:1: lower than 72% of indexed sites (median 17.6:1).
- Page length
- 12,424px: longer than 84% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Satoshi
- One of 4 indexed sites that load Satoshi (1%).
- Geist
- One of 11 indexed sites that load Geist (4%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Trigger.dev use?
Trigger.dev uses Satoshi (loaded as "Satoshi-Variable") for headings. Geist is used for body text. Geist Mono is used for code.
What are Trigger.dev's brand colors?
Trigger.dev's website uses a dark scheme: background #121317, surface #1A1B1F, text #E8E9EC, muted text #878C99 and borders #1C1E21.
How is Trigger.dev's website laid out?
The most common corner radius is 4px, body text is 18px with 1.556 line height, and the page container is 1224px wide.
