Typography
scale ratio 1.238- PP Neue Montrealcss: PPNeueMontrealdisplay + body400 50099%
- PP Neue Montreal Monocss: PPNeueMontrealMonomono4001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | PP Neue Montreal | 48px | 500 | 1.083 | -0.025em |
| title | PP Neue Montreal | 20px | 500 | 1.2 | -0.015em |
| body | PP Neue Montreal | 18px | 400 | 1.444 | 0.005em |
| body-sm | PP Neue Montreal | 16px | 400 | 1.125 | 0em |
| label | PP Neue Montreal | 16px | 500 | 1.5 | 0.01em |
| mono | PP Neue Montreal Mono | 12px | 400 | 1.667 | 0em |
Type scale
Aa11Aa12Aa13Aa14Aa16Aa18Aa20Aa24Aa32Aa40Aa48Aa64Aa80
- Body size
- 18px / 1.444
- Display size
- 48px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.44:1
- Muted on bg
- 8.45:1
- Accent on bg
- 8.59:1
- Dark mode
- follows system
Declared accent tokens
- --color-product-accent#6C35F5painted
Space, shape & depth
Spacing scale
- 2
- 4
- 5
- 6
- 6.5
- 8
- 12
- 16
- 16.5
- 21
- 24
- 30
- 32
- 48
Corner radii
24
Shadows (4)
- Borders
- hairline, 1px
- Section padding
- 156px
Components
exact computed valuesbutton-primary
- backgroundColor
- #0D0D0D
- textColor
- #FFFFFF
- rounded
- 2px
- padding
- 0px 12px
- height
- 36px
- fontFamily
- PPNeueMontreal
- fontSize
- 14px
- fontWeight
- 500
button-secondary
Talk to sales
- textColor
- #0D0D0D
- rounded
- 2px
- padding
- 0px 20px
- height
- 40px
- fontFamily
- PP Neue Montreal
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #0D0D0D
Layout & motion
- Container
- 1376px
- Grid columns
- 2
- Hero
- left-aligned+media-below
- Navigation
- top-sticky
- Page height
- 8,217px
- Easing
- cubic-bezier(0.16, 1, 0.3, 1)
- Durations
- 700ms 900ms 1100ms 1700ms
- Transitions
- 209
- Keyframes
- 8
- Stack
- next.js, tailwind, sanity, posthog, google-tag-manager, cloudflare
Page sections (8)
section labels are heuristic
01features?
02herod a o l k r o w y n a r o f n o i t c u d o r p o t h t a p t s e t s a f r u o Y
03features?. e n o d , k c i l c , k c i l C
05features?s r e d l i u b r o f d e n g i s e d e r u t c u r t s a r f n i e v i t i u t n I
06features?t l u a f e d y b t n e i l i s e r d n a e r u c e s y a t S
07logosr e d n e R h t i w g n i d l i u b t r a t S
08footer
How Render compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.24×: flatter than 67% of indexed sites (median 1.28×).
- Container
- 1376px: wider than 96% of indexed sites (median 1242px).
- Text contrast
- 19.4:1: higher than 69% of indexed sites (median 17.6:1).
- Page length
- 8,217px: longer than 50% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- PP Neue Montreal
- The only site in the index that loads PP Neue Montreal.
- PP Neue Montreal Mono
- The only site in the index that loads PP Neue Montreal Mono.
- 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 Render use?
Render uses PP Neue Montreal (loaded as "PPNeueMontreal") for headings and body text. PP Neue Montreal Mono (loaded as "PPNeueMontrealMono") is used for code.
What are Render's brand colors?
Render's website uses a light scheme: background #FFFFFF, surface #FFFFFF94, text #0D0D0D, muted text #4D4D4D and borders #E3E3E3.
How is Render's website laid out?
The most common corner radius is 2px, body text is 18px with 1.444 line height, and the page container is 1376px wide.
Similar to Render
Plain / GT Planar / GT Standard Mono#FFFFFF
Browserbasebrowserbase.com
Maison Neue / Maison Neue Demi#FFFFFF
Everlaneeverlane.com
Chapeau Bold / Maison Neue Medium / Chapeau Black#FFFFFF
Eye on Designeyeondesign.aiga.org
Fricolage Grotesque / Mackinac / Fragment Mono#F1F2F9
Fly.iofly.io
Labil Variable / Labil / Bradford#FFFFFF
It's Nice Thatitsnicethat.com