Make it your place.
Make it your place.
COMMONKIND is a free Framer template for practices working with public space. This guide covers the pieces to replace before it becomes your studio’s website.
COMMONKIND is a free Framer template for practices working with public space. This guide covers the pieces to replace before it becomes your studio’s website.
In this guide
In this guide
Start with the essentials.
Start with the essentials.
Replace COMMONKIND with your practice name in the navigation, footer and page titles. Add your own introduction, service descriptions and contact details.
Replace COMMONKIND with your practice name in the navigation, footer and page titles. Add your own introduction, service descriptions and contact details.
The demo practice and all three studies are fictional. Keep those disclosures while you use the sample material. Remove them only when you have replaced the material with your own work and accurate image credits.
The demo practice and all three studies are fictional. Keep those disclosures while you use the sample material. Remove them only when you have replaced the material with your own work and accurate image credits.
Add your own studies.
Add your own studies.
Open the Studies collection in Framer. Each entry has a title, URL slug, short description, type of place, setting, stage, year, scope, main image and case text. The work page and detail pages use these fields.
Open the Studies collection in Framer. Each entry has a title, URL slug, short description, type of place, setting, stage, year, scope, main image and case text. The work page and detail pages use these fields.
Write the context before the proposal. Explain what the place asked for, what you contributed and what still needs to happen. Only add clients, locations, dates, team credits or outcomes that you can accurately name.
Write the context before the proposal. Explain what the place asked for, what you contributed and what still needs to happen. Only add clients, locations, dates, team credits or outcomes that you can accurately name.
The Keep, Add and Share fields are short statements, not metrics. They can explain what is retained, what is proposed and how a place is meant to be used.
The Keep, Add and Share fields are short statements, not metrics. They can explain what is retained, what is proposed and how a place is meant to be used.
Choose a view that has room to breathe.
Choose a view that has room to breathe.
Use a high-quality landscape image with a useful detail in the same frame. The native PlaceView component switches between Whole view and Closer crop; it reuses one image rather than suggesting a second camera angle.
Use a high-quality landscape image with a useful detail in the same frame. The native PlaceView component switches between Whole view and Closer crop; it reuses one image rather than suggesting a second camera angle.
Replace the image in both native variants and adjust the focal point so the closer crop shows something meaningful. Check the small reference sheet at desktop and phone sizes. Supply clear alternative text and an image credit.
Replace the image in both native variants and adjust the focal point so the closer crop shows something meaningful. Check the small reference sheet at desktop and phone sizes. Supply clear alternative text and an image credit.
The included architectural images are AI-generated illustrations of imagined designs. Do not present them as photographs of your completed work. Keep their disclosure if they remain anywhere on your site.
The included architectural images are AI-generated illustrations of imagined designs. Do not present them as photographs of your completed work. Keep their disclosure if they remain anywhere on your site.
Change the system, not every page.
Change the system, not every page.
The template uses shared colour and text styles, with Chivo for headings and Public Sans for body text. Update the styles to carry your identity across pages.
The template uses shared colour and text styles, with Chivo for headings and Public Sans for body text. Update the styles to carry your identity across pages.
The palette combines pale aqua, deep petrol, mineral white and a sun-yellow action colour. If you change it, check text contrast, the selected image-view state, form fields and keyboard focus as well as the main headings.
The palette combines pale aqua, deep petrol, mineral white and a sun-yellow action colour. If you change it, check text contrast, the selected image-view state, form fields and keyboard focus as well as the main headings.
Connect your enquiry form.
Connect your enquiry form.
The demo form contacts kamnev.apps@gmail.com. Before publishing as your practice, change the native Framer form destination, the visible email address, the error-state email link and the privacy text.
The demo form contacts kamnev.apps@gmail.com. Before publishing as your practice, change the native Framer form destination, the visible email address, the error-state email link and the privacy text.
Check required fields, email validation, the sending state and the real success and error states. Send one test message that clearly identifies itself as a setup test, and verify that it reaches your chosen destination.
Check required fields, email validation, the sending state and the real success and error states. Send one test message that clearly identifies itself as a setup test, and verify that it reaches your chosen destination.
If you prefer email-only enquiries, replace the form with a clear email link. Never leave a button that looks as though it sends a message when it does not.
If you prefer email-only enquiries, replace the form with a clear email link. Never leave a button that looks as though it sends a message when it does not.
Give the small screens the same care.
Give the small screens the same care.
Check the site at 390, 768, 1200 and 1440 pixels wide. Look for cropped text, missing captions, overlapping image sheets and controls that are too small to tap. The first enquiry action should be visible without scrolling on a phone and laptop.
Check the site at 390, 768, 1200 and 1440 pixels wide. Look for cropped text, missing captions, overlapping image sheets and controls that are too small to tap. The first enquiry action should be visible without scrolling on a phone and laptop.
Open every project, navigation link and footer link. Check the menu with a keyboard, confirm the image-view controls have visible focus and review the reduced-motion version.
Open every project, navigation link and footer link. Check the menu with a keyboard, confirm the image-view controls have visible focus and review the reduced-motion version.
Set your page titles, descriptions and social image, connect your domain, and publish from Framer when the content and contact details are ready.
Set your page titles, descriptions and social image, connect your domain, and publish from Framer when the content and contact details are ready.
Need help with the template?
Need help with the template?
Contact KamnevApps with the page you are editing and a short description of what is happening.
Contact KamnevApps with the page you are editing and a short description of what is happening.