Typography
scale ratio 1.213- Bearsanscss: bearsansbody400 70066%
- Bearsansheadlinecss: bearsansheadlinedisplay40034%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Bearsansheadline | 51.2px | 400 | 1.1 | 0em |
| body | Bearsans | 16px | 400 | 1.7 | 0em |
Type scale
Aa16Aa17.5Aa22.5Aa25.5Aa30.5Aa41.5Aa51
- Body size
- 16px / 1.7
- Display size
- 51.2px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 9.74:1
- Muted on bg
- 3.54:1
- Accent on bg
- 4.02:1
- Dark mode
- none
Declared accent tokens
- --accent-color#DD4C4Fpainted
Space, shape & depth
Spacing scale
- 5
- 5.5
- 6.5
- 8
- 11
- 12
- 13
- 16
- 19
- 20.5
- 21
- 24
- 32
- 40
Corner radii
44.5588.51640
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 109px
Components
exact computed valuescard
- rounded
- 40px
- padding
- 0px
- backgroundColor
- #F3F5F7
Layout & motion
- Container
- 960px
- Grid columns
- 4
- Hero
- centered+media-below
- Navigation
- top-fixed
- Page height
- 10,541px
- Easing
- n/a
- Durations
- n/a
- Transitions
- 0
- Keyframes
- 0
- Stack
- google-tag-manager
Page sections (9)
section labels are heuristic
01nav
03gallery?
04content?
05features?Sketch your notes
06pricing?Bear
07feature detail?Join the community
08cta?The Bear newsletter
09footer
How Bear compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 51.2px: smaller than 66% of indexed sites (median 60px).
- Type scale
- 1.21×: flatter than 76% of indexed sites (median 1.28×).
- Container
- 960px: narrower than 85% of indexed sites (median 1242px).
- Text contrast
- 9.7:1: lower than 92% of indexed sites (median 17.6:1).
- Page length
- 10,541px: longer than 71% of indexed sites (median 8,217px).
- Corner radius
- Mostly 40px, shared by 2 of 274 indexed sites (1%).
- Bearsans
- The only site in the index that loads Bearsans.
- Bearsansheadline
- The only site in the index that loads Bearsansheadline.
- 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 Bear use?
Bear uses Bearsans (loaded as "bearsans") for body text. Bearsansheadline (loaded as "bearsansheadline") is used for headings.
What are Bear's brand colors?
Bear's website uses a light scheme: background #FFFFFF, surface #F3F5F7, text #444444, muted text #888888 and borders #F3F5F7.
How is Bear's website laid out?
The most common corner radius is 40px, body text is 16px with 1.7 line height, and the page container is 960px wide.
