Typography
scale ratio 1.393- Lausannedisplay + body400100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Lausanne | 63.84px | 400 | 1.056 | -0.03em |
| title | Lausanne | 32.74px | 400 | 1.142 | -0.03em |
| body | Lausanne | 17.18px | 400 | 1.3 | 0em |
Type scale
Aa17Aa22.5Aa32.5Aa48.5Aa64
- Body size
- 17px / 1.3
- Display size
- 63.84px
- Display tracking
- -0.03em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 20.13:1
- Muted on bg
- 20.02:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 3.5
- 11
- 12
- 20
- 21.5
- 24
- 36
- 47.5
- 98.5
- 144
Corner radii
Shadows (0)
none
- Borders
- none
- Section padding
- 89px
Layout & motion
- Container
- n/a
- Grid columns
- 20
- Hero
- left-over-media
- Navigation
- top-fixed
- Page height
- 3,323px
- Easing
- ease-in-out
- Durations
- 140ms 400ms
- Transitions
- 3
- Keyframes
- 0
- Stack
- squarespace, hotwire
Page sections (5)
section labels are heuristic
01nav
02hero
03feature detail?Works In Progress is an exhibition series with a mission to amplify, archive and
04feature detail?Visit
05feature detail?Works in Progress
How Works In Progress compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 63.8px: larger than 55% of indexed sites (median 60px).
- Type scale
- 1.39×: steeper than 79% of indexed sites (median 1.28×).
- Text contrast
- 20.1:1: higher than 78% of indexed sites (median 17.6:1).
- Page length
- 3,323px: shorter than 85% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Lausanne
- One of 2 indexed sites that load Lausanne (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 Works In Progress use?
Works In Progress uses Lausanne for headings and body text.
What are Works In Progress's brand colors?
Works In Progress's website uses a light scheme: background #FBFAF8, surface #F2EFE9, text #000000, muted text #01000A.
How is Works In Progress's website laid out?
The most common corner radius is 0px, body text is 17px with 1.3 line height, and the page container is nullpx wide.
