Typography
- Söhnecss: SOEHNEdisplay + body400 70098%
- SOEHNE IKONcss: SOEHNE_IKONother4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Söhne | 36px | 700 | 0.98 | 0em |
| body | Söhne | 16px | 400 | 1.333 | 0em |
Type scale
Aa16Aa36
- Body size
- 16px / 1.333
- Display size
- 36px
- Display tracking
- 0em
- Case
- mixed
Color
dark schemePalette by painted area
- Text on bg
- 19.95:1
- Muted on bg
- 2.82:1
- Accent on bg
- 4.42:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 4
- 5
- 7
- 8
- 10
- 20
- 30
- 34.5
- 68.5
- 137
Corner radii
2
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 852px
Components
exact computed valuesbutton-primary
Die Grotesk
- backgroundColor
- #D33C03
- textColor
- #000000
- rounded
- 2px
- padding
- 0px 8px
- height
- 28px
- fontFamily
- Söhne
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Geograph
- backgroundColor
- #FFCC01
- textColor
- #000000
- rounded
- 2px
- padding
- 0px 8px
- height
- 28px
- fontFamily
- Söhne
- fontSize
- 16px
- fontWeight
- 400
card
- rounded
- 2px
- padding
- 0px
- backgroundColor
- #1C1C1C
input
- rounded
- 2px
- height
- 36px
- padding
- 0px 8px
- backgroundColor
- #1C1C1C
- border
- 1px solid #1C1C1C
Layout & motion
- Container
- 695px
- Grid columns
- 12
- Hero
- unknown
- Navigation
- top-sticky+transparent
- Page height
- 10,346px
- Easing
- ease-out
- Durations
- 600ms
- Transitions
- 1
- Keyframes
- 0
- Stack
- gatsby, radix-ui, google-tag-manager, cloudfront
Page sections (5)
section labels are heuristic
01nav
04content?
05footer
How Klim compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 36px: smaller than 82% of indexed sites (median 60px).
- Container
- 695px: narrower than 95% of indexed sites (median 1242px).
- Text contrast
- 19.9:1: higher than 76% of indexed sites (median 17.6:1).
- Page length
- 10,346px: longer than 70% of indexed sites (median 8,217px).
- Corner radius
- Mostly 2px, shared by 10 of 274 indexed sites (4%).
- Söhne
- One of 4 indexed sites that load Söhne (1%).
- SOEHNE IKON
- The only site in the index that loads SOEHNE IKON.
- 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 Klim use?
Klim uses Söhne (loaded as "SOEHNE") for headings and body text. SOEHNE IKON (loaded as "SOEHNE_IKON") is used for other.
What are Klim's brand colors?
Klim's website uses a dark scheme: background #000000, text #FFFFFF, muted text #555555 and borders #383838.
How is Klim's website laid out?
The most common corner radius is 2px, body text is 16px with 1.333 line height, and the page container is 695px wide.
