Typography
scale ratio 1.285- Work Sansdisplay + body400 500 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Work Sans | 72px | 400 | 1.2 | 0em |
| headline | Work Sans | 18px | 700 | 1.5 | 0em |
| title | Work Sans | 48px | 400 | 1.2 | 0em |
| body | Work Sans | 16px | 400 | 1.5 | 0em |
| body-sm | Work Sans | 12px | 500 | 1.5 | 0em |
| label | Work Sans | 16px | 500 | 1.5 | 0em |
Type scale
Aa12Aa16Aa18Aa19Aa20Aa48Aa65Aa72
- Body size
- 16px / 1.5
- Display size
- 72px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.02:1
- Muted on bg
- 4.54:1
- Accent on bg
- 1.84:1
- Dark mode
- none
Declared accent tokens
- --primary#31EFB8not on page
- --antd-colorPrimary#1677FFnot on page
Space, shape & depth
Spacing scale (base 4px)
- 4
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 48
Corner radii
810pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 73px
Components
exact computed valuesbutton-primary
- backgroundColor
- #14CECA
- textColor
- #151035
- rounded
- 8px
- padding
- 12px 20px
- height
- 48px
- fontFamily
- Work Sans
- fontSize
- 16px
- fontWeight
- 400
button-secondary
- textColor
- #151035
- rounded
- 8px
- padding
- 12px 20px
- height
- 50px
- fontFamily
- Work Sans
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #151035
Layout & motion
- Container
- 1200px
- Grid columns
- 7
- Hero
- centered+media-below
- Navigation
- top-sticky+transparent
- Page height
- 7,108px
- Easing
- ease
- Durations
- 100ms 600ms 1000ms
- Transitions
- 62
- Keyframes
- 1
- Stack
- next.js, google-tag-manager, cloudflare
Page sections (6)
01nav
02logos
03heroThink and build digital products.
04featuresfor every future.
05feature detailDesign Systems
06footerLegal
How Penpot 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.28×: steeper than 50% of indexed sites (median 1.28×).
- Container
- 1200px: narrower than 57% of indexed sites (median 1242px).
- Text contrast
- 17.0:1: lower than 57% of indexed sites (median 17.6:1).
- Page length
- 7,108px: shorter than 61% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Work Sans
- The only site in the index that loads Work Sans.
- 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 Penpot use?
Penpot uses Work Sans for headings and body text.
What are Penpot's brand colors?
Penpot's website uses a light scheme: background #F5F8FB, text #151035, muted text #6B7280 and borders #D1D5DB.
How is Penpot's website laid out?
The most common corner radius is 8px, body text is 16px with 1.5 line height, and the page container is 1200px wide.
