Instructions

Getting started

Duplicate LaneWise from the Webflow Marketplace and open it in the Designer. In Site settings > Fonts, add three Google Fonts: Newsreader 300 and 400 with italics, Instrument Sans 400 and 500, and DM Mono 400. Then open the Style guide page to see colours, type and components in one place, and work through the pages you plan to keep. There is no custom code to configure.

Colours and variables

Every colour is a variable in the Color collection, grouped as Base, Neutral, Accent, Navy and Glass. Accent/Primary (#C2652E) is the action colour, Navy/Deep and Navy/Base carry the dark sections, and Glass holds the tints used over photos. Content Width, Section Padding and Radius are variables too. The type sizes have Tablet, Mobile (L) and Mobile modes, so headings scale down on smaller screens. Change a variable and every page updates.

Typography

Newsreader sets display text and headings, Instrument Sans covers body copy and UI, and DM Mono covers chips, labels and reference numbers. Use heading-style-display, heading-style-h1 to heading-style-h4 and heading-style-number on headings, and text-style-mono for mono labels. For the italic second line of a heading, wrap it in a span with text-style-italic-light.

Collections

LaneWise ships with four collections: Services, Industries, Case Studies and Insights. Each one has its own template page. Every industry references a case study, and every case study references an industry and the next case study, so related blocks and the next link fill in on their own. Edit content in the CMS panel: add an item and it appears across the site.

Navbar

The navbar is a glass capsule with Services and Pages mega menus. It comes in two variants: Dark for pages that open on a dark hero, and Light for pages that open on a light background. Select the Navbar instance on a page and set its Variant prop. On mobile the menu opens as a Deep navy panel.

Footer

The footer is a glass panel over a full-bleed image. Swap the image inside the Footer component and it changes on every page. The Where is my box? form sends the container or B/L number to the Track shipment page at /track as ?ref=.

Forms

Every form is a native Webflow form. Set the notification emails in Site settings > Forms, rename fields in the Settings panel and connect Make, Zapier or your CRM using the form name.

Interactions

All motion is built with Webflow Interactions (IX3). Animations only use transform and opacity and stay under 800 ms, so pages stay fast. Open the Interactions panel to change timing or remove an animation from any element.

Images and video

Photos and object renders are WebP files under 150 KB. Replace them through the Assets panel or by selecting an image and swapping it. The UI cards are images exported from the Figma file, so edit them there and export again. The hero video is a Background Video element: select it in the Designer and replace the file.

Pages

LaneWise includes 3 home layouts, 3 services layouts, Platform, Network, Track shipment, Industries, Case studies, Insights, About, 3 contact layouts, Terms and Privacy. It also has 4 CMS templates (Service, Industry, Case study and Insight) and the utility pages: 404, 401, Style guide, Licenses, Changelog, Instructions and Overview. Keep the layouts you want, set your homepage in Page settings and delete the rest.

Help and support

Email hello@loonis.co with any question about the template. LaneWise is designed and built by Loonis Studio.

Licenses and changelog

Images, fonts and icons used in the demo are listed on the Licenses page at /licenses with their sources and terms. Updates to the template are recorded on the Changelog page at /changelog.