Typography
scale ratio 1.803- Plaindisplay + body400100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Plain | 52px | 400 | 1.05 | -0.02em |
| headline | Plain | 16px | 400 | 1.25 | 0em |
| body | Plain | 16px | 400 | 1.25 | 0em |
| body-sm | Plain | 13px | 400 | 1.25 | 0em |
Type scale
Aa13Aa16Aa32Aa52
- Body size
- 16px / 1.25
- Display size
- 52px
- Display tracking
- -0.02em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 17.40:1
- Muted on bg
- 4.54:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 4
- 6
- 7
- 8
- 12
- 24
- 32
- 48
- 64
- 96
Corner radii
48pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 144px
Components
exact computed valuesinput
- rounded
- 0px
- height
- 60px
- padding
- 0px 0px
- backgroundColor
- #222222
Layout & motion
- Container
- n/a
- Grid columns
- n/a
- Hero
- left-aligned
- Navigation
- top-static+transparent
- Page height
- 25,697px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 400ms
- Transitions
- 109
- Keyframes
- 0
- Stack
- tailwind, gsap, google-tag-manager, cloudfront
Page sections (16)
section labels are heuristic
01nav
02heroThe Secret Life of Things
03features?Firaxis Games
04feature detail?Retrospective: Shakespeare in the Park
07features?‘Pentagram x Deus Ex Machina’
08features?Dataland
How Pentagram compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 52px: smaller than 63% of indexed sites (median 60px).
- Type scale
- 1.80×: steeper than 97% of indexed sites (median 1.28×).
- Text contrast
- 17.4:1: lower than 51% of indexed sites (median 17.6:1).
- Page length
- 25,697px: longer than 98% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Plain
- One of 2 indexed sites that load Plain (1%).
- 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 Pentagram use?
Pentagram uses Plain for headings and body text.
What are Pentagram's brand colors?
Pentagram's website uses a light scheme: background #FFFFFF, text #1A1A1A, muted text #767676 and borders #333333.
How is Pentagram's website laid out?
The most common corner radius is 0px, body text is 16px with 1.25 line height, and the page container is nullpx wide.
