Framer Template Development Guide

Owner: Maker Merchant · Audience: Maker + AI design/dev agents · Use as: the working instruction file for every Framer template project Last verified: October 17, 2026 (Framer 3.0 era, after the June 16, 2026 Community/Marketplace relaunch) Status legend: ✅ = verified on an official Framer page · 📊 = third-party data or creator report · 🧠 = recommended practice / informed opinion · ⚠️ = could not verify, check before relying on it

About this edition (added Oct 17, 2026): Everything in the original guide is kept word for word. Sections marked 🔎 Deep dive are additions: extra specs, do/don't tables, code, and naming examples. Facts in them were checked against official Framer docs on Oct 17, 2026 (marked ✅), and anything else keeps the same legend (🧠 / ⚠️). All UI pictures are AI-generated illustrative examples made with Magnific. They are not real templates, not Framer screenshots, and any brand names in them (e.g., "Northwind") are fictional.

TL;DR — The 12 Rules#

1. There is no manual review anymore. Templates go live right away. Moderation and ranking decide who gets seen. Quality is now your job, not a reviewer's. ✅
2. Pick a niche buyer, not a generic layout. Generic landing pages lose to free templates and AI. Specific, polished, CMS-backed systems sell. ✅📊
3. Price with confidence. Median paid price is about $59. The most common price is $49. Premium agency/portfolio/SaaS/e-commerce templates sit at $99–$149. 📊
4. You keep 100% of sales, but you run checkout. Framer only links to your checkout page (Lemon Squeezy, Gumroad, Stripe, Contra…). Delivery, refunds, taxes, and support are yours. ✅
5. A live preview is required. It must be published from the same project you're selling. ✅
6. Build on a strict design system. Shared color and text styles everywhere, components with exposed properties, CMS for repeated content, layout templates for nav and footer. ✅
7. Responsive means fluid, not three snapshots. Drag-resize between breakpoints. No horizontal scroll, no fixed widths that break layouts. ✅
8. Make it AI-ready. Add Agent instructions and a template Skill (skills stay with the project when it's remixed). Use clean names, consistent styles, and organized CMS. ✅
9. Everything must be legally yours to distribute. That covers fonts, images, icons, client work, and code. You warrant this in the Community Terms. ✅
10. Ship a 404 page, page titles and descriptions, alt text, semantic tags, mailto:/tel: links, and no lorem ipsum. ✅
11. Motion should be purposeful and cheap. Use Appear effects above the fold, keep blur under 10, and respect reduced motion. ✅
12. Treat it like a product. Launch post, distribution outside Framer, fast support, regular updates, a catalog, and bundles. ✅📊

Table of Contents#

0. How to Use This File
1. The 2026 Landscape: What Changed
2. Strategy & Niche Selection
3. What Sells & Pricing Tiers
4. Marketplace Requirements (Official)
5. Legal, Licensing & Asset Rights
6. Project Setup, Structure & Layer Naming
7. Design System: Colors, Type, Spacing, Grid, Breakpoints
8. Layout: Stacks, Grid, Sizing & Responsive Rules
9. Typography
10. Components, Variants & Properties
11. Imagery & Placeholder Content
12. CMS Collections & Dynamic Pages
13. Animations & Effects
14. Code Components & Overrides
15. Forms & Integrations
16. Localization
17. SEO & AEO
18. Performance
19. Accessibility
20. Utility Pages: 404, Legal, Instructions, Style Guide
21. Customization-Friendliness & AI-Readiness
22. Preview Site & Marketplace Listing
23. Checkout, Delivery, Refunds & Support Ops
24. QA Checklist
25. Launch & Post-Launch
26. MASTER Pre-Submission Checklist
27. Quick-Start Workflow
28. Operating Rules for AI Agents
29. Unverified / Uncertain Claims
30. Sources

0. How to Use This File#

For Maker (human):

• Skim the TL;DR, then jump to the section for the phase you're in.
• Every phase ends in a checklist. Copy it into the project's Trello card or Craft doc and tick items off.
• Sections 26 (Master Checklist) and 27 (Quick-Start Workflow) are the only parts you need on ship day.

For AI agents:

• Treat MUST as non-negotiable, SHOULD as the default unless Maker says otherwise, and MAY as optional.
• Never invent Framer UI paths. If a panel or menu name isn't in this file, check the Framer Help Center first or say you're unsure.
• Read Section 28 before doing any work inside a Framer project.

Phase map:

1. The 2026 Landscape: What Changed#

1.1 Framer 3.0 + the new Community (June 16, 2026) ✅#

• Framer 3.0 launched with Agents (AI working directly on the canvas), Branching, and a new Community. The Community includes the Marketplace, Gallery, Awards, Social Feed, Members, and Contests.
• Marketplace review is gone. In Framer's words: "resources will no longer go through a review process before they can be published." Moderation replaces reviewing. The team now curates what gets featured, improves ranking signals, and can act on items that are "low quality, broken, misleading, copied, or not useful."
• Framer says the bar is going up, not down: "'Good enough to get accepted' will matter less. 'Good enough that people actually want it' will matter more."
• Scale: more than 7,000 creators sell on the Marketplace. Framer paid creators $6.5M in 2025 (+200% YoY) and takes no revenue share.

1.2 Publishing is instant ✅#

• Submit through Community → Marketplace → Create Listing → Template. The listing goes live right away, with no queue.
• You can edit the name, description, images, pricing, and other details at any time.
• You may also sell the same template on other platforms and your own site.

1.3 Ranking replaced reviewing ✅#

• Ranking signals: Discovery (views, unique visitors), Usage (remixes/opens/installs, unique users), Conversion (% of remixed templates that upgrade to a paid Framer plan), and Continued use.
• Ranking views: Trending (momentum), Best (sustained performance over the chosen period), Recent (new items, where early performance still counts).
• Free and paid are ranked together. Switching a template from free to paid resets its ranking.
• Fake accounts or fake activity can get you banned from the Marketplace.
• Marketplace Analytics launched September 25, 2026: a Performance tab plus Rankings.

1.4 AI changes what a template is ✅#

• Framer's position: AI makes strong templates more valuable, because the Agent needs a clear design system to build on. "Low-effort templates will be less competitive."
• Template creators can add custom Agent instructions. Skills launched September 22, 2026, and they stay with a project when it's remixed. That means you can ship a focused template plus a skill that teaches the Agent how to extend it, instead of piling in dummy content.

1.5 The old guidance you'll still find online ⚠️#

• Many blog posts, including some updated in September 2026, still describe a manual review queue with rejection feedback. That process is outdated as of June 16, 2026.
• The old rejection reasons are still a useful quality bar (see 4.4), because the same problems now hurt you in ranking, refunds, and moderation.

2. Strategy & Niche Selection#

2.1 The core principle#

Framer's guidance says the two biggest levers are (1) product quality and (2) distribution, in that order. Don't optimize for the feed algorithm. ✅

2.2 Where the market is 📊#

• Supply is huge. One tracker counted 2,689 new templates in eight weeks (July 29 to September 22, 2026), about 48 per day. Another snapshot counted 10,000+ templates in total. The portfolio category alone has about 3,100.
• 55% of new templates are free. Landing pages are free 74% of the time.
• Category mix of new templates (keyword-sorted, rough): about 36% portfolio/creative and about 23% SaaS/tech.
• Premium pricing clusters in commerce and SaaS. Among paid templates, 38% of e-commerce and 36% of SaaS templates cost $99+, compared with about 10–11% for restaurant and health/fitness.
• Proven winners are catalogs, not one-offs. The strongest public revenue stories (Anatolii Dmitrienko, Hamza Ehsan, Cédric) come from multi-template catalogs, bundles, and referral income.

2.3 Niche selection framework 🧠#

Score each idea from 1 to 5 on every row. Build only ideas that score ≥ 26/35.

2.4 Niche ideas that fit Maker's profile 🧠#

• App / indie-app launch sites: app store badges, feature tours, changelog CMS, press kit, privacy/terms pages (a must for App Store listings).
• Dev-tool / API SaaS: docs-style CMS, pricing toggles, changelog, integrations directory with Dynamic Filters.
• Designer/developer portfolio + products: case studies CMS plus digital product storefront links.
• AI product / agent startup: demo video hero, use-case CMS, waitlist with Input integrations.
• Template-studio / creator store: a site for selling digital products (meta-niche you already know).

2.5 Free vs. paid strategy ✅📊#

• Template purchases take priority over sign-up referrals for commission attribution. ✅
• Only templates earn referral commissions. Components, plugins, and vectors don't. ✅
• Paid ads using affiliate links are not allowed. ✅
• ⚠️ Going free → paid resets ranking. Decide before launch.

2.6 Strategy checklist#

• Buyer named in ≤ 5 words
• 10 competitor listings reviewed (price, pages, CMS, preview quality, update date)
• 3 differentiators written down (art direction, feature, content system)
• Free vs. paid decided, and won't flip later
• Fits a future bundle or catalog
• Scores ≥ 26/35 on the niche framework

3. What Sells & Pricing Tiers#

3.1 Patterns in best-sellers 📊🧠#

From public teardowns (Fabrica, Dmitrienko's $129 line, Ehsan's catalog) and the Framer guidance:

• A recognizable visual identity. Buyers pay for taste they can't easily generate.
• CMS depth. Projects, blog, team, services, and careers ship as collections, not static duplicates.
• Finished pages. Home, About, Services/Features, Work/Projects + detail, Blog + detail, Pricing, Contact, 404, Legal. A full site saves real work.
• Reusable components with properties, so editing feels safe.
• Ongoing updates. Top sellers keep adding native features: CMS filtering, performance fixes, Agent prompt guides.
• Agent guidance. Leading creators now ship prompt libraries and Agent instructions (e.g., Trifecta, Effica).
• Premium positioning. A studio comparing a $129 template with a $5k custom build sees it as cheap.

3.2 Price data 📊#

3.3 Recommended pricing tiers 🧠#

Sales needed for $10k/month gross: about 345 sales at $29, 205 at $49, 102 at $99, 78 at $129, 68 at $149. 📊

3.4 Pricing rules 🧠#

• Look at similar templates before setting a price (Framer recommends this ✅).
• Don't launch cheap and raise later "once it has reviews." Your price signals your quality tier.
• Price in USD and end it in 9 to match marketplace norms.
• The listing price MUST match the checkout price exactly ✅.
• Launch discounts belong on your checkout platform, as a coupon with a clear end date. Remember the listing price has to match checkout. ⚠️ Confirm how Framer treats a discounted checkout price.
• Note: under the Community Terms, Framer may run promotions on your content without prior notice ✅.

3.5 Buyer plan constraints (affects what you can sell) ✅#

Buyers have to publish on their own Framer plan. Disclose any requirements that exceed Basic:

🧠 Rule: If your template uses more than 2 CMS collections or more than 30 pages, say clearly in the listing and instructions that the buyer needs Pro to publish everything. Better yet, design it so the core site works on Basic (≤ 2 collections) and the extra collections are optional.

4. Marketplace Requirements (Official)#

4.1 Hard requirements (listing won't work or breaks the rules without them) ✅#

4.2 Official best-practice checklist (Sept 15, 2026) ✅#

Framer calls these "not required" but says they improve discoverability and cut support load. Treat them as MUST anyway.

• Originality: clear audience/use case; original, differentiated layouts; no reused or lightly modified templates; value beyond native Framer features.
• Design: consistent styling; clear hierarchy; cohesive color/type/spacing; shared text and color styles throughout; custom 404 page; polished assets.
• Layout: clear page purpose; layout templates where appropriate; Stacks, grids, and auto-height; no horizontal scrolling; layouts hold up as content changes.
• Text: legible; spelling and grammar checked; Framer fonts where appropriate; balanced text with no orphans; no lorem ipsum or placeholder content.
• Responsive: clean on mobile/tablet/desktop; no fixed sizes that break; components adapt; readable on small screens.
• Links: mailto: and tel:; clickable things look clickable; hover and active states; no broken or inactive links.
• CMS: repeated content in CMS; fields clearly connected; empty and unused entries removed; clear naming.
• Code: clean, minimal; native features first; embeds only when necessary; maintained and compatible.
• Effects: purposeful; nothing excessive; performance-aware; smooth.
• Assets: clearly named folders; external components up to date; no duplicates; descriptive file names.
• Tags: semantic tags; logical headings and paragraphs; meaningful alt text.
• Accessibility: title + description per page; good contrast; standard practices; labeled form fields.
• Performance: Framer's performance checks reviewed; optimized media; no huge uncompressed assets; effects don't hurt performance.
• Copyright: original or licensed; permission for any client work; licensing respected.
• Community (listing): accurate previews; relevant categories; clear value; unique features; setup requirements and limitations communicated.
• Support: support options explained; timely replies; refund terms clear; templates maintained; ads and unrelated promotions removed.

🔎 Deep dive — what "quality bar" looks like in a hero 🧠

4.3 Before-you-publish list from Framer ✅#

• Test across browsers and screen sizes.
• Fix bugs, broken links, and performance issues.
• Follow web best practices for layout, typography, spacing, and responsiveness.
• Prepare high-quality screenshots.
• Review name, byline, description, categories, and pricing.

4.4 Historical rejection reasons (now ranking and refund killers) 📊#

From pre-June-2026 creator reports. There's no review now, but these are exactly what moderation, buyers, and ranking punish:

1. Broken links, or forms that don't submit
2. Mobile layouts that overflow or become unusable
3. Inconsistent styling, weak typography, poor hierarchy
4. Too similar to existing templates (originality)
5. Unclear component structure, unnamed layers ("Frame 12")
6. Slow loading, unoptimized assets
7. Lorem ipsum or placeholder content
8. Unused assets/styles, leftover experiments
9. Accessibility gaps (no alt text, low contrast)
10. Previews that don't match the actual product

4.5 Naming rules 🧠 (+ ✅ where noted)#

• Template name: short, brandable, unique within the Marketplace. Search it first. Avoid trademarks such as "Apple" or "Notion."
• Byline/title for search: say what it is. Framer's example: "SaaS Landing Page Template" beats a generic project name. Include terms buyers search for ✅.
• Pattern: [Brand Name] — [Niche] [Type] Template, e.g., "Northwind — Architecture Studio Template."
• Avoid vague names like "Nova," "Pixel," or "Minimal" on their own ✅ ("Avoid vague or generic names").

4.6 Updates & versioning ✅ + 🧠#

• You can edit listing details and the template project at any time ✅.
• The live preview reflects your latest publish ✅. Republish the preview project after every update.
• A remix creates an exact copy at the moment it's copied ✅. 🧠 So existing buyers don't get your updates automatically. They'd need to re-remix from your link and move their content over.
• 🧠 Versioning conventions:
  • Keep a Changelog section on the Instructions page and the listing: v1.2.0 — 2026-11-03 — Added Dynamic Filters to Work page.
  • Use semantic versioning: MAJOR (structure changes), MINOR (new pages/features), PATCH (fixes).
  • Keep a master project (source of truth). Use Branching (Pro) to stage updates before merging ✅ (Branching exists; using it for templates is a recommendation).
  • Email buyers about MINOR/MAJOR updates with the remix link and "what changed."

4.7 Requirements checklist#

• Live preview from this exact project, on a free Framer domain
• Remix link works from a logged-out/clean account (project not set to "Only team members")
• Checkout URL: direct payment, product + price, matches listing, no login, refund policy
• Support email monitored
• No paywalled or unlockable features outside approved channels
• Privacy statement if the template collects data (forms → your instructions should tell buyers to add their own)
• All 16 best-practice areas self-audited (4.2)

5. Legal, Licensing & Asset Rights#

5.1 What the Community Terms say (v1.0, effective June 1, 2026) ✅#

• You keep ownership of your Creator Content.
• You grant Framer a worldwide, non-exclusive, royalty-free license to host, display, distribute, and promote your content. Framer may also use and adapt it to market Framer and for educational purposes, without extra compensation.
• Framer may build competing products (§2.5).
• You warrant you own or have licensed everything and nothing infringes third-party IP or publicity/privacy rights (§9.1).
• You indemnify Framer against claims arising from your content, buyer disputes, and taxes (§10).
• Support is your responsibility, with a valid support email and timely responses (§4.1).
• Buyer disputes (refunds, chargebacks, licensing) are between you and the buyer (§4.3, §6.3).
• Taxes: you handle them yourself (§6.2). Framer doesn't withhold.
• Report license misuse to abuse@framer.com (§5.5).
• Governing law: the Netherlands (Amsterdam courts).

5.2 Licenses buyers receive automatically ✅#

🧠 Restate these in plain words on your Instructions page and checkout page ("One license = one website. Need more? Buy another license or the bundle.").

5.3 Asset licensing matrix 🧠 (verify each source's license)#

⚠️ Unsplash/Pexels-style licenses generally allow commercial use but restrict compiling photos into competing services. Many top creators use their own or AI imagery to avoid ambiguity. Read the current terms yourself.

5.4 Legal checklist#

• Asset ledger (/assets-ledger in the project notes or Craft): asset → source → license → URL → date
• Fonts: only Google / Fontshare / Inter, or disclosed as needing a buyer license
• No real brand logos, no real people without releases, no client work without written permission
• No paid third-party components inside the template
• License summary on the Instructions page and checkout
• Privacy & Terms sample pages clearly marked "Replace with your own legal text. This is not legal advice."
• Taxes: checkout platform acts as Merchant of Record (e.g., Lemon Squeezy, Gumroad, Polar), or you handle VAT/sales tax yourself 🧠

6. Project Setup, Structure & Layer Naming#

6.1 Project setup order 🧠#

1. Create a fresh project for each template. Never sell a fork of a client project without written permission ✅.
2. Set Site Settings first: site title and description, favicon, social image, language, and reduced-motion setting (see 19).
3. Create color styles → text styles → spacing conventions before designing any page (Section 7).
4. Create the layout template (nav + footer + content slot) from the Home page so it applies to all compatible pages ✅.
5. Build components (buttons, cards, nav, footer, section headers) before full pages.
6. Set up CMS collections before the pages that list them.
7. Build pages desktop-first, then tablet/phone overrides (see 7.6).

6.2 Page structure (typical premium template) 🧠#

/ (Home)
/about
/services            or /features
/work                (CMS index)   → /work/:slug   (CMS detail)
/blog                (CMS index)   → /blog/:slug   (CMS detail)
/pricing
/contact
/careers             (optional CMS)
/legal/privacy
/legal/terms
/404                 (custom)
/instructions        (buyer guide, noindex)
/style-guide         (optional design-system showcase, noindex)
/changelog           (optional, or a section of /instructions)

• Use lowercase, hyphenated slugs. Keep them short and meaningful.
• Keep page names in the Pages panel identical to their nav labels.
• Group utility pages in a folder (e.g., Legal, Utility) if the Pages panel supports it in your version ⚠️.

6.3 Layer naming convention (MUST) 🧠✅#

Framer's guidance: assets in clearly named folders, descriptive file names, no duplicates ✅. The Tidy up skill in Framer's Skills Index can auto-name layers and remove hidden or unused leftovers ✅.

Rules:

• Zero default names (Frame 23, Text, Rectangle) in the shipped project.
• Delete hidden layers that serve no purpose. Hidden-for-breakpoint layers are fine but should be named, e.g., Nav Desktop / Nav Mobile.
• Delete unused components, styles, images, code files, and pages.
• Order layers top-to-bottom in the same order they render.

🔎 Deep dive — a fully named layer tree 🧠

A complete Home page tree that follows 6.3:

Home (page, vertical Stack, layout template: Main)
├─ Section / Hero
│  └─ Container
│     ├─ Heading Stack
│     │  ├─ Eyebrow
│     │  ├─ Heading            (text style: Display, tag h1)
│     │  └─ Subheading         (text style: Body L)
│     ├─ CTA Stack
│     │  ├─ Button/Primary     (instance)
│     │  └─ Button/Ghost       (instance)
│     └─ Image / Studio Exterior
├─ Section / Logos
│  └─ Container → Logos Grid → Logo Item (×6)
├─ Section / Featured Work
│  └─ Container
│     ├─ Section Header        (instance)
│     └─ Projects Grid         (CMS Collection List: Projects, limit 3)
│        └─ Card/Project       (instance, bound to CMS)
├─ Section / Testimonials
├─ Section / CTA               (instance: Section/CTA Banner)
└─ (Footer comes from the layout template)

Naming do/don't:

6.4 Assets panel organization ✅🧠#

• Component folders: Navigation, Buttons, Cards, Sections, Forms, Utility.
• Color styles grouped with / (see 7.2). Text styles grouped (see 7.3).
• Remove duplicates. Update any external (Marketplace) components to their latest version ✅.

6.5 Setup checklist#

• Fresh project, no client remnants
• Site settings filled (title, description, favicon, social image, language)
• Layout template with nav, footer, content slot applied to all pages
• Every layer, component, style, and CMS field named per convention
• No unused or duplicate assets
• Remix link enabled (project not restricted to team members) ✅

7. Design System: Colors, Type, Spacing, Grid, Breakpoints#

Goal: a buyer can rebrand the whole site by editing ~5 color styles and 2 font families. Framer's best practices require "shared text and color styles used throughout." ✅

7.1 Principles 🧠#

• Nothing hard-coded. Every fill, text color, and border uses a color style. Every text layer uses a text style.
• Semantic names, not visual ones. Brand/Primary survives a rebrand. Blue 500 doesn't.
• Small token set. Fewer styles mean easier customization and better Agent results.

7.2 Color styles 🧠 (+ ✅ light/dark)#

Recommended semantic set (~12–16 styles):

• Light/dark mode ✅: Color styles can hold a light and a dark value. The published site follows the visitor's device appearance. Text styles can use themed color styles. Works on CMS pages and in animations. Preview both on the canvas (⌃⌘N toggles canvas theme). Remove a dark value through Assets → ••• → Remove Dark Style.
• 🧠 If you ship dark mode, test contrast in both modes. If you don't, make sure no color style has a stray dark value.
• 🧠 Contrast targets: body text ≥ 4.5:1, large text (≥ 24px, or ≥ 18.66px bold) ≥ 3:1, UI boundaries/focus ≥ 3:1 (WCAG 2.2 AA).

🔎 Deep dive — light/dark color styles in practice

🧠 Example token sheet (values are just a starting point; the names are what matter):

Workflow 🧠: define the light value, add the dark value on the same style, then toggle the canvas theme (⌃⌘N ✅) and walk every page once. Any element that looks wrong in dark mode is almost always a hard-coded color.

7.3 Text styles 🧠 (+ ✅ semantic tags)#

Text styles automatically get semantic tags (h1–h6, p), which you can override per instance in the Accessibility panel ✅.

Recommended scale. Framer's own Skills example uses H0–H6, Body L, Body, Body M, Button ✅:

• 🧠 Set per-breakpoint sizes inside the text style so tablet/phone sizes come from the system, not from manual overrides on each layer ⚠️ (check that the current Framer UI supports breakpoint values in your text style. If it doesn't, override consistently and document it).
• Turn on text balance for headings, and check for orphans ✅ ("balanced to avoid awkward line breaks and orphans"). Framer's skill example sets "Text Balance to Yes" ✅.
• Line length: 50–75 characters, target ~65 (Framer's Skills example) ✅.

🔎 Deep dive — text-style breakpoints (verified)

✅ Update (Oct 17, 2026): Framer's Help Center article Setting Text Styles breakpoints (updated March 3, 2026) confirms text styles can hold breakpoint values: Assets → Styles → select a text style → Breakpoints → Add Breakpoints adds Desktop (L), Tablet (M), Mobile (S), and each can set font size, line height, letter spacing, and paragraph spacing. So the 🧠 rule above ("set per-breakpoint sizes inside the text style") is supported. The original ⚠️ note is kept for history; see also the update under 29.

🧠 A concrete scale you can paste into a brief (px; line height as a multiplier):

Rule of thumb: each heading level is ~1.25–1.35× the next one on desktop and ~1.2× on phone, so the hierarchy holds without the phone headings getting huge.

7.4 Spacing scale 🧠#

Use one scale and nothing else: 4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 120 · 160

• ⚠️ Framer doesn't have dedicated spacing tokens the way it has color/text styles (as of this writing, unverified). Enforce the scale through components (section and container components with fixed padding/gap) and by writing it into the template Skill (Section 21).

7.5 Grid & containers 🧠✅#

• Section pattern (from Framer's Skills example ✅): sections fill screen width (1fr) and contain an inner wrapper with max-width: 1200px holding the content.
• Container widths: 1200 (default), 1360–1440 (wide/editorial), 720–800 (reading/blog body).
• Columns: 12-column mental model on desktop, 8 on tablet, 4 on phone. Build real layouts with Stacks and Grid (Section 8).

🔎 Deep dive — section anatomy with real numbers

7.6 Breakpoints ✅⚠️#

• Framer's default breakpoints are Desktop 1200, Tablet 810, Phone 390 ⚠️ (widely documented in Framer Community/lessons. Confirm in your project). The breakpoint value is the minimum width for that breakpoint. Desktop is primary, and smaller breakpoints inherit from it with overrides.
• 🧠 Add a Large Desktop (1440+) breakpoint only if the design really changes there (e.g., wider container). Otherwise rely on max-width containers.
• 🧠 Design desktop first, then tablet, then phone. Override as little as possible. Every override is something buyers have to edit three times.
• ✅ Framer Academy: preview at wide, medium, and narrow widths, then drag-resize between those points. Flexible sizing problems often show up between breakpoints.
• Layout templates support breakpoints, e.g., swapping desktop nav for a hamburger on mobile ✅.

🔎 Deep dive — breakpoint planning table

✅ Verified Oct 17, 2026: Framer's Help article Using pages says Framer "uses a desktop-first workflow, with a default desktop width of 1200 pixels." Framer Academy's breakpoints lesson says the width shown is "the minimum viewport width at which that breakpoint becomes active," that new breakpoints inherit from the primary one, and that you should add a breakpoint "when the layout starts to fail, rather than adding one by habit." Tablet 810 / Phone 390 are the presets Framer suggests (stated by Framer staff on the Framer Community forum), so the ⚠️ above is now low-risk, but still check a new project.

7.7 Variables 🧠✅#

• Component variables/properties expose text, images, links, toggles, and variants to buyers (Section 10).
• Layout template variables let each page configure the shared layout, e.g., hide a sidebar or switch nav style ✅.
• Page variables are created automatically by CMS Dynamic Filters, and you can reset them for a "Clear filters" button ✅.

7.8 Design-system checklist#

• 12–16 semantic color styles. Zero hard-coded colors (spot-check 10 random layers)
• Light/dark values set and tested, or deliberately absent
• Full text style scale with correct semantic tags. Zero unstyled text layers
• Breakpoint sizes defined consistently
• Spacing scale followed everywhere
• Sections = 1fr + Container max-width
• Drag-resize test from 1600 → 320px passes without breakage

8. Layout: Stacks, Grid, Sizing & Responsive Rules#

8.1 Official guidance ✅#

• Use Stacks, grids, and auto-height layouts for flexibility.
• Avoid horizontal scrolling issues. Layouts must stay organized as content changes.
• Avoid fixed sizes that break responsiveness.
• Layout templates require pages to use a vertical Stack layout ✅.

8.2 Sizing rules 🧠#

• Use min/max width to keep cards from getting too narrow or too wide.
• Use fixed pixel widths only for icons, avatars, and decorative elements.
• Never absolute-position content that should flow. Absolute positioning is only for decorative overlays and badges, pinned relative to a stack parent.
• Text never gets a fixed height.

8.3 Stack vs. Grid 🧠#

• Stack: one-direction flow (vertical sections, horizontal button rows, nav). Turn on wrap for chip/tag rows.
• Grid: two-dimensional repeated items (features, projects, logos, pricing). Set columns per breakpoint: 3–4 → 2 → 1.
• CMS Collection Lists in Grid mode for project/blog indexes.

8.4 Responsive rules 🧠#

1. Every horizontal Stack has a phone plan: wrap, switch to vertical, or deliberately scroll horizontally (carousel, with visible affordance).
2. Tap targets on phone ≥ 44×44 px.
3. Body text never below 16px on phone.
4. Hide/show per breakpoint only for navigation and truly different compositions. Prefer a single responsive layer.
5. Check that the phone nav menu opens, closes, locks correctly, and that links close the menu.
6. Test real long content: 2× longer headings, a 3-line button label in German, an empty CMS field.
7. Check the overflow at 320px. Nothing may cause a horizontal scrollbar ✅.

🔎 Deep dive — the 320px overflow test

Common overflow causes and fixes 🧠:

Width sweep 🧠: drag the canvas preview from 1920 → 320 slowly and stop at every point where something jumps. Each jump is either a missing breakpoint value or a fixed size.

8.5 Layout checklist#

• All pages are vertical Stacks and use the layout template
• No horizontal scroll at 320–1920px
• No fixed-height text or fixed-width content containers
• Grids collapse cleanly. Cards stay readable at every width
• Long-content and empty-content stress test passed

9. Typography#

9.1 Font choices ✅#

• Framer's font sources: Google Fonts, Fontshare, custom uploads, open-source fonts, and Inter/Inter Display (the default) ✅.
• Prefer Google Fonts. They load faster thanks to automatic subsetting ✅.
• Use weights Light (300) to Extra Bold (800). Text in those weights uses font-display: swap with size-adjusted fallbacks, so it isn't invisible while loading ✅. Thin (100) and Black (900), and non-serif/sans categories such as display/handwriting from Google/Fontshare, don't get swap under the Auto setting ✅.
• Custom fonts are converted to WOFF2 (except uploads from before November 2023, which you should re-upload) ✅.
• Font Loading setting: Site Settings → Performance → Font Loading (Auto default / Always / Never) ✅. Leave it on Auto.

9.2 Pairing rules 🧠#

• Use at most 2 families: one display, one text. One family with weight contrast is often more premium.
• Load at most 4 weights total across the site.
• If the display font is decorative (no swap), use it only for big headings and keep body text in a swap-friendly sans/serif.
• Licensing: only fonts that are free to redistribute (Section 5.3). Framer recommends "Framer fonts … where appropriate" ✅.

9.3 Copy & typesetting rules 🧠✅#

• No lorem ipsum ✅. Write realistic, niche-specific copy (Section 11).
• Sentence case for headings unless the brand calls for otherwise (Framer's skill example uses sentence case and avoids all caps).
• Balanced headings, no orphans ✅. Body line length 50–75 characters ✅.
• One h1 per page. Headings follow order (no h2 → h4 jumps) ✅ ("Headings … follow a logical structure").
• Run a spelling and grammar pass before publishing ✅.

10. Components, Variants & Properties#

10.1 Why it matters#

Components with clear properties are the main difference between "pretty" and "easy to customize." That's what reduces support and earns repeat buyers. Framer lists reusable components as a core trait of AI-ready templates ✅.

10.2 What to componentize 🧠#

MUST: Nav (desktop + mobile variants), Footer, Buttons, Links/Text links, Cards (project, blog, feature, testimonial, pricing, team), Section header (eyebrow + title + subtitle), Badge/Tag, Form fields, FAQ/Accordion item, Logo strip item, CTA banner. SHOULD: Full sections as components when they repeat across pages (CTA, testimonials, newsletter). AVOID: Componentizing one-off hero art. It adds editing friction.

10.3 Variants & interactive states ✅🧠#

• Hover and active states must be clearly defined ✅. Interactive elements must look clickable ✅.
• Button variants: Primary, Secondary, Ghost, each with Default / Hover / Pressed (+ Disabled if used in forms). Optional size variants S / M / L.
• Use component interactions (hover/press → variant) for states instead of code ✅ (Framer recommends Components over overrides for user interactions).
• Nav: Desktop, Tablet, Mobile Closed, Mobile Open.
• Accordion: Closed, Open. Animate height smoothly. Keep it keyboard-operable (Section 19).
• Transitions: 150–300ms ease-out for hover. Springs for open/close. Keep them consistent across components.

🔎 Deep dive — state matrix and nav variants

Mobile menu behavior checklist 🧠: the hamburger is a real button with an accessible name ("Open menu"); Mobile Open covers the page and stops content behind it from being reachable; every link in Mobile Open switches back to Mobile Closed on tap; the close button sits where the hamburger was.

10.4 Component properties (variables) 🧠#

Expose what a buyer will actually change, and nothing else.

Rules:

• Property names are buyer-facing English: Show Icon, not iconVis.
• Give every property a sensible default that looks great untouched.
• Use booleans for optional elements (Show Badge) instead of separate variants.
• Link properties should accept page links and URLs.

🔎 Deep dive — what a good properties panel looks like

Test 🧠: hand the component to someone who has never seen it. If they can't change every visible piece of content from the right panel within a minute, a property is missing or badly named.

10.5 Component checklist#

• All repeated UI is componentized. No detached copies
• Every interactive component has Hover + Pressed. Focus is visible (19)
• Properties exposed with plain names and defaults
• Variants named by state/size
• External components updated. No paid third-party components bundled

11. Imagery & Placeholder Content#

11.1 Rules ✅#

• Visual assets polished and high quality ✅.
• No placeholder or lorem ipsum ✅.
• Meaningful alt text on images ✅. Leave decorative images without alt text 🧠 (standard practice).
• Assets original or properly licensed ✅.

11.2 Content strategy 🧠#

• Write like a real business in the niche. Use real-sounding services, prices, case-study outcomes, team roles, and FAQs. Buyers judge fit by how well your copy describes their business.
• Invent a coherent fictional brand (name, logo, voice) for the demo. Avoid real brands.
• Images tell one story. Same color grade, same lighting, same crop logic. Inconsistent stock is the fastest way to look cheap.
• Use AI imagery for consistency where useful. Keep a ledger of tool + license (5.3). Avoid generated people with distorted hands or text artifacts. Check every image at 100%.
• Aspect ratios: standardize (e.g., 4:3 for cards, 16:9 for heroes/case-study covers, 1:1 for avatars, 3:4 for portraits). Lock ratios in components so buyer swaps don't break layouts.
• Upload source images unmodified, at sufficient resolution (up to 4096px longest side is used). Framer generates 512/1024/2048/4096 variants and serves AVIF/WebP automatically ✅. Don't pre-convert.
• Keep source files reasonable: ~2400–3200px longest side for full-bleed heroes, ~1600px for cards 🧠. Framer caps variants at 4096 ✅, and it never upscales ✅.
• Upload SVGs as image fills (frame → Fill → Image) for complex graphics ✅.

🔎 Deep dive — writing an art-direction spec

🧠 Put a one-paragraph spec in the asset ledger before generating or shooting anything, and reuse it for every image:

Art direction — Northwind (fictional)
Subject: calm architecture and interiors, no people in heroes
Light: soft natural daylight, late afternoon, no hard flash
Grade: warm neutrals, lifted blacks, low saturation (timber, linen, stone)
Lens/framing: eye-level, straight verticals, 35–50mm feel, subject off-center
Ratios: cards 4:3, heroes 16:9, portraits 3:4, avatars 1:1
Never: text in images, logos, recognizable real buildings or people, heavy vignettes

11.3 Alt text rules 🧠#

• Describe content and purpose in ≤ 125 characters: "Architect reviewing timber model on studio table."
• Don't start with "Image of…"
• CMS images: add an Alt text field (or use the image field's built-in alt if available ⚠️) and bind it.
• Instructions page: tell buyers to replace alt text along with images.

11.4 Imagery checklist#

• Consistent art direction across all images
• Every image licensed and logged
• Ratios locked in components
• Alt text on all meaningful images. Decorative images have none
• No real brand logos. No unreleased real people
• Resolution set to Auto (Fill → Image) ✅

12. CMS Collections & Dynamic Pages#

12.1 Official guidance ✅#

• Manage repeated content through the CMS. Connect fields clearly to pages and components. Remove empty/unused entries. Use clear naming for collections and fields ✅.
• CMS 3.0 (April 21, 2026): inline table editing, bulk actions, collection folders, field panel, filtering ✅.
• Dynamic Filters (February 19, 2026): Search, Tabs, Toggles, Dropdowns, Checkboxes on Collection Lists. Works with Empty States and Pagination. Uses auto-created page variables ✅.
• Dynamic SEO: {{Title}}, {{Description}} in CMS page settings. CMS image field as the social preview ✅.

12.2 Collection design 🧠#

Rules:

• Field names in Title Case, plain English. Add field descriptions where the purpose isn't obvious.
• Fill every collection with 6–9 realistic items: enough to show grids, pagination, and filters, without forcing buyers to delete 40 entries. Framer's Skills post explicitly pushes creators away from "dozens of CMS entries" toward focused starting points plus Agent skills ✅.
• No empty or test items ✅.
• Mind plan limits: Basic allows only 2 collections, Pro 10 ✅. 🧠 Prefer fewer collections. Use option fields instead of a separate Categories collection where you can. Disclose if more than 2 are needed.
• Every detail page (/work/:slug) must have dynamic title, description, and social image bound ✅.
• Design empty states for filtered lists ✅ (supported) and handle optional fields with visibility conditions (e.g., hide Gallery section if empty) 🧠.
• Link "Next project / Related posts" via filters or references for depth and internal linking.

🔎 Deep dive — CMS pages and filters, illustrated

🧠 Example field schema for a Posts collection (types as named in Framer's CMS field picker; check names in your version ⚠️):

Using Option for Category instead of a Categories collection keeps the template at 2 collections (Posts + Projects), so it publishes on Basic ✅ (plan limits in 3.5).

12.3 CMS checklist#

• Collections and fields clearly named. Folder-organized if many
• 6–9 realistic items each. No empty/test items
• Detail pages bind SEO title/description/social image
• Optional fields don't leave blank gaps
• Filters/pagination/empty states work
• Collection count fits the intended buyer plan (or is disclosed)

13. Animations & Effects#

13.1 Official guidance ✅#

• Motion is purposeful and guides attention. Avoid excessive or overly complex animation. Keep performance in mind ✅.
• Use Appear effects for key elements at the top of the site. They load before JavaScript. Avoid scroll animation effects for these above-the-fold elements ✅.
• Shadows and blurs slow down animation and scrolling. Keep blur values below 10 ✅.
• Layout templates support shared page transitions and layout animations ✅.
• Respect reduced motion: Framer's site setting disables parallax, transform, and layout animations for users who prefer reduced motion ✅.

13.2 Motion system 🧠#

Rules:

• One motion language per template: same easing, same distances, same durations.
• Nothing animates text that buyers must read before it finishes (no letter-by-letter body copy).
• No scroll-jacking. No preloaders over 1s. Never block content behind an intro animation.
• Test on a mid-range phone. Turn on OS reduced motion and confirm the site still works and reads well.

13.3 Motion checklist#

• Hero uses Appear, not scroll animations
• Blur < 10. Few large shadows
• Consistent durations and easing
• Reduced-motion setting on and tested
• No jank on a mid-range phone

14. Code Components & Overrides#

14.1 Official stance ✅#

• Custom code should be clean, minimal, and easy to understand. Use native features first. Use embeds only when necessary. Keep code compatible with current Framer ✅.
• "You might not need Code Overrides." Native replacements: animating text/layers → Effects, user interactions → Components, dynamic data → Fetch ✅.
• Overrides must be React 18 compatible and use forwardRef so effects and links keep working. Always spread existing props ✅.
• Code components expose settings through addPropertyControls and ControlType. Also set defaultProps ✅.

14.2 When code is justified 🧠#

✅ Use code for: a feature Framer can't do natively (e.g., live currency toggle, interactive calculator, specialized media), and only when it's essential to the template's value. ❌ Don't use code for: hover effects, reveals, carousels/tickers (native or official components exist), tracking scripts the buyer should add themselves, anything that breaks when the buyer edits the canvas.

14.3 Safe-code rules (adapted from Framer's component review checklist) ✅#

• Static rendering: use useIsStaticRenderer() so animations and browser behavior don't run on the Canvas or in exports. Don't rely on typeof window. Nothing runs at module level.
• Remove unused code, resolve TypeScript errors, handle empty and error states.
• Pause work off-screen: rAF loops, timers, media, WebGL. Clean up on unmount.
• Limit external dependencies: bundle deps. No remote script loading. Validate URLs from property controls. Disclose any required external service.
• Accessibility: native <button>/<a>, alt text, visible focus, labeled inputs, accessible names on icon buttons.
• Scope DOM changes to the component. Never touch document.body/head, global styles, or page-wide observers.
• Performance: no continuous loops, short polling, full-DOM scans, or listeners added each render.
• Accurate property controls: test each one, use clear titles/descriptions, sensible ranges, hidden() for irrelevant controls, and keep defaults in sync with code.
• No unsafe HTML: no dangerouslySetInnerHTML with configurable or external content.
• Supported APIs only. No undocumented internals. Replace deprecated controls (e.g., ControlType.Image → ResponsiveImage, SegmentedEnum → Enum + displaySegmentedControl, FusedNumber → Padding/BorderRadius) ✅.

14.4 Custom head/body code ✅#

• Add scripts only where needed. Use page-level code for page-specific scripts.
• Use defer (or async when it must load ASAP). Never neither ✅.
• 🧠 Ship templates with no analytics or tracking scripts of your own (they'd send buyers' visitor data to you, which raises privacy issues under §4.4). Document where buyers can add theirs.

14.5 Minimal patterns ✅#

// Override — always forwardRef + spread props (React 18)
import { forwardRef, type ComponentType } from "react"

export function withHalfOpacity(Component): ComponentType {
  return forwardRef((props, ref) => (
    <Component ref={ref} {...props} style={{ ...props.style, opacity: 0.5 }} />
  ))
}

// Code component — property controls + defaults + static-safe
import { useEffect } from "react"
import { addPropertyControls, ControlType, useIsStaticRenderer } from "framer"

export default function Ticker({ text, speed }) {
  const isStatic = useIsStaticRenderer()
  useEffect(() => {
    if (isStatic) return
    // start animation; return cleanup
    return () => {}
  }, [isStatic])
  return <div role="marquee" aria-label={text}>{text}</div>
}
Ticker.defaultProps = { text: "Available for new projects", speed: 40 }
addPropertyControls(Ticker, {
  text: { type: ControlType.String, title: "Text" },
  speed: { type: ControlType.Number, title: "Speed", min: 5, max: 200, unit: "px/s" },
})

🔎 Deep dive — more code patterns (checked against Framer's developer docs, Oct 17, 2026)

Facts ✅ (Developers docs: Property Controls, Auto-Sizing, API Reference; Help: Prepare your component for review, updated Sep 15, 2026):

• Controls can be hidden with hidden(props) and documented with description (Markdown allowed).
• ControlType.ResponsiveImage passes { src, srcSet, alt }. ControlType.Image is deprecated.
• ControlType.Enum + displaySegmentedControl: true replaces the deprecated SegmentedEnum. ControlType.Padding / BorderRadius replace FusedNumber.
• Sizing is set with @framerSupportedLayoutWidth / @framerSupportedLayoutHeight (auto, fixed, any, any-prefer-fixed; default any) and @framerIntrinsicWidth / @framerIntrinsicHeight, on the lines directly above the component. Spread style on the root so fixed sizing works.
• For animated components, use useIsStaticRenderer() (static on Canvas and Export) instead of RenderTarget.

Override that adds safe external-link attributes (pattern from 14.5, React 18 + forwardRef + spread props ✅):

import { forwardRef, type ComponentType } from "react"

export function withExternalLink(Component): ComponentType {
  return forwardRef((props: any, ref) => (
    <Component ref={ref} {...props} target="_blank" rel="noopener noreferrer" />
  ))
}

Code component with responsive image, segmented enum, conditional control, sizing annotations ✅ APIs, 🧠 component:

import { addPropertyControls, ControlType } from "framer"

/**
 * @framerSupportedLayoutWidth any-prefer-fixed
 * @framerSupportedLayoutHeight auto
 * @framerIntrinsicWidth 360
 */
export default function Badge({ label, tone, showImage, image, style }) {
  const colors = { neutral: "#EEE", success: "#DCFCE7", warning: "#FEF3C7" }
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "center", padding: "6px 10px",
                  borderRadius: 999, background: colors[tone], ...style }}>
      {showImage && image?.src && (
        <img src={image.src} srcSet={image.srcSet} alt={image.alt ?? ""}
             width={20} height={20} style={{ borderRadius: 999 }} />
      )}
      <span>{label}</span>
    </div>
  )
}

Badge.defaultProps = { label: "New", tone: "neutral", showImage: false }

addPropertyControls(Badge, {
  label: { type: ControlType.String, title: "Label", maxLength: 24 },
  tone: {
    type: ControlType.Enum, title: "Tone",
    options: ["neutral", "success", "warning"],
    optionTitles: ["Neutral", "Success", "Warning"],
    displaySegmentedControl: true,
  },
  showImage: { type: ControlType.Boolean, title: "Show Image" },
  image: {
    type: ControlType.ResponsiveImage, title: "Image",
    description: "Square image, at least 40×40.",
    hidden: (props) => !props.showImage,
  },
})

Static-safe, off-screen-paused, reduced-motion-aware animation loop (✅ useIsStaticRenderer; 🧠 IntersectionObserver + prefers-reduced-motion are standard web APIs):

import { useEffect, useRef } from "react"
import { addPropertyControls, ControlType, useIsStaticRenderer } from "framer"

export default function Marquee({ text, speed, style }) {
  const isStatic = useIsStaticRenderer()
  const root = useRef<HTMLDivElement>(null)
  const track = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (isStatic || !root.current || !track.current) return
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches
    if (reduce) return
    let raf = 0, x = 0, last = performance.now(), visible = false
    const tick = (now: number) => {
      x = (x - (speed * (now - last)) / 1000) % (track.current!.scrollWidth / 2)
      last = now
      track.current!.style.transform = `translateX(${x}px)`
      raf = requestAnimationFrame(tick)
    }
    const io = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting
      cancelAnimationFrame(raf)
      if (visible) { last = performance.now(); raf = requestAnimationFrame(tick) }
    })
    io.observe(root.current)
    return () => { io.disconnect(); cancelAnimationFrame(raf) }   // clean up on unmount
  }, [isStatic, speed])

  return (
    <div ref={root} role="marquee" aria-label={text} style={{ overflow: "hidden", ...style }}>
      <div ref={track} aria-hidden="true" style={{ display: "flex", gap: 48, width: "max-content" }}>
        <span>{text}</span><span>{text}</span>
      </div>
    </div>
  )
}
Marquee.defaultProps = { text: "Available for new projects", speed: 40 }
addPropertyControls(Marquee, {
  text: { type: ControlType.String, title: "Text" },
  speed: { type: ControlType.Number, title: "Speed", min: 5, max: 200, unit: "px/s" },
})

14.6 Code checklist#

• Every code file justified (native alternative ruled out)
• Static-render safe, off-screen paused, cleaned up
• No remote scripts, no global DOM changes, no unsafe HTML
• Property controls tested, titled, described, defaulted
• Works on Canvas, Preview, and published site
• No creator-owned tracking scripts shipped

15. Forms & Integrations#

15.1 What Framer provides ✅#

• Native forms (Insert → Forms): multiple input types, designable states, send to Email, Google Sheets, or Webhooks, built-in spam protection and rate limiting.
• Built-in integrations include Formspark, HubSpot, Typeform (plus Calendly and Intercom per the FAQ).
• Input component for email signups: Loops.so, Mailchimp, Formspark, GetWaitlist.
• Embeds for other providers (Tally, Beehiiv…). Embeds can slow sites down, so use them only when needed ✅.

15.2 Template form rules 🧠#

• Use native forms by default. They survive remixing and need no third-party account.
• Do not leave your own email or webhook as the destination. Before publishing the template, set the destination to a neutral state, or clearly mark it on the Instructions page: "Step 3: Select the form → Send To → your email." Otherwise you'll receive buyers' visitors' leads (privacy problem) ⚠️ (check how form destinations behave on remix and document the result).
• Every field has a visible label, not placeholder-only ✅ ("Form fields are clearly labeled").
• Design Default / Focus / Error / Success / Loading states.
• The preview site's form must actually submit (old #1 rejection reason). Test it.
• Contact links: mailto: and tel: ✅.
• No integration that needs a paid account to make core functionality work, unless you disclose it in the listing ✅ ("Setup requirements and limitations are clearly communicated"; Terms §2.7 on undisclosed payment channels).
• Booking (Calendly/Cal.com) and newsletter blocks: ship as clearly labeled, swappable components with instructions.

🔎 Deep dive — the five form states

15.3 Forms checklist#

• Native forms submit on the live preview
• Destination neutral, or clearly documented for buyers
• Visible labels, all states designed
• mailto:/tel: links work
• External services disclosed in listing + instructions

16. Localization#

16.1 How it works ✅#

• Localization view → Add Locale (language + optional region + fallback language). Page text, titles, descriptions, and image alt text show up in the Localization table, grouped by page.
• Translate manually, or with AI Translation (uses plan credits). Manual translation never uses credits.
• Preview locales on the canvas through the locale switcher. Translations can be edited on the canvas.
• Pricing: localization is an add-on, $20 per locale (up to 20) on Basic/Pro ✅. The Free plan includes one free locale to try ✅.

16.2 Template guidance 🧠#

• Most templates should ship single-language (English). Locales cost buyers money.
• Make the template localization-ready:
  • No text baked into images.
  • Layouts survive +30–40% text length (German/French). Buttons are fit-content and wrap gracefully.
  • Use CMS for content-heavy parts so localization flows through the CMS.
  • Avoid hard-coded date/currency formats in images. Keep them as text.
• Offer an "international" template variant only for niches where it matters (tourism, hospitality, cross-border SaaS). Then show a locale switcher component and list "Localization add-on required" in the listing.

16.3 Localization checklist#

• No text in images
• +40% text-length stress test passed
• If locales are shipped: switcher works, slugs/meta localized, add-on requirement disclosed

17. SEO & AEO#

17.1 Official mechanics ✅#

• Site title + description in Site Settings. Per-page overrides in Page Settings, including the "show in search engines / site search" toggle.
• CMS dynamic meta: {{Title}}, {{Description}}, combinable ({{Title}} – Blog).
• Social preview images: 1200 × 630, important content centered. Per-CMS-item image via CMS variables.
• Sitemap auto-generated at /sitemap.xml and kept current on publish.
• Framer's Link Preview tool checks how pages render on Google, X, LinkedIn, Slack.
• Google may rewrite descriptions. You can mark content "Google Bot → Skip" in Accessibility.
• Skills Index includes ready-made skills: SEO check, Page metadata, SEO content writer, Create llms.txt ✅.

17.2 Template SEO rules 🧠✅#

• Every page has a unique title (≤ 60 characters) and description (≤ 155 characters) ✅ (title + description per page required in best practices).
• One h1 per page. Logical h2/h3 order ✅. Semantic frame tags: header, nav, main/article, section, footer ✅.
• Utility pages: /instructions, /style-guide and legal placeholders should be hidden from search engines 🧠.
• Social image: a site-level 1200×630 branded image, plus per-CMS-item cover binding ✅.
• Favicon + touch icon set.
• Internal links: nav, footer, related items, breadcrumbs on detail pages.
• Slugs: short, lowercase, keyworded. CMS slug field filled for every item.
• AEO (answer-engine optimization) 🧠: FAQ sections with direct answers, clear entity statements in About pages, and optionally an llms.txt generated with Framer's skill ✅ (skill exists).
• 🧠 Note for the instructions page: buyers must re-do SEO for their brand. Give them a 5-step SEO setup list.

🔎 Deep dive — social image and meta, worked example

🧠 Example metadata for a template's pages (rewrite per brand; length limits from 17.2):

Safe area 🧠: keep the logo and headline inside the middle ~1000 × 520 of the 1200 × 630 image, because some platforms crop the edges.

17.3 SEO checklist#

• Unique title + description on every page (incl. CMS templates)
• One h1. Ordered headings. Semantic tags on header/nav/footer/sections
• Site + CMS social images (1200×630)
• Utility pages noindexed
• /sitemap.xml loads on preview domain
• Link Preview checked for Home + one CMS detail page

18. Performance#

18.1 Official levers ✅#

18.2 Targets 🧠#

• Lighthouse (mobile) on Home and a CMS detail page: Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 95, SEO = 100.
• Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms.
• Self-hosted hero video ≤ 3–5 MB, 720–1080p, H.264/WebM, with a poster image. Otherwise use Vimeo/YouTube ✅.
• Lottie/Spline: one signature moment max, below the fold, or loaded on interaction.
• Note: the Free plan caps uploads at 5 MB per file ✅. Keep assets under that so buyers on any plan can remix without problems 🧠 ⚠️ (check whether the limit applies to remixed content).

18.3 Performance checklist#

• All images Resolution Auto. No giant decorative PNGs
• Fonts: ≤ 2 families, ≤ 4 weights, 300–800
• No autoplay heavy video above the fold, or it's optimized with a poster
• Blur < 10. Limited shadows
• Embeds justified
• Versions = Optimized
• Lighthouse mobile targets met on 2+ pages

19. Accessibility#

19.1 Framer tools ✅#

• Accessibility panel: semantic tags for text (auto from text styles) and frames (article, footer, header, nav, section), image alt text, custom tab order.
• Reduced motion site setting: disables parallax, transform, and layout animations (and custom cursors) for users who prefer reduced motion.
• Contrast: check with Chrome Lighthouse ✅.
• Videos without audio: describe the content below the video ✅.
• Skills Index has an Accessibility check skill ✅. Agents can audit accessibility issues ✅.

19.2 Template a11y rules (WCAG 2.2 AA baseline) 🧠✅#

• Contrast: 4.5:1 body, 3:1 large text and UI components, in light and dark modes ✅.
• Keyboard: every link, button, menu, accordion, tab, and form field is reachable and operable by keyboard. Logical tab order ✅.
• Focus visible: never remove focus outlines without a styled replacement.
• Semantics: nav around navigation, header/footer tags, section for sections, article for blog/case bodies ✅.
• Headings: one h1, no skipped levels ✅.
• Alt text: meaningful on content images, empty on decorative ones ✅.
• Links: descriptive text ("View case study: Kinfolk Rebrand", not "Click here"). Icon-only buttons have accessible names.
• Forms: visible labels, error messages in text (not color alone) ✅.
• Motion: reduced-motion setting enabled. No flashing content more than 3 times per second.
• Touch targets ≥ 44px. Zoom: layout survives 200% browser zoom.
• Language set in site settings.

🔎 Deep dive — focus, contrast, and tap targets

🧠 15-minute manual a11y pass:

1. Keyboard: Tab from the top of Home. Every stop has a visible ring, the order matches reading order, the mobile menu opens with Enter and closes with Esc, and focus never gets trapped.
2. Zoom: 200% browser zoom on Home and a CMS detail page. No overlapping or clipped text.
3. Reduced motion: turn on the OS setting and reload. Parallax, transforms, and layout animations stop ✅ (Framer's site setting), and nothing important is hidden behind an animation.
4. Screen reader spot check (VoiceOver: ⌘F5 on macOS): the rotor's headings list shows one h1 and a sensible outline; landmarks show header, nav, main/sections, footer.
5. Contrast: check Text/Secondary on Surface/Raised in both modes, the usual weakest pair.

19.3 Accessibility checklist#

• Lighthouse a11y ≥ 95 on Home + CMS detail
• Keyboard-only walkthrough of every page (Tab/Shift-Tab/Enter/Esc)
• Focus states visible everywhere
• Semantic frame tags on header/nav/sections/footer
• Alt text audit complete
• Reduced-motion on, verified with OS setting
• Contrast verified in both color modes

20. Utility Pages: 404, Legal, Instructions, Style Guide#

Framer Academy has lessons on creating a custom 404 page and a "prelaunch checklist" ✅ (lesson titles exist).

🔎 Deep dive — utility pages, illustrated

404 spec 🧠: same layout template (nav + footer) ✅; one human headline in the brand's voice; one line that says what happened; one primary button home plus 2–3 links to the most useful pages (Work, Contact, Blog); no auto-redirect; hidden from search.

Style-guide page contents 🧠: every color style (name + light/dark value), every text style (live specimen + size per breakpoint), all button variants and states, every card component, form fields in all states, and the spacing scale. Because it uses the real styles and components, it updates itself when the buyer rebrands, and the Agent can be pointed at it (@page Style Guide, as in 21.4).

21. Customization-Friendliness & AI-Readiness#

21.1 Framer's definition of AI-ready ✅#

"An AI-ready template has clean structure, reusable components, consistent styles, organized CMS collections, and clear guidance for how it should be customized. It should be easy for both people and AI to understand."

• Creators can add custom instructions that guide the in-canvas Agent: what to change, what to preserve, how to extend pages, and how to adapt the brand for different industries ✅.
• Skills stay with a project when remixed ✅. They can reference @page, components, and styles. Create them with /skills or Settings → Skills. The Agent can apply a skill automatically when its description matches the task ✅.
• Framer provides a demo /design-system skill project. The Skills Index offers copyable skills (Design system, Motion, Launch checklist, Accessibility check, Tidy up, CMS check, Form audit, SEO check, Page metadata, Brand voice, Remove AI writing, Create llms.txt) ✅.

21.2 One-click rebrand design 🧠#

Buyers should be able to rebrand in under 10 minutes:

1. Colors: edit Brand/Primary (+ Hover/On Primary) and the Surface/Text set. Everything updates.
2. Fonts: change the font family in ~2 groups of text styles (display, body).
3. Logo: one Logo component used in nav, footer, and favicon instructions.
4. Radius / style feel: buttons and cards draw from components, so one edit propagates.
5. Content: CMS for repeating content. Component properties for section copy.

Test this yourself: rebrand the template to a different industry in 10 minutes. Anything that took longer is a fix.

21.3 Instructions page template (ship in every template) 🧠#

# Getting started with [Template Name]  (v1.0.0)
1. Rebrand in 5 minutes
   - Colors: Assets → Color Styles → edit Brand/Primary …
   - Fonts: Assets → Text Styles → change Display + Body family …
   - Logo: edit the "Logo" component …
2. Edit content
   - Pages vs CMS: which sections come from which collection
   - Component properties: select a component → right panel
3. Forms → set "Send To" to your email/Sheets/webhook
4. SEO → Site Settings title/description, social image, per-page meta, CMS {{Title}}
5. Publish → connect domain (requires a paid plan); Basic vs Pro requirements: [collections/pages]
6. Using the Framer Agent
   - This template includes the /[template-name] skill. Try: "/[template-name] add a Careers page with 3 roles"
7. Fonts, images & licenses: what is included and what you must replace
8. Support: [email], response time [e.g., within 2 business days], refund policy link
9. Changelog
→ Delete or unpublish this page before going live (it is noindexed by default).

🔎 Deep dive — what the Instructions page looks like

🧠 Layout tips: numbered steps in a sticky sidebar that match the outline in 21.3; one screenshot per step taken from the template itself; a "Plan requirements" callout at the top (Basic vs Pro); the support email and changelog at the bottom. Keep it under ~1,500 words. Anything longer belongs in the template Skill.

21.4 Template Skill starter (paste into Settings → Skills, edit per template) 🧠#

Title: [template-name]
Description: Use when adding or editing pages, sections, or CMS content in the [Template Name] template.

Content:
You are extending the [Template Name] design system. Never invent new colors, text styles, or spacing.
Pages
- Apply the "Main" layout template to every new page. Set a unique meta title and description.
- Sections fill width (1fr) and contain a "Container" with max width 1200px.
- Use @page Style Guide as the source of components; reuse section components before building new ones.
Colors: only Brand/*, Surface/*, Text/*, Border/* styles. Brand/Primary max once per section.
Typography: only text styles Display, H1–H6, Body L, Body, Body S, Label, Button. Sentence case. Text balance on headings. 50–75 chars per line.
Spacing: use 8/16/24/32/48/64/96/120 only. Section padding 120 desktop / 96 tablet / 64 phone.
Motion: Appear fade+rise 20px, 500ms, stagger 80ms, once. No scroll effects above the fold. Blur < 10.
CMS: new projects go to the Projects collection; always fill Cover Alt, SEO Title, SEO Description.
Preserve: hero composition, nav/footer, the signature [describe] effect.
Before finishing: check all breakpoints, no horizontal scroll, headings in order, alt text present.

21.5 Customization checklist#

• 10-minute rebrand test passed
• Instructions page complete, noindexed
• Style guide page (Premium)
• Agent instructions + template Skill added and tested with 3 prompts (new page, rewrite copy, add CMS item)
• CMS kept focused (6–9 items) instead of padded

22. Preview Site & Marketplace Listing#

22.1 Live preview ✅#

• Required for every template. Publish the project and paste the free Framer domain URL into the Community composer.
• It must come from the project that contains the template you're selling and accurately represent what buyers get.
• Republishing updates what visitors see.
• 🧠 Use a clean subdomain such as templatename.framer.website. Keep the Instructions page reachable but unlinked, or unpublished for the preview.
• 🧠 No "Buy this template" banners inside the template itself (best practice: remove ads/unrelated promotions ✅). If you want a purchase CTA on the preview, add a small floating badge to the preview only, and remove it from the remix source ⚠️ (judgment call. Many creators do this. Keep it unobtrusive).

22.2 Media specs ✅⚠️#

22.3 Image set (recommended 6–10) 🧠#

1. Hero shot / video: browser-framed home hero with the brand name visible. Readable at thumbnail size.
2. Full home page scroll (tall composition or video).
3. Key differentiator (the signature section or interaction).
4. CMS pages (index + detail side by side).
5. Responsive trio (desktop/tablet/phone).
6. Design system / style guide (color + type), which signals customizability.
7. Feature callouts: "8 pages · 3 CMS collections · Light/Dark · Agent skill included."
8. Additional pages (pricing, about, contact, 404).

• Use the same background, frame style, and type across all images so they look like a set.
• Only show what's in the product ✅ (accurate previews).
• No fake "Bestseller" badges, no misleading claims.

🔎 Deep dive — listing media, illustrated

🧠 Export recipe for exact 4:3 media (per the ⚠️ spec in 22.2): build each listing image as a 1600 × 1200 frame on a separate canvas page (or in your design tool) and export at 2× → 3200 × 2400, which is exactly 4:3. Keep the browser frame at the same position and scale in every image, use one background color, and leave ~8% margin so nothing important is cropped in thumbnails. Check the thumbnail by viewing the image at 400px wide: the template name and headline should still be readable.

22.4 Listing copy ✅🧠#

• Title: clear and searchable (4.5).
• Byline (one line): "[Who it's for] + [outcome]". Example: "A refined website template for architecture and interior studios to showcase projects and win clients."
• Description structure:
  textCopy

  [Hook — the buyer and their problem, 1–2 sentences]
  Highlights
  • 10 pages incl. Work (CMS) + Journal (CMS)
  • Light & dark mode via color styles — rebrand in minutes
  • Fully responsive, accessible, Lighthouse 90+ mobile
  • Native forms, Dynamic Filters, smooth native effects
  • Framer Agent skill included for on-brand page generation
  Pages: Home, About, Services, Work, Work Detail, Journal, Article, Contact, 404, Legal
  CMS: Projects, Posts (works on Basic plan — 2 collections)
  Requirements & limitations: [plan needs, fonts, external services]
  Support: [email], replies within 2 business days · Refunds: [policy summary + link]
  License: one license = one website (Framer Single-Use Commercial License)
  Changelog: v1.0.0 — [date]
  

• Categories: the most accurate one. Style tags (e.g., Minimal, Dark, Animated). Feature tags (e.g., CMS, Forms, Scroll Effects) ✅.
• Add a personal launch post when publishing. It goes to your followers and can help in For You/Hype feeds ✅.

22.5 Listing checklist#

• Live preview URL from this project
• Remix URL tested from a different account
• 6–10 images at exact 4:3 (≥ 1600×1200), video first
• Title searchable, byline outcome-based
• Description lists pages, CMS, requirements, support, refunds, license, version
• Accurate category + style + feature tags
• Checkout URL + price match (paid)
• Launch post drafted

23. Checkout, Delivery, Refunds & Support Ops#

23.1 Checkout ✅#

• Framer does not process payments. "Purchase" redirects to your checkout URL. Any platform with a direct payment link works (Framer names Contra, Stripe, Gumroad).
• Checkout requirements: direct to payment, product + price shown, price = listing price, public with no login, refund/cancellation policy shown.

23.2 Platform choice 🧠#

23.3 Delivery ✅🧠#

• Deliver the remix link (and instructions) after purchase. A confirmation email is optional but recommended ✅.
• 🧠 Automate it: put the remix link in the platform's post-purchase "content"/receipt plus an email with the Getting Started steps, support email, and license summary.
• 🧠 Remix links can be forwarded. The license forbids sharing (§7.3.2). Report misuse to abuse@framer.com ✅.

23.4 Refunds ✅🧠#

• Framer doesn't issue refunds. Buyers contact you. If you don't respond within about a week, they can contact Framer Support with proof of contact, and Framer will "help facilitate communication" ✅.
• 🧠 Suggested policy: "Because templates are digital and copied instantly, sales are final. We'll gladly refund within 14 days if a critical bug prevents use and we can't fix it within 5 business days." Show it on checkout ✅ (required).
• 🧠 EU consumer law can give a 14-day withdrawal right for digital content unless the buyer explicitly waives it at checkout. Use an MoR that handles this, or get advice ⚠️.

23.5 Support ✅🧠#

• Keep a valid support email and respond within a reasonable timeframe ✅ (Terms §4.1).
• 🧠 SLA: acknowledge within 24h, resolve within 2 business days. Use canned replies for the top 10 questions (domain connection, plan limits, forms destination, fonts, CMS editing, updates, license, refunds, Agent use, dark mode).
• 🧠 Log every support question. If one comes up three times, fix the template or the Instructions page.

24. QA Checklist#

Run this on the published preview and on a fresh remix in a second account.

24.1 Functional#

• Every nav, footer, button, card, and CMS link goes somewhere real. No #, no dead links ✅
• mailto:/tel: open correctly ✅
• Forms submit and show success/error states
• Mobile menu opens, closes, and closes on link tap
• CMS filters, pagination, empty states, and detail pages work
• 404 shows for a random URL
• Remix from a second account: fonts load, CMS is intact, components work, no missing code files, no "missing font" warnings

24.2 Visual / responsive#

• Browsers: Chrome, Safari (macOS + iOS), Firefox, Edge ✅ (Framer: test across browsers)
• Widths: 1920, 1440, 1280, 1200, 1024, 810, 768, 430, 390, 375, 360, 320, plus drag-resize ✅
• No horizontal scroll anywhere ✅
• No orphans in headings. Text balanced ✅
• Light + dark mode (if shipped)
• 200% zoom doesn't break the layout

24.3 Content#

• No lorem ipsum or placeholder content ✅
• Spell/grammar check done ✅
• Consistent fictional brand, no real brand logos
• Alt text complete ✅

24.4 Technical#

• Site Settings → Versions: Optimized ✅
• Lighthouse mobile ≥ 90/95/95/100 on Home + CMS detail
• /sitemap.xml loads. Titles/descriptions unique ✅
• Link Preview check passed (Home, CMS detail) ✅
• No console errors on the published site
• Code components static-safe and off-screen paused ✅

24.5 Hygiene#

• Zero default layer names. Zero unused styles/components/images/pages ✅
• CMS: no empty/test items ✅
• Forms not pointing to your private inbox (or documented)
• No creator analytics scripts. No ads/promos inside the template ✅
• Instructions page complete. Style guide + changelog present
• Agent skill present and tested

🧠 Tip: Framer Agents can audit broken links, accessibility issues, and inconsistent styling ✅. Run those audits (plus the Launch checklist skill) before your manual pass, then do the manual pass anyway.

25. Launch & Post-Launch#

25.1 Launch plan ✅🧠#

Framer's guidance: create a Community post when you publish. Share context that isn't in the listing (process, inspiration, lessons). Ask for feedback. Reply to comments. Publish consistently. Consider timing for active hours ✅.

📊 Timing data: Tuesday is the busiest day for new templates and Sunday the quietest (weekends about 27% fewer). A weekend launch means fewer competitors in Recent. Its effect on sales is unknown.

Launch-day sequence 🧠

1. Publish listing + Community post (process story, 2–3 visuals or a short video).
2. X/Threads/LinkedIn thread: a 30–60s walkthrough video, the "why," and a link.
3. Email list / newsletter.
4. Submit to galleries/directories (e.g., Frameplate, Gallereee, Landbook, Minimal.Gallery, Dark.design, Awwwards market). Check each one's terms and costs ⚠️.
5. Your own site: a dedicated template page targeting "[niche] Framer template" searches.
6. Reply to every comment within 24h for the first week (early engagement feeds Trending/Recent ✅).

25.2 Analytics loop ✅#

• Marketplace Analytics: unique visitors, views, remixes/opens, users, conversions (remixed projects upgrading to paid Framer plans, templates only).
• Diagnose before redesigning ✅:
  • Low views → discoverability problem (title, tags, category, distribution).
  • Views but low remixes/purchases → listing problem (thumbnail, byline, description, preview clarity).
  • Good sales, poor retention/refunds → product problem (editing difficulty, bugs, docs).
• Remix count is higher than sales by design: it counts free copies, Framer internal copies, and repeat duplicates ✅.
• Track checkout analytics (platform dashboard) plus Dub referral analytics for free templates ✅.

25.3 Updates cadence 🧠✅#

• Framer: "Keep templates up to date, using new Framer features when they improve the experience" ✅. Best sellers do this visibly 📊.
• Cadence: PATCH within 72h of a confirmed bug. MINOR quarterly (new page, a new native feature like Dynamic Filters, a better Agent skill). Re-audit after every major Framer release.
• After every update: republish the preview, update the changelog, refresh listing images if visuals changed, email buyers, and post an update in the Community (fresh activity) 🧠.

25.4 Catalog & bundles 📊🧠#

• Catalogs earn more steadily than single hits. Dmitrienko and Ehsan built 20+ product catalogs plus all-access bundles 📊.
• Build families: shared design DNA across a niche (e.g., "Studio" line: architecture, interior, landscape).
• All-access bundle priced at about 2.5–4× a premium single, including future releases. Sell it on your own site plus checkout platform.
• Cross-sell: Instructions page and delivery email mention related templates (not inside the template's public pages ✅, since ads/promos must be removed).
• Free template → email capture → paid launch announcement.

25.5 Referral income (free and paid) ✅#

• Creator Program enrollment is automatic once you publish a template. Links live in the Links tab of Community profile settings, powered by Dub, paid through Stripe.
• Payouts are monthly, cover commissions from two months earlier, and need a $200 minimum. Conversions stay pending 30 days. Commissions can be adjusted if the referred customer cancels within the first year.
• Rewards are based on the amount the referred user actually paid (credits/discounts reduce them) ✅.
• Taxes are yours. If Stripe isn't available in your country, Framer suggests options like a US LLC or a Wise-based Stripe-compatible account (get advice) ✅.
• Affiliate links may be included in free templates ✅. No paid ads using affiliate links ✅.

25.6 Post-launch checklist#

• Community post + social + email on launch day
• Directory submissions done
• Analytics reviewed weekly for 4 weeks, then monthly
• Support log reviewed monthly → fixes shipped
• Quarterly update + changelog + buyer email
• Next catalog template planned

26. MASTER Pre-Submission Checklist#

Copy this into the project card. Every box must be ticked before you click Submit. Publishing is instant, so there's no reviewer to catch mistakes ✅.

A. Strategy & pricing#

• Niche buyer named. Scores ≥ 26/35 (2.3)
• 10 competitors reviewed. 3 differentiators clear
• Price set from research. Ends in 9. Matches checkout exactly ✅
• Free vs. paid final (switching resets ranking ✅)

B. Legal#

• All fonts redistributable (Google/Fontshare/Inter) or disclosed
• All images/icons/video/3D licensed and logged. No real brands/people without rights
• Client work permission in writing (if any) ✅
• No paid third-party components. No undisclosed paid unlocks ✅
• Legal sample pages carry a "replace with your own" disclaimer
• License summary on Instructions + checkout

C. Structure & system#

• Layout template (nav/footer/content slot) on all pages ✅
• All layers/components/styles/CMS fields named. Nothing unused or duplicated ✅
• Semantic color styles everywhere. Light/dark tested or absent ✅
• Text styles everywhere, with correct tags ✅
• Spacing scale + 1fr section / 1200 container pattern

D. Responsive & layout#

• Desktop/tablet/phone + drag-resize 320–1920 clean ✅
• No horizontal scroll. No fixed sizes breaking layouts ✅
• Long-text and empty-field stress tests passed

E. Components & content#

• Repeated UI componentized with plain-English properties + defaults
• Hover/pressed/focus states on all interactive elements ✅
• Realistic niche copy. Zero lorem ipsum ✅. Spellchecked ✅
• Consistent, high-quality imagery with alt text ✅

F. CMS#

• Clear names. 6–9 realistic items. No empty items ✅
• Detail pages: dynamic title/description/social image ✅
• Collection count fits Basic (≤ 2), or Pro requirement disclosed ✅

G. Motion & code#

• Appear above the fold. Scroll effects only below ✅
• Blur < 10. Reduced motion enabled and tested ✅
• Code only where essential. Static-safe, scoped, controls tested ✅
• No creator tracking scripts

H. Forms & integrations#

• Forms submit on preview. Destination neutral/documented
• Labels visible. States designed ✅
• mailto:/tel: links ✅. External services disclosed ✅

I. SEO, performance, accessibility#

• Unique title + description per page ✅. One h1. Ordered headings ✅
• Social image 1200×630 (site + CMS) ✅. Sitemap loads ✅
• Utility pages noindexed
• Versions = Optimized ✅. Lighthouse mobile targets met
• Contrast AA. Keyboard walkthrough. Focus visible. Semantic frame tags ✅

J. Utility & buyer experience#

• Custom 404 ✅
• Instructions page (rebrand, CMS, forms, SEO, publish, plan needs, Agent, license, support, changelog)
• Style guide page (Premium)
• Agent instructions + template Skill tested with 3 prompts ✅
• 10-minute rebrand test passed

K. QA#

• Section 24 fully passed on the published preview
• Fresh remix in a second account verified
• Framer Agent audits (broken links, accessibility, styling) run and fixed ✅

L. Listing & commerce#

• Live preview URL from this project ✅
• Remix URL works (not team-restricted) ✅
• 6–10 media at exact 4:3, ≥ 1600×1200, video/hero first ⚠️✅
• Title/byline/description per 22.4. Accurate category + style + feature tags ✅
• Requirements, limitations, support, refund terms stated ✅
• Checkout: direct, public, price match, refund policy ✅. Automated remix-link delivery tested with a real (refunded) purchase
• Support inbox monitored. Canned replies ready
• Launch post + social + email drafted

27. Quick-Start Workflow#

Total: ~2–4 weeks part-time for a Premium template. ADHD-friendly: one block per session, timer on, tick the box, stop.

28. Operating Rules for AI Agents#

When working on a Maker Merchant Framer template, agents MUST:

1. Use only existing styles and components. Never create a new color or text style without explicit approval. Never hard-code colors or font sizes.
2. Name every layer you create per 6.3. Never leave Frame N.
3. Keep sections as 1fr + Container (max-width 1200) unless the brief says otherwise.
4. Use Stacks/Grid with fit/fill sizing. No fixed-height text. No absolute positioning for flowing content.
5. Check every breakpoint after each change and confirm there's no horizontal scroll.
6. Write realistic, niche-specific copy. Never lorem ipsum. Never real brand names or logos.
7. Respect motion rules: Appear above the fold, no scroll effects there, blur < 10, consistent timing.
8. Prefer native features over code. If code is necessary, follow 14.3 exactly and explain why.
9. Fill SEO fields for every new page (title ≤ 60, description ≤ 155) and alt text for every meaningful image.
10. Never add tracking scripts, ads, or creator promos inside the template's pages.
11. Never use assets you can't license (Section 5.3). Log every new asset in the ledger.
12. Don't invent Framer UI paths or features. If unsure, say "unverified" and point to the Help Center.
13. Run Framer's audits (broken links, accessibility, inconsistent styling) and the relevant Skills Index skills before handing back.
14. Report back with: what changed, which checklists were ticked, and anything left unresolved.
15. Never publish the listing, change pricing, or send buyer emails without Maker's explicit go-ahead.

29. Unverified / Uncertain Claims#

🔎 Deep-dive verification updates (Oct 17, 2026)

30. Sources#

Last verified: October 17, 2026. All links below were fetched during research unless noted.

Official — Framer Community / Marketplace (Help Center)#

• Template best practices (updated Sep 15, 2026): https://www.framer.com/help/articles/template-best-practices/
• How to publish a template: https://www.framer.com/help/articles/how-to-publish-a-template/
• Adding a live preview for your products: https://www.framer.com/help/articles/adding-a-live-preview-for-your-products/
• Accept payments in the Community: https://www.framer.com/help/articles/accept-payments-in-the-community/
• Get visibility in the Community: https://www.framer.com/help/articles/get-visibility-in-the-community/
• Understanding Marketplace analytics and rankings (updated Sep 25, 2026): https://www.framer.com/help/articles/understanding-marketplace-analytics-and-rankings/
• How the Creator Program works: https://www.framer.com/help/articles/how-the-creator-program-works/
• How affiliate links work: https://www.framer.com/help/articles/how-affiliate-links-work/
• How refunds work on the Marketplace: https://www.framer.com/help/articles/how-refunds-work-on-the-marketplace/
• Is it still worthwhile to build a template? (AI-ready templates): https://www.framer.com/help/articles/build-ai-ready-template/
• Using templates (buyer flow): https://www.framer.com/help/articles/how-templates-work/
• Why remix count doesn't match sales: https://www.framer.com/help/articles/why-is-a-template-s-remix-count-higher-than-its-sales/
• Prepare your component for review (code checklist): https://www.framer.com/help/articles/prepare-component-review/
• Community help index: https://www.framer.com/help/community/
• Getting started with Dub (search snippet only, not fetched directly): https://www.framer.com/help/articles/getting-started-with-dub/
• Understanding unusual referral amounts (search snippet only): https://www.framer.com/help/articles/understanding-unusual-referral-amounts/

Official — Legal, pricing, creators#

• Community Terms v1.0 (effective June 1, 2026): https://www.framer.com/legal/community-terms
• Pricing: https://www.framer.com/pricing
• Creators page ("Get paid to create"): https://www.framer.com/creators
• Marketplace: https://www.framer.com/marketplace/

Official — Blog & updates#

• Introducing Framer 3.0 with Agents, Branching, and a new Community (Jun 16, 2026): https://www.framer.com/blog/framer-3/
• Why Marketplace is becoming part of the new Framer Community (Jun 16, 2026): https://www.framer.com/blog/marketplace-new-framer-community/
• Introducing Skills (Sep 22, 2026): https://www.framer.com/blog/skills/
• Skills Index: https://www.framer.com/skills/index
• CMS 3.0 (Apr 21, 2026): https://www.framer.com/updates/cms-3.0
• CMS Dynamic Filters (Feb 19, 2026): https://www.framer.com/updates/cms-dynamic-filters
• Marketplace Analytics (Sep 25, 2026, via search snippet): https://www.framer.com/updates/community/analytics

Official — Product docs#

• Using layout templates: https://www.framer.com/help/articles/using-layout-templates/
• Optimizing your site for speed and performance: https://www.framer.com/help/articles/site-optimization/
• How Framer optimizes images: https://www.framer.com/help/articles/how-are-images-optimized-in-framer/
• How fonts are optimized in Framer: https://www.framer.com/help/articles/how-are-fonts-optimized-in-framer/
• How to update page titles, descriptions, and social images: https://www.framer.com/help/articles/how-to-update-page-titles-descriptions-and-social-images/
• How to access your sitemap: https://www.framer.com/help/articles/how-can-i-access-the-sitemap-xml-file/
• Guide to web accessibility in Framer: https://www.framer.com/help/articles/guide-to-web-accessibility-in-framer/
• Adding a new locale: https://www.framer.com/help/articles/adding-a-new-locale/
• Adding a contact form: https://www.framer.com/help/articles/how-can-i-add-a-contact-form-to-my-framer-website/
• How to create a remix link: https://www.framer.com/help/articles/how-to-create-a-remix-link/
• Light and dark mode options: https://www.framer.com/help/articles/light-and-dark-mode-options/
• Developers — What are Code Overrides?: https://www.framer.com/developers/overrides-introduction
• Developers — Property Controls: https://www.framer.com/developers/property-controls

Official — Framer Academy#

• Prepare a template for the Framer Marketplace (2023, flagged pre-3.0): https://www.framer.com/academy/lessons/get-your-template-ready
• Create automatic light and dark mode (2023, flagged pre-3.0): https://www.framer.com/academy/lessons/light-dark-mode

Added for the deep-dive sections (fetched Oct 17, 2026)#

• Developers — Auto-Sizing: https://www.framer.com/developers/auto-sizing
• Developers — API Reference (RenderTarget, useIsStaticRenderer): https://www.framer.com/developers/components-reference
• Setting Text Styles breakpoints (updated Mar 3, 2026): https://www.framer.com/help/articles/setting-text-styles-breakpoints/
• Using pages (default desktop width 1200): https://www.framer.com/help/articles/how-to-use-pages/
• Academy — Create responsive breakpoints in Framer (pre-3.0 lesson): https://www.framer.com/academy/lessons/framer-fundamentals-breakpoints
• Framer Community — "What's an appropriate breakpoint size to begin with?" (staff reply, 2024): https://www.framer.community/c/support/what-s-an-appropriate-breakpoint-size-to-begin-with
• Illustrations: generated with Magnific (GPT 2 image model) on Oct 17, 2026. Illustrative only.

Third-party (data, creator advice) 📊#

• Framer Labs, "48 templates a day: eight weeks of the Framer Marketplace" (Oct 11, 2026): https://framerlabs.com/blog/eight-weeks-of-the-framer-marketplace
• Steal What Works, "Which Framer templates make over $10K/month now?" (Sep 14, 2026): https://stealwhatworks.com/blogs/news/framer-templates-over-10k-month-now
• Holygrid (Marc Kuiper), "Your Framer template is ready. Now what?" (Sep 23, 2026; review info outdated): https://holygrid.studio/blog/submit-framer-template
• Reddit r/framer, image size requirement thread with Framer staff reply (Dec 2025; search result only): https://www.reddit.com/r/framer/comments/1pea3e0/template_submission_help_image_size_requirements/

Contacts#

• Creator questions: creators@framer.com ✅
• License misuse / abuse: abuse@framer.com ✅
• Legal notices: legal@framer.com ✅

End of file. Update the "Last verified" date and re-check Section 29 whenever Framer ships a major release.