Instructions

Fonts

• Headings use Stack Sans Headline (weights 300 and 400). Body text, buttons and labels use Inter (weights 400, 500 and 600).
• Both fonts are uploaded in Site settings > Fonts. To change a font, upload the new one there, then change the Font/Heading or Font/Body variable.

Variables and modes

• Colors: the Ink, Cream and Gold ramps hold the colour values. Role variables such as Text/Primary, Surface/Dark and Border/Line point to them, so changing one ramp value updates every class that uses it.
• Sizes: heading sizes, text sizes, line heights, section paddings, gaps and the global padding are variables with four modes: Base (desktop), Tablet (991 px and below), Mobile Landscape (767 px and below) and Mobile Portrait (479 px and below).
• To edit a size for one screen width, open the Variables panel, pick the mode and change the value there.

Structure and classes

• Every page follows Client-First: page-wrapper > main-wrapper > section_name > padding-global > container-large > name_component.
• Shared styles live in utility classes: heading-style-h1 to heading-style-h6, text-size-*, text-color-*, background-color-*, padding-section-* and padding-global. Running text uses text-size-body (16 px).
• All sizes are set in rem on a 16 px root, so the layout follows the visitor’s browser font size.
• See every heading, text size, colour and button on the Style Guide page.

Open the Components panel. Change the props of an instance to edit one place, or edit the component itself to change every page.

Navigation

• Navbar: the dark bar used over photo heroes, with the Menu button, centred logo, phone number and Request Consultation button. The Menu button opens the full-screen menu panel.
• Navbar Bar: the light bar used on the Journal, journal posts, categories and the utility pages. Props: CTA Text and CTA Link.
• Footer: closing call to action, contact details, link columns, disclaimer, legal links and the wordmark band. Edit its links inside the component.
• Notice Bar: the announcement strip above the Navbar on Home. Props: Text, Link Text and Link.

Buttons and labels

• Button (14 px) and Button Large (16 px): yellow pills. Button Dark: dark pill for light sections. Button Outline: outlined pill for photos and dark sections. Props: Text and Link.
• Eyebrow: the gold chevron and label above section headings. Props: Text and Variant (Light for dark sections).

Sections

• FAQ Item: one question and answer. Props: Question and Answer.
• FAQ Section: heading plus six FAQ Items. Props: Question 1 to 6 and Answer 1 to 6, set on each page.
• Contact Section: practice details and the Consultation Request form. Used as the last section on Home, Procedures, Results, Our Doctor and the procedure pages.
• Changelog Entry: Version, Date, Title and Notes. To log a new release on the Changelog page, duplicate the newest entry, move the copy to the top and edit its props.

• Procedures: name, also known as, area (Face, Breast, Body, Non-surgical), popular with men, prices, recovery details, card and hero images, body text and SEO fields. Each item has its own page at /procedure/item-slug.
• Results: area, months after surgery, patient age and image.
• Team: role, credential and photo.
• Blog Posts (the Journal): excerpt, cover image and alt text, author, publish date, read time, featured, body, category and SEO description. Each post has its own page at /blog/post-slug.
• Categories: journal categories with an SEO description. Each category page lists its posts.
• Cards link to their pages through the Detail Link field. When you add an item, set its Detail Link to the item page, for example /procedure/arm-lift.
• Lists are sorted by the Order field or by Publish Date, newest first.

• The Consultation Request form (on the Consultation page and in the Contact Section) is a native Webflow form: name, email, phone, contact method, contact time, preferred clinic, visit type, message and a consent checkbox.
• Set the email address that receives submissions in Site settings > Forms.
• Keep health data out of website forms. Do not add fields for symptoms, medical history, treatments or photos. Webflow forms are not built for protected health information.
• For medical intake, use your patient portal or a form tool that signs a Business Associate Agreement (BAA) with your practice, and link to it from the Consultation page.

• Open the Interactions panel in the Designer to see each interaction by name.
• Menu open and close: opens and closes the full-screen menu panel of the Navbar.
• Toggle mobile menu on click: opens the Navbar Bar menu at 991 px and below.
• FAQ open and close: opens and closes each FAQ Item. Every answer is closed on page load.
• Tab rows are native Webflow Tabs. Rename a tab or edit its pane in the Navigator.

• Every image is listed on the Licenses page with the places it appears. All images are for demo purposes only.
• To replace an image on a page, select it, open the Settings panel, choose Replace image, then update its alt text. Decorative images stay marked as decorative.
• CMS images (procedures, results, team and journal covers) are replaced inside each CMS item, together with their alt text fields.
• When you replace an image, update its line on the Licenses page.

• The Privacy Policy, Terms Of Service and Cookie Policy pages are written for a fictional practice. Have them checked by a lawyer for your practice and state, and replace the copy with your own before launch.
• The Style Guide, Licenses, Instructions and Changelog pages are hidden from search engines (Page settings > Custom code).