Template guide
Setting up this template.
Ten steps from remix to a published site. The form comes first, because a site that drops enquiries is worse than one that looks unfinished.
This page is for you, not for your clients. It is not linked from the navigation or the footer; open it from the Pages panel. Delete it or unpublish it before you launch.
Ten steps
Step 1. Point the form at your inbox
Open the Contact page and select the form. In the properties panel find the Form settings and set the destination: your email address, or a webhook URL if you run a CRM. The template ships pointed at a demo address, so until you change it every enquiry goes somewhere you will never see.
Then test it. Publish, open the live site on your phone, fill the form in with your own details and submit. Check the inbox or the webhook log. If nothing arrived, nothing will arrive from a client either. Do not move to step 2 until a test submission has landed.
Step 2. Replace the colour styles
Open the Assets panel, then Styles, then Colours. The pages use eight: Ink 900 and Ink 600 for text, Ash 200 for rules and borders, Bone for the page ground, Paper for panels and inputs, Spruce as the one accent, and Spruce Muted and Spruce Line for text and rules on the Spruce ground. Change a style and every element using it updates. Never type a hex value into an element.
Spruce appears once per screen: the filled button, the Track Record ground and the small square that marks a label. Ink 500, Ink 400, Harbour, Parchment and Clay ship as spares and nothing uses them, so delete them or keep them for your own additions. Ink 400 fails contrast as text.
Step 3. Swap the font
Open the Assets panel, then Styles, then Text. Every text layer uses one of these styles, so change the font in each style and the pages follow. Custom fonts upload in Site Settings, then Fonts.
The template uses DM Sans at three weights: 400 for reading text, 500 for headings and figures, and 600 only for the small column heads in tables. Figures use tabular numbers so columns line up. After a swap, check the tables at 390px.
Step 4. Replace the hero photograph
On the home page, open Hero Media, then Media Settle, select Media Inner and drop your photograph into its Fill. The frame is a 4:5 portrait with no overlay or blur; the photo settles in as the page loads and moves slightly as it scrolls. Use a real photograph with a calm background, about 1350px tall and under 200KB. The frame keeps its height down to the rule under the headline, so check a longer headline at 1200px.
Step 5. Edit the mandates
The three mandates appear as rows on the home page and at the top of the Mandates page, with a full detail block for each further down. Double-click any text to edit the name, description, size, return, benchmark and minimum. Update the as-at date whenever you update a number.
To add a mandate, duplicate a row and its detail block and replace their contents. Each detail block has a scroll target that its row and the link under the page heading point at, so give the copy a new scroll target and update both links.
Step 6. Edit the returns tables
The tables on the Track Record page are native text. Double-click a cell to edit it. Each row is a mandate or its benchmark and each column a period. The note beneath carries the as-at date; edit it with the figures. The numbers ship reconciled, so if you change one mandate return, check the home record and the Mandates rows as well.
Every value cell carries a second text layer: a phone-only label, hidden on desktop and tablet. On phone the header row hides and this label shows beside the value. If you rename a column, rename the matching label in every cell of that column, or phones show the old heading. Check at 390px.
Step 7. Edit the people
Four portraits sit on the home page and at the top of the People page, where each one links to that partner’s biography below. Replace the name, role and tenure line, then the biography and the quote. Write tenure as “since 2009” rather than “seventeen years”; the first never goes stale.
Replace a portrait in the Media Inner layer inside its Card Media and keep the same crop and a plain backdrop, so the four match. To add a person, duplicate a card and a biography, give the biography a new scroll target and point the card at it. The grid runs four across on desktop, two on tablet and one on phone, so six people sit better than five.
Step 8. Add your reports and notes
Reports and notes live in the Insights collection in the CMS. Each item has a title, date, category, summary and body. The home page, the Insights page and every article page read from it, so a new item appears everywhere at once. Lists follow the order of the collection; drag a new item to the top to show it first.
Each article page shows its own title and summary in the browser tab and in link previews, and lists three other items but never the one being read. The date is plain text, so write it exactly as you want it shown.
Step 9. Keep the spacing on eight numbers
The template uses eight spacing values and no others: 4, 8, 16, 24, 32, 48, 64 and 96. Every padding and gap is one of them. If you need a new section, duplicate the closest existing one and replace its contents. Never start from an empty frame.
The values nest. Home sections take 96 above and below on desktop and 64 on tablet and phone. Inner pages separate sections with a thin rule and 64 of space, 48 on tablet and phone. Blocks sit 48 apart, groups 32, a heading and its text 16. If a layout looks off, find the value that is not on the list.
Duplicating also keeps the layer names the motion reads. One layer at the top of the layout template, Interactions (its name starts with FX), draws the focus rings, link underlines, arrow nudges, the hero settle and the rules that draw in as you scroll. A layer renamed from Rule, Divider or Header Divider simply stays still. Delete the Interactions layer and the site keeps working, with static rules and the browser’s own focus ring.
Step 10. Set titles and publish
Every page has a title and a description in its page settings. Keep titles under 60 characters and descriptions under 155, written for your firm. Add a social image in Site Settings, or link previews show nothing. Then click Publish. The site goes to a framer.app address first. Open Site Settings, then Domains, add your domain and set the DNS records Framer shows at your registrar. Publish again once it connects, then run the checklist below on the live domain.
Before you launch
Check each one on the live domain
The form was tested with a real submission and it arrived where you expected.
Every figure on the site carries a date, and the date is current.
Title and description set on every page, including the homepage.
Table phone labels match the column headings, checked at 390px on a real phone.
Mobile menu opens, closes and shows the right links. It reads the links from the nav, so edit the nav, not the menu.
No element carries a raw hex value. Every colour is one of the colour styles.
Three weights only: 400 for text, 500 for headings and figures, 600 for table heads. No bold crept in.
Footer shows your registered office, company number and regulator line, not the demo firm.
This guide page is deleted or unpublished.