Typography
scale ratio 1.280- Inter-5486e50ce5a4efdfbody400 475 500 600 70061%
- Graphik-1bbd4a4c7a2fb472display600 70034%
- Caecilia-8d8a7c9be503e3f3other4003%
- Shantell Sans 5a9740f6b2ed8488css: Shantell Sans-5a9740f6b2ed8488other4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Graphik-1bbd4a4c7a2fb472 | 55px | 600 | 1.15 | -0.01em |
| headline | Graphik-1bbd4a4c7a2fb472 | 38px | 600 | 1.28 | -0.005em |
| body | Inter-5486e50ce5a4efdf | 20.5px | 500 | 1.6 | 0em |
| body-sm | Inter-5486e50ce5a4efdf | 14.5px | 500 | 1.5 | 0.013em |
| label | Inter-5486e50ce5a4efdf | 15.5px | 600 | 1.35 | 0.01em |
Type scale
Aa12Aa13.5Aa14.5Aa15.5Aa17Aa18Aa18.5Aa19Aa20Aa20.5Aa22Aa38Aa44Aa55
- Body size
- 20.5px / 1.6
- Display size
- 55px
- Display tracking
- -0.01em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.58:1
- Muted on bg
- 5.11:1
- Accent on bg
- 4.02:1
- Dark mode
- none
Declared accent tokens
- --accents-red#DE483Apainted
- --accents-pink#FFADA4not on page
- --accents-yellow#FFC93Enot on page
- --color-tw-accents-ruddy-brown#C86733not on page
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 8
- 9
- 10
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 48
Corner radii
68101315
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 128px
Components
exact computed valuesbutton-primary
Start for free
- backgroundColor
- #E34432
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 9px 14px
- height
- 38.9px
- fontFamily
- Inter-5486e50ce5a4efdf
- fontSize
- 15.5px
- fontWeight
- 600
card
- rounded
- 10px
- padding
- 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #25221E2E
- shadow
- rgba(37, 34, 30, 0.04) 0px 1px 0px 0px
Layout & motion
- Container
- 1360px
- Grid columns
- 8
- Hero
- split
- Navigation
- none-detected
- Page height
- 7,167px
- Easing
- cubic-bezier(0.2, 0.8, 0.2, 1)
- Durations
- 150ms 300ms 500ms
- Transitions
- 53
- Keyframes
- 1
- Stack
- astro, contentful, google-tag-manager, cloudfront
Page sections (6)
section labels are heuristic
02content?
03features?Kickstart your next project with Todoist Templates
04cta?A task manager you can trust for life
05cta?Gain calmness and clarity with the world’s most beloved productivity app
06footer
How Todoist compares
- Body text
- 20.5px: larger than 95% of indexed sites (median 16px).
- Largest heading
- 55px: smaller than 59% of indexed sites (median 60px).
- Type scale
- 1.28×: flatter than 51% of indexed sites (median 1.28×).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 15.6:1: lower than 69% of indexed sites (median 17.6:1).
- Page length
- 7,167px: shorter than 60% of indexed sites (median 8,217px).
- Corner radius
- Mostly 15px, shared by 1 of 274 indexed sites (0%).
- Inter-5486e50ce5a4efdf
- The only site in the index that loads Inter-5486e50ce5a4efdf.
- Graphik-1bbd4a4c7a2fb472
- The only site in the index that loads Graphik-1bbd4a4c7a2fb472.
- 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 Todoist use?
Todoist uses Inter-5486e50ce5a4efdf for body text. Graphik-1bbd4a4c7a2fb472 is used for headings. Caecilia-8d8a7c9be503e3f3 is used for other.
What are Todoist's brand colors?
Todoist's website uses a light scheme: background #FEFDFC, text #25221E, muted text #25221EA8 and borders #25221E2E.
How is Todoist's website laid out?
The most common corner radius is 15px, body text is 20.5px with 1.6 line height, and the page container is 1360px wide.
