Make Fairhand yours, step by step
Seven steps take the demo studio to your client’s site: the name and details, the colours, the type, the work and photos, the contact form, publishing, and the handover. This page is for you: step 6 tells you when to delete it.
1. The name and details
The wordmark “Vasse” lives in the Navigation component and in the footer of the Site layout: change it in both. The name is also written by hand in the title and description of the site (Site Settings) and of each page (page settings, including the “{{Title}} | Vasse” pattern of the Project and Article pages), in the “© 2026 Vasse” line of the footer, in the text of Home and Studio, and in the Legal notice and Privacy sections of the Colophon. The two founders, Marta and Rui, are named on Home, Studio and Contact. Search the project for “Vasse”, “Marta” and “Rui” to find what is left.
The contact details are invented too: replace the email and the city in the footer of the Site layout, and the email and address on the Contact page. The favicon and the share image are drawn on the design page “Share image and favicon”: edit them there, then upload the new versions in Site Settings.
2. Colours
Nine colour styles drive the whole site, named by role: Color/Background (Paper), Color/Foreground (Oxblood, for text, buttons and the footer), Color/Night (the dark bands), Color/Tint (Plaster), Color/Text Secondary (Caption grey) and Color/Border (Hairline), plus Color/Tint on Night, Color/Border on Ink and Color/Line on Oxblood for tints and lines on dark backgrounds. Change Background and Foreground to recolour every page, then check Text Secondary against both: as text it needs a contrast of at least 4.5 to 1. Borders are decorative; the form fields are outlined in Foreground.
3. Type
Fourteen text styles set every heading, paragraph and label: Text/H1 Display for page titles, Text/H2 Section title, Text/H3 Entry title, Text/Statement for the large centred sentences, Text/Lead, Text/Body, Text/Caption, Text/Folio for small labels, Text/Figure number, Text/Pill for the tilted labels on photos, Text/Button, Text/Wordmark for the studio name in the navigation, Text/Masthead for the large name in the footer and Text/Drift for the line that slides across a dark band. The large styles have their own sizes for desktop, tablet and phone. Edit a style and the change reaches every page. To change a typeface, pick the new font in each text style, then in the four fields of the contact form, which keep their own font. Update the Typefaces section of the Colophon to match.
4. Work, Journal and photos
Your work lives in two CMS collections. Add a project with a title, a sheet number, a photo, a one-line caption, a year, a place and the text. Journal entries have a date, a sheet number, a place, a photo, a caption, an excerpt and the text.
Photos live in the CMS and in photo frames on Home, Services, Studio, Work, Journal and Contact, which do not come from the CMS, including the arches and the two carousels: select each photo and replace its image, its alt text, its sheet number and its caption, then rewrite the captions to describe your photos. Give all the photos one treatment (the same white balance and contrast), and keep the subject near the centre: cards and arches crop from the middle. If you keep AI-generated images, keep the notices in the footer and in the Photographs section of the Colophon; if you do not, delete both.
5. The contact form
Open the form on the Contact page and add your email address as its destination in the form settings. Until you do, messages are only kept in the form submissions of your Framer project. Then rewrite the note under the form and the Legal notice and Privacy sections of the Colophon for your client: the details in them are invented for the demo.
6. Publish
Delete this page, then the “Start here” link in the footer of the Site layout. Remove the “Design system” link from the footer too: the Design system page stays in the project for you and the agent, hidden from search engines, and you can delete it once the site is finished. In Site Settings, connect your client’s domain, then press Publish. A custom domain needs a paid Framer site plan; on the free plan the site stays on a Framer subdomain.
Open the live site on a phone and on a computer, follow every link, and send a test message through the form to check that it reaches your inbox. Then select the form and, in its spam protection settings, choose to block suspicious messages.
7. Handover and licence
When the site is live, invite your client to the project so they can add projects and Journal entries in the CMS, or move the project to their own workspace. Show them where a new project goes and how to publish again. The Template section of the Colophon credits Fairhand: keep it or delete it.
One purchase covers one website, yours or a client’s. For another site, buy another licence. You may hand the finished site to your client, who may keep editing it, but you may not resell or share the template, its remix link or its files. The full licence came with your purchase.
Help
Questions about the template: southstudiolab@gmail.com. We reply in writing to every message.