Typography
scale ratio 1.276- Roobertvfdisplay + body400 500 575 600100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Roobertvf | 88px | 575 | 1 | -0.04em |
| headline | Roobertvf | 44px | 500 | 1.1 | -0.02em |
| title | Roobertvf | 24px | 400 | 1.3 | 0em |
| body | Roobertvf | 16px | 400 | 1.4 | 0em |
| body-sm | Roobertvf | 14px | 400 | 1.3 | 0em |
Type scale
Aa9.5Aa12Aa14Aa16Aa18Aa20Aa24Aa44Aa48Aa72Aa88
- Body size
- 16px / 1.4
- Display size
- 88px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.93:1
- Muted on bg
- 15.67:1
- Accent on bg
- 18.93:1
- Dark mode
- none
Declared accent tokens
- --loam---web-library---colors--primary-accent#3859F9painted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 8
- 10
- 10.5
- 11
- 12
- 16
- 20
- 24
- 32
- 40
- 48
- 64
Corner radii
101214182448pill
Shadows (3)
- Borders
- hairline, 1px
- Section padding
- 55px
Components
exact computed valuesbutton-primary
Start free trial
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 12px
- padding
- 8px 16px
- height
- 38.9px
- fontFamily
- Roobertvf
- fontSize
- 13.92px
- fontWeight
- 500
button-secondary
Get a demo
- backgroundColor
- #CBD810
- textColor
- #000000
- rounded
- 12px
- padding
- 9px 18px
- height
- 47px
- fontFamily
- Roobertvf
- fontSize
- 18px
- fontWeight
- 500
card
- rounded
- 18px
- padding
- 16px
- backgroundColor
- #FEFDFB
- border
- 1px solid #FFFFFF
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-sticky+transparent
- Page height
- 10,255px
- Easing
- ease-out
- Durations
- 100ms 150ms 300ms 400ms
- Transitions
- 87
- Keyframes
- 0
- Stack
- webflow, react, gsap, jquery, segment, google-tag-manager, cloudflare, cloudfront
Page sections (8)
section labels are heuristic
01nav
02hero
03logos
04features?GTM engineers build on Clay
05features?Put agents that know
06logosBuild systems that make
07features?Where girls often choose between career or marriage, she carved her own path
08footerTurn your growth ideas into reality today
How Clay compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 88px: larger than 86% of indexed sites (median 60px).
- Type scale
- 1.28×: flatter than 53% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 18.9:1: higher than 66% of indexed sites (median 17.6:1).
- Page length
- 10,255px: longer than 68% of indexed sites (median 8,217px).
- Corner radius
- Mostly 12px, shared by 14 of 274 indexed sites (5%).
- Roobertvf
- The only site in the index that loads Roobertvf.
- 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 Clay use?
Clay uses Roobertvf for headings and body text.
What are Clay's brand colors?
Clay's website uses a light scheme: background #F4F3F0, surface #FFFFFF, text #000000, muted text #1B1A18 and borders #FFF3ED.
How is Clay's website laid out?
The most common corner radius is 12px, body text is 16px with 1.4 line height, and the page container is 1280px wide.
