Buyer’s guide
How this site works, and how to make it yours.
Written for the person who just bought the template. Read the status system first; it is the part that is different.
Start here
What you bought, in one paragraph.
This template is a working brokerage site, not a layout. Every list on it reads from the CMS, every colour comes from a token, and one dropdown per property rewrites its page. The demo brokerage, Aiguelonde, is fictional: the towns, the agents and the houses were invented and verified against real registries so they collide with nobody. Replace them with yours and nothing else needs to move.
Three kinds of business buy this. A luxury brokerage or boutique agency uses it as it stands. A property developer hides the Agents collection and turns the eight properties into units or phases. An architecture or interior studio renames Properties to Projects and uses the status system to show what is in design, on site and complete.
Aiguelonde is a fictional brokerage. Its towns, agents, houses and contact details were invented for this template and verified against real registries so they collide with nobody; replace every word of it with your own.
The status system
One dropdown rewrites the page.
Each property has a Status: Coming Soon, Available, Under Offer or Sold. Nothing else on the record changes when you change it, but the page does. The badge on every card recolours. On the property page the price shows or hides, the banner appears with your Status Note, the Sold stamp lands on the photograph, the floor plan appears or disappears, and the whole closing section swaps between a viewing form, a register-interest form and a rail of similar houses in the same neighbourhood.
There is no code behind this. Each element binds its visibility to the Status option through a conversion, which is why it survives any redesign you make on the canvas. Duplicate a card and the behaviour comes with it.
Blue badge. Gallery capped at three photographs. Price shows what you type, so type Price on request. Floor plan hidden. Closing section asks to be told before it lists.
Olive badge. Everything shown. Closing section is the viewing form.
Amber badge and banner carrying the Status Note. Everything else as Available. Closing section asks what they liked, for the next one.
Grey badge, stamp over the photograph, price hidden, form removed, replaced by available houses in the same neighbourhood.
The collections
Seven collections, and what each one feeds.
Properties is the heart, with thirty fields including reference, tagline, description, gallery, floor plan image and PDF, virtual tour link, open house date and note, features, neighbourhood and agent. Neighborhoods hold a hero, a gallery, a rich text of highlights and a map link. Agents hold a portrait, a bio, contact lines and languages. Journal is a plain editorial collection with a category option. Testimonials link back to the property they are about. Features are the tags with a Lucide icon name each.
Settings is one record. Brand name, tagline, phone, phone link, email, address, map, social links, the marquee string, the notice bar text and its on-off switch, the hero posters and the hero video, meta title and description, the two page intros and the closing image. Every one of those is read somewhere on the site, so nothing in Settings is decoration.
Settings
One record runs the chrome.
The Settings collection has one item, and it holds everything that is the same on every page: the brand name and tagline, the phone number and its dialling link, the email, the address and map link, the footer line, the marquee text, the notice bar and its switch, the WhatsApp link, Instagram and LinkedIn, the intro sentences on Sell and Contact, the default agent for the contact form, and the closing photograph.
Four of its fields are media: Hero Poster Desktop, the Promise Poster and its video, and the two texture videos with their posters. Replace a video file and the band changes everywhere it is used. The poster is what a phone sees, because none of the videos load on a phone.
Turn the notice bar off with one boolean. Clear the Open House Date on a property and its bar, its home section and its page on Open Houses all disappear together. Nothing here needs code.
Open houses
A calendar you run by typing in one field.
Put a date in a property’s Open House Date and three things happen: the property appears on the Open Houses page, it appears in the open house section of the Home page, and a bar pins under the navigation on its own page with an Add to calendar button that builds the calendar file from the text you typed. Clear the field and all three go away. There is no plugin and no calendar service.
Saving and comparing
Hearts, a badge and a table.
Every property card carries a save mark. Saving stores the house in the visitor’s browser only; there is no account and nothing leaves the device. The navigation shows a count, and the Compare page lays up to three saved houses side by side with price per square metre, best in row markers and a group viewing request that carries all three references to your contact form. It prints cleanly.
Filtering
Status, type, bedrooms, sort. Shareable.
The Properties page filters in place, without reloading. The chosen filters are written into the address, so a visitor can send a colleague the exact view they were looking at. On a phone the filters fold into a drawer above the list.
Colours and type
Eleven tokens, twelve text styles.
Every colour on the site is one of eleven tokens. Change accent and the badges, buttons, notice bar and band recolour together. The four status colours were measured against WCAG before they were used: each clears 4.5 to 1 as a badge fill under white text and as text on the page background. Body text measures 15 to 1.
Type is Fraunces for display and Instrument Sans for everything else, through named styles with sizes set at all three breakpoints. Edit a style and every use follows. The eyebrow, headline and one sentence rhythm at the top of each section is deliberate: hold it and the site keeps its register whatever you write.
Colours
Three palettes, one set of tokens.
The control at the bottom left of the demo swaps the whole site between Stone, Night and Salt without a reload. It is not a theme engine. It rewrites twelve colour tokens, and every instance on every page follows, because no layer on this site carries a colour of its own.
That is the part worth keeping. Change the eleven tokens in the Assets panel and the site is yours, including the status colours, the scrims over photographs and the shadow. Every pair in all three palettes was measured against WCAG AA before it shipped.
Before you publish your own site, select Palette Switch in the layout template and switch Enabled off, or delete it. That is the whole removal step.
Motion
Six things move, and each has one switch.
Every link and button lifts its characters when you hover, focus or tap it. Every number rolls to its value the first time you scroll past it, and rests on the true figure before and after, so a price is never shown wrong. Every card lifts, deepens its shadow, zooms its photograph and slides a label in from the edge. Routes change with one three hundred millisecond fade. A grain sits over the flat colour bands. And the demo carries a palette control.
All six are code components, and each is a single instance inside the Motion Kit frame in the layout template. Select one, switch Enabled off, and that behaviour leaves all sixteen routes at once. Delete the frame and the four micro-interactions go together. The site is designed to be correct without any of them, so nothing breaks when you do.
They are off automatically for a visitor who has asked their system for reduced motion, and none of them is hover-only: the character lift answers a tap, and the card reveal answers keyboard focus.
Underneath the kit, the motion that was always here: each section arrives once from sixteen pixels below, the hero and band images hold a parallax measured under forty pixels of travel, the marquee is the only thing that loops, and the video bands fetch nothing until they are within eight hundred pixels of the screen and never load at all on a phone.
Who this is for
A brokerage, a developer, a studio.
A brokerage or boutique agency uses it as it stands. Replace the eight properties, the four neighbourhoods and the three agents, set your own tokens and fonts, and publish. The status system is already how you work: a house is coming soon, available, under offer or sold, and the site says so everywhere at once.
A property developer hides the Agents collection and its two routes, then uses the same four statuses as a live sales board for units or phases. Coming Soon holds a unit before release, Under Offer marks it reserved, Sold closes it, and the Compare page becomes a unit comparison. Rename Properties to Units in the CMS and the navigation follows.
An architecture or interior studio renames Properties to Projects and repurposes the statuses as in design, on site and complete, dropping the fourth. The gallery, the vitals row and the neighbourhood link become the project brief, the specification and the location. The journal stays a journal.
What we charge, in the demo
The copy behind the Sell page link.
The Sell page links here because a real brokerage publishes its fees. In the demo, Aiguelonde charges the seller and the buyer pays nothing, which is how the Price Note on each record reads. Write your own terms in this section and the link keeps working.
In the editor
Three views you will use.
The three screenshots below are of the Framer editor, not of the site. They are the only places you need to visit to run everything this template does.
The Status dropdown on a Properties record
Every badge, price, banner, stamp, floor plan and closing section on the site reads this one field.
The Open House Date field
Fill it and the bar, the home section and the Open Houses page appear together. Clear it and they go.
A form’s Redirect setting
Point each of the three forms at /thank-you so a visitor is taken somewhere after Sent.
Before you publish
The eight things to change.
Brand name, contact details, the notice text, the marquee, both hero posters and the video, the meta fields, the closing image.
Your houses. Keep the field names; the pages are bound to them.
Replace or delete. Sections that read from an empty collection render nothing.
Change accent first, then the status colours if your brand needs them, checking contrast.
Swap the fonts inside the twelve styles rather than on the canvas.
Point the three forms at your inbox in the Framer form settings and set the redirect to the thank you page.
Set this page to noindex or delete it. It is written for you, not your visitors.
Custom domain, then a Lighthouse run on the Home and Properties pages; the demo scores are in the listing.