Typography
scale ratio 1.387- Aeonikdisplay + body300 40086%
- Noto Sans Monomono400 500 60014%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Aeonik | 64px | 300 | 1.1 | 0em |
| headline | Aeonik | 48px | 300 | 1.1 | 0.01em |
| body | Aeonik | 24px | 300 | 1.6 | 0.008em |
| body-sm | Noto Sans Mono | 16px | 400 | 1.5 | 0em |
| label | Aeonik | 16px | 300 | 1.5 | 0em |
Type scale
Aa12Aa14Aa16Aa17Aa20Aa24Aa32Aa48Aa64
- Body size
- 24px / 1.6
- Display size
- 64px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 17.61:1
- Muted on bg
- 7.30:1
- Accent on bg
- 5.49:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 8
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 48
- 64
Corner radii
7pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
Try Free
- backgroundColor
- #B664FF
- textColor
- #F8FAFC
- rounded
- 0px
- padding
- 8px 16px
- height
- 44px
- fontFamily
- Noto Sans Mono
- fontSize
- 16px
- fontWeight
- 500
button-secondary
Pause
- backgroundColor
- #4E21B6
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 6px 16px
- height
- 32px
- fontFamily
- Noto Sans Mono
- fontSize
- 14px
- fontWeight
- 400
input
- rounded
- 0px
- height
- 40px
- padding
- 8px 8px
- backgroundColor
- #FFFFFF
Layout & motion
- Container
- 1171px
- Grid columns
- 14
- Hero
- centered
- Navigation
- top-sticky
- Page height
- 12,469px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 300ms 500ms 1000ms
- Transitions
- 79
- Keyframes
- 2
- Stack
- sveltekit, tailwind, contentful, google-tag-manager, vercel
Page sections (11)
section labels are heuristic
01nav
02heroThe world’s best AI runs on Temporal
03code sample?Watch a Workflow recover from failure
04feature detail?You have to see it to believe it
05feature detail?Create failproof apps using our SDKs
06feature detail?Write Activities to handle and retry failure-prone logic
07feature detail?Get full visibility into your running code
08testimonials
09feature detail?100% open-source
10feature detail?Fully battle tested, 9 years in production
11footer
How Temporal compares
- Body text
- 24px: larger than 98% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.39×: steeper than 77% of indexed sites (median 1.28×).
- Container
- 1171px: narrower than 67% of indexed sites (median 1242px).
- Text contrast
- 17.6:1: higher than 50% of indexed sites (median 17.6:1).
- Page length
- 12,469px: longer than 84% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Aeonik
- One of 2 indexed sites that load Aeonik (1%).
- Noto Sans Mono
- The only site in the index that loads Noto Sans Mono.
- 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 Temporal use?
Temporal uses Aeonik for headings and body text. Noto Sans Mono is used for code.
What are Temporal's brand colors?
Temporal's website uses a dark scheme: background #141414, text #F8FAFC, muted text #92A4C3 and borders #243349.
How is Temporal's website laid out?
The most common corner radius is 0px, body text is 24px with 1.6 line height, and the page container is 1171px wide.
