Typography
- Interdisplay + body500 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 24px | 700 | 1.6 | 0em |
| body | Inter | 12px | 500 | 1.6 | 0em |
Type scale
Aa12Aa24
- Body size
- 12px / 1.6
- Display size
- 24px
- Display tracking
- 0em
- Case
- lower
Color
light schemePalette by painted area
- Text on bg
- 20.10:1
- Muted on bg
- 16.31:1
- Accent on bg
- 3.62:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale
- 2
- 4
- 8
- 12
- 16
Corner radii
2911pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Sign in to share
- backgroundColor
- #3182ED
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 0px 16px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 12px
- fontWeight
- 600
Layout & motion
- Container
- n/a
- Grid columns
- 2
- Hero
- split
- Navigation
- none-detected
- Page height
- 900px
- Easing
- ease-in-out
- Durations
- 200ms 3000ms
- Transitions
- 2
- Keyframes
- 0
- Stack
- react, radix-ui, google-tag-manager, vercel, cloudflare
Page sections (1)
01hero
How tldraw compares
- Body text
- 12px: smaller than 96% of indexed sites (median 16px).
- Largest heading
- 24px: smaller than 92% of indexed sites (median 60px).
- Text contrast
- 20.1:1: higher than 77% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does tldraw use?
tldraw uses Inter for headings and body text.
What are tldraw's brand colors?
tldraw's website uses a light scheme: background #F9FAFB, surface #0000000B, text #000000, muted text #1C1C1C.
How is tldraw's website laid out?
The most common corner radius is 0px, body text is 12px with 1.6 line height, and the page container is nullpx wide.
