Typography
- Hem Sansdisplay + body400 500100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Hem Sans | 14px | 500 | 1.429 | 0em |
| label | Hem Sans | 14px | 400 | 1.571 | 0em |
Type scale
Aa14
- Body size
- n/a
- Display size
- 14px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.48:1
- Muted on bg
- undefined:1
- Accent on bg
- 8.74:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 8px)
- 8
- 12
- 16
- 32
- 64
Corner radii
2pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Confirm selection
- backgroundColor
- #B9BDC1
- textColor
- #F2F3FF
- rounded
- 9999px
- padding
- 12px 32px
- height
- 44px
- fontFamily
- Hem Sans
- fontSize
- 14px
- fontWeight
- 500
button-secondary
Private
- textColor
- #2326DE
- rounded
- 2px
- padding
- 8px 16px
- height
- 40px
- fontFamily
- Hem Sans
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #2326DE40
Layout & motion
- Container
- n/a
- Grid columns
- n/a
- Hero
- unknown
- Navigation
- none-detected
- Page height
- 900px
- Easing
- ease
- Durations
- 150ms 200ms 250ms
- Transitions
- 9
- Keyframes
- 0
- Stack
- gatsby, contentful, google-tag-manager, netlify
Page sections (1)
01heroPlease choose your region below
How Hem compares
- Largest heading
- 14px: smaller than 99% of indexed sites (median 60px).
- Text contrast
- 15.5:1: lower than 70% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- Hem Sans
- The only site in the index that loads Hem 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 Hem use?
Hem uses Hem Sans for headings and body text.
What are Hem's brand colors?
Hem's website uses a light scheme: background #FFFFFF, text #242427.
How is Hem's website laid out?
The most common corner radius is 2px, body text is nullpx with null line height, and the page container is nullpx wide.
