Typography
- Locomotive Newcss: LocomotiveNewdisplay + body40070%
- Helvetica Now Displaycss: HelveticaNowDisplayui40030%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Locomotive New | 70px | 400 | 1.1 | 0em |
| headline | Helvetica Now Display | 26px | 400 | 1.2 | 0em |
| label | Helvetica Now Display | 0px | 400 | 0em |
Type scale
Aa0Aa26Aa70Aa110
- Body size
- n/a
- Display size
- 70px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- undefined:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 4
- 5
- 7
- 8
- 10
- 11
- 20
- 30
- 40
- 50
- 150
- 160
Corner radii
Shadows (0)
none
- Borders
- regular, 2px
- Section padding
- 150px
Components
exact computed valuesbutton-secondary
The dynasty
- textColor
- #000000
- rounded
- 0px
- padding
- 10px 0px
- height
- 48px
- fontFamily
- Helvetica Now Display
- fontSize
- 26px
- fontWeight
- 400
- border
- 2px solid #000000
Layout & motion
- Container
- 1360px
- Grid columns
- 12
- Hero
- left-over-media
- Navigation
- none-detected
- Page height
- 6,598px
- Easing
- cubic-bezier(0.215, 0.61, 0.355, 1)
- Durations
- 200ms
- Transitions
- 1
- Keyframes
- 0
- Stack
- lenis, google-tag-manager, cloudflare
Page sections (4)
section labels are heuristic
02content?
03features?(13) Extras
04footerExternal
How Locomotive compares
- Largest heading
- 70px: larger than 68% of indexed sites (median 60px).
- Container
- 1360px: wider than 89% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 6,598px: shorter than 65% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Locomotive New
- The only site in the index that loads Locomotive New.
- Helvetica Now Display
- One of 3 indexed sites that load Helvetica Now Display (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 Locomotive use?
Locomotive uses Locomotive New (loaded as "LocomotiveNew") for headings and body text. Helvetica Now Display (loaded as "HelveticaNowDisplay") is used for ui.
What are Locomotive's brand colors?
Locomotive's website uses a light scheme: background #FFFFFF, text #000000 and borders #000000.
How is Locomotive's website laid out?
The most common corner radius is 0px, body text is nullpx with null line height, and the page container is 1360px wide.
