UAStart a project
Case study

Trasse

Trasse runs scheduled container trains across eleven European corridors. The site had to sell one idea: freight that leaves on a timetable, like a passenger train.

Project
Trasse, intermodal rail freight
Industry
Logistics
Scope
Web design · Build · Motion
Built with
HTML · CSS · JavaScript · SVG · Lenis
Year
2026
Trasse — A brutalist landing page for an intermodal rail freight operator, built like a printed timetable: live departures, one run from Rotterdam to Milano, wagon tracking and a CO₂ calculator.

Freight on a fixed timetable

The brief

Shippers think of rail as slow and hard to book. Trasse wanted a page that feels as reliable as its trains: clear prices, fixed departures and proof that every box can be followed on a map.

What we did

We set the page like a printed timetable. Everything sits on a visible grid of hairline rules, with a condensed grotesk for the headlines, a monospace for data and one signal red for what is moving. The headline is fitted edge to edge, and the first screen pairs an aerial photo of a rail yard with a live departures board whose times flip like a split-flap display. A pinned strip follows one run from Rotterdam to Milano in six black and white photographs, with the clock, distance and a red train marker moving as you scroll. Services read as a table that inverts on hover, the network map draws its corridors next to a corridor list, the tracking panel looks up three real-looking containers, and the CO₂ calculator works on your own corridor and volume.

The live site

Scroll the site right inside the frame, or open it full screen.
webraw.studio/sites/trasse/Open the site

The first screen

Homepage · Desktop 1440
Trasse: first screen of the homepage

The full page

One long scroll, split into three columns — top to bottom, left to right.

Trasse: full page, part 1 of 3
Trasse: full page, part 2 of 3
Trasse: full page, part 3 of 3

Details

Trasse: Services as a table that inverts on hover
Services as a table that inverts on hoverServices
Trasse: Corridor map next to the corridor list
Corridor map next to the corridor listNetwork
Trasse: Container lookup with stops and wagon position
Container lookup with stops and wagon positionTracking
Trasse: CO₂ calculator by corridor and volume
CO₂ calculator by corridor and volumeCalculator

Colour & type

Palette — from the project file

  • Paper#ECEAE4
  • Ink#0D0D0C
  • Signal#FF3B14
  • Ballast#77746C

Typefaces

AaArchivo CondensedHeadlines and big numbers, fitted to the full width of the grid.
AaIBM Plex MonoLabels, times, train numbers and every piece of data.
Next case

Travessa

Travessa — A sales site for twenty-one new homes around a courtyard in Lisbon's Príncipe Real.
Start a project

Let’s launch.

Send a short brief or a link to your current site. You’ll get a clear plan, timeline and quote — no sales call required.

  • Reply within one business day
  • Design, build and launch by one team
  • One week of post-launch support included

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw