Template Guide

1. Start here

This page is for you, the template owner. It’s hidden from search engines (noindex). Delete it, or remove its footer link, before launch.

Everything repeatable lives in the CMS, every color and font is a shared style, and every repeated block is a component. Change things once and they update everywhere.

2. Colors

Open Assets › Colors. The palette is built from these styles: Brand/Primary (plum), Brand/Secondary, Accent/Emerald, Accent/Emerald Soft, Surface/Base (porcelain), Surface/Raised, Surface/Sunken, Surface/Inverse (ink), Text/Primary, Text/Secondary, Text/Inverse, Text/Inverse Muted, Border/Default, Border/Strong, Border/Inverse, State/Success and State/Warning. Edit a style’s value to re-theme the whole site. Keep body text at 4.5:1 contrast or higher.

3. Fonts and text styles

Headings use Newsreader and body text uses Hanken Grotesk. To swap fonts, edit the text styles in Assets › Text: Display, H1–H4, Body L/M/S, Label, Caption, Button, Quote and the Article styles (used inside CMS rich text). Each style has Desktop, Tablet and Phone sizes.

4. Layout system

Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Radius scale: 6 (buttons, inputs), 8 (images), 12 (cards), 20 (CTA band), pill (badges, chips). Sections use 112 / 88 / 64 px vertical padding and 40 / 32 / 20 px side padding on desktop, tablet and phone, with content capped at 1280 px.

Breakpoints: Desktop from 1200 px (the canvas frame is 1200 wide on purpose so laptops get the desktop layout), Tablet 810–1199 px, Phone below 810 px. Framer fixes the canvas height of pages that use the Main Layout, but the live page always grows with its content. If you add content, drag the page taller on the canvas to see it all.

5. Editing the CMS

Treatments: name, category (drives the filter on /treatments), summary, hero image, quick facts (Best for, Duration, Downtime, Results last, Starting price), body, FAQ, related concerns and Featured (turn on to show it on Home).

Concerns: name, image, summary, body and recommended treatments.

Results: title, treatment, before and after images, sessions, timeframe, provider and a consent note. Only publish photos with signed patient consent.

Providers: name, credentials, role, photo, bio, specialties and locations.

Locations: city, status (Open or Coming soon), address, phone, phone link (tel:+1…), hours, map link, booking URL, photo and providers.

Memberships: tier name, monthly price (a number), perks and Highlighted (shows the “Most popular” style).

Journal: title, category, cover, excerpt, body, author and date. Testimonials: quote, name or initials, treatment and rating (1–5 stars).

Two-way references: Treatments ↔ Concerns and Providers ↔ Locations are stored on both sides. Framer doesn’t sync them automatically, so when you link two items, update both.

Lists in rich text: the sample content uses “✓ ” lines so every line keeps the template font. If you type real bulleted lists into CMS rich text, check the list font in Preview, because Framer’s text styles cover headings and paragraphs but not list items.

6. Booking widget

On /book, select the layer “Booking Embed (paste code here)”. In its settings choose Type: HTML and paste the embed code from your booking platform, or choose Type: URL if your platform gives you a booking page link. Then adjust the height.

Boulevard, Vagaro, Jane, Acuity, Calendly and similar: in your platform’s admin, find the website or online booking widget settings, copy the embed (iframe or script) code and paste it as above. Use each platform’s own help docs for the exact steps. This template doesn’t include official integrations. Also update each location’s Booking URL in the CMS.

7. Financing

Replace the “Financing partner” boxes on Home and /financing with your partners’ approved logos and links, paste each lender’s approved disclosure, and edit or remove the example payment table. Examples must stay labeled as examples.

8. Forms

Select “Consultation Request Form” on /book and “Contact Form” on /contact, then set where submissions go (email, webhook or Google Sheets). Until you do, submissions aren’t delivered. To add a field, duplicate an existing one so it keeps the same style. Keep the consent checkbox, and don’t ask for detailed medical information.

9. Compliance placeholders

Replace every item tagged “Placeholder” or “Sample”: the Medical Disclaimer component (editing it once updates every page), consent notes, financing disclosures, sample reviews and prices, and the Privacy Policy and Terms. Have your counsel review all medical, financial and legal wording.

10. Images

Placeholder images show their slot and size. Recommended sizes: portraits 4:5 (1200 × 1500) for treatment heroes, provider photos and the Home hero; landscape 3:2 (1800 × 1200) for locations, journal covers and the About image; square 1:1 (1200 × 1200) for concerns and before/after pairs, with matching angle and lighting. Add descriptive alt text in each image field.

11. Your details

Replace the sample phone numbers (555 range), hello@maisonaura.example, addresses and social links. The nav phone number and links are controls on the Nav instance in the Main Layout. Footer details live in the Footer component.

12. Filters and pagination

/treatments filters by category and /results by treatment, using page variables, so you can link to a filtered view such as /treatments?category=… . Each listing shows a set number of items per page. Change the page size and pagination style (Load more or infinite scroll) in the Collection List settings.