Locomotive
Austere Swiss editorial rigor meets experimental web craft. High-contrast monochromatic layouts rely on razor-thin hairline borders, vast negative space, and custom glyph-laden serif headings to create a commanding and tactile digital broadsheet.
Visit site ↗Colour
Background#ffffff
Text#000000
Surface#000000
Muted#000000
Typefaces
- Display
- LocomotiveNew
- Body
- HelveticaNowDisplay
- Mono
- —
- Source
- self_hosted
- Scale
- 15 · 26 · 70 · 110
Layout
- Grid
- 12 columns
- Container
- 1320px
- Spacing base
- 10px
- Radius
- 0px
Capture
- Category
- agency
- Sections
- 9
- Captured
- 2026-08-27
- Rhythm
- dark → light x8
Type rules
- display headings set in ultra-condensed custom serif with sentence-case casing
- body copy set strictly in neutral Swiss grotesque with zero tracking
- horizontal 1px hairline dividers separate list items, articles, and index rows
Colour rules
- palette is strictly binary monochrome: pure #ffffff canvas with solid #000000 text and rules
- color is confined entirely to photography, merchandise previews, and WebGL hero assets
Voice rules
- embed boxed sub-labels and custom dingbats directly into running headers
- maintain terse, matter-of-fact copy that balances technical competence with self-assured wit
Holds it together
- divide list items and data indices with edge-to-edge 1px black hairline rules
- punctuate large headline strings with boxed acronyms, directional arrows, and custom symbols
- frame photographic assets and 3D embeds within stark, unpadded monochromatic canvas blocks
Contrast
text on background21.0:1 AAA
muted text on background21.0:1 AAA
Type, measured
- Body
- 16px / 0
- Measure
- —
- Display
- 110px / 1
- Tracking
- 0em display
- Scale ratio
- 1.62
Voice
- Tone
- confident, experimental, witty
- Sentences
- medium
- Person
- first
- Vocabulary
- cultured
- Calls to action
- read, see, buy, talk
Built with
- Builder
- —
- Framework
- —
- Motion
- —
- WebGL
- yes
- Nav
- top_bar, 4 items
- Length
- 7.3 screens
Colour, by area
#ffffff 0%#000000 0%
Sections in page order
3 strongest marked · 9- 00
hero
StrongestImmersive dark hero anchored by glowing red projection mapping and refined editorial typography pinned to the lower grid.
- Mood
- editorial + dreamy
- Layout
- 11 col · full bleed · airy
- 01
showcase
A stark, gallery-like editorial showcase framing a 3D championship ring with precise, dispersed typography on a vast white canvas.
- Mood
- quiet + editorial
- Layout
- 16 col · asymmetric · airy
- 02
showcase
An austere, typography-only portfolio index with condensed display titles separated by crisp hairline rules.
- Mood
- editorial + quiet
- Layout
- 1 col · stacked · airy
- 03
statement
Stark black-and-white typographic manifesto rendered in tightly packed, ultra-condensed serif lettering.
- Mood
- editorial + bold
- Layout
- 12 col · full bleed · dense
- 04
statement
Crisp editorial agency overview balancing high-contrast typography, hairline dividers, and a dark 3D figure cutout against stark white space.
- Mood
- editorial + bold
- Layout
- 12 col · split · airy
- 05
showcase
Austere Swiss-style editorial article index pairing a lone left-aligned category label with a right-column list divided by crisp hairline borders.
- Mood
- quiet + clinical
- Layout
- 12 col · split · balanced
- 06
other
StrongestCrisp, understated Swiss typographic index with horizontal rules and generous whitespace.
- Mood
- quiet + editorial
- Layout
- 10 col · split · airy
- 07
showcase
Clean, airy product showcase pairing graphic merchandise on pale grey backdrops with precise Swiss typography.
- Mood
- quiet + playful
- Layout
- 16 col · grid · airy
- 08
footer
StrongestA stark Swiss-style typographic footer blending structured column navigation with an experimental, glyph-punctuated address and contact lockup.
- Mood
- editorial + raw
- Layout
- 14 col · grid · balanced
