Typography
scale ratio 1.494- Google Sans Flexdisplay + body450 550 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Google Sans Flex | 60px | 600 | 1.1 | -0.033em |
| headline | Google Sans Flex | 40px | 600 | 1.2 | -0.05em |
| title | Google Sans Flex | 20px | 600 | 1.4 | -0.1em |
| body | Google Sans Flex | 18px | 450 | 1.67 | 0.056em |
| body-sm | Google Sans Flex | 15px | 450 | 1.6 | 0.067em |
| label | Google Sans Flex | 14px | 450 | 1.43 | 0.071em |
Type scale
Aa13Aa14Aa15Aa18Aa20Aa40Aa60
- Body size
- 18px / 1.67
- Display size
- 60px
- Display tracking
- -0.033em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 5.41:1
- Accent on bg
- 6.98:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 8
- 12
- 16
- 20
- 24
- 30
- 32
- 40
- 48
- 64
- 80
- 104
Corner radii
141620pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 200px
Components
exact computed valuesbutton-primary
- backgroundColor
- #0D44E8
- textColor
- #0000EE
- rounded
- 0px
- padding
- 0px 0px
- height
- 40px
- fontFamily
- Google Sans Flex
- fontSize
- 16px
- fontWeight
- 400
card
- rounded
- 20px
- padding
- 0px
- backgroundColor
- #FFFFFF
- shadow
- rgba(22, 22, 24, 0.02) 0px 7px 20px -8px, rgba(22, 22, 24, 0.02) 0px 29px 33px -4px, rgba(22, 22, 24, 0.05) 0px 22px 30p
input
- rounded
- 16px
- height
- 48px
- padding
- 0px 18px
- border
- 1px solid #FFFFFF3D
Layout & motion
- Container
- 1232px
- Grid columns
- 4
- Hero
- centered
- Navigation
- none-detected
- Page height
- 11,458px
- Easing
- ease
- Durations
- 100ms 150ms 200ms
- Transitions
- 43
- Keyframes
- 1
- Stack
- nuxt, cloudfront
Page sections (6)
section labels are heuristic
02feature detail?There are average capture apps. And there's CleanShot.
03features?Smart zooms
04features?Make your point, fast
How Cleanshot 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.49×: steeper than 88% of indexed sites (median 1.28×).
- Container
- 1232px: narrower than 53% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 11,458px: longer than 78% of indexed sites (median 8,217px).
- Corner radius
- Mostly 14px, shared by 1 of 274 indexed sites (0%).
- Google Sans Flex
- The only site in the index that loads Google Sans Flex.
- 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 Cleanshot use?
Cleanshot uses Google Sans Flex for headings and body text.
What are Cleanshot's brand colors?
Cleanshot's website uses a light scheme: background #FFFFFF, text #000000, muted text #161618A3.
How is Cleanshot's website laid out?
The most common corner radius is 14px, body text is 18px with 1.67 line height, and the page container is 1232px wide.
