Locomotive

Irreverent, ultra-confident design craft rooted in radical typography. High-contrast monochrome layouts let compressed serif letterforms and custom glyphs dominate the composition. The experience feels like an avant-garde editorial sketchbook brought alive through precision interaction.

rebellious luxurious contemplative clinical

Visit site

Rated

8.6/ 10

From 6 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged: 10.0
Systemmeasured: 7.0
Distinctionmeasured: 8.7

on the grid: 59%
vertical rhythm: 45%
type on a scale: 75%
contrast passing AA: 100%
unlike the library: 1.18
model craft: 8.7/10
model deviation: 7.0/10

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: 1360px
Spacing base: 10px
Radius: 0px

Capture

Category: agency
Sections: 6
Captured: 2026-09-04
Rhythm: dark → white x6

Type rules

display typography uses a custom condensed high-contrast serif at massive scale
inline icons, boxed descriptors, and symbols are inserted directly into headline text flows
body text remains set in a crisp neutral grotesque with generous line spacing

Colour rules

strict monochrome palette where rich media and imagery provide all color variation
pure white backgrounds define all content sections beneath the dark WebGL hero

Voice rules

mix agency pride and bilingual cultural phrasing with studio slang
keep calls to action short and coupled with directional arrows

Holds it together

embed custom geometric glyphs and bordered metadata tags directly into running headlines
separate all index list items with full-width hairline border rules
pair oversized condensed display serifs with compact grotesque metadata labels

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, witty, declarative
Sentences: medium
Person: first
Vocabulary: conversational
Calls to action: read, buy, see, talk

Built with

Builder: —
Framework: —
Motion: —
WebGL: yes
Nav: top_bar, 4 items
Length: 7.3 screens

Sections in page order

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

00
hero
Strong
A pitch-black experimental hero dominated by distorted kinetic display typography and crisp bespoke serif agency branding.
Mood
rebellious + mysterious
Layout
1 col · full bleed · airy
Open section
01
hero
Strong
Stark editorial hero floating an ornate championship ring within expansive white space and precision micro-typography.
Mood
luxurious + serene
Layout
3 col · asymmetric · airy
Open section
02
showcase
Minimalist editorial project index composed of hairline-ruled horizontal rows with elegant condensed serif display titles.
Mood
luxurious + serene
Layout
1 col · stacked · airy
Open section
03
statement
Strong
A stark editorial agency statement pairing compressed serif typography with an isolated 3D photogrammetry figure.
Mood
contemplative + rebellious
Layout
2 col · asymmetric · airy
Open section
04
showcase
A refined Swiss editorial index balancing hairline-divided article links with studio merchandise against pristine white space.
Mood
clinical + serene
Layout
2 col · grid · airy
Open section
05
footer
A stark monochrome footer balancing structured Swiss navigation columns with an expressive typographic address lockup filled with custom symbols.
Mood
clinical + playful
Layout
3 col · stacked · airy
Open section