Typography
scale ratio 1.326- Cooper Hewitt Displaycss: CooperHewittDisplaydisplay400 50088%
- Cooper Hewittcss: CooperHewittbody40012%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Cooper Hewitt Display | 42px | 500 | 1 | 0em |
| body | Cooper Hewitt | 18px | 400 | 1.3 | 0em |
| body-sm | Cooper Hewitt | 13px | 400 | 1.231 | 0em |
| label | Cooper Hewitt Display | 13px | 400 | 1.231 | 0em |
Type scale
Aa13Aa16Aa18Aa20Aa40Aa42
- Body size
- 18px / 1.3
- Display size
- 42px
- Display tracking
- 0em
- Case
- upper
Color
dark schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 4.92:1
- Accent on bg
- 6.62:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 3
- 5
- 6
- 7
- 8
- 9
- 10
- 12.5
- 15
- 16
- 20
- 25
- 30
- 32
Corner radii
pill
Shadows (1)
- Borders
- regular, 2px
- Section padding
- 16px
Components
exact computed valuesbutton-secondary
VISIT
- textColor
- #FFFFFF
- rounded
- 0px
- padding
- 6px 0px
- height
- 43px
- fontFamily
- Cooper Hewitt Display
- fontSize
- 20px
- fontWeight
- 400
- border
- 2px solid #FFFFFF
input
- rounded
- 0px
- height
- 30.2px
- padding
- 10px 32px
- backgroundColor
- #FFFFFF
- border
- 1px solid #000000
Layout & motion
- Container
- 1200px
- Grid columns
- n/a
- Hero
- left-over-media
- Navigation
- none-detected
- Page height
- 2,021px
- Easing
- ease-in-out
- Durations
- 150ms 200ms
- Transitions
- 37
- Keyframes
- 0
- Stack
- wordpress, jquery, hotwire, google-tag-manager, cloudflare
Page sections (4)
section labels are heuristic
01content?
02heroWelcome to Cooper Hewitt Plan Your Visit
03features?Hours Today
04footerBECOME A MEMBER
How Cooperhewitt compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 42px: smaller than 79% of indexed sites (median 60px).
- Type scale
- 1.33×: steeper than 63% 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
- 2,021px: shorter than 90% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Cooper Hewitt Display
- The only site in the index that loads Cooper Hewitt Display.
- Cooper Hewitt
- The only site in the index that loads Cooper Hewitt.
- 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 Cooperhewitt use?
Cooperhewitt uses Cooper Hewitt Display (loaded as "CooperHewittDisplay") for headings. Cooper Hewitt (loaded as "CooperHewitt") is used for body text.
What are Cooperhewitt's brand colors?
Cooperhewitt's website uses a dark scheme: background #000000, text #FFFFFF, muted text #797B79 and borders #FFFFFF.
How is Cooperhewitt's website laid out?
The most common corner radius is 0px, body text is 18px with 1.3 line height, and the page container is 1200px wide.
