Typography
scale ratio 1.732- Interbody400 50065%
- GT Walsheimcss: GT Walsheim Mediumdisplay50032%
- Input Monocss: Input Mono Regularmono400 7003%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | GT Walsheim | 54px | 500 | 1 | -0.04em |
| headline | GT Walsheim | 44px | 500 | 1.1 | -0.04em |
| title | Inter | 18px | 400 | 1.35 | -0.011em |
| body | Inter | 18px | 400 | 1.35 | -0.011em |
| body-sm | Inter | 13px | 500 | 1.6 | 0em |
| label | Inter | 14px | 400 | 1.4 | -0.007em |
| mono | Input Mono | 12px | 400 | 1.333 | 0em |
Type scale
Aa10Aa12Aa13Aa14Aa15Aa16Aa18Aa44Aa54
- Body size
- 18px / 1.35
- Display size
- 54px
- Display tracking
- -0.04em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 7.37:1
- Accent on bg
- 21.00:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 5px)
- 5
- 6
- 8
- 10
- 15
- 20
- 25
- 30
- 40
Corner radii
458151820pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 120px
Components
exact computed valuesbutton-primary
- backgroundColor
- #FFFFFF
- textColor
- #0000EE
- rounded
- 8px
- padding
- 10px 14px
- height
- 34px
- fontFamily
- sans-serif
- fontSize
- 12px
- fontWeight
- 400
card
- rounded
- 20px
- padding
- 0px
- shadow
- rgba(0, 0, 0, 0.15) 0px 0.3px 0.78px -1.33px, rgba(0, 0, 0, 0.13) 0px 1.14px 2.98px -2.67px, rgba(0, 0, 0, 0.04) 0px 5px
Layout & motion
- Container
- 1200px
- Grid columns
- 4
- Hero
- left-aligned+media-below
- Navigation
- top-static+transparent
- Page height
- 12,318px
- Easing
- n/a
- Durations
- n/a
- Transitions
- 0
- Keyframes
- 0
- Stack
- framer, hubspot, google-tag-manager
Page sections (13)
section labels are heuristic
01nav
02heroFramer is the pro website builder with a world-class design agent
03content?
04features?The website builder for shipping standout sites
05feature detail?Build your website together with agents
06code sample?Design with an agent
07feature detail?Not just vibes, a full platform
08features?
09features?Trusted by teams shipping big sites
10feature detail?Explore the marketplace
11content?
12cta?Your next idea starts here
13footer
How Framer compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 54px: smaller than 60% of indexed sites (median 60px).
- Type scale
- 1.73×: steeper than 95% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 12,318px: longer than 83% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- GT Walsheim
- One of 2 indexed sites that load GT Walsheim (1%).
- 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 Framer use?
Framer uses Inter for body text. GT Walsheim (loaded as "GT Walsheim Medium") is used for headings. Input Mono (loaded as "Input Mono Regular") is used for code.
What are Framer's brand colors?
Framer's website uses a dark scheme: background #000000, text #FFFFFF, muted text #FFFFFF99 and borders #FFFFFF12.
How is Framer's website laid out?
The most common corner radius is 8px, body text is 18px with 1.35 line height, and the page container is 1200px wide.
