MARGIN — Buyer Guide

Third-party material and licence texts: MARGIN — Third-party Notices

Before you start

MARGIN is a demo template for a small interior and brand design studio. Every name, address, project, article and policy text in it is sample content. Replace it with your own before you publish. Look for "Demo / Sample", "(sample)", "example.com" and "Studio Name" — these mark the text to change.

What you need

• A Framer account. Publishing on your own domain, form limits and CMS limits depend on your Framer plan — check Framer's current pricing page to see what each plan includes before you start.
• When you open the template link, Framer makes a copy (remix) in your workspace. Your copy does not receive later updates from the author.

Need help? Email support is included for 6 months from your purchase date. See "Licence, support and refunds" at the end of this guide.

The first 15 minutes

Then work through Works, Journal, photos and the Privacy page at your own pace.

Setup order after you remix

Work through these steps in order. Each step points to the section with the details.

1. Names and footer — studio name, tagline and footer line in the Site Header, Site Footer and Main Layout (section 1).
2. Colours and fonts — colour styles and text styles (section 1).
3. Site settings — site title, description, social image, favicon and Apple touch icon; remove "(Demo)" from page titles (section 6).
4. Contact details — replace hello@example.com, the sample address and opening hours, then link your real address with mailto: (section 3).
5. Contact form — choose where messages go and set the Thank you page to /thank-you (section 3).
6. Privacy page — rewrite it for your own business (section 5).
7. Works and Journal — replace the sample items, photos and alt text, and adjust the categories (sections 2 and 4).
8. FAQ — edit the questions and answers; check the FAQ fonts if you changed text styles (section 8).
9. Notices — keep the third-party notices with your project (section 10).
10. Publish and test — publish to the free Framer subdomain first and go through "Before you publish" at the end of this guide (section 7).

1. Brand basics

• Colours: Assets → Colors. The site uses a small set of colour styles: Background, Background Secondary, Text, Text Secondary, Accent, On Accent, Border, Input Border, Notice, Overlay. Changing a style updates every page.
  • Input Border is the outline of the contact form fields and the category filters on Works and Journal. It is darker than Border (used for dividers) so the fields stay easy to see (about 3:1 against white). If you change it, keep it clearly visible against the background.
  • Keep body text at a contrast of 4.5:1 or more against its background.
• Fonts: Assets → Text Styles. The template uses Noto Serif JP and Noto Sans JP (Google Fonts, SIL Open Font License 1.1). If you change fonts, make sure you have a web licence for them.
• Logo and name: "MARGIN" in the header, footer and menu is text. Edit it in the Site Header, Site Footer and Main Layout (menu).
• Footer line: Replace "© 2026 Studio Name. Demo / Sample content for preview only." in the Site Footer.
• Buttons and CTAs: The "Contact" buttons and the CTA sections are components. Change the label and link in the right-hand panel when an instance is selected.

2. Photos

• Fixed photos (Home hero, Home about, About story): select the image layer and replace the fill. Write a short alt text that describes the photo.
• CMS images have their own alt text. When you replace a photo in a Works or Journal item, update its alt text too.
• Works and Journal photos are in the CMS (section 4): Thumbnail, Hero, Gallery, Social Image (Works) and Cover, Social Image (Journal).
• The demo uses 33 photos in total: 3 fixed images, 8 Works thumbnails, 4 Works heroes, 12 gallery images and 6 Journal covers. Some are crops of the same original, so replace them as a set if you want a consistent look.
• Recommended sizes: Thumbnail 1:1 (1200 × 1200), Hero about 2.16:1 (2400 × 1111), Gallery and Journal cover 3:2 (1800 × 1200), Social image 1200 × 630.
• If an image field is empty, a grey frame with "PHOTO PLACEHOLDER / NOT FOR RELEASE" appears. Fill the field, or remove the item, before publishing.
• Demo photo licence: see section 10. Do not offer the demo photos (originals or crops) as separate downloads. For your own business, we recommend your own photography.

3. Contact form (required before publishing)

The demo form is not connected. Messages go nowhere until you set it up. The author has not tested sending from your copy — you must test it yourself.

1. Select the form on the Contact page and open its settings.
2. Choose where submissions go (for example your email address, or an integration you use). Use an address you check.
3. Set the page shown after a successful send to /thank-you (this is not set in the demo).
4. Publish to a test address and send a test message to yourself. Check that it arrives (including the spam folder) and that the Thank you page opens.
5. Also try: send with the consent box unticked, and with an invalid email. The form should not send.
6. Edit the "Demo form" note next to the form, and the Thank you page text ("In this demo no form destination is connected…").

Notes:

• Name, Email, Message and the consent checkbox are required. Framer's native form does not show a message under each field; the button shows the incomplete, sending, success and error states.
• Check how spam protection and submission limits work for your plan and destination in Framer's documentation.
• Email links: the sample address hello@example.com is plain text on purpose (it is not a real inbox). After you replace it with your own address on About, Contact and Privacy, select the text and add a link to mailto:you@yourdomain.com so visitors can write to you directly.

4. CMS: Works and Journal

• Works (8 sample items): Title, Category, Summary, Featured, Sort Order, Client, Discipline, Year, Location, Overview, Challenge, Approach, Outcome, images, SEO Title, SEO Description. Optional rows (Client, Location, Challenge…) hide automatically when empty.
• Works categories: Interior, Architecture, Branding, Product, Photography. Rename or remove the categories you do not use, and update the Services page and the Works page description to match.
• Journal (6 sample items): Title, Category (Notes, News, Process), Cover, Published Date, Excerpt, Body, Featured, SEO Title, SEO Description, Social Image.
• Items with long titles (Journal Sample 05) show how titles wrap. Delete or rename them.
• Previous / Next on detail pages follow the order of the collection.
• Keep the slug short and lowercase. Changing a slug changes the page URL.
• Your Framer plan sets limits on CMS collections and items. Check the current limits before you add many items.

5. Privacy Policy

The Privacy page is a layout example, not a policy. It is not legal advice and does not describe how you, Framer, or the template author handle data.

• Rewrite every section to match what your site really does: what the form collects, where submissions are sent, which analytics or cookies you use, which third-party services process data, how long you keep messages, and how people can contact you.
• Remove statements you cannot keep (for example "We do not sell your information" must be true for your business).
• Replace "Last updated: Month DD, YYYY (sample)" with the real date.
• If you are unsure, ask a professional who knows the laws that apply to you.

日本で使う場合の注意（Japan-friendly caution）

• このテンプレートのプライバシーポリシーは英語のレイアウト見本です。日本の個人情報保護法などの要件を満たすことは保証しません。
• 日本の利用者向けに公開する場合は、日本語のポリシーを用意し、取得する情報・利用目的・第三者提供・委託先（フォームの送信先、ホスティング、解析ツールなど）・問い合わせ窓口を、実際の運用に合わせて書いてください。
• 必要に応じて専門家に確認してください。

6. SEO and social sharing

• Site Settings: the site title is "MARGIN (Demo)" and the description is sample text. Replace both.
• Social image and favicon: the demo includes a simple MARGIN social image (1200 × 630, text only, says "Demo content"), a favicon (512 × 512, "M") and an Apple touch icon (180 × 180). Replace all three in Site Settings with your own brand: social image 1200 × 630 PNG or JPG, favicon a square PNG (512 × 512 works well), Apple touch icon 180 × 180 PNG.
• Pages: each page has its own title and description (Page settings). Replace the sample text and remove "(Demo)" from every title, including the Works and Journal detail patterns {{Title}} — MARGIN (Demo).
• Works and Journal detail pages use the item's Summary / Excerpt as the description and the Social Image field for sharing.
• The Thank you and 404 pages are set to "noindex" on purpose.
• After publishing, check how a link looks when shared (for example with a social preview tool).

7. Domain and publishing

You publish your copy yourself.

• Publish first to the free Framer subdomain and test every page, the menu, the form and the 404 page.
• Connect your own domain in Site Settings → Domains (requires a paid Framer site plan; check Framer's current plans).

8. Accessibility features included

• Visible focus ring for keyboard users on links, buttons, cards, the menu and FAQ.
• The mobile menu keeps keyboard focus inside while open and returns it to the menu button when it closes.
• FAQ items are buttons inside headings. They open with Enter or Space, and screen readers are told whether each item is expanded or collapsed. Several items can be open at the same time.
• Form fields have visible labels and a high-contrast outline (Input Border).
• Site Settings has "reduced motion" turned on, so visitors who ask their device for less motion see fewer effects.
• These use two small code files. You do not need to edit them:
  • MarginA11y.tsx (overrides) — focus rings and the mobile menu. If you rename or delete it, the focus rings and keyboard support stop working.
  • AccessibleFaqItem.tsx — the FAQ item on the Process page.

Editing the FAQ

• Select an FAQ item on the Process page and edit Question and Answer in the right panel. Open sets whether the item starts open.
• To add a question, duplicate an existing item. To remove one, delete it.
• Colours follow the Text, Text Secondary, Border and Accent colour styles.
• The FAQ fonts are set in each item (Question Font, Answer Font). They do not follow the Item Title / Intro Text text styles, so if you change those styles, change the FAQ fonts too. On Tablet the answer text is 14px, as in the rest of the site.

9. Known limitations

• FAQ fonts: the FAQ items do not follow the text styles (see section 8).
• FAQ links: the "FAQ" links in the footer, the mobile menu, Services and Contact go to /process#faq. faq is the ID of the FAQ section on the Process page. If you rename the Process page, or delete or rename that section, update these links. Framer's editor preview may open the top of the page instead of the FAQ; check the jump on your published site.

10. Credits and licences

• Notices: the full list of third-party material and licence texts is in the Third-party notices page linked from this guide. Framer does not add this notice to your copy automatically; keep a copy with your project.
• Template: your use is covered by the Framer Marketplace licence for the template you bought (one end product or project; see Framer's Community Terms).
• Fonts: Noto Sans JP, Noto Serif JP — SIL Open Font License 1.1 (Google Fonts).
• Demo photos — Pexels (https://www.pexels.com/license/ and https://www.pexels.com/terms-of-service/). The photos are part of the template's demo content. We recommend replacing them with your own brand photography. If you keep them, use them only as part of the website you build from this template, under the Pexels License. For any other use, check the original photo page and the current Pexels License yourself. If you keep them:
  • do not sell the photos on their own or redistribute them on stock or wallpaper sites;
  • do not suggest that people, brands or places in them endorse you;
  • do not use them in a logo, trademark or business name.
  • Pexels does not guarantee that people, buildings, furniture designs, artworks or logos shown in a photo are cleared. Check this yourself for commercial use, or replace the photo.
  • A list of the photos and photographers is available from the template author on request.
  • Why the photos come with the template: when you open the template, Framer copies the whole site, so the demo photos come along as part of the pages and CMS items. They are not offered as separate downloads, and you should not download and redistribute them on their own.
• Icons — Phosphor Icons (built into Framer). Phosphor is released under the MIT License:

MIT License

Copyright (c) 2023 Phosphor Icons

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

(Source: https://github.com/phosphor-icons/core/blob/main/LICENSE)

Replace-before-launch checklist

Before you publish

Check these on your published test site (the free Framer subdomain), not only in the editor preview.

• No "Demo / Sample", "(sample)", "(Demo)", "Studio Name" or example.com text is left (search each page)
• The contact form sends a test message to your destination, it arrives, and the Thank you page opens
• The form does not send with an invalid email or with the consent box unticked
• Your email address is linked with mailto: on About, Contact and Privacy
• The Privacy page describes what your site really does, with the real date
• The mobile menu opens and closes, and every menu link works
• The "FAQ" links in the footer and the menu jump to the FAQ on the Process page
• Works and Journal: filters, "Show all", detail pages and Previous / Next work; no empty image frames ("PHOTO PLACEHOLDER")
• The 404 page appears for a wrong address
• Shared links show your own social image and favicon
• You kept a copy of the third-party notices with your project

Licence, support and refunds

• Licence: USD $20 — one licence for one website (one end product or project). Buy a licence for each site (Framer Community Terms).
• Support. Email support is included for 6 months from your purchase date. We aim to reply within 3 business days; this is a target, not a guarantee. Support covers help with the setup steps in the buyer guide and reproducible problems in the template itself. It does not cover custom design or development work on your site, setting up third-party services for you (such as form destinations, domains, payments or analytics), or adding new features. Contact support@jiguma.com.
• Refunds. Refund requests made within 14 days of purchase are eligible when MARGIN materially fails to work as described and we cannot resolve the issue, when you cannot access the template after payment and we cannot fix it, or in cases of duplicate purchase. A change of mind after accessing the remix is generally not eligible. This policy does not limit any rights you may have under applicable law or the payment provider's rules. Contact support@jiguma.com with your order details.
• When you write to us, please include your order details, what you expected, what happened, and the page and screen size (desktop, tablet or phone) where you saw it.

Third-party material and licence texts: MARGIN — Third-party Notices

Back to top · MARGIN · All templates