How to use

Everything you need to make Kade your own, in the order most people do it.

Start here

About half an hour to read and try.

1. Colours and type

Open Assets, then Colors. Change Ink, Paper and Red and the whole site follows. Text styles live under Text Styles. Each one already has sizes for desktop, tablet and phone, so change the font or size there, not on the page.

2. Projects and filters

Projects live in CMS, Projects. Each one fills a card on Home and Work and gets its own case study page. Its Category decides which filter chip shows it. To add a category, duplicate a chip on the Work page, change its label, and set its Click action to the same word. Do the same on Home.

3. The Journal

Write articles in CMS, Journal. The Published date shows on every card and sets the order, newest first. Category drives the filter on the Journal page and works like the project filters. Read Time is typed by hand; a minute for every 200 words is about right.

4. Pages, nav and footer

The navigation, footer and the floating Talk to Noor bar live in Main Layout, so every page shares them. The bar hides on phones and while you scroll down; change the name, photo and link, or delete it. The red booking panel above the footer can be turned off per page: select the page and switch off Show CTA. The number next to Work in the nav is plain text, so update it when you add projects. The pill behind the current page in the nav comes from a short style in Site Settings, Custom Code.

5. Components

Buttons, chips, the badge, service rows, the accordion, pricing, the navigation and the submit button are components. Change one on its component page and every copy changes with it. Buttons take a label and a link. Chips take a label and a click action.

6. Images and the reel

Swap photos in the CMS, or select an image on a page and choose a new file. JPG or WebP at about 2000 px wide keeps pages fast. The studio reel on Home is a Video layer inside the Showreel section: select it, replace the file, and keep it muted and under 5 MB.

7. Motion

Titles reveal word by word, cards rise in, and photos drift inside their frames as you scroll. Each effect sits in the Effects panel of its layer, so you can change or remove it there. Smooth scrolling comes from the Smooth Scroll component in Main Layout: a lower Smoothness is softer, and deleting it gives normal scrolling. Visitors who ask their device for reduced motion get a still site.

8. The contact form

Select the form on the Contact page and choose where submissions go in the form settings, for example your email address or a webhook. Send one test before you launch.

9. Ask the AI

Kade ships four skills for Framer AI. /design-system builds new pages and sections from Kade’s own parts. /rebrand swaps in your name, colours and contact details. /voice writes copy in Kade’s tone. /launch-check goes through the list at the end of this page and tells you what is left.

10. Prompts that work

Paste one into Framer AI and fill in the brackets.

“Use /rebrand. The studio is called [name], based in [city], email [address]. Update the logo text, colours and contact details everywhere.”

“Add a Careers page with three open roles, built with /design-system, and link it from the footer.”

“Add a project to the Projects collection for [client]: [one line on the job]. Write the brief and approach with /voice and leave the images for me.”

“Write a Journal article about [topic] with /voice: four paragraphs, two subheadings, category [name], published today.”

“Change the prices to [tiers and prices]. Keep the Pricing component and the toggle.”

“Add a newsletter signup above the article grid on the Journal page, using the Submit Button component.”

“Make the Process section five steps instead of four and update the week bars to match.”

“Add a category called [name] to the Work filters.”

“Run /launch-check and tell me what still needs me.”

11. Before you launch

Delete the Buy button layer in Main Layout. Delete this page and the System, Licence and Changelog pages, and remove their links from the footer. Fill in the site title, description, favicon and social image in Site Settings, then connect your domain. Or ask Framer AI to run /launch-check.