# Framer Template Guidelines — Designing, Building & Selling World-Class Framer Templates > **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](#0-how-to-use-this-file) 1. [The 2026 Landscape: What Changed](#1-the-2026-landscape-what-changed) 2. [Strategy & Niche Selection](#2-strategy--niche-selection) 3. [What Sells & Pricing Tiers](#3-what-sells--pricing-tiers) 4. [Marketplace Requirements (Official)](#4-marketplace-requirements-official) 5. [Legal, Licensing & Asset Rights](#5-legal-licensing--asset-rights) 6. [Project Setup, Structure & Layer Naming](#6-project-setup-structure--layer-naming) 7. [Design System: Colors, Type, Spacing, Grid, Breakpoints](#7-design-system-colors-type-spacing-grid-breakpoints) 8. [Layout: Stacks, Grid, Sizing & Responsive Rules](#8-layout-stacks-grid-sizing--responsive-rules) 9. [Typography](#9-typography) 10. [Components, Variants & Properties](#10-components-variants--properties) 11. [Imagery & Placeholder Content](#11-imagery--placeholder-content) 12. [CMS Collections & Dynamic Pages](#12-cms-collections--dynamic-pages) 13. [Animations & Effects](#13-animations--effects) 14. [Code Components & Overrides](#14-code-components--overrides) 15. [Forms & Integrations](#15-forms--integrations) 16. [Localization](#16-localization) 17. [SEO & AEO](#17-seo--aeo) 18. [Performance](#18-performance) 19. [Accessibility](#19-accessibility) 20. [Utility Pages: 404, Legal, Instructions, Style Guide](#20-utility-pages-404-legal-instructions-style-guide) 21. [Customization-Friendliness & AI-Readiness](#21-customization-friendliness--ai-readiness) 22. [Preview Site & Marketplace Listing](#22-preview-site--marketplace-listing) 23. [Checkout, Delivery, Refunds & Support Ops](#23-checkout-delivery-refunds--support-ops) 24. [QA Checklist](#24-qa-checklist) 25. [Launch & Post-Launch](#25-launch--post-launch) 26. [MASTER Pre-Submission Checklist](#26-master-pre-submission-checklist) 27. [Quick-Start Workflow](#27-quick-start-workflow) 28. [Operating Rules for AI Agents](#28-operating-rules-for-ai-agents) 29. [Unverified / Uncertain Claims](#29-unverified--uncertain-claims) 30. [Sources](#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:** | Phase | Sections | Output | |---|---|---| | 1. Decide | 1, 2, 3 | Niche brief + price point | | 2. Set up | 4, 5, 6, 7 | Clean project, design system, legal asset list | | 3. Build | 8–16 | Pages, components, CMS, motion, forms | | 4. Harden | 17–21 | SEO, perf, a11y, utility pages, AI-readiness | | 5. Ship | 22–24, 26 | Preview, listing, checkout, QA pass | | 6. Grow | 25 | Launch, support, updates, bundles | --- ## 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**. | Criterion | Question | Notes | |---|---|---| | Buyer pain cost | Would this buyer otherwise pay a designer $2k+? | Agencies, studios, SaaS, and pro services score high | | Specificity | Can you name the buyer in 3 words? ("boutique architecture studio") | Vague = AI-replaceable | | Competition gap | Search the Marketplace category. Fewer than ~30 strong direct competitors, or all of them dated? | Sort by Best and Recent | | Content depth | Does it need CMS (projects, posts, listings, team, jobs)? | CMS depth justifies price | | Visual identity | Can it have a recognizable art direction? | Differentiation is a requirement under Originality ✅ | | Maker fit | Do you understand this buyer (apps, design, dev tools)? | Faster copy, better demos | | Catalog fit | Does it extend your existing line or a future bundle? | Compounding | ### 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 ✅📊 | Model | How it earns | Best for | |---|---|---| | **Paid** | 100% of sale price via your checkout | Deep, niche, premium systems | | **Free** | Referral commission when remixers upgrade to a paid Framer plan. The creators page says up to **50% for 12 months** | Reach, audience building, top-of-funnel for paid catalog | | **Hybrid** 🧠 | Free "lite" + paid "pro" version | Build trust and capture emails | - 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 📊 | Metric (new templates, July 29 to September 22, 2026) | Value | |---|---| | Median paid price | **$59** | | Middle 50% | **$39–$89** | | Most common price | **$49** | | Prices ending in 9 | 87% | | Paid templates ≥ $100 | 11% | ### 3.3 Recommended pricing tiers 🧠 | Tier | What's included | Price | |---|---|---| | **Starter** | 1–3 pages, landing/waitlist, light CMS | Free or $19–$39 | | **Standard** | 5–8 pages, 1–2 CMS collections, portfolio/business | $49–$79 | | **Premium** | 8–15+ pages, 3+ CMS collections, strong art direction, Agent skill | $99–$149 | | **Specialist** | Niche vertical with complex flows (directories, e-commerce, multi-locale) | $149–$299 | | **Bundle / All-access** | Entire catalog + future templates | 2.5–4× a single premium price | **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: | Plan (yearly, per month) | Pages | CMS collections | CMS items | Notes | |---|---|---|---|---| | Free | (1,000 for building) | 10 (build/try) | — | Free Framer domain only, 1 GB bandwidth | | **Basic $10** | **30** | **2** | **1,000** | Custom domain, localization add-on | | **Pro $30** | **150** (expandable) | **10** (expandable to 40) | **2,500** (expandable) | Redirects, staging, Branching | 🧠 **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) ✅ | Requirement | Source | |---|---| | Name, byline, description | How to publish a template | | Images, categories, styles, features | How to publish a template | | **Live preview URL** from a published project on a free Framer domain, from the same project you're selling | Adding a live preview | | **Remix URL** | How to publish a template | | Payment settings / checkout URL (paid only) | Accept payments | | Checkout page: goes straight to payment, shows product + price, **price matches listing**, public with no login, includes a **refund/cancellation policy** | Accept payments | | A **valid support email**, with support given "within a reasonable timeframe" | Community Terms §4.1 | | You own or have licensed every asset, with no third-party IP infringement and no malware | Community Terms §9.1 | | **No unlockable features or functionality requiring payments through channels not disclosed to and approved by Framer** | Community Terms §2.7 | | A **privacy statement** if your content collects or processes personal data | Community Terms §4.4 | | No fake activity or extra accounts | Analytics & rankings | ### 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 🧠 ![Side-by-side comparison: a cluttered hero with lorem ipsum, mixed fonts and a discount sticker versus a calm architecture-studio hero with one headline, one primary button and a full-bleed timber house photo](images/hero-good-vs-bad.webp) *Figure: Hero quality bar, DON'T vs DO — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* | Area | ❌ Don't | ✅ Do | |---|---|---| | Copy | Lorem ipsum, "Welcome to our website" | One niche-specific promise in ≤ 8 words + one supporting line | | Type | 3–5 families, script fonts on body copy | 1–2 families from the text-style scale (7.3) | | CTAs | Three competing button styles | One `Button/Primary` + one secondary/text link | | Imagery | Busy stock photo with text on top, low contrast | One art-directed image; text sits on a clean surface (contrast ≥ 4.5:1) | | Promo | "20% OFF" stickers or "Buy this template" banners in the template | No ads/promos inside the template ✅ (4.2 Support) | | Spacing | Eyeballed gaps | Spacing scale only (7.4) | ### 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 ✅ | | **Free content** — Limited Commercial License | **Paid content** — Single-Use Commercial License | |---|---|---| | Commercial use | ✅ | ✅ | | Client work | ✅ if incorporated into a broader end product | ✅ within **one** Permitted Project | | Number of projects | Own projects | **One (1) end product/project** | | Resell / redistribute / standalone | ❌ | ❌ | | Create competing templates/assets | ❌ | ❌ | | Repost on competing marketplaces | ❌ | ❌ | 🧠 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) | Asset | Safe | Risky / avoid | |---|---|---| | **Fonts** | Google Fonts (via Framer's Google tab), Fontshare fonts (Framer's Fontshare tab), Inter/Inter Display ✅ (all built into Framer) | Uploading paid or commercial fonts into a template you redistribute. Buyers would get the font file without a license. If you must use one, use a free fallback and tell buyers how to license and swap | | **Photos** | Your own photography; licensed stock whose terms allow use in redistributed templates; AI images where the tool's terms grant commercial rights | Editorial-only stock; photos of recognizable people without model releases; client photos without written permission ✅ (Framer requires permission for client work) | | **AI images** | Generic scenes, objects, abstract art; keep a record of the tool and its terms | Lookalikes of real people, brands, logos, copyrighted characters | | **Icons** | Framer's built-in icon sets (e.g., Phosphor, Material, Feather, available in Framer), MIT/ISC/OFL icon libraries, your own SVGs | Icon packs with "no redistribution" clauses | | **Logos (social proof strips)** | Fictional logos you designed | Real company logos (implies endorsement, trademark risk) | | **Video** | Your own footage, properly licensed stock, AI video with commercial rights | Music tracks without sync rights | | **3D / Spline / Lottie** | Your own, or CC0/licensed with redistribution rights | Marketplace assets limited to "end product" use | | **Code** | Your own; MIT/Apache with notices kept | GPL code inside components (license contagion), copied paid components | | **Third-party Framer components** | Your own, or free components whose license allows inclusion | Paid Marketplace components (buyers didn't license them). Under the paid license, buyers may not redistribute them, and you can't either | ⚠️ 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 ✅. | Element | Convention | Example | |---|---|---| | Section | `Section / [Purpose]` | `Section / Hero`, `Section / Testimonials` | | Container (max-width wrapper) | `Container` | `Container` | | Stack | `[Purpose] Stack` | `Heading Stack`, `CTA Stack` | | Grid | `[Purpose] Grid` | `Features Grid` | | Text | Its role | `Heading`, `Subheading`, `Body`, `Eyebrow`, `Label` | | Image | `Image / [Subject]` | `Image / Team Photo` | | Component (master) | `[Category]/[Name]` | `Button/Primary`, `Card/Project`, `Nav/Main` | | Variant | State or size, Title Case | `Default`, `Hover`, `Pressed`, `Mobile`, `Open` | | Component property | Plain-English, buyer-facing | `Label`, `Link`, `Show Icon`, `Image` | 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 🧠 ![Two layers panels: the left full of default names like Frame 23 and Rectangle 7, the right a clean tree with Section / Hero, Container, Heading Stack, Eyebrow, Heading, CTA Stack and Button/Primary](images/layer-naming-before-after.webp) *Figure: Layers panel before and after naming — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* 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: | ❌ Don't | ✅ Do | Why | |---|---|---| | `Frame 23`, `Frame 23 copy` | `Section / Pricing`, `Pricing Grid` | Buyers and the Agent can find things | | `btn-new-FINAL` | `Button/Primary` | Groups into the `Button` folder | | `Text` ×40 | `Heading`, `Body`, `Label` | Role is obvious in the tree | | `img` | `Image / Founder Portrait` | Says what to replace | | `Nav` + hidden `Nav 2` | `Nav Desktop` / `Nav Mobile` | Breakpoint-hidden layers stay readable | | Variant `Variant 3` | `Mobile Open` | Variants read as states | ### 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): | Style name | Use | |---|---| | `Brand/Primary` | Main accent, primary buttons, links | | `Brand/Primary Hover` | Hover state of primary (or use opacity) | | `Brand/On Primary` | Text/icons on primary fills | | `Surface/Background` | Page background | | `Surface/Raised` | Cards, panels | | `Surface/Inverse` | Dark/inverse sections | | `Text/Primary` | Headings, primary text | | `Text/Secondary` | Body, muted text | | `Text/Tertiary` | Captions, meta | | `Text/Inverse` | Text on inverse surfaces | | `Border/Default` | Dividers, card borders | | `Border/Strong` | Inputs, focused borders | | `State/Success`, `State/Error` | Form feedback | - **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 ![The same pricing card shown in light and dark mode with matching token rows such as Surface/Background, Text/Primary and Brand/Primary holding different values per mode](images/light-dark-color-styles.webp) *Figure: One set of semantic color styles, two appearances — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* 🧠 Example token sheet (values are just a starting point; the names are what matter): | Style | Light | Dark | Check | |---|---|---|---| | `Surface/Background` | `#FAF8F5` | `#121212` | — | | `Surface/Raised` | `#FFFFFF` | `#1C1C1E` | Visible edge vs. background (add `Border/Default` if not) | | `Text/Primary` | `#141414` | `#F4F2EE` | ≥ 4.5:1 on both surfaces | | `Text/Secondary` | `#57534E` | `#A8A29E` | ≥ 4.5:1 on Background **and** Raised | | `Brand/Primary` | `#1F3A2E` | `#9FD3B5` | `Brand/On Primary` text ≥ 4.5:1 on it | | `Border/Default` | `#E7E2DA` | `#2C2C2E` | Decorative only | | `Border/Strong` | `#A8A29E` | `#6B6B70` | ≥ 3:1 for inputs/focus (UI boundary) | 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 ✅: | Style | Tag | Desktop | Tablet | Phone | Line height | Use | |---|---|---|---|---|---|---| | `Display` (H0) | h1 | 80–112 | 64–80 | 44–56 | 1.0–1.05 | Hero only | | `H1` | h1 | 56–64 | 48 | 36–40 | 1.05–1.1 | Page titles | | `H2` | h2 | 40–48 | 36 | 28–32 | 1.1–1.15 | Section titles | | `H3` | h3 | 28–32 | 26 | 22–24 | 1.2 | Card/sub-section titles | | `H4` | h4 | 22–24 | 20 | 20 | 1.25 | Small headings | | `H5`/`H6` | h5/h6 | 18/16 | 18/16 | 16/15 | 1.3 | Rare | | `Body L` | p | 20 | 18 | 18 | 1.5 | Lead/intro | | `Body` | p | 16–18 | 16–17 | 16 | 1.55–1.65 | Main copy | | `Body S` / `Body M` | p | 14 | 14 | 14 | 1.5 | Meta, captions | | `Label`/`Eyebrow` | p | 12–14, uppercase optional, +tracking | same | same | 1.2 | Tags, eyebrows | | `Button` | p | 15–16, medium/semibold | same | same | 1 | Buttons only | - 🧠 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. ![Typography specification board showing Display, H1, H2, H3, Body and Label sizes in Desktop, Tablet and Phone columns](images/type-scale-breakpoints.webp) *Figure: One text-style scale with L / M / S breakpoint values — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* 🧠 A concrete scale you can paste into a brief (px; line height as a multiplier): | Style | L (Desktop) | M (Tablet) | S (Phone) | Line height | Letter spacing | |---|---|---|---|---|---| | `Display` | 96 | 72 | 48 | 1.0 | −0.03em | | `H1` | 60 | 48 | 38 | 1.05 | −0.02em | | `H2` | 44 | 36 | 30 | 1.1 | −0.02em | | `H3` | 30 | 26 | 22 | 1.2 | −0.01em | | `H4` | 22 | 20 | 20 | 1.25 | 0 | | `Body L` | 20 | 18 | 18 | 1.5 | 0 | | `Body` | 17 | 17 | 16 | 1.6 | 0 | | `Body S` | 14 | 14 | 14 | 1.5 | 0 | | `Label` | 13 | 13 | 12 | 1.2 | +0.06em, uppercase | | `Button` | 15 | 15 | 15 | 1.0 | 0 | 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** | Token | Desktop | Tablet | Phone | Use | |---|---|---|---|---| | Section padding (Y) | 120–160 | 96 | 64–80 | Vertical rhythm between sections | | Section padding (X) | 40–64 | 32 | 16–20 | Page gutters | | Block gap | 48–80 | 48 | 32–40 | Between heading group and content | | Card padding | 24–40 | 24–32 | 20–24 | Inside cards | | Stack gap (text) | 12–24 | 12–20 | 8–16 | Heading → body → CTA | | Grid gap | 24–32 | 20–24 | 16 | Card grids | - ⚠️ 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 ![Annotated diagram of a section: full-width band, centered 1200px container, heading stack and three-column features grid with redlines for 120 vertical padding, 40 gutters, 64 block gap and 24 grid gap](images/section-container-anatomy.webp) *Figure: Section / Container anatomy with spacing redlines — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* | Layer | Layout | Width | Height | Padding / Gap (Desktop → Tablet → Phone) | |---|---|---|---|---| | `Section / Features` | Stack, vertical, center | Fill (`1fr`) | Fit | Padding 120/40 → 96/32 → 64/20 | | `Container` | Stack, vertical | Fill, **max 1200** | Fit | Gap 64 → 48 → 40 | | `Heading Stack` | Stack, vertical | Fill, **max 720** | Fit | Gap 16 → 16 → 12 | | `Features Grid` | Grid, 3 cols → 2 → 1 | Fill | Fit | Gap 24 → 20 → 16 | | `Card/Feature` | Stack, vertical | Fill (`1fr`) | Fit (or Fill to equalize) | Padding 32 → 28 → 24, gap 12 | ### 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. | Breakpoint | Active from | Typical container | Grid columns | Nav | What usually changes | |---|---|---|---|---|---| | Desktop (primary) | 1200px | 1200 max | 3–4 | Full links + CTA | — (source of truth) | | Tablet | 810px | Fill, 32 gutters | 2 | Fewer links or hamburger | Grid columns, section padding, some Stack directions | | Phone | 390px (renders down to 0) | Fill, 16–20 gutters | 1 | Hamburger (`Mobile Closed/Open`) | Stack direction, type (via text-style S), hide decorative art | | Large (optional) | 1440px+ | 1360–1440 | 4 | Same as Desktop | Only if the composition really changes | ![The same studio home page on desktop at 1200, tablet at 810 and phone at 390 with three, two and one column project grids](images/responsive-trio.webp) *Figure: Responsive trio at Framer's default breakpoint widths — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* ### 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 🧠 | Situation | Width | Height | |---|---|---| | Section | Fill (`1fr`) | Fit content | | Container | Fill + **max width** (e.g., 1200) | Fit content | | Text | Fill (or fixed max for line length) | Fit content (auto-height) | | Card in grid | Fill (`1fr`) | Fit content (or Fill to equalize rows) | | Button | Fit content | Fit content | | Image | Fill, with aspect ratio locked | Fixed ratio or Fill of a sized parent | | Hero full-screen | Fill | **min-height** 100vh (not fixed 100vh) on desktop. Fit content on phone | - 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 ![Two phones at 320px: one with content overflowing, clipped headline and squeezed buttons, the other with a single stacked column, wrapped headline and full-width 44px buttons](images/mobile-overflow-dont-do.webp) *Figure: Phone overflow, DON'T vs DO — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* Common overflow causes and fixes 🧠: | Symptom at 320px | Usual cause | Fix | |---|---|---| | Horizontal scrollbar | A child with a fixed width (e.g., 400px image or card) | Width Fill + max width; lock aspect ratio | | Clipped headline | Long unbreakable word at Display size | Smaller S value in the text style; text balance on | | Squeezed button row | Horizontal Stack with no phone plan | Phone override: Stack direction vertical, buttons Fill | | Section wider than screen | Absolute-positioned decoration sticking out | Parent overflow hidden, or hide the decoration on phone | | Marquee pushes layout | Ticker without clipping | Parent overflow hidden | 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 ![Matrix of Primary, Secondary and Ghost buttons across Default, Hover, Pressed, Focus and Disabled states](images/button-variant-states.webp) *Figure: Button/Primary, Secondary, Ghost × five states — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* | State | Visual change 🧠 | Transition 🧠 | |---|---|---| | Default | Base fill from `Brand/Primary` | — | | Hover | Fill `Brand/Primary Hover` (or −8% lightness), optional icon nudge 2–4px | 150–200ms ease-out | | Pressed | Scale 0.97–0.98 | 100ms | | Focus | 2px outline in `Border/Strong` or brand, 2px offset, never removed | Instant | | Disabled | 40–50% opacity, no hover, `not-allowed` cursor | — | ![Nav/Main component showing Desktop, Tablet, Mobile Closed and Mobile Open variants for a fictional studio](images/nav-variants.webp) *Figure: Nav/Main variants — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* 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. | Component | Expose | Don't expose | |---|---|---| | Button | `Label`, `Link`, `Variant`, `Show Icon`, `Icon` | Padding, radius (system-level) | | Project card | `Image`, `Title`, `Category`, `Link` (or bind to CMS) | Hover animation internals | | Testimonial | `Quote`, `Name`, `Role`, `Avatar` | Layout | | Section header | `Eyebrow`, `Title`, `Subtitle`, `Show Eyebrow`, `Align` | Font sizes | | Pricing card | `Plan`, `Price`, `Period`, `Features` (text), `Highlighted` (boolean), `CTA Label`, `CTA Link` | | 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 ![A selected pricing card on the canvas with a properties panel listing Variant, Plan, Price, Period, Features, Highlighted toggle, CTA Label and CTA Link](images/component-properties-panel.webp) *Figure: Buyer-facing component properties — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* ![Pricing section with Monthly/Yearly toggle and three plan cards, the middle one highlighted as Most popular](images/pricing-section.webp) *Figure: Pricing section built from one Card/Pricing component with Highlighted = on for the middle plan — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* | ❌ Property name | ✅ Property name | Type | |---|---|---| | `txt1` | `Title` | Text | | `isVis` | `Show Badge` | Boolean (toggle) | | `bgImg` | `Image` | Image | | `href` | `Link` | Link | | `v` | `Style` (Primary / Secondary / Ghost) | Variant | | `hl` | `Highlighted` | Boolean | 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 ![Top row of mismatched interior photos with clashing color grades and crops; bottom row of photos sharing one warm grade and identical 4:3 crops](images/imagery-consistency.webp) *Figure: Imagery: inconsistent vs one story — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* 🧠 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 🧠 | Collection | Core fields | |---|---| | **Projects/Work** | Title, Slug, Client, Category (option or reference), Year, Cover Image, Cover Alt, Summary (plain text), Body (rich text), Gallery (images), Featured (toggle), SEO Title, SEO Description | | **Blog/Posts** | Title, Slug, Date, Author (reference), Category (reference), Cover Image, Cover Alt, Excerpt, Body, Featured, SEO Title, SEO Description | | **Authors/Team** | Name, Slug, Role, Photo, Photo Alt, Bio, Social links | | **Categories** | Name, Slug, Description, Color (if used) | | **Services/Features** | Title, Slug, Icon, Summary, Body, Order (number) | | **Jobs/Careers** | Title, Department, Location, Type, Apply Link, Body | | **Testimonials** (optional) | Quote, Name, Role, Company, Avatar | 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 ![Blog index page with category tabs and a three-column post grid next to the matching article detail page with cover image, author, narrow body column and related posts](images/cms-blog-index-detail.webp) *Figure: Blog index + detail from one Posts collection — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* ![Projects page with search, category dropdown and toggle chips showing filtered results with pagination, beside the same page showing a 'No projects match these filters' empty state with a Clear filters button](images/dynamic-filters-empty-state.webp) *Figure: Dynamic Filters with designed empty state — AI-generated illustrative example (Magnific), not a real template or Framer screenshot.* 🧠 Example field schema for a **Posts** collection (types as named in Framer's CMS field picker; check names in your version ⚠️): | Field | Type | Required | Bound to | |---|---|---|---| | Title | Plain text | ✅ | `h1`, card title, `{{Title}}` meta | | Slug | Slug (auto from Title) | ✅ | URL `/blog/:slug` | | Date | Date | ✅ | Card meta, article meta | | Category | Option (or Reference to Categories) | ✅ | Tag, Dynamic Filter tabs | | Author | Reference → Authors | — | Byline (hide if empty) | | Cover Image | Image | ✅ | Card, hero, social image | | Cover Alt | Plain text | ✅ | Image alt | | Excerpt | Plain text (≤ 160 chars) | ✅ | Card, `{{Description}}` fallback | | Body | Formatted text | ✅ | Article body (max-width ~720) | | Featured | Toggle | — | Home "Featured" list filter | | SEO Title / SEO Description | Plain text | — | Page settings meta (fallback to Title/Excerpt) | 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 🧠 | Effect | Where | Spec | |---|---|---| | Appear (fade + 16–24px rise) | Hero, section entries | 400–700ms, ease-out, stagger 60–100ms, once | | Hover | Buttons, cards, links | 150–250ms; scale ≤ 1.03, or color/underline/image zoom ≤ 1.05 | | Press | Buttons | Scale 0.97–0.98 | | Scroll-triggered | Below-the-fold reveals | Trigger once, short distance | | Scroll-linked (parallax/transform) | 1–2 signature moments max | Subtle. Disabled under reduced motion | | Page transitions | Via layout template | ≤ 400ms, simple fade/slide | | Loop/marquee | Logo strips | Slow. Pause off-screen if custom code | | Custom cursor | Rarely | Disabled with reduced motion. Never hides the system cursor on touch | 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 `