Instructions

Work on a copy of the site so you can always compare against the original demo.

Open Variables and change the ten base colours. Every page updates automatically, because there are no hard-coded colours anywhere in the template.

Read sections 02, 05 and 07 before you start editing, or you will lose time.

Almost every piece of text in this template is a component property, not editable text on the canvas. Double-clicking a heading will not let you type.

This applies to headings, descriptions, button labels, statistics, badges and image slots. Blog posts, services and testimonials are the exception, and come from the CMS instead.

Most sections have several layouts, chosen from the Variant dropdown at the top of the component panel. Twelve of the twenty-three components have more than one variant, and each variant is named after its layout.

If you want the layout you saw on a particular demo page, open that page and read the Variant dropdown rather than guessing from the page name.

Three collections power the dynamic content.

Every image field is used somewhere in the layouts. If you leave one empty, that layout shows an empty coloured block rather than falling back gracefully. Fill all image fields, even for items you think are not displayed.

The Services slider does not use a single Collection List. It uses five separate Collection Lists, one per slide, each limited to a single item with a different offset: slide one shows offset 0, slide two offset 1, and so on to slide five at offset 4.

The 01 to 05 labels are static text. Reordering services in the CMS will not renumber the cards. Edit each by hand, or bind them to the service number field if you prefer them to follow the CMS.

The template uses three variable collections and no hard-coded values. Changing a variable updates the entire site.

Ten base colours plus translucent derivatives used for borders, overlays and scrims. If you change a base colour, change its matching translucent version too, or old tints will show through.

The spacing scale, section padding, and four tokens that are not obvious. Radius Tile sets the corner radius on cards. Radius Pill is deliberately 999px so buttons stay pill-shaped at any height. Tracking Tight and Spacing Overlap both hold negative values on purpose, for tight headings and overlapping avatar stacks. Do not correct them.

The Sizes and Typography collections have Tablet and Mobile modes. Sizes adjust automatically at each breakpoint, so you do not need to override them manually.

Full licensing details are on the template's Licenses page.