Waymark
A Vector Art template for a slow-travel trip planner.
A landing site for a trip planning app for people who go by train, ferry and bus. Flat vector art throughout: one navy outline on every drawn shape, flat fills, hard offset shadows instead of blur. The sample brand, Waymark, its towns (Halden, Port Ess, Lake Orm, Skerry), times and fares are fictional.
- For
- Travel app
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A boarding pass sits on a full-screen drawn panorama; its Coast, Lakes and Islands tabs draw a dotted route between two towns and send a train over the viaduct, a bus up to the lake or a ferry to the island; the scene turns to night in dark mode.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): a full-screen drawn panorama (mountains, a lake, a railway viaduct, a harbour town, an island) with a boarding pass on top that holds the headline. Its Coast, Lakes and Islands tabs swap the route on the panorama, the vehicle (train, bus, ferry) and the pass details. Then a four-day planner with a drawn map per day, a packing list whose suitcase fills as you tick, a postcard wall, sample trips as luggage tags, two plans, questions and a sun-yellow closing band. - Sample trip (
trip.html): all four days with their own maps and legs, a fares table that adds up from the legs, and a "save offline" control with idle, saving, saved, removed and no-connection states. - 404 (
404.html): a signpost with one blank arm. - Light and dark themes: in dark the panorama turns to night (deep sky, stars, a moon, lit windows). The toggle remembers the choice; otherwise the system setting is followed. Phone to wide desktop, visible focus, keyboard tabs (arrow keys), reduced motion respected.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- Sample trip
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
