Typography
- Suisse Int'lcss: SuisseIntldisplay + body400 50092%
- Menlocss: ui-monospacemono4008%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Suisse Int'l | 100px | 400 | 0.9 | -0.025em |
| headline | Suisse Int'l | 72px | 400 | 0.95 | -0.025em |
| title | Suisse Int'l | 20px | 400 | 1.472 | 0em |
| label | Suisse Int'l | 16px | 400 | 1.472 | 0em |
| mono | Menlo | 64px | 400 | 1 | 0em |
Type scale
Aa12Aa13Aa14Aa16Aa18Aa20Aa24Aa36Aa42Aa44Aa52Aa64Aa72Aa100
- Body size
- n/a
- Display size
- 100px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.46:1
- Muted on bg
- 4.32:1
- Accent on bg
- 1.09:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 14
- 20
- 24
- 40
- 48
- 60
- 64
- 110.5
- 303.5
Corner radii
8pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 99px
Components
exact computed valuesbutton-primary
Discover Cruiser
- backgroundColor
- #FFFFFF
- textColor
- #1D1D1D
- rounded
- 9999px
- padding
- 20px 24px
- height
- 56px
- fontFamily
- Suisse Int'l
- fontSize
- 16px
- fontWeight
- 500
card
- rounded
- 8px
- padding
- 48px
- backgroundColor
- #FFFFFF
input
- rounded
- 0px
- height
- 41px
- padding
- 8px 100px
- border
- 1px solid #FFFFFF
Layout & motion
- Container
- 1320px
- Grid columns
- 6
- Hero
- left-over-media+media-below
- Navigation
- top-fixed+transparent
- Page height
- 18,814px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 100ms 300ms 600ms 900ms
- Transitions
- 81
- Keyframes
- 0
- Stack
- shopify, tailwind, google-tag-manager, cloudflare
Page sections (11)
section labels are heuristic
01heroRiding reinvented
02feature detail?Shockingly smooth
03logos?
04gallery?. w o l f n i s y a w l a e r ' u o y , l a r u t a n o s r e w o P
05feature detail?AdaptivePower™
06feature detail?Packed full of tech.
07gallery?You'll never ride alone
08gallery?Which Cowboy is right for you?
10features?Cowboy Corner
How Cowboy compares
- Largest heading
- 100px: larger than 93% of indexed sites (median 60px).
- Container
- 1320px: wider than 77% of indexed sites (median 1242px).
- Text contrast
- 15.5:1: lower than 71% of indexed sites (median 17.6:1).
- Page length
- 18,814px: longer than 96% of indexed sites (median 8,217px).
- Corner radius
- Mostly 8px, shared by 21 of 274 indexed sites (8%).
- Suisse Int'l
- One of 4 indexed sites that load Suisse Int'l (1%).
- 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 Cowboy use?
Cowboy uses Suisse Int'l (loaded as "SuisseIntl") for headings and body text.
What are Cowboy's brand colors?
Cowboy's website uses a light scheme: background #F5F5F5, surface #FFFFFF, text #1D1D1D, muted text #1D1D1D99 and borders #FFFFFF1A.
How is Cowboy's website laid out?
The most common corner radius is 8px, body text is nullpx with null line height, and the page container is 1320px wide.
