Typography
scale ratio 1.351- Die Groteskcss: Die Grotesk Vf Romandisplay + body300 400 50083%
- Die Grotesk Cui300 40011%
- Geistmono Variablefont Wghtmono300 4006%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Die Grotesk | 72px | 500 | 1 | 0.006em |
| headline | Die Grotesk | 42px | 400 | 1 | 0.01em |
| body | Die Grotesk | 16px | 300 | 1.5 | 0.025em |
| body-sm | Geistmono Variablefont Wght | 12px | 400 | 1.167 | 0.125em |
| label | Die Grotesk C | 14px | 400 | 1.571 | 0.029em |
Type scale
Aa12Aa14Aa16Aa18Aa22Aa28Aa42Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- 0.006em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 18.73:1
- Accent on bg
- 21.00:1
- Dark mode
- none
Declared accent tokens
- --surface--surface-brand#5B0EFFpainted
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 9
- 10
- 12
- 14
- 15
- 16
- 20
- 24
- 54
- 72
- 80
Corner radii
48
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 80px
Components
exact computed valuesbutton-primary
Book a demo
- backgroundColor
- #000000
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 12px 16px
- height
- 40px
- fontFamily
- Die Grotesk
- fontSize
- 16px
- fontWeight
- 300
- border
- 1px solid #000000
button-secondary
Watch now
- backgroundColor
- #FFFFFFB8
- textColor
- #121212
- rounded
- 4px
- padding
- 9px 15px
- height
- 32px
- fontFamily
- Die Grotesk
- fontSize
- 14px
- fontWeight
- 300
- shadow
- rgba(255, 255, 255, 0.4) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.7) 0px 1px 0px 0px inset, rgba(18, 18, 18, 0.25) 0
input
- rounded
- 4px
- height
- 54px
- padding
- 12px 12px
- backgroundColor
- #FAFAFA
Layout & motion
- Container
- 1120px
- Grid columns
- 3
- Hero
- left-over-media+media-below
- Navigation
- top-fixed+transparent
- Page height
- 5,679px
- Easing
- ease
- Durations
- 200ms 400ms
- Transitions
- 89
- Keyframes
- 2
- Stack
- webflow, jquery, google-tag-manager, cloudflare
Page sections (9)
section labels are heuristic
01nav
02hero. t r o p p u s r e m o t s u c n u r o t y a w w e n e h T
03logos
04feature detail?Stop doing the work. Start directing agents.
05feature detail?Turn raw customer data into usable intelligence.
06logos?
07logosThe latest from Pylon
08content?
09footer
How Usepylon compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.35×: steeper than 69% of indexed sites (median 1.28×).
- Container
- 1120px: narrower than 73% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 5,679px: shorter than 76% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Die Grotesk
- The only site in the index that loads Die Grotesk.
- Die Grotesk C
- The only site in the index that loads Die Grotesk C.
- 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 Usepylon use?
Usepylon uses Die Grotesk (loaded as "Die Grotesk Vf Roman") for headings and body text. Die Grotesk C is used for ui. Geistmono Variablefont Wght is used for code.
What are Usepylon's brand colors?
Usepylon's website uses a light scheme: background #FFFFFF, text #000000, muted text #121212 and borders #DFDFDF.
How is Usepylon's website laid out?
The most common corner radius is 0px, body text is 16px with 1.5 line height, and the page container is 1120px wide.
