How to use Ferrow
About half an hour to read and try. Everything here can also be done by asking Framer’s AI, with the skills in section 10.
01
Colours and type
Ferrow uses eleven colour styles and one family of type, Funnel Display for headings and figures and Funnel Sans for text. Change a colour in Assets, Colors, and every page follows.
Each text style has three sizes, for desktop, tablet and phone, and a Light twin for slate sections. Pick a style by its job, not its size: the Design system page shows them all.
02
Services
The four services live in the Services collection in the CMS. Each has a summary, the problem it solves, the approach, a typical result, a duration, a starting fee, an image and a longer body.
The Home page shows them as Service Rows: the photograph opens when you hover a row. Each service gets its own page at /services/name.
03
Case studies and filters
Case studies hold a client, a service, before and after figures and a result label, so the cards can show 31% to 37% gross margin without any design work. Leave Before empty when there is no starting number, as on Brodie Boatyard, and the arrow hides itself.
The chips on Case studies and Insights filter by the Service field and update the address to ?service=Pricing, so a filtered list can be shared. To add a service, duplicate a chip, change its label and set its Click action to the same word. The Service field in the CMS must match it exactly.
04
Insights
The Published date sets the order, newest first, and the newest one is featured at the top of the Insights page. Read time is typed by hand: about 200 words a minute.
Bodies are rich text. Use Heading 2 for subheadings and Heading 3 for a pull quote; both are styled already.
05
Pages, nav and footer
The navigation, the closing call to action and the footer live in Main Layout, so every page shares them. The current page gets a pill in the navigation by itself.
Switch the call to action off on any page with Show CTA (it is off on Contact). The clocks in the Home hero and on Contact are the Local Time component: set its City and Time zone, for example Europe/Oslo.
06
Components
Button, Chip, Badge, Accordion, Service Row, Engagement, Submit Button, Nav and Cursor are in Assets. Change one and every copy updates. Submit Button has Label and Done label controls, so the same component serves the booking form and the newsletter.
Engagement holds the prices. Its Projects and Ongoing switch works on the live site; edit the rows inside the component to change fees.
07
Images
Every photograph was made for this template and is cleared for the site you build with it. Replace them in the CMS with JPG or WebP files about 2000px wide.
Write a short description in each image’s alt text. Screen readers and search engines read it.
08
Motion
The hero photo settles in as the page loads and drifts as you scroll. Section titles reveal word by word, cards rise in one after another, case photos move gently inside their frames, and the navigation hides while you scroll down. Visitors who ask their device for reduced motion see the whole page without movement.
Smooth Scroll sits in Main Layout. Raise or lower its Smoothness, or delete it for native scrolling.
09
The contact form
The booking form on Contact and the newsletter signup on Insights both send their entries to Framer, under Site Settings, Forms. From there you can forward them to an email address or a tool such as Notion or Google Sheets.
Send yourself a test of each before you launch. The phone number in the footer and on Contact is a reserved drama number, so replace it with yours.
10
Ask the AI
Ferrow ships four skills for Framer’s AI. /design-system builds new pages and sections from these parts. /rebrand turns Ferrow into your firm. /voice writes copy in the same plain style. /launch-check lists what still needs doing before you publish.
A set of always-on rules keeps the AI inside the design system even when you do not name a skill.
11
Before you launch
Delete the Use for free button in Main Layout, and delete or keep the docs pages (they are hidden from search). Set your site title, description and social image in Site Settings, or run /launch-check.
Ferrow uses six CMS collections. Framer’s Basic plan includes two, so a site on your own domain needs the Pro plan. Plans change, so check framer.com/pricing.
Prompts that work
Copy one into Framer’s AI and fill in the brackets.
Use /rebrand. The firm is called [name], based in [city], email [address]. Update the wordmark, colours and contact details everywhere.
Add a case study for [client]: [what changed, with the before and after numbers]. Write the challenge, approach and outcome with /voice and leave the images for me.
Write an insight about [topic] with /voice: four paragraphs, two subheadings, service [name], published today.
Change the fees to [your prices]. Keep the Engagement component and its toggle.
Add a Careers page with two open roles, built with /design-system, and link it from the footer.
Make the method five stages instead of four and update the week bars to match.
Add a service called [name] to the Services collection and to the filters.
Run /launch-check and tell me what still needs me.
Ferrow is a free template by Dektion Studio.
Start with a half‑hour call.
Tell us what’s changed in the business. If we’re not the right firm for it, we’ll say so and suggest one that is. We can take two new clients from January.
We reply within one working day.
Use for free