Typography
scale ratio 1.373- Satoshidisplay + body500 700 900100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Satoshi | 64px | 700 | 1.12 | -0.02em |
| headline | Satoshi | 48px | 700 | 1.25 | -0.02em |
| title | Satoshi | 20px | 700 | 1.25 | -0.02em |
| body | Satoshi | 18px | 500 | 1.5 | 0em |
| body-sm | Satoshi | 16px | 500 | 1.9 | 0em |
| label | Satoshi | 18px | 700 | 1.3 | 0em |
Type scale
Aa13Aa14Aa14.5Aa15.5Aa16Aa18Aa19Aa20Aa48Aa64
- Body size
- 18px / 1.6
- Display size
- 64px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 5.47:1
- Muted on bg
- undefined:1
- Accent on bg
- 6.66:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 5
- 6
- 6.5
- 8
- 10
- 11
- 12
- 14
- 16
- 20
- 24
- 28
- 32
Corner radii
8101216pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 101px
Components
exact computed valuesbutton-primary
Get started - it's free
- backgroundColor
- #494BCB
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 10px 20px
- height
- 34px
- fontFamily
- Satoshi
- fontSize
- 14px
- fontWeight
- 700
card
- rounded
- 16px
- padding
- 0px
- backgroundColor
- #F0F0F7
- border
- 1px solid #0000001A
- shadow
- rgba(8, 9, 63, 0.04) 0px 8px 16px 0px
Layout & motion
- Container
- 704px
- Grid columns
- 4
- Hero
- centered+media-below
- Navigation
- top-sticky
- Page height
- 10,538px
- Easing
- ease
- Durations
- 150ms 180ms 200ms
- Transitions
- 71
- Keyframes
- 1
- Stack
- astro, segment, cloudfront
Page sections (12)
section labels are heuristic
01nav
02heroFast Project Management for Software Teams
03logos
04feature detail?Hand off work to , human or agent.
05feature detail?See progress from .
06feature detail?Goals.
08feature detail?Connect to your entire workflow
09feature detail?Built for scale and security
10testimonialsWhat our customers have to say.
11cta?Build what's .
12footerCompany
How Shortcut compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 64px: larger than 56% of indexed sites (median 60px).
- Type scale
- 1.37×: steeper than 75% of indexed sites (median 1.28×).
- Container
- 704px: narrower than 94% of indexed sites (median 1242px).
- Text contrast
- 5.5:1: lower than 97% of indexed sites (median 17.6:1).
- Page length
- 10,538px: longer than 70% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Satoshi
- One of 4 indexed sites that load Satoshi (1%).
- 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 Shortcut use?
Shortcut uses Satoshi for headings and body text.
What are Shortcut's brand colors?
Shortcut's website uses a light scheme: background #FFFFFF, surface #F6F6FA, text #686878 and borders #0000001A.
How is Shortcut's website laid out?
The most common corner radius is 8px, body text is 18px with 1.6 line height, and the page container is 704px wide.
