Typography
scale ratio 1.260- SF Pro (system-ui)css: ui-sans-serifdisplay + body400 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | SF Pro (system-ui) | 36px | 700 | 1 | 0em |
| title | SF Pro (system-ui) | 20.25px | 700 | 1.2 | 0em |
| body | SF Pro (system-ui) | 18px | 400 | 1.35 | 0em |
| body-sm | SF Pro (system-ui) | 15.2px | 400 | 1.3 | 0em |
| label | SF Pro (system-ui) | 15.3px | 400 | 1.2 | 0em |
Type scale
Aa13Aa13.5Aa14.5Aa15Aa15.5Aa18Aa20.5Aa24Aa36
- Body size
- 18px / 1.35
- Display size
- 36px
- Display tracking
- 0em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 11.61:1
- Muted on bg
- 8.53:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 2.5
- 3.5
- 4
- 4.5
- 5
- 6
- 6.5
- 9
- 10
- 13
- 18
- 23
- 27
Corner radii
5.56.57.51318
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 121px
Components
exact computed valuescard
- rounded
- 18px
- padding
- 18px
- backgroundColor
- #F2F5F7
input
- rounded
- 6.4px
- height
- 36px
- padding
- 8px 8px
- backgroundColor
- #FFFFFF
- border
- 1px solid #DFE3E8
Layout & motion
- Container
- 900px
- Grid columns
- 4
- Hero
- unknown
- Navigation
- top-static+transparent
- Page height
- 8,072px
- Easing
- ease-out
- Durations
- 100ms 200ms
- Transitions
- 5
- Keyframes
- 0
- Stack
- gsap, jquery, cloudfront
Page sections (7)
section labels are heuristic
01nav
02hero
03feature detail?Simply Powerful
04features?Get Things, Get Done
06newsletterThings Newsletter
07footerCompany
How Things compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 36px: smaller than 82% of indexed sites (median 60px).
- Type scale
- 1.26×: flatter than 60% of indexed sites (median 1.28×).
- Container
- 900px: narrower than 87% of indexed sites (median 1242px).
- Text contrast
- 11.6:1: lower than 90% of indexed sites (median 17.6:1).
- Page length
- 8,072px: shorter than 53% of indexed sites (median 8,217px).
- Corner radius
- Mostly 18px, shared by 2 of 274 indexed sites (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 Things use?
Things uses SF Pro (system-ui) (loaded as "ui-sans-serif") for headings and body text.
What are Things's brand colors?
Things's website uses a light scheme: background #F2F5F7, surface #FFFFFF, text #303336, muted text #44474B.
How is Things's website laid out?
The most common corner radius is 18px, body text is 18px with 1.35 line height, and the page container is 900px wide.
