Typography
scale ratio 1.213- Figtreedisplay70063%
- Interbody400 600 70037%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Figtree | 62px | 700 | 1.29 | 0em |
| headline | Figtree | 48px | 700 | 1.3 | 0em |
| body | Inter | 16px | 400 | 1.5 | 0em |
| body-sm | Figtree | 11px | 700 | 1.2 | -0.01em |
| label | Inter | 14px | 400 | 1.4 | 0em |
Type scale
Aa11Aa12Aa14Aa16Aa18Aa22Aa24Aa28Aa32Aa48Aa62
- Body size
- 16px / 1.5
- Display size
- 62px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 17.76:1
- Accent on bg
- 3.89:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 16
- 20
- 22
- 24
- 30
- 32
- 40
- 48
Corner radii
41220pill
Shadows (4)
- Borders
- none
- Section padding
- 104px
Components
exact computed valuesbutton-primary
- backgroundColor
- #8169FF
- textColor
- #0000EE
- rounded
- 4px
- padding
- 12px 16px
- height
- 40px
- fontFamily
- sans-serif
- fontSize
- 12px
- fontWeight
- 400
card
- rounded
- 12px
- padding
- 0px
- backgroundColor
- #FFFFFF33
- shadow
- rgba(0, 0, 0, 0.08) 0px 3px 12px 0px, rgba(0, 0, 0, 0.2) 0px 0px 2px 0px
Layout & motion
- Container
- 900px
- Grid columns
- 6
- Hero
- centered+media-below
- Navigation
- top-static
- Page height
- 9,335px
- Easing
- cubic-bezier(0.4, 0, 1, 1)
- Durations
- 100ms
- Transitions
- 1
- Keyframes
- 0
- Stack
- framer, google-tag-manager
Page sections (7)
section labels are heuristic
01hero
02feature detail?Don’t limit hardware interaction, Empower your designs
03feature detail?Powerful features for highest fidelity
04feature detail?Get the most out of ProtoPie
05feature detail?Explore the ProtoPie gallery
06gallery?Start prototyping today
07footer
How ProtoPie compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 62px: larger than 54% of indexed sites (median 60px).
- Type scale
- 1.21×: flatter than 76% of indexed sites (median 1.28×).
- Container
- 900px: narrower than 87% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 9,335px: longer than 62% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Figtree
- One of 2 indexed sites that load Figtree (1%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- 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 ProtoPie use?
ProtoPie uses Figtree for headings. Inter is used for body text.
What are ProtoPie's brand colors?
ProtoPie's website uses a light scheme: background #FFFFFF, surface #FFFFFF33, text #000000, muted text #181818.
How is ProtoPie's website laid out?
The most common corner radius is 4px, body text is 16px with 1.5 line height, and the page container is 900px wide.
