Travel / Dark

Halden.

An atmospheric sleeper train hero with a WebGL night landscape, an interactive journey rail and precise travel readouts.

An independent studio concept.

01 / THE DESIGN BRIEF

Build the idea.

Visual direction for the composition, typography, colour palette and interactions.

Build a fullscreen interactive hero for Halden, a fictional sleeper train service for travellers taking a private cabin from Copenhagen to Zurich. Use near black #06070c, warm text #ece6dc and amber #e9a85a. The sky moves from purple #1a1030 towards a burnt horizon #c2733a. Pair thin extended Archivo headlines with Martian Mono for navigation, times and instruments. Keep the scene dark and cinematic with restrained grain, distant village lights, fog, overlapping mountain ridges and a softly glowing moon. Place HALDEN at the upper left, NIGHT LINE 02 and the route across the top, and a compact menu at the upper right. Position the large headline low on the left: Sleep through the border. Wake in Zurich. Include a short private cabin description and an amber Reserve a cabin action. Place small travel details down the right, including local time, next stop, outside temperature, altitude and cabin lamp level. A quiet vertical edge label balances the left margin. Anchor a horizontal journey rail along the bottom with Copenhagen, Hamburg, Frankfurt, Basel and Zurich. Let its range input scrub through the overnight route, changing the sky lighting, scene atmosphere and instrument values. Add a subtle pointer driven lamp reflection in the landscape. Keep motion atmospheric rather than moving the whole layout. Provide a keyboard accessible menu panel. Below 760px, recompose the headline, instruments and journey controls so the scene remains visible and text stays legible. Keep a static sky and layered mountain silhouette as the fallback. Reduced motion should draw a still scene and update journey selections immediately.

AI results vary by tool and model. This prompt may not produce an exact match to the preview.

02 / MAKE IT YOURS

Make it your own.

Editable HTML, CSS and JavaScript, required local artwork and fonts with their licences, a short README and usage terms. No framework or runtime build step. Preview and edit with a local server extension in your editor.

Downloads are free. Your Google account lets you download designs; browsing and copying prompts do not require an account.

Continue with Google, then return here to choose your download.

Personal and client use

You may use and modify this design for personal websites and commercial client websites. You may not resell, sublicense or redistribute the template, its source files or a collection containing it. Keep the included font licence notices. The design is supplied as a starting point without warranty.

Explore hero designs