How to use Lede
Twenty minutes to read. Every step can also be done by asking Framer’s AI, with the skills in section 11.
01
Start with your CV
Open Framer’s AI, paste your CV or the text of your LinkedIn profile, and type /make-it-mine. It rewrites the headline, experience, resume, about page, contact details and page titles from it, in Lede’s style.
It leaves photos and project images to you, and it never invents numbers. Where a result is missing it asks.
02
The highlighter
Wrap the words a recruiter should see in two equals signs: ==Product designer for money apps== people trust. It works in every HighlightText on the canvas and in the Projects titles in the CMS.
Mark the result, your role or your availability, one mark per heading. If everything is yellow, nothing is.
The marker draws across each mark a beat after its line scrolls into view. Draw delay sets the beat; switch Draw on view off to show the mark from the start.
03
Motion
Lede moves photos, titles and the evidence cards, and keeps reading text still, so nobody waits to read. Everything plays once, and visitors who ask their device for reduced motion get a still page.
Each project photo is a Photo layer inside its Image frame: it settles in as it arrives and zooms a little on hover. On the large covers it sits in a Parallax layer and drifts inside the frame while you scroll. Change covers in the CMS as usual; to swap the About photo, select its Photo layer.
The after number on an evidence card is the ResultNumber component. It counts from Before to After once, when the card scrolls into view, and keeps the words around the number, like min or %. Project cards show the Cursor component, a highlighter pill that says Read the case study.
Section titles rise word by word. The dark band grows in as it arrives. Smooth Scroll in Main Layout eases the mouse wheel on desktop; delete it to keep the browser’s own scrolling.
04
Projects
Each project is an item in the Projects collection. Order sets the sequence, and Order 1 is the large project on Home and Work. Line is the short line under every title: Product for Company, Year. Button is the label on the large card, such as Read the case study or Read about the talk.
The title is the result, with the number marked. Decision is the call you made, Trade-off is what it cost.
Before, After and Metric label make the number card on the image. Use a second number there, not the one in the title. Chat name and Chat are a short message from a teammate. Leave either empty and its card hides.
Keep the body under 600 words with Heading 2 sections, and put screenshots inside it, after the paragraph they illustrate. Or paste rough notes into Framer’s AI and use /case-study.
05
The Work filter
The chips on Work filter by Kind (Case study, System, Talk) and update the address to ?kind=System, so a filtered page can be shared.
To add a kind, duplicate a chip, change its label and set its Click value to the same word as in the CMS.
06
Resume
The Resume page reads Experience (Years, Company, Role and the Highlights bullets) and your first five projects. The side column, the summary and the skills are on the page itself: edit them there.
Download PDF links to the CV file. Upload your own PDF and set it as the link on that button and on the CV buttons in Main Layout and on Contact.
07
Playground
Side work lives in the Playground collection: a square image, a title, a year and a one-line note. Home shows the first four by Order.
Visitors can pick a card up and drag it; it springs back. It is the one playful place on the site.
08
Contact and availability
The green dot and the line beside it are the Availability component, used in the navigation and the hero. The dark band at the bottom of every page is in Main Layout: the line, your email and three buttons.
The Contact page answers what recruiters ask first: start date, notice period, location, work permit, salary, interviews. Answer what you are comfortable with and delete the rest. The dark band is switched off there with Show Contact.
09
Experience, kind words and notes
Experience: Years is plain text, for example 2024 to now. Turn Current on for the Now badge. Highlights are the bullets on Resume.
Kind words: three short quotes with a name and a role. Notes: the Date sets the order, newest first, and Read time is typed by hand, about 200 words a minute.
10
Colours, type and dark mode
Lede uses twelve colour styles, each with a light and a dark value, and one typeface, Host Grotesk. The site follows the visitor’s light or dark setting by itself; the dark band turns light in dark mode.
Change Highlighter in Assets to change the marker everywhere. Keep Ink on Highlighter readable on it, at 4.5:1 or more.
11
Ask the AI
Lede ships five skills for Framer’s AI. /make-it-mine turns the demo into your site. /case-study turns rough notes into a project in the result-first shape. /recruiter-check reads the site the way a recruiter does and lists what to fix. /voice writes copy in the same plain style. /design-system builds new sections from Lede’s parts.
A set of always-on rules keeps the AI inside the design system even when you do not name a skill.
12
Before you launch
Delete the Remix 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 /recruiter-check.
Lede uses five CMS collections. Framer’s Basic plan includes fewer, 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.
/make-it-mine Here is my CV: [paste]. Keep the demo images for now.
/case-study Rough notes from my last project: [paste]. The result was [number]. Add it to Projects as the second item.
/recruiter-check Can a recruiter tell my role, my best result and when I can start in six seconds?
Change my availability to ‘Open to freelance work from March.’ everywhere it appears.
/voice Write a note about [topic], about 300 words with two subheadings, dated today.
Remove the Kind words section from Home and the Kind Words collection.
Add a project with Kind ‘Side projects’ and a chip for it on the Work page.
Change the Highlighter colour to a light green and check the contrast of the text on it.
Remix Lede for free