Typography
scale ratio 1.279- Söhnecss: Sohnebody40057%
- Fellow Solardisplay400 50042%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Fellow Solar | 48px | 500 | 1.1 | -0.04em |
| headline | Fellow Solar | 24px | 400 | 1.2 | 0em |
| title | Söhne | 18px | 400 | 1.2 | 0em |
| body | Söhne | 14px | 400 | 1.4 | 0em |
| body-sm | Söhne | 12px | 400 | 1.22 | 0em |
Type scale
Aa12Aa14Aa16Aa18Aa24Aa40Aa48
- Body size
- 14px / 1.4
- Display size
- 48px
- Display tracking
- -0.04em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 16.66:1
- Muted on bg
- undefined:1
- Accent on bg
- 16.66:1
- Dark mode
- none
Declared accent tokens
- --button-primary-inverse-bg#9D523Anot on page
Space, shape & depth
Spacing scale (base 5px)
- 3
- 4
- 5
- 10
- 15
- 17
- 20
- 30
- 45
- 60
- 120
Corner radii
2pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- 45px
Components
exact computed valuesbutton-primary
Shop By Moments
- backgroundColor
- #1E1E1F
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 15px 30px
- height
- 40px
- fontFamily
- Söhne
- fontSize
- 14px
- fontWeight
- 400
button-secondary
Shop All
- textColor
- #1E1E1F
- rounded
- 9999px
- padding
- 15px 30px
- height
- 40px
- fontFamily
- Söhne
- fontSize
- 14px
- fontWeight
- 400
- border
- 1px solid #1E1E1F
card
- rounded
- 2px
- padding
- 0px
- backgroundColor
- #F5F5F5
input
- rounded
- 0px
- height
- 42px
- padding
- 0px 0px
- backgroundColor
- #FFFFFF
- border
- 1px solid #FFFFFF
Layout & motion
- Container
- 1320px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-static+transparent
- Page height
- 7,792px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 400ms
- Transitions
- 26
- Keyframes
- 0
- Stack
- shopify, jquery, google-tag-manager, cloudflare
Page sections (6)
section labels are heuristic
01hero
02features?Shop by category
03feature detail?Espresso, evolved.
04feature detail?Best Sellers
05testimonialsWe’re a package deal
06footer
How Fellowproducts compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.28×: flatter than 51% of indexed sites (median 1.28×).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 16.7:1: lower than 62% of indexed sites (median 17.6:1).
- Page length
- 7,792px: shorter than 54% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Söhne
- One of 4 indexed sites that load Söhne (1%).
- Fellow Solar
- The only site in the index that loads Fellow Solar.
- 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 Fellowproducts use?
Fellowproducts uses Söhne (loaded as "Sohne") for body text. Fellow Solar is used for headings.
What are Fellowproducts's brand colors?
Fellowproducts's website uses a light scheme: background #FFFFFF, text #1E1E1F and borders #FFFFFF.
How is Fellowproducts's website laid out?
The most common corner radius is 0px, body text is 14px with 1.4 line height, and the page container is 1320px wide.
