Template guide

Make Kestrel yours in an afternoon.

This page is for you, not your visitors. Delete it (and the Style guide) before you publish, or keep them hidden: both are set to no-index.

Start here

01

Your name and role

Change “Noa Varga” and “Brand & product designer” in the Site layout template (Layers > Site > Navigation). The nav and footer are shared by every page.

02

Your projects

Open the CMS > Projects. Each project has a title, client, year, services, role, timeline, a one-line summary, three images and a short story with three headings. Add, remove or reorder items; the Work page and every case study page update by themselves.

03

The work deck on Home

Select the Work deck on Home. In the right panel, edit its Projects list: image, title, client, year, services and a link to the case study (pick the Project page and the item). Up to eight cards.

04

Email, enquiry form and clock

Footer: select Copy email and set Email. Select Local time and set City and Time zone (for example Europe/London or America/New_York). The green Availability pill in the nav links to Contact. Contact: select Enquiry form, open Send To in the right panel and add your email address, and each enquiry arrives in your inbox. The Send enquiry button shows Sending, Sent and Error by itself.

05

Colours and fonts

Assets > Colors: change Kestrel (the accent), Ink and Paper and the whole site follows. Assets > Text styles: change the font in Display, Heading 2 and Heading 3 for headings, and Body, Lead and Small for text.

The work deck

01

How it moves

As the deck scrolls into view, the first card opens out of a cover-sized window, so the reel above leads straight into it. On desktop and tablet the deck pins to the screen. Each project card slides up over the last one while the cards beneath sink back and dim; the big number and the project details on the left change with it.

02

Its settings

Scroll / card sets how much scrolling each card takes (90 vh by default). Radius rounds the cards. Background, Text, Muted and Accent set its colours; Title font and Body font set its type.

03

Phones and reduced motion

Below 810 px, and for visitors who ask for reduced motion, the deck turns into a plain list of cards, so nothing is hidden or hard to scroll.

Prompts for Framer’s AI

Kestrel also ships two agent skills that Framer’s AI reads on its own: add-a-project (puts a new case study in the CMS, the Home deck and the cover reel in one go) and make-it-yours (colours, fonts, your name, contact details and launch checks). Ask “Add a project called …” or “Make this site mine” and the AI follows them.

01

Add a project

“Add a new item to the Projects collection for a ceramic studio called Hollow, 2026, services Identity and website, with a two-sentence summary and a story with the headings The brief, What I did and What they got.”

02

Change the accent

“Change the Kestrel colour style to a deep green, #2F5D50, and check the buttons and links still read well.”

03

Write my About

“Rewrite the About page header and the three How I work paragraphs for a motion designer in Berlin, in the same calm, first-person tone.”

04

Add a testimonial

“Add a section under Process on Home with one client quote, the client’s name and company, in the same style as the process cards.” (Use real words from a real client.)

05

New page

“Create a Writing page with the same header style as the Work page and a CMS list of articles.”

Changelog

v1.2, 27 October 2026. An enquiry form on Contact (name, email, what you need, budget, message) with sending, sent and error states. The last case study no longer shows an empty Next project link. The work deck now opens out of a cover-sized window as it scrolls in. Two agent skills for Framer's AI: add-a-project and make-it-yours.

v1.1, 27 October 2026. A drifting reel of project photos under the Home headline, which now rises in line by line. Case studies gained an Outcome line, Credits and a Gallery list with captions (add as many photos as you like in the CMS). Work has a filter by discipline (Identity, Packaging, Product), set per project in the CMS Discipline field. New pages: a Notes journal (a Notes collection with a list page and a page per note) and a Privacy page, both linked in the footer. The work deck now tints the page with each project's colour as its card arrives (Page tint in each project's deck settings).

v1.0, 27 October 2026. First release: Home with the pinned work deck, Work, six case studies in the CMS, About, Contact with typical prices, Style guide, Template guide and a 404 page.

Sample photos are AI-generated and sample names and words are made up; replace them with your own work.

Create a free website with Framer, the website builder loved by startups, designers and agencies.