Typography
scale ratio 1.196- TWK Lausannedisplay600 750 80067%
- Interbody400 60033%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | TWK Lausanne | 80px | 800 | 0.95 | -0.03em |
| headline | TWK Lausanne | 48px | 800 | 1 | -0.037em |
| title | TWK Lausanne | 20px | 600 | 1 | -0.01em |
| body | Inter | 16px | 400 | 1.5 | -0.02em |
| body-sm | Inter | 12px | 400 | 1.5 | -0.017em |
Type scale
Aa12Aa14Aa15Aa16Aa17Aa18Aa20Aa24Aa36Aa40Aa48Aa72Aa80
- Body size
- 16px / 1.5
- Display size
- 80px
- Display tracking
- -0.03em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.79:1
- Muted on bg
- 5.07:1
- Accent on bg
- 1.08:1
- Dark mode
- none
Declared accent tokens
- --primary-color-alt#FBA6ECnot on page
Space, shape & depth
Spacing scale (base 5px)
- 3
- 4
- 5
- 8
- 10
- 12
- 20
- 30
- 40
- 50
- 60
- 180
- 200
- 290
Corner radii
40pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 205px
Components
exact computed valuesbutton-primary
Sign up
- backgroundColor
- #19171C
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 0px
- height
- 52px
- fontFamily
- TWK Lausanne
- fontSize
- 18px
- fontWeight
- 600
button-secondary
Try Jitter for free
- backgroundColor
- #B593FF
- textColor
- #19171C
- rounded
- 0px
- padding
- 0px 0px
- height
- 60px
- fontFamily
- TWK Lausanne
- fontSize
- 20px
- fontWeight
- 600
card
- rounded
- 40px
- padding
- 0px
- backgroundColor
- #F2F1F3
input
- rounded
- 50px
- height
- 52px
- padding
- 13px 210px
- backgroundColor
- #2D2933
- border
- 1px solid #FFFFFF1A
Layout & motion
- Container
- 860px
- Grid columns
- 10
- Hero
- unknown
- Navigation
- top-fixed+transparent
- Page height
- 16,269px
- Easing
- cubic-bezier(0.25, 0.46, 0.45, 0.94)
- Durations
- 200ms 300ms 500ms 800ms
- Transitions
- 85
- Keyframes
- 0
- Stack
- vue, segment, intercom, google-tag-manager, cloudflare
Page sections (12)
section labels are heuristic
01nav
02heroAI agents, built right into Jitter
03features?From idea to motion in seconds
04features?Supercharge your creativity
05features?Details worth obsessing over
06feature detail?“Jitter gives you no excuse to skip It’s that easy.”
07features?Where teams scale motion
08feature detail?“We couldn’t believe you can create such polished animations in at all.”
09features?Everything your team needs to collaborate and deliver their best work
10features?Never start from scratch again
11features?Loved by the best creative teams all over the world
12footerGet product updates and inspiration in your inbox every month
How Jitter compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 80px: larger than 80% of indexed sites (median 60px).
- Type scale
- 1.20×: flatter than 83% of indexed sites (median 1.28×).
- Container
- 860px: narrower than 90% of indexed sites (median 1242px).
- Text contrast
- 17.8:1: higher than 52% of indexed sites (median 17.6:1).
- Page length
- 16,269px: longer than 94% of indexed sites (median 8,217px).
- Corner radius
- Mostly 40px, shared by 2 of 274 indexed sites (1%).
- TWK Lausanne
- One of 2 indexed sites that load TWK Lausanne (1%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Jitter use?
Jitter uses TWK Lausanne for headings. Inter is used for body text.
What are Jitter's brand colors?
Jitter's website uses a light scheme: background #FFFFFF, surface #F2F1F3, text #19171C, muted text #6E6E73 and borders #E5E4E7.
How is Jitter's website laid out?
The most common corner radius is 40px, body text is 16px with 1.5 line height, and the page container is 860px wide.
