MAKE IT YOURS.
A practical guide to turning FRAME 019 into your own studio website. Start with the brand, add your work, then test the complete experience.
01 / REPLACE THE BRAND
Start in the shared site layout. Select Menu and edit Brand, Email, Phone, Location and Availability. The wordmark and directory are shared across every page. The desktop quick links are defined in FrameNavigation.tsx.
Edit the native footer text in the same layout. Replace sample studio details, project credits and the creator line. FRAME 019, its people, projects, awards and statistics are fictional demonstration content.
02 / SET YOUR ACCENT
Edit the Accent color style in Assets ? Styles. The default is vermilion (#EE4B2B). The shared Navbar uses this token, and its colour picker updates both native sections and interactive components.
The picker supports presets, HEX, RGB, reset and copy. Visitor choices persist locally across pages. Native accent panels and interactive buttons automatically switch text contrast for light and dark choices.
03 / MODIFY TYPOGRAPHY
Open Assets → Styles. Display/XL and Display/L control primary headlines; Heading/Section and Heading/Card control secondary headings. Body/Standard, Body/Lead and UI styles keep the remaining hierarchy consistent.
Adjust desktop, tablet and phone values together. Interactive components use Archivo with system fallbacks. Keep the native styles and component typography aligned. Heading/Closing controls the shared footer invitation.
04 / EDIT THE OPENING CONTACT SHEET
The opening contact sheet is connected to CMS Projects. Edit the Cover image and image description of each project. Sort order selects the first three on desktop and the first two on phone. Recheck portrait and landscape crops at every breakpoint.
Select the opening FrameHeading component and edit Headline. Separate the two composed lines with a vertical bar (|). Size controls the maximum type size; the text scales with its container. Edit the studio statement and Discuss a project link in the native Opening frame.
05 / EDIT PROJECT ENTRIES
Open CMS → Projects. Update Title, Client, Category, Year, Project date, Duration, Short description and the image fields. Sort order controls the work index.
Write each story in Overview, Challenge, Approach, Design direction, Execution and Outcome. Update the design statement, services and technology. Keep outcomes factual; sample project narratives do not represent real commissions.
06 / CREATE A CASE STUDY
Duplicate a CMS project or add a new item, then give it a unique slug. Fill every required field, choose a hero and secondary image, and write the SEO title and description.
The shared project detail layout produces the page automatically. Add images to Gallery Images for the paired gallery. Preview the item and check its next-project navigation before publishing.
07 / PUBLISH NOTES
Open CMS → Notes. Add a title, excerpt, category, author, publication date, reading time and cover image. Write the article in the rich-text body using headings, paragraphs and lists.
The Notes index and article layout use the same collection. Keep body paragraphs short and link descriptive phrases. Replace illustrative photographs with media you have permission to publish.
08 / CONNECT ENQUIRIES
Select the enquiry component on Contact and the compact enquiry component in the shared footer. Both must receive your production HTTPS endpoint in the Endpoint control. An empty endpoint keeps the form in preview mode and sends nothing.
The endpoint must accept a JSON POST with name, email and details; the full form also includes service, engagement, start and budget. Configure notification recipients and spam protection with your form provider. Allow requests from your published site origin.
A 2xx response displays the editable success message. A non-2xx response, network failure or timeout displays an error. Test a real enquiry in your inbox before launch. Never place secret API keys in a component control.
09 / EDIT THE MENU
Select Global Navbar in the shared layout. Update its editable navigation list, metadata, featured project image, project title and link. Set the time zone using an IANA name such as Europe/London.
The overlay supports Escape, focus cycling and scroll locking. Test all destinations after renaming pages. Replace the sample email and telephone before accepting enquiries.
10 / REPLACE THE SHOWREEL
Select FrameShowreel on Home and About. Upload a compressed MP4 or WebM through Video and choose a matching Poster. Update Title, Label and Duration.
The included silent motion study is sample content. The dialog opens through an explicit click, includes native playback controls and pauses on closing. Keep important information available outside the video.
11 / TUNE INTERACTIONS
Interactive components expose animation toggles, durations, initial selections and content lists where appropriate. Native image and section effects can be adjusted through Framer’s Effects panel.
FrameProcess contains editable project tracks and stages. FrameAccordion supports service and FAQ modes, initial open state and single/multiple expansion. Testimonials support manual navigation and touch gestures.
The site respects reduced-motion preferences. Keep motion purposeful and test keyboard operation whenever you change a component. Code components are named FrameNavigation, FrameButton, FrameHeading, FrameMedia, FrameAvailability, FrameAccordion, FrameProcess, FrameCounter, FrameManifesto, FrameShowreel, FrameTestimonials and FrameContact.
12 / REVIEW AND PUBLISH
Replace sample people, achievements, legal copy and contact details. Review all CMS items, image descriptions, titles, SEO descriptions, favicon and social image. Confirm that you hold the necessary rights for replacement media.
Check desktop, tablet and phone layouts, including intermediate widths. Test navigation, enquiry delivery, menu focus, video controls and all links. Publish to a preview domain first, inspect the public site, then connect your domain.
This guide is excluded from search indexing. Keep it available to editors or set it to draft if you do not want it on the public site.
ASSETS / LICENSE NOTES
The template uses the open-source Archivo typeface and illustrative photographs sourced from Unsplash. Photo subjects and products are not clients or endorsers of this fictional studio. Replace sample media when presenting actual commissions.
The included motion study is assembled from the same sample photography and original typographic treatments. No assets, logos, copy or source files from the Monodrift reference are included.
COMPONENTS / DELIVERY CONTRACT
The site combines native Framer page layouts, global color and text styles, CMS Projects, CMS Notes and CMS Studio Team with isolated React/TypeScript interaction components. Edit layout and CMS content in Framer; edit runtime behavior in the named code files.
The form endpoint, real email, phone and social profiles are owner configuration. Sample prices and terms are illustrative. Replace them with your actual offering and approved policies before launch.