Typography
scale ratio 1.304- Soradisplay + body300 40096%
- Ttroundsneuecond Mdother5004%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Sora | 112px | 300 | 1.2 | -0.003em |
| headline | Sora | 56.8px | 300 | 1.1 | -0.034em |
| title | Sora | 43.2px | 300 | 1.2 | -0.033em |
| body | Sora | 17.4px | 300 | 1.2 | -0.021em |
| label | Sora | 14.68px | 400 | 1 | 0em |
Type scale
Aa14Aa14.5Aa17.5Aa25.5Aa28.5Aa43Aa50Aa57Aa78.5Aa112
- Body size
- 17.5px / 1.2
- Display size
- 112px
- Display tracking
- -0.003em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 16.28:1
- Muted on bg
- undefined:1
- Accent on bg
- 8.21:1
- Dark mode
- none
Declared accent tokens
- --base-color-brand--cyan#00BEFFpainted
- --base-color-brand--pink#FFA8BBpainted
- --base-color-brand--yellow#FFF58Cpainted
- --base-color-brand--orange#F55200painted
Space, shape & depth
Spacing scale (base 4px)
- 3
- 5
- 8
- 9
- 10
- 10.5
- 12
- 16
- 18
- 20
- 24
- 32
- 40
- 48
Corner radii
82048pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 102px
Components
exact computed valuesbutton-primary
Get started - free forever
- backgroundColor
- #00BEFF
- textColor
- #000000
- rounded
- 9999px
- padding
- 16px 32px
- height
- 49.4px
- fontFamily
- Ttroundsneuecond Md
- fontSize
- 17.4px
- fontWeight
- 500
button-secondary
SIGN UP FREE
- textColor
- #00BEFF
- rounded
- 9999px
- padding
- 13.6px 32px
- height
- 46.6px
- fontFamily
- Ttroundsneuecond Md
- fontSize
- 17.4px
- fontWeight
- 500
- border
- 1px solid #00BEFF
card
- rounded
- 48px
- padding
- 64px
- border
- 1px solid #FAF5F5
Layout & motion
- Container
- 1328px
- Grid columns
- 2
- Hero
- split
- Navigation
- top-static+transparent
- Page height
- 14,773px
- Easing
- cubic-bezier(0.25, 0.46, 0.45, 0.94)
- Durations
- 300ms 350ms 1000ms 2000ms
- Transitions
- 73
- Keyframes
- 0
- Stack
- webflow, gsap, lenis, jquery, mintlify, google-tag-manager, cloudflare
Page sections (8)
section labels are heuristic
01logos
03feature detail?Fathom teams 
05gallery?Fathom adapts to your workflow, not the other way around.
06features?Marketing
07cta?Stop guessing. Ask Fathom. 
08footer
How Fathom compares
- Body text
- 17.5px: larger than 70% of indexed sites (median 16px).
- Largest heading
- 112px: larger than 94% of indexed sites (median 60px).
- Type scale
- 1.30×: steeper than 57% of indexed sites (median 1.28×).
- Container
- 1328px: wider than 80% of indexed sites (median 1242px).
- Text contrast
- 16.3:1: lower than 66% of indexed sites (median 17.6:1).
- Page length
- 14,773px: longer than 91% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Sora
- The only site in the index that loads Sora.
- Ttroundsneuecond Md
- The only site in the index that loads Ttroundsneuecond Md.
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Fathom use?
Fathom uses Sora for headings and body text. Ttroundsneuecond Md is used for other.
What are Fathom's brand colors?
Fathom's website uses a dark scheme: background #191919, surface #0000001A, text #FAF5F5.
How is Fathom's website laid out?
The most common corner radius is fully rounded (pill), body text is 17.5px with 1.2 line height, and the page container is 1328px wide.
