archesign.studioTemplates
No. 45 · Urban Design & Research

Isochrone

A transit-map website template for mobility and transport planners — station navigation, journey-line sections, routes as projects and a journey-planner contact form.

Style: Transit-map lines and nodes

Standard licencePricing coming soon
Open live demo (new tab)

One website per licence · Licence terms (draft)

Template
No. 45 · Isochrone
Niche
Urban Design & Research
Version
1.0
Pages
6 HTML pages
Fonts
Onest
Download
60 KB ZIP · 25 files
01 · Preview

Desktop and phone, side by side.

Scroll inside the frames to see the whole home page — or open the live demo, where every link works.

your-studio.com
The full Isochrone home page on a 1440 px desktop screen
The full Isochrone home page on a 390 px phone screen

Screenshots of the demo at 1440 px and 390 px. Demo content is written for Knoten Mobility, a fictional studio.

02 · Pages

Six pages, ready to edit.

Each page is a plain HTML file with real, niche-specific copy — replace the words, keep the structure.

03 · On a phone

Built for the small screen too.

The same pages at 390 px: single column, full-screen menu, no sideways scrolling.

Isochrone — Projects page on a phone
projects.html · 390 px
Isochrone — Case study page on a phone
project.html · 390 px
Isochrone — Contact page on a phone
contact.html · 390 px
04 · Design

What makes Isochrone different.

Design signature

  1. Station navigation
  2. Journey-line sections
  3. Routes as projects
  4. Journey-planner contact form

In every template

  • Six complete pagesHome, projects with a filter, a case study, about, services with FAQ, and contact.
  • Plain HTML, CSS and JavaScriptNo framework, no build step, no tracking. Open index.html and start editing.
  • Design tokens at the topColours and fonts live in one :root block at the top of style.css.
  • Original SVG artworkDemo drawings made for each template in its own palette. Keep them or swap in your photos.
  • Checked down to 375 pxNo sideways scrolling on phones, a full-screen mobile menu, and layouts that hold at 1440 px.
  • Accessible basicsSkip link, visible keyboard focus, labelled form fields, alt text and reduced-motion support.
05 · Schedules

Colour and type.

Change any of these in the :root block at the top of style.css.

Colour schedule

--white#ffffff
--mist#f2f3f5
--ink#14161a
--red#e1372d
--blue#1f6fd1
--yellow#f2a900
--green#2e9e5b
--purple#8e44ad

Type schedule

OnestHeadings and text

Knoten Mobility

Fonts from Google Fonts, SIL Open Font License.

Like Isochrone?

Checkout opens soon. Leave your email and we'll let you know when it goes on sale — or explore the live demo first.

Get notified Live demo (new tab) ↗
06 · Same niche

More Urban Design & Research templates.