Instructions

Nocturne is built so you can rebrand it in minutes: colours and fonts live in variables, repeated parts are components, and all menu and event content comes from the CMS.

Colours & fonts

Open the Variables panel. The Brand group holds the core palette (Ink, Oxblood, Velvet, Crimson, Ember, Amber, Cream). Text and Border colours are aliases of those brand colours, so changing one brand colour updates the whole site. Fonts are set once in the Font variables: heading, paragraph and mono.

Components

Shared parts are components, so an edit in one place updates every page. Select an instance and use its properties to change text, links or images.

Logo, menu links and the reservation button.
Text, link and three variants: Primary, Secondary and Accent.
The private hire band above the footer. Edit its text and image alt.
Address, hours, contact details and the large wordmark.

CMS

Everything on the Drink and Event pages is pulled from the CMS, so add or edit items there rather than on the canvas. Each field has help text that explains where it appears.

Name, menu number, price, short and full ingredients, a 4:5 image, the Signature switch and Order (lower numbers show first in the menu track).
Name, date, date label, doors time, genre, background image, ticket link and the Sold out switch.

Animations

All animations are native Webflow Interactions (GSAP), named by what they do. Open the Interactions panel to adjust timing or turn one off. Every interaction respects the visitor’s reduced-motion setting.

Hero reveal and scroll expand, manifesto word light-up, horizontal drinks track, room cards, marquee, night background swap, press quotes and private hire zoom.
Page reveal on load, image zoom on scroll, related cards dealt in on scroll and image zoom on hover.
A small smooth-scroll script lives in Site settings → Custom code. Delete it there to use native scrolling.

Contact form

The reservation form is a native Webflow form. The “I’m reaching out about” pills are radio buttons styled as chips. To change the selected colour, select a Reason Chip Bg, open States and edit Checked. Submissions arrive in Site settings → Forms.

Need help?

Questions about the template? Get in touch and we’ll usually reply within one business day.

Contact the designer ↗