# Framebrick documentation

> Guides for every Framebrick template: remix it in Framer or install a code edition, edit the content, connect a headless CMS, publish, and use the components from a coding agent. The store is https://framebrick.co.

The store itself has its own list: https://framebrick.co/llms.txt.

## templates

- [Template guides](https://framebrick.co/docs/templates): Every Framebrick template with guides: search by name or filter by edition, then open the guides for the Framer, Next.js, Astro, HTML, Figma or AI prompt edition you use.

## Framer templates

- [Using a Framer template](https://framebrick.co/docs/framer): How every Framebrick template for Framer works: get your free copy, make it yours and publish it — step by step, with no code needed.
- [Edit CMS collections in a Framer template](https://framebrick.co/docs/framer/cms): Add, edit and remove blog posts, projects, services and other lists in a Framer template's CMS — collections, items and fields explained.
- [Edit text, images and sections in Framer](https://framebrick.co/docs/framer/content): Change the text, images, links and sections of a Framer template on the canvas, and check every breakpoint before you publish.
- [Framer forms: email, Sheets and webhooks](https://framebrick.co/docs/framer/forms): Send a Framer template's contact and newsletter forms to your email, a Google Sheet or a webhook, and test that submissions arrive.
- [Framer template FAQ and help](https://framebrick.co/docs/framer/help): Answers about Framebrick's Framer templates: where the copy went, updates, client work, code editions and where to get help.
- [Which Framer plan do you need?](https://framebrick.co/docs/framer/plans): What it costs to run a Framer template: the free plan, Basic and Pro compared, and how to check which one your template needs before you pay.
- [Publish a Framer site on your own domain](https://framebrick.co/docs/framer/publish): Put a Framer template online: publish on a free Framer address, then connect your own domain — the steps and how long DNS takes.
- [Remix a Framer template](https://framebrick.co/docs/framer/remix): Copy a Framebrick template into your own Framer workspace with its remix link — free and in under a minute. What to click, and what you get.
- [Framer SEO: titles, descriptions, images](https://framebrick.co/docs/framer/seo): Replace a Framer template's demo title, description, favicon and social image with your own, site-wide and page by page, including CMS pages.
- [Change colors and fonts in Framer](https://framebrick.co/docs/framer/styles): Rebrand a Framer template in minutes: change its color styles and text styles once in the Assets panel, and every page follows.

## AI tools

- [Use Framebrick with a coding agent](https://framebrick.co/docs/ai): Connect the Framebrick MCP server and add the registry, so Claude Code, Cursor, Codex or any MCP client can search, read and install our templates, components and blocks.
- [Framebrick Agent Skills](https://framebrick.co/docs/ai/agent-skills): Three short instruction files that teach a coding agent how to use Framebrick components, page blocks and templates. Free, installed with one command.
- [Connect Framebrick to Amp](https://framebrick.co/docs/ai/connect/amp): How to add the Framebrick MCP server to Amp, as Amp's own documentation describes it.
- [Connect Framebrick to Antigravity](https://framebrick.co/docs/ai/connect/antigravity): How to add the Framebrick MCP server to Antigravity, as Antigravity's own documentation describes it.
- [Connect Framebrick to Claude](https://framebrick.co/docs/ai/connect/claude): How to add the Framebrick MCP server to Claude, as Claude's own documentation describes it.
- [Connect Framebrick to Claude Code](https://framebrick.co/docs/ai/connect/claude-code): How to add the Framebrick MCP server to Claude Code, as Claude Code's own documentation describes it.
- [Connect Framebrick to Cline](https://framebrick.co/docs/ai/connect/cline): How to add the Framebrick MCP server to Cline, as Cline's own documentation describes it.
- [Connect Framebrick to Codex](https://framebrick.co/docs/ai/connect/codex): How to add the Framebrick MCP server to Codex, as Codex's own documentation describes it.
- [Connect Framebrick to Conductor](https://framebrick.co/docs/ai/connect/conductor): How to add the Framebrick MCP server to Conductor, as Conductor's own documentation describes it.
- [Connect Framebrick to Cursor](https://framebrick.co/docs/ai/connect/cursor): How to add the Framebrick MCP server to Cursor, as Cursor's own documentation describes it.
- [Connect Framebrick to Gemini CLI](https://framebrick.co/docs/ai/connect/gemini-cli): How to add the Framebrick MCP server to Gemini CLI, as Gemini CLI's own documentation describes it.
- [Connect Framebrick to GitHub Copilot](https://framebrick.co/docs/ai/connect/github-copilot): How to add the Framebrick MCP server to GitHub Copilot, as GitHub Copilot's own documentation describes it.
- [Connect Framebrick to Grok CLI](https://framebrick.co/docs/ai/connect/grok-cli): How to add the Framebrick MCP server to Grok CLI, as Grok CLI's own documentation describes it.
- [Connect Framebrick to JetBrains](https://framebrick.co/docs/ai/connect/jetbrains): How to add the Framebrick MCP server to JetBrains, as JetBrains's own documentation describes it.
- [Connect Framebrick to Kilo Code](https://framebrick.co/docs/ai/connect/kilo-code): How to add the Framebrick MCP server to Kilo Code, as Kilo Code's own documentation describes it.
- [Connect Framebrick to Lovable](https://framebrick.co/docs/ai/connect/lovable): How to add the Framebrick MCP server to Lovable, as Lovable's own documentation describes it.
- [Connect Framebrick to opencode](https://framebrick.co/docs/ai/connect/opencode): How to add the Framebrick MCP server to opencode, as opencode's own documentation describes it.
- [Connect Framebrick to other agents](https://framebrick.co/docs/ai/connect/other): How to add the Framebrick MCP server to Other agents, as Other agents's own documentation describes it.
- [Connect Framebrick to Replit](https://framebrick.co/docs/ai/connect/replit): How to add the Framebrick MCP server to Replit, as Replit's own documentation describes it.
- [Connect Framebrick to VS Code](https://framebrick.co/docs/ai/connect/vscode): How to add the Framebrick MCP server to VS Code, as VS Code's own documentation describes it.
- [Connect Framebrick to Windsurf](https://framebrick.co/docs/ai/connect/windsurf): How to add the Framebrick MCP server to Windsurf, as Windsurf's own documentation describes it.
- [Connect Framebrick to Zed](https://framebrick.co/docs/ai/connect/zed): How to add the Framebrick MCP server to Zed, as Zed's own documentation describes it.
- [Framebrick MCP server](https://framebrick.co/docs/ai/mcp): The Framebrick MCP server puts the library inside your coding agent: scored search over templates, components and page blocks, the real props, install commands and page plans.

## Headless CMS

- [Connect a headless CMS to a code template](https://framebrick.co/docs/cms): When a headless CMS helps, how Framebrick's Next.js, Astro and HTML editions are ready for one, and step-by-step guides to connect it.
- [Use a headless CMS with an Astro template](https://framebrick.co/docs/cms/astro): How every Framebrick Astro template loads its collections, and what changes with a headless CMS: loaders, schemas, rich text, images and rebuilds on publish.
- [Connect Directus to an Astro template](https://framebrick.co/docs/cms/directus-astro): Run Directus next to a Framebrick Astro template: editors publish in Directus' admin, and the static site rebuilds from it, instantly while you work.
- [Connect Directus to a Next.js template](https://framebrick.co/docs/cms/directus-nextjs): Run Directus next to a Framebrick Next.js template: editors publish in Directus' admin, and a Flow refreshes the site's pages a moment later.
- [Edit HTML templates without touching HTML](https://framebrick.co/docs/cms/html): The HTML edition has no admin panel. Your options when someone else needs to publish: edit the files, a visual editor, or the Astro and Next.js editions.
- [Use a headless CMS with a Next.js template](https://framebrick.co/docs/cms/nextjs): How every Framebrick Next.js template reads its content, and what changes with a headless CMS: one file to rewrite, rich text, images and fresh pages.
- [Connect Payload CMS to an Astro template](https://framebrick.co/docs/cms/payload-astro): Run Payload next to a Framebrick Astro template: editors publish in an admin, the static site rebuilds from it, and saves show up instantly in development.
- [Connect Payload CMS to a Next.js template](https://framebrick.co/docs/cms/payload-nextjs): Add Payload CMS to a Framebrick Next.js template: an admin at /admin, the demo content imported, and pages that update as soon as an editor saves.
- [Connect Sanity to an Astro template](https://framebrick.co/docs/cms/sanity-astro): Run Sanity Studio next to a Framebrick Astro template: editors publish in the Studio and the static site rebuilds from Sanity, instantly while you work.
- [Connect Sanity to a Next.js template](https://framebrick.co/docs/cms/sanity-nextjs): Add Sanity to a Framebrick Next.js template: Sanity Studio at /studio, the demo content imported, and pages that update when an editor publishes.
- [Connect Strapi to an Astro template](https://framebrick.co/docs/cms/strapi-astro): Run Strapi next to a Framebrick Astro template: editors publish in Strapi's admin, and the static site rebuilds from it, instantly while you work.
- [Connect Strapi to a Next.js template](https://framebrick.co/docs/cms/strapi-nextjs): Run Strapi next to a Framebrick Next.js template: editors publish in Strapi's admin, and a webhook refreshes the site's pages a moment later.

## Nitip

- [Nitip documentation](https://framebrick.co/docs/nitip): Digital marketing agency website template — documentation for the Framer, Figma, Next.js, Astro, HTML and AI Prompts editions.
- [Nitip documentation — Astro](https://framebrick.co/docs/nitip/astro): Nitip for Astro: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Nitip Astro](https://framebrick.co/docs/nitip/astro/changelog): All notable changes to the Nitip Astro template. Versions follow Semantic Versioning. Part of the Nitip Astro documentation.
- [Using a headless CMS — Nitip Astro](https://framebrick.co/docs/nitip/astro/cms): Nitip: Connecting a headless CMS works the same for every Framebrick Astro template. Loaders and schemas, rich text, images, rebuilding on publish, and…
- [Editing the content — Nitip Astro](https://framebrick.co/docs/nitip/astro/content): Nitip for Astro: All the words and images of the site live in src/content/. You edit plain JSON files — text in quotes, commas between entries — and the…
- [Design — Nitip Astro](https://framebrick.co/docs/nitip/astro/design): Nitip for Astro: The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a component.
- [Nitip Design System (Astro)](https://framebrick.co/docs/nitip/astro/design-system): Nitip for Astro: Reusable tokens and components for every page of the Nitip template. The published Framer template is the reference for look and behavior;…
- [Forms — Nitip Astro](https://framebrick.co/docs/nitip/astro/forms): Nitip for Astro: The Contact form and the career application form work as soon as you run the site: they validate, show a sending state, say "Thank you",…
- [Forms reference — Nitip Astro](https://framebrick.co/docs/nitip/astro/forms-reference): Nitip for Astro: The Contact form and the career application form work in one of three ways. You choose with environment variables (copy .env.example to…
- [Install and run — Nitip Astro](https://framebrick.co/docs/nitip/astro/install): Nitip for Astro: No database, no account, no paid service. The site builds to static files you can host anywhere.
- [Pages and sections — Nitip Astro](https://framebrick.co/docs/nitip/astro/pages): Nitip: A page is a small .astro file in src/pages/ that picks sections and hands them content. The file's path is its URL: src/pages/about.astro is /about. The…
- [Going live — Nitip Astro](https://framebrick.co/docs/nitip/astro/publish): Nitip for Astro: The demo content is there to be replaced: leaving "Nitip", the London address or the sample case studies on a live site is the most common…
- [Troubleshooting — Nitip Astro](https://framebrick.co/docs/nitip/astro/troubleshooting): Nitip: npm install fails, or the site behaves oddly after an update. Delete node_modules/, .astro/ and package-lock.json, then npm install again. Check node…
- [Nitip documentation — Figma](https://framebrick.co/docs/nitip/figma): The Nitip design as an editable Figma file: every page at desktop, tablet and phone size, the colour and text styles, and the components the pages are built…
- [Changelog — Nitip Figma](https://framebrick.co/docs/nitip/figma/changelog): All notable changes to the Nitip Figma template. Versions follow Semantic Versioning. Part of the Nitip Figma documentation.
- [Components — Nitip Figma](https://framebrick.co/docs/nitip/figma/components): Nitip for Figma: The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the Components…
- [Editing the design — Nitip Figma](https://framebrick.co/docs/nitip/figma/editing): Nitip for Figma: Double-click a text layer and type. Its style (size, weight, line height) stays as it is. If a heading grows longer than the demo copy,…
- [Getting started — Nitip Figma](https://framebrick.co/docs/nitip/figma/getting-started): Your purchase gives you the Nitip Figma file in one of two forms. Either way the copy is yours: edit it freely and invite your team. A free Figma plan is…
- [From design to website — Nitip Figma](https://framebrick.co/docs/nitip/figma/handoff): Nitip: A Figma file is a design, not a website. When yours is ready, there are four ways to turn it into one.
- [Colours and text styles — Nitip Figma](https://framebrick.co/docs/nitip/figma/styles): Nitip for Figma: Every colour and every piece of text in the file uses a style. Change a style and every frame, component and state that uses it updates —…
- [Troubleshooting — Nitip Figma](https://framebrick.co/docs/nitip/figma/troubleshooting): Nitip: "Missing fonts" when opening the file. Install Inter (Regular, Medium, Semi Bold, Bold) on your computer, then reopen the file. In the Figma desktop…
- [Nitip documentation — Framer](https://framebrick.co/docs/nitip/framer): Nitip for Framer is the original, free edition of the template: a complete digital marketing agency website you edit visually and publish from Framer — no…
- [The CMS — Nitip Framer](https://framebrick.co/docs/nitip/framer/cms): Nitip: Services, projects, blog posts, open roles, testimonials and tools live in Framer's CMS. Add an item and its detail page, its card on the overview…
- [Design — Nitip Framer](https://framebrick.co/docs/nitip/framer/design): Nitip for Framer: Colours and text in Nitip come from styles. Change a style and every page, component and state that uses it follows. Find them in the left…
- [Forms — Nitip Framer](https://framebrick.co/docs/nitip/framer/forms): Nitip has two forms: Contact (on /contact) and the application form on every role page (/careers/…). Both are Framer forms: they validate, show a sending…
- [Getting started — Nitip Framer](https://framebrick.co/docs/nitip/framer/getting-started): Nitip for Framer is free. You get it as a remix link: opening it copies the whole project — pages, CMS, styles, components — into your own Framer workspace.
- [Going live — Nitip Framer](https://framebrick.co/docs/nitip/framer/publish): Nitip: Everything to do before and after you press Publish: your site's title, description and images, going live on a free Framer address or your own…
- [Questions and answers — Nitip Framer](https://framebrick.co/docs/nitip/framer/troubleshooting): Is Nitip for Framer really free? Yes. Copy it, build your site with it and publish it. What you may do with the template itself is set by the terms on the…
- [Nitip documentation — HTML](https://framebrick.co/docs/nitip/html): Nitip for HTML: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Nitip HTML](https://framebrick.co/docs/nitip/html/changelog): All notable changes to the Nitip HTML template. Versions follow Semantic Versioning. Part of the Nitip HTML documentation.
- [Editing without touching HTML — Nitip](https://framebrick.co/docs/nitip/html/cms): Nitip: The HTML edition is deliberately simple: the content is written into the pages, and you edit files (Editing the site). There is no admin panel.
- [Design — Nitip HTML](https://framebrick.co/docs/nitip/html/design): Nitip: The pages are styled with Tailwind CSS classes written in the HTML (class="rounded-full px-3.5 py-2 bg-ink text-white"). assets/css/style.css contains…
- [Editing the site — Nitip HTML](https://framebrick.co/docs/nitip/html/editing): Nitip: Double-click index.html — the site opens in your browser and every link works, straight from the folder. To see it exactly as a host serves it (and…
- [Forms — Nitip HTML](https://framebrick.co/docs/nitip/html/forms): Nitip for HTML: The Contact form and the job application form validate, show a sending state, say "Thank you", keep what the visitor typed when something…
- [Going live — Nitip HTML](https://framebrick.co/docs/nitip/html/publish): Nitip for HTML: Leaving "Nitip", the London address or the sample case studies on a live site is the most common mistake — search the folder for "Nitip" one…
- [Troubleshooting and questions — Nitip HTML](https://framebrick.co/docs/nitip/html/troubleshooting): Nitip for HTML: The page looks unstyled. The browser can't find assets/css/style.css. Pages inside a folder (blog/…) link to it as ../assets/css/style.css;…
- [Nitip documentation — Next.js](https://framebrick.co/docs/nitip/nextjs): Nitip for Next.js: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/changelog): All notable changes to the Nitip Next.js template. Versions follow Semantic Versioning. Part of the Nitip Next.js documentation.
- [Using a headless CMS — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/cms): Nitip: Connecting a headless CMS works the same for every Framebrick Next.js template. The approach, rich text, images, keeping pages fresh, and step-by-step…
- [Editing the content — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/content): Nitip for Next.js: All the words and images of the site live in src/content/. You edit plain TypeScript files — quotes around text, commas between items —…
- [Design — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/design): Nitip for Next.js: The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a component.
- [Nitip Design System — Next.js](https://framebrick.co/docs/nitip/nextjs/design-system): Nitip for Next.js: Reusable tokens and components for every page of the Nitip template. The published Framer template is the reference for look and…
- [Forms — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/forms): Nitip for Next.js: The Contact form and the career application form work as soon as you run the site: they validate, show a sending state, say "Thank you",…
- [Forms reference — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/forms-reference): Nitip for Next.js: The Contact form and the career application form share one pipeline. The forms, their states (sending, "Thank you", "Something went…
- [Install and run — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/install): Nitip for Next.js: No database, no account, no paid service. The site builds to static pages. Part of the Nitip Next.js documentation.
- [Pages and sections — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/pages): Nitip for Next.js: A page is a small file that picks sections and hands them content. src/app/services/page.tsx is the whole Services page.
- [Going live — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/publish): Nitip for Next.js: The demo content is there to be replaced: leaving "Nitip", the London address or the sample case studies on a live site is the most…
- [Troubleshooting — Nitip Next.js](https://framebrick.co/docs/nitip/nextjs/troubleshooting): Nitip for Next.js: npm install fails, or the site behaves oddly after an update. Delete node_modules/ and package-lock.json, then npm install again. Check…
- [Nitip documentation — AI Prompts](https://framebrick.co/docs/nitip/prompt): Nitip for AI Prompts: Prompts that build the Nitip website with an AI tool — a chat builder such as Lovable, Bolt, v0 or Replit, or a coding agent such as…
- [Changelog — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/changelog): Nitip for AI Prompts: All notable changes to the Nitip AI prompt pack. Versions follow Semantic Versioning.
- [Making it yours — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/customizing): Nitip for AI Prompts: After the last prompt you have the Nitip site with its demo text and grey placeholder photos. Everything a visitor reads lives in…
- [Forms — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/forms): Nitip for AI Prompts: Nitip has two forms: Contact (name, email, phone, the services someone is interested in, a message) and the job application on each…
- [Getting started — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/getting-started): Nitip for AI Prompts: The pack builds Nitip one prompt at a time. Each prompt describes one part of the site exactly — sizes, spacing, text styles, motion,…
- [Publishing — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/publish): Nitip for AI Prompts: The result is a normal React project, so any static host or Node host works. Part of the Nitip AI Prompts documentation.
- [Notes for each tool — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/tools): Nitip for AI Prompts: The prompts work in any tool that writes and runs a React website. They ask for React with TypeScript, Tailwind CSS and Motion, and…
- [Troubleshooting — Nitip AI Prompts](https://framebrick.co/docs/nitip/prompt/troubleshooting): Nitip for AI Prompts: The result doesn't look like the screenshots. Point at the difference in a short follow-up: name the section, the breakpoint and what…

## Findit

- [Findit documentation](https://framebrick.co/docs/findit): Real estate and property website template — documentation for the Framer, Figma, Next.js, Astro, HTML and AI Prompts editions.
- [Findit documentation — Astro](https://framebrick.co/docs/findit/astro): Findit for Astro: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Findit Astro](https://framebrick.co/docs/findit/astro/changelog): All notable changes to the Findit Astro template. Versions follow Semantic Versioning. Part of the Findit Astro documentation.
- [Using a headless CMS — Findit Astro](https://framebrick.co/docs/findit/astro/cms): Findit: Connecting a headless CMS works the same for every Framebrick Astro template. Loaders and schemas, rich text, images, rebuilding on publish, and…
- [Editing the content — Findit Astro](https://framebrick.co/docs/findit/astro/content): Findit for Astro: All the words and images of the site live in src/content/. You edit plain JSON files — text in quotes, commas between entries — and the…
- [Design — Findit Astro](https://framebrick.co/docs/findit/astro/design): Findit for Astro: The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a component.
- [Findit Design System (Astro)](https://framebrick.co/docs/findit/astro/design-system): Findit for Astro: Reusable tokens and components for every page of the Findit template. The published Framer template is the reference for look and…
- [Forms — Findit Astro](https://framebrick.co/docs/findit/astro/forms): Findit for Astro: The four forms — the newsletter in the footer, Contact, "Schedule a tour" on every property and "Add property" — work as soon as you run…
- [Forms reference — Findit Astro](https://framebrick.co/docs/findit/astro/forms-reference): Findit for Astro: The site's four forms — the footer newsletter, Contact, "Schedule a tour" on property pages and "Add property" — work in one of three…
- [Install and run — Findit Astro](https://framebrick.co/docs/findit/astro/install): Findit is a standard Astro project: unzip it, install the packages and start the development server.
- [Pages and sections — Findit Astro](https://framebrick.co/docs/findit/astro/pages): Findit: A page is a small .astro file in src/pages/ that picks sections and hands them content. The file's path is its URL: src/pages/agent.astro is /agent.…
- [Going live — Findit Astro](https://framebrick.co/docs/findit/astro/publish): Findit for Astro: The demo content is there to be replaced: leaving "Findit", the sample address or the sample listings on a live site is the most common…
- [Troubleshooting — Findit Astro](https://framebrick.co/docs/findit/astro/troubleshooting): Findit: npm install fails, or the site behaves oddly after an update. Delete node_modules/, .astro/ and package-lock.json, then npm install again. Check…
- [Findit documentation — Figma](https://framebrick.co/docs/findit/figma): The Findit design as an editable Figma file: every page at desktop, tablet and phone size, the colour and text styles, and the components the pages are…
- [Changelog — Findit Figma](https://framebrick.co/docs/findit/figma/changelog): All notable changes to the Findit Figma template. Versions follow Semantic Versioning. Part of the Findit Figma documentation.
- [Components — Findit Figma](https://framebrick.co/docs/findit/figma/components): Findit for Figma: The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the…
- [Editing the design — Findit Figma](https://framebrick.co/docs/findit/figma/editing): Findit for Figma: Double-click a text layer and type. Its style (size, weight, line height) stays as it is. If a heading grows longer than the demo copy,…
- [Getting started — Findit Figma](https://framebrick.co/docs/findit/figma/getting-started): Your purchase gives you the Findit Figma file in one of two forms. Either way the copy is yours: edit it freely and invite your team. A free Figma plan is…
- [From design to website — Findit Figma](https://framebrick.co/docs/findit/figma/handoff): Findit: A Figma file is a design, not a website. When yours is ready, there are four ways to turn it into one.
- [Colours and text styles — Findit Figma](https://framebrick.co/docs/findit/figma/styles): Findit for Figma: Every colour and every piece of text in the file uses a style. Change a style and every frame, component and state that uses it updates —…
- [Troubleshooting — Findit Figma](https://framebrick.co/docs/findit/figma/troubleshooting): Findit: "Missing fonts" when opening the file. Install Manrope (Regular, Medium, SemiBold, Bold) on your computer, then reopen the file. In the Figma…
- [Findit documentation — Framer](https://framebrick.co/docs/findit/framer): Findit for Framer is the original, free edition of the template: a complete real estate website — properties with filters, agents, blog, contact and "list…
- [The CMS — Findit Framer](https://framebrick.co/docs/findit/framer/cms): Findit: Properties, agents, locations, categories, blog posts, testimonials and legal texts live in Framer's CMS. Add an item and its page, its card in…
- [Design — Findit Framer](https://framebrick.co/docs/findit/framer/design): Findit for Framer: Colours and text in Findit come from styles. Change a style and every page, component and state that uses it follows. Find them in the…
- [Forms — Findit Framer](https://framebrick.co/docs/findit/framer/forms): Findit for Framer: Findit has four forms: the newsletter in the footer, Contact (on /contact), Schedule a tour on every property page, and Add property (on…
- [Getting started — Findit Framer](https://framebrick.co/docs/findit/framer/getting-started): Findit for Framer is free. You get it as a remix link: opening it copies the whole project — pages, CMS, styles, components — into your own Framer workspace.
- [Going live — Findit Framer](https://framebrick.co/docs/findit/framer/publish): Findit: Everything to do before and after you press Publish: your site's title, description and images, going live on a free Framer address or your own…
- [Questions and answers — Findit Framer](https://framebrick.co/docs/findit/framer/troubleshooting): Is Findit for Framer really free? Yes. Copy it, build your site with it and publish it. What you may do with the template itself is set by the terms on the…
- [Findit documentation — HTML](https://framebrick.co/docs/findit/html): Findit for HTML: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Findit HTML](https://framebrick.co/docs/findit/html/changelog): All notable changes to the Findit HTML template. Versions follow Semantic Versioning. Part of the Findit HTML documentation.
- [Editing without touching HTML — Findit](https://framebrick.co/docs/findit/html/cms): Findit: The HTML edition is deliberately simple: the content is written into the pages, and you edit files (Editing the site). There is no admin panel.
- [Design — Findit HTML](https://framebrick.co/docs/findit/html/design): Findit: The pages are styled with Tailwind CSS classes written in the HTML (class="rounded-full px-4 py-2.5 bg-ink text-white"). assets/css/style.css contains…
- [Editing the site — Findit HTML](https://framebrick.co/docs/findit/html/editing): Findit: Double-click index.html — the site opens in your browser and every link works, straight from the folder. To see it exactly as a host serves it (and…
- [Forms — Findit HTML](https://framebrick.co/docs/findit/html/forms): Findit for HTML: The four forms — the newsletter in the footer, Contact, "Schedule a tour" on every property and "Add property" — validate, show a sending…
- [Going live — Findit HTML](https://framebrick.co/docs/findit/html/publish): Findit for HTML: Leaving "Findit", the sample address or the sample listings on a live site is the most common mistake — search the folder for "Findit" one…
- [Troubleshooting — Findit HTML](https://framebrick.co/docs/findit/html/troubleshooting): Findit for HTML: The page looks unstyled. The browser can't find assets/css/style.css. Pages inside a folder (property/…) link to it as…
- [Findit documentation — Next.js](https://framebrick.co/docs/findit/nextjs): Findit for Next.js: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Findit Next.js](https://framebrick.co/docs/findit/nextjs/changelog): All notable changes to the Findit Next.js template. Versions follow Semantic Versioning. Part of the Findit Next.js documentation.
- [Using a headless CMS — Findit Next.js](https://framebrick.co/docs/findit/nextjs/cms): Findit: Connecting a headless CMS works the same for every Framebrick Next.js template. The approach, rich text, images, keeping pages fresh, and step-by-step…
- [Editing the content — Findit Next.js](https://framebrick.co/docs/findit/nextjs/content): Findit for Next.js: All the words and images of the site live in src/content/. You edit plain TypeScript files — quotes around text, commas between items —…
- [Design — Findit Next.js](https://framebrick.co/docs/findit/nextjs/design): Findit for Next.js: The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a…
- [Findit Design System — Next.js](https://framebrick.co/docs/findit/nextjs/design-system): Findit for Next.js: Reusable tokens and components for every page of the Findit template. The published Framer template is the reference for look and…
- [Forms — Findit Next.js](https://framebrick.co/docs/findit/nextjs/forms): Findit for Next.js: The four forms — the newsletter in the footer, Contact, "Schedule a tour" on every property and "Add property" — work as soon as you run…
- [Forms reference — Findit Next.js](https://framebrick.co/docs/findit/nextjs/forms-reference): Findit for Next.js: The site's four forms — the footer newsletter, Contact, "Schedule a tour" on property pages and "Add property" — share one pipeline.
- [Install and run — Findit Next.js](https://framebrick.co/docs/findit/nextjs/install): Findit is a standard Next.js project: unzip it, install the packages and start the development server.
- [Pages and sections — Findit Next.js](https://framebrick.co/docs/findit/nextjs/pages): Findit for Next.js: A page is a small file that picks sections and hands them content. src/app/property/page.tsx is the whole Properties page.
- [Going live — Findit Next.js](https://framebrick.co/docs/findit/nextjs/publish): Findit for Next.js: The demo content is there to be replaced: leaving "Findit", the sample address or the sample listings on a live site is the most common…
- [Troubleshooting — Findit Next.js](https://framebrick.co/docs/findit/nextjs/troubleshooting): Findit for Next.js: npm install fails, or the site behaves oddly after an update. Delete node_modules/ and package-lock.json, then npm install again. Check…
- [Findit documentation — AI Prompts](https://framebrick.co/docs/findit/prompt): Findit for AI Prompts: Prompts that build the Findit website with an AI tool — a chat builder such as Lovable, Bolt, v0 or Replit, or a coding agent such as…
- [Changelog — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/changelog): Findit for AI Prompts: All notable changes to the Findit AI prompt pack. Versions follow Semantic Versioning.
- [Making it yours — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/customizing): Findit for AI Prompts: After the last prompt you have the Findit site with its demo text and grey placeholder photos. Everything a visitor reads lives in…
- [Forms — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/forms): Findit for AI Prompts: Findit has four forms. The prompts build them with their states — sending, success, "Something went wrong" — and a hidden field that…
- [Getting started — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/getting-started): Findit for AI Prompts: The pack builds Findit one prompt at a time. Each prompt describes one part of the site exactly — sizes, spacing, text styles,…
- [Publishing — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/publish): Findit for AI Prompts: The result is a normal React project, so any static host or Node host works. Part of the Findit AI Prompts documentation.
- [Notes for each tool — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/tools): Findit for AI Prompts: The prompts work in any tool that writes and runs a React website. They ask for React with TypeScript, Tailwind CSS and Motion, and…
- [Troubleshooting — Findit AI Prompts](https://framebrick.co/docs/findit/prompt/troubleshooting): Findit for AI Prompts: The result doesn't look like the screenshots. Point at the difference in a short follow-up: name the section, the breakpoint and what…

## Kalme

- [Kalme documentation](https://framebrick.co/docs/kalme): Calm, minimal digital marketing agency website template — documentation for the Framer, Figma, Next.js, Astro, HTML and AI Prompts editions.
- [Kalme documentation — Astro](https://framebrick.co/docs/kalme/astro): Kalme for Astro: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Kalme Astro](https://framebrick.co/docs/kalme/astro/changelog): All notable changes to the Kalme Astro template. Versions follow Semantic Versioning. Part of the Kalme Astro documentation.
- [Using a headless CMS — Kalme Astro](https://framebrick.co/docs/kalme/astro/cms): Kalme: Connecting a headless CMS works the same for every Framebrick Astro template. Loaders and schemas, rich text, images, rebuilding on publish, and…
- [Editing the content — Kalme Astro](https://framebrick.co/docs/kalme/astro/content): Kalme for Astro: All the words and images of the site live in src/content/. You edit plain JSON files — text in quotes, commas between entries — and the…
- [Design — Kalme Astro](https://framebrick.co/docs/kalme/astro/design): Kalme for Astro: The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a component.
- [Kalme Design System (Astro)](https://framebrick.co/docs/kalme/astro/design-system): Kalme for Astro: Reusable tokens and components for every page of the Kalme template. The published Framer template is the reference for look and behavior;…
- [Forms — Kalme Astro](https://framebrick.co/docs/kalme/astro/forms): Kalme for Astro: The Contact form works as soon as you run the site: it checks the required fields, shows a sending state, says "Thank you", keeps what the…
- [Forms reference — Kalme Astro](https://framebrick.co/docs/kalme/astro/forms-reference): Kalme for Astro: The site's Contact form works in one of three ways. You choose with environment variables (copy .env.example to .env, or set them in your…
- [Install and run — Kalme Astro](https://framebrick.co/docs/kalme/astro/install): Kalme is a standard Astro project: unzip it, install the packages and start the development server, then edit while the page updates by itself.
- [Pages and sections — Kalme Astro](https://framebrick.co/docs/kalme/astro/pages): Kalme: A page is a small file that picks sections and hands them content. src/pages/services.astro is the whole Services page.
- [Going live — Kalme Astro](https://framebrick.co/docs/kalme/astro/publish): Kalme for Astro: Before the site goes public, replace the demo's details and pictures and point the form at you; then build it and upload the static files…
- [Troubleshooting — Kalme Astro](https://framebrick.co/docs/kalme/astro/troubleshooting): Kalme for Astro: Most problems come from a JSON file with a missing comma, an image that is not where the content says, or a form variable that was not set…
- [Kalme documentation — Figma](https://framebrick.co/docs/kalme/figma): The Kalme design as an editable Figma file: every page at desktop, tablet and phone size, the colour variables and text styles, and the components the pages…
- [Changelog — Kalme Figma](https://framebrick.co/docs/kalme/figma/changelog): All notable changes to the Kalme Figma template. Versions follow Semantic Versioning. Part of the Kalme Figma documentation.
- [Components — Kalme Figma](https://framebrick.co/docs/kalme/figma/components): Kalme for Figma: The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the Components…
- [Editing the design — Kalme Figma](https://framebrick.co/docs/kalme/figma/editing): Kalme for Figma: Double-click a text layer and type. Its style (size, weight, line height) stays as it is. If a heading grows longer than the demo copy,…
- [Getting started — Kalme Figma](https://framebrick.co/docs/kalme/figma/getting-started): Your purchase gives you the Kalme Figma file in one of two forms. Either way the copy is yours: edit it freely and invite your team. A free Figma plan is…
- [From design to website — Kalme Figma](https://framebrick.co/docs/kalme/figma/handoff): Kalme: A Figma file is a design, not a website. When yours is ready, there are four ways to turn it into one.
- [Colours and text styles — Kalme Figma](https://framebrick.co/docs/kalme/figma/styles): Kalme for Figma: Every colour in the file is a colour variable and every piece of text uses a text style. Change one and every frame, component and state…
- [Troubleshooting — Kalme Figma](https://framebrick.co/docs/kalme/figma/troubleshooting): Kalme: "Missing fonts" when opening the file. Install Inter (Regular, Medium, Semi Bold, Bold) on your computer, then reopen the file. In the Figma desktop…
- [Kalme documentation — Framer](https://framebrick.co/docs/kalme/framer): Kalme for Framer is the original, free edition of the template: a calm digital marketing agency website — services with weekly and monthly prices, case…
- [The CMS — Kalme Framer](https://framebrick.co/docs/kalme/framer/cms): Kalme: Services, tools, projects, testimonials, blog posts and legal texts live in Framer's CMS. Add an item and its page, its card in every list and its links…
- [Design — Kalme Framer](https://framebrick.co/docs/kalme/framer/design): Kalme for Framer: Colours and text in Kalme come from styles. Change a style and every page, component and state that uses it follows. Find them in the left…
- [Forms — Kalme Framer](https://framebrick.co/docs/kalme/framer/forms): Kalme has one form, Contact, on the /contact page. It is a Framer form: it shows a sending state and a confirmation without any code. It has no destination…
- [Getting started — Kalme Framer](https://framebrick.co/docs/kalme/framer/getting-started): Kalme for Framer is free: you copy the whole project into your own Framer workspace with one link, then edit it on the canvas. This guide covers the copy,…
- [Going live — Kalme Framer](https://framebrick.co/docs/kalme/framer/publish): Kalme: Everything to do before and after you press Publish: your site's title, description and images, going live on a free Framer address or your own…
- [Questions and answers — Kalme Framer](https://framebrick.co/docs/kalme/framer/troubleshooting): Answers to what buyers of Kalme for Framer ask most, from plans and breakpoints to the CMS and the form, followed by the demo text that still has to be…
- [Kalme documentation — HTML](https://framebrick.co/docs/kalme/html): Kalme for HTML: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Kalme HTML](https://framebrick.co/docs/kalme/html/changelog): All notable changes to the Kalme HTML template. Versions follow Semantic Versioning. Part of the Kalme HTML documentation.
- [Editing without touching HTML — Kalme](https://framebrick.co/docs/kalme/html/cms): Kalme: The HTML edition is deliberately simple: the content is written into the pages, and you edit files (Editing the site). There is no admin panel.
- [Design — Kalme HTML](https://framebrick.co/docs/kalme/html/design): Kalme: The pages are styled with Tailwind CSS classes and a handful of colour, font and breakpoint tokens. Most changes are edits in the HTML; a new colour…
- [Editing the site — Kalme HTML](https://framebrick.co/docs/kalme/html/editing): Kalme: Every page is a plain HTML file: you change the words, pictures and links in a code editor and reload the browser. This guide shows where everything…
- [Forms — Kalme HTML](https://framebrick.co/docs/kalme/html/forms): Kalme for HTML: The Contact form checks the required fields, shows a sending state, says "Thank you", keeps what the visitor typed when something fails, and…
- [Going live — Kalme HTML](https://framebrick.co/docs/kalme/html/publish): Kalme: Publishing the HTML edition means replacing the demo's details and pictures, pointing the form at you, and uploading the folder to any static host — no…
- [Troubleshooting and questions — Kalme HTML](https://framebrick.co/docs/kalme/html/troubleshooting): Kalme: Most problems in the HTML edition come from a path with the wrong number of ../, a class the stylesheet doesn't have yet, or a form endpoint left…
- [Kalme documentation — Next.js](https://framebrick.co/docs/kalme/nextjs): Kalme for Next.js: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/changelog): All notable changes to the Kalme Next.js template. Versions follow Semantic Versioning. Part of the Kalme Next.js documentation.
- [Using a headless CMS — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/cms): Kalme: Connecting a headless CMS works the same for every Framebrick Next.js template. The approach, rich text, images, keeping pages fresh, and step-by-step…
- [Editing the content — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/content): Kalme for Next.js: All the words and images of the site live in src/content/. You edit plain TypeScript files — quotes around text, commas between items —…
- [Design — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/design): Kalme for Next.js: The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a component.
- [Kalme Design System — Next.js](https://framebrick.co/docs/kalme/nextjs/design-system): Kalme for Next.js: Reusable tokens and components for every page of the Kalme template. The published Framer template is the reference for look and…
- [Forms — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/forms): Kalme for Next.js: The Contact form works as soon as you run the site: it checks the required fields, shows a sending state, says "Thank you", keeps what…
- [Forms reference — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/forms-reference): Kalme for Next.js: The site's Contact form uses this pipeline. The forms, their states (sending, "Thank you", "Something went wrong") and the spam honeypot…
- [Install and run — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/install): Kalme runs on Node.js with the usual Next.js commands: install the packages once, then start the development server and edit while the page updates by itself.
- [Pages and sections — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/pages): Kalme for Next.js: A page is a small file that picks sections and hands them content. src/app/services/page.tsx is the whole Services page.
- [Going live — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/publish): Kalme: Before the site goes public, replace the demo's details and pictures and point the form at you; then deploy it to any host that runs Next.js and…
- [Troubleshooting — Kalme Next.js](https://framebrick.co/docs/kalme/nextjs/troubleshooting): Kalme for Next.js: Most problems come from a content file with a typo, a missing image or a form variable that was not set on the host. The answers below…
- [Kalme documentation — AI Prompts](https://framebrick.co/docs/kalme/prompt): Kalme for AI Prompts: Prompts that build the Kalme website with an AI tool — a chat builder such as Lovable, Bolt, v0 or Replit, or a coding agent such as…
- [Changelog — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/changelog): Kalme for AI Prompts: All notable changes to the Kalme AI prompt pack. Versions follow Semantic Versioning.
- [Making it yours — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/customizing): Kalme for AI Prompts: After the last prompt you have the Kalme site with its demo text and grey placeholder photos. Everything a visitor reads lives in…
- [Forms — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/forms): Kalme for AI Prompts: Kalme has one form, on the Contact page: first name, last name, email, phone number, a choice of service and a message. The prompts…
- [Getting started — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/getting-started): Kalme for AI Prompts: The pack builds Kalme one prompt at a time. Each prompt describes one part of the site exactly — sizes, spacing, text styles, motion,…
- [Publishing — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/publish): Kalme for AI Prompts: When the last prompt is done and the demo text is yours, publish from your AI tool or from the code it wrote, then check the live site…
- [Notes for each tool — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/tools): Kalme for AI Prompts: The prompts work in any tool that writes and runs a React website. They ask for React with TypeScript, Tailwind CSS and Motion, and…
- [Troubleshooting — Kalme AI Prompts](https://framebrick.co/docs/kalme/prompt/troubleshooting): Kalme for AI Prompts: AI tools rarely get every detail right the first time. These answers cover the usual drifts from the design and the questions buyers…

## Titen

- [Titen documentation](https://framebrick.co/docs/titen): Bold construction and architecture firm website template — documentation for the Framer, Figma, Next.js, Astro, HTML and AI Prompts editions.
- [Titen documentation — Astro](https://framebrick.co/docs/titen/astro): Titen for Astro: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Titen Astro](https://framebrick.co/docs/titen/astro/changelog): All notable changes to the Titen Astro template. Versions follow Semantic Versioning. Part of the Titen Astro documentation.
- [Using a headless CMS — Titen Astro](https://framebrick.co/docs/titen/astro/cms): Titen: Connecting a headless CMS works the same for every Framebrick Astro template. Loaders and schemas, rich text, images, rebuilding on publish, and…
- [Editing the content — Titen Astro](https://framebrick.co/docs/titen/astro/content): Titen for Astro: All the words and images of the site live in src/content/. You edit plain JSON files (text in quotes, commas between entries), and the site…
- [Design — Titen Astro](https://framebrick.co/docs/titen/astro/design): Titen for Astro: The look comes from a small set of tokens. Change a token and every page, component and state follows, so you rarely need to touch a component.
- [Titen design system (Astro)](https://framebrick.co/docs/titen/astro/design-system): Titen for Astro: Content-free building blocks of the Titen template, mirrored from the Framer components and from the Next.js edition (same names, props and…
- [Forms — Titen Astro](https://framebrick.co/docs/titen/astro/forms): Titen for Astro: Titen has three forms, and all of them work as soon as you run the site. Each one checks the required fields, shows a spinner while…
- [Forms reference — Titen Astro](https://framebrick.co/docs/titen/astro/forms-reference): Titen for Astro: The site's forms — "Let's Work Together" (Projects, project categories, services), the Contact page and the footer newsletter — work in one…
- [Install and run — Titen Astro](https://framebrick.co/docs/titen/astro/install): Titen is a standard Astro project: unzip it, install the packages and start the development server, then edit while the page updates by itself.
- [Pages and sections — Titen Astro](https://framebrick.co/docs/titen/astro/pages): Titen: A page is a small file that picks sections and hands them content. src/pages/blog.astro is the whole Blog page.
- [Going live — Titen Astro](https://framebrick.co/docs/titen/astro/publish): Titen for Astro: Before the site goes public, replace the demo's details and pictures and point the forms at you. Then build it, upload the static files to…
- [Troubleshooting — Titen Astro](https://framebrick.co/docs/titen/astro/troubleshooting): Titen for Astro: Most problems come from a content file with a typo, a missing image, or a setting that was not rebuilt into the site. The answers below…
- [Titen documentation — Figma](https://framebrick.co/docs/titen/figma): The Titen design as an editable Figma file: every page at desktop, tablet and phone size, the colour and text styles, and the components the pages are built…
- [Changelog — Titen Figma](https://framebrick.co/docs/titen/figma/changelog): All notable changes to the Titen Figma template. Versions follow Semantic Versioning. Part of the Titen Figma documentation.
- [Components — Titen Figma](https://framebrick.co/docs/titen/figma/components): Titen for Figma: The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the Components…
- [Editing the design — Titen Figma](https://framebrick.co/docs/titen/figma/editing): Titen for Figma: Double-click a text layer and type. Its style (size, weight, line height) stays as it is. If a heading grows longer than the demo copy,…
- [Getting started — Titen Figma](https://framebrick.co/docs/titen/figma/getting-started): Your purchase gives you the Titen Figma file in one of two forms. Either way the copy is yours: edit it freely and invite your team. A free Figma plan is…
- [From design to website — Titen Figma](https://framebrick.co/docs/titen/figma/handoff): Titen: A Figma file is a design, not a website. When yours is ready, there are four ways to turn it into one.
- [Colours and text styles — Titen Figma](https://framebrick.co/docs/titen/figma/styles): Titen for Figma: Every colour and every piece of text in the file uses a style. Change a style and every frame, component and state that uses it updates —…
- [Troubleshooting — Titen Figma](https://framebrick.co/docs/titen/figma/troubleshooting): Titen: "Missing fonts" when opening the file. Install Plus Jakarta Sans (Regular, Medium, SemiBold, Bold) on your computer, then reopen the file. In the Figma…
- [Titen documentation — Framer](https://framebrick.co/docs/titen/framer): Titen for Framer is the original, free edition of the template: a construction and architecture firm website, with projects by sector, services, a blog,…
- [The CMS — Titen Framer](https://framebrick.co/docs/titen/framer/cms): Titen: Projects, project categories, services, blog posts and testimonials live in Framer's CMS. Add an item and its page, its card in every list and its links…
- [Design — Titen Framer](https://framebrick.co/docs/titen/framer/design): Titen for Framer: Colours and text in Titen come from styles. Change a style and every page, component and state that uses it follows. Find them in the left…
- [Forms — Titen Framer](https://framebrick.co/docs/titen/framer/forms): Titen has two kinds of form — a contact form and a newsletter — both Framer forms that show a sending state and a confirmation without any code.
- [Getting started — Titen Framer](https://framebrick.co/docs/titen/framer/getting-started): Titen for Framer is free: you copy the whole project into your own Framer workspace with one link, then edit it on the canvas. This guide covers the copy,…
- [Going live — Titen Framer](https://framebrick.co/docs/titen/framer/publish): Titen: Everything to do before and after you press Publish: your site's title, description and images, going live on a free Framer address or your own…
- [Questions and answers — Titen Framer](https://framebrick.co/docs/titen/framer/troubleshooting): Answers to what buyers of Titen for Framer ask most, from plans and breakpoints to the CMS and the forms, followed by the demo text that still has to be…
- [Titen documentation — HTML](https://framebrick.co/docs/titen/html): Titen for HTML: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Titen HTML](https://framebrick.co/docs/titen/html/changelog): All notable changes to the Titen HTML template. Versions follow Semantic Versioning. Part of the Titen HTML documentation.
- [Editing without touching HTML — Titen](https://framebrick.co/docs/titen/html/cms): Titen: The HTML edition is deliberately simple: the content is written into the pages, and you edit files (Editing the site). There is no admin panel.
- [Design — Titen HTML](https://framebrick.co/docs/titen/html/design): Titen: The pages are styled with Tailwind CSS classes and a handful of colour, font and breakpoint tokens. Most changes are edits in the HTML; a new colour…
- [Editing the site — Titen HTML](https://framebrick.co/docs/titen/html/editing): Titen: Every page is a plain HTML file: you change the words, pictures and links in a code editor and reload the browser. This guide shows where everything…
- [Forms — Titen HTML](https://framebrick.co/docs/titen/html/forms): Titen for HTML: Titen has three forms. Each one checks the required fields, shows a spinner while sending, says "Thank you", keeps what the visitor typed…
- [Going live — Titen HTML](https://framebrick.co/docs/titen/html/publish): Titen: Publishing the HTML edition means replacing the demo's details and pictures, pointing the forms at you, and uploading the folder to any static host.…
- [Troubleshooting and questions — Titen HTML](https://framebrick.co/docs/titen/html/troubleshooting): Titen: Most problems in the HTML edition come from a path with the wrong number of ../, a class the stylesheet doesn't have yet, or a form endpoint left…
- [Titen documentation — Next.js](https://framebrick.co/docs/titen/nextjs): Titen for Next.js: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Titen Next.js](https://framebrick.co/docs/titen/nextjs/changelog): All notable changes to the Titen Next.js template. Versions follow Semantic Versioning. Part of the Titen Next.js documentation.
- [Using a headless CMS — Titen Next.js](https://framebrick.co/docs/titen/nextjs/cms): Titen: Connecting a headless CMS works the same for every Framebrick Next.js template. The approach, rich text, images, keeping pages fresh, and step-by-step…
- [Editing the content — Titen Next.js](https://framebrick.co/docs/titen/nextjs/content): Titen for Next.js: All the words and images of the site live in src/content/. You edit plain TypeScript files (quotes around text, commas between items),…
- [Design — Titen Next.js](https://framebrick.co/docs/titen/nextjs/design): Titen for Next.js: The look comes from a small set of tokens. Change a token and every page, component and state follows, so you rarely need to touch a…
- [Titen design system — Next.js](https://framebrick.co/docs/titen/nextjs/design-system): Titen for Next.js: Content-free building blocks of the Titen template, mirrored from the Framer components. Import everything from @/design-system;…
- [Forms — Titen Next.js](https://framebrick.co/docs/titen/nextjs/forms): Titen for Next.js: Titen has three forms, and all of them work as soon as you run the site. Each one checks the required fields, shows a spinner while…
- [Forms reference — Titen Next.js](https://framebrick.co/docs/titen/nextjs/forms-reference): Titen for Next.js: The site's forms ("Let's Work Together" on Projects, the category pages and every service page; the Contact page; the footer newsletter)…
- [Install and run — Titen Next.js](https://framebrick.co/docs/titen/nextjs/install): Titen runs on Node.js with the usual Next.js commands: install the packages once, then start the development server and edit while the page updates by itself.
- [Pages and sections — Titen Next.js](https://framebrick.co/docs/titen/nextjs/pages): Titen for Next.js: A page is a small file that picks sections and hands them content. src/app/blog/page.tsx is the whole Blog page.
- [Going live — Titen Next.js](https://framebrick.co/docs/titen/nextjs/publish): Titen: Before the site goes public, replace the demo's details and pictures and point the forms at you. Then deploy it to any host that runs Next.js, and…
- [Troubleshooting — Titen Next.js](https://framebrick.co/docs/titen/nextjs/troubleshooting): Titen for Next.js: Most problems come from a content file with a typo, a missing image or a form variable that was not set on the host. The answers below…
- [Titen documentation — AI Prompts](https://framebrick.co/docs/titen/prompt): Titen for AI Prompts: Prompts that build the Titen website with an AI tool — a chat builder such as Lovable, Bolt, v0 or Replit, or a coding agent such as…
- [Changelog — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/changelog): Titen for AI Prompts: All notable changes to the Titen AI prompt pack. Versions follow Semantic Versioning.
- [Making it yours — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/customizing): Titen for AI Prompts: After the last prompt you have the Titen site with its demo text and grey placeholder photos. Everything a visitor reads lives in…
- [Forms — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/forms): Titen for AI Prompts: Titen has three forms, and the prompts build all of them with their states — sending, "Thank you", "Something went wrong" — and a…
- [Getting started — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/getting-started): Titen for AI Prompts: The pack builds Titen one prompt at a time. Each prompt describes one part of the site exactly — sizes, spacing, text styles, motion,…
- [Publishing — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/publish): Titen for AI Prompts: When the last prompt is done and the demo text is yours, publish from your AI tool or from the code it wrote, then check the live site…
- [Notes for each tool — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/tools): Titen for AI Prompts: The prompts work in any tool that writes and runs a React website. They ask for React with TypeScript, Tailwind CSS and Motion, and…
- [Troubleshooting — Titen AI Prompts](https://framebrick.co/docs/titen/prompt/troubleshooting): Titen for AI Prompts: AI tools rarely get every detail right the first time. These answers cover the usual drifts from the design and the questions buyers…

## Ciketo

- [Ciketo documentation](https://framebrick.co/docs/ciketo): Logistics and shipping company website template — documentation for the Framer, Figma, Next.js, Astro, HTML and AI Prompts editions.
- [Ciketo documentation — Astro](https://framebrick.co/docs/ciketo/astro): Ciketo for Astro: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/changelog): All notable changes to the Ciketo Astro template. Versions follow Semantic Versioning. Part of the Ciketo Astro documentation.
- [Using a headless CMS — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/cms): Ciketo: Connecting a headless CMS works the same for every Framebrick Astro template. Loaders and schemas, rich text, images, rebuilding on publish, and…
- [Editing the content — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/content): Ciketo for Astro: All the words of the site live in src/content/, and its photos in src/assets/images/. You edit plain JSON files (text in quotes, commas…
- [Design — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/design): Ciketo for Astro: The look comes from a small set of tokens. Change a token and every page, component and state follows, so you rarely need to touch a…
- [Ciketo design system (Astro)](https://framebrick.co/docs/ciketo/astro/design-system): Ciketo for Astro: Content-free building blocks of the Ciketo template, mirrored from the Framer components and from the Next.js edition (same names, props…
- [Forms — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/forms): Ciketo for Astro: Ciketo has one form, the quote request, and it works as soon as you run the site. It appears in three places.
- [Forms reference — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/forms-reference): Ciketo for Astro: The site's form — the quote request on Home, the Contact page and every service page — works in one of three ways. You choose with…
- [Install and run — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/install): Ciketo is a standard Astro project: unzip it, install the packages and start the development server, then edit while the page updates by itself.
- [Pages and sections — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/pages): Ciketo: A page is a small file that picks sections and hands them content. src/pages/blog.astro is the whole Blog page.
- [Going live — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/publish): Ciketo for Astro: Before the site goes public, replace the demo's details and pictures and point the quote form at you. Then build it, upload the static…
- [Troubleshooting — Ciketo Astro](https://framebrick.co/docs/ciketo/astro/troubleshooting): Ciketo for Astro: Most problems come from a content file with a typo, a missing image, or a setting that was not rebuilt into the site. The answers below…
- [Ciketo documentation — Figma](https://framebrick.co/docs/ciketo/figma): The Ciketo design as an editable Figma file: every page at desktop, tablet and phone size, the colour and text styles, and the components the pages are…
- [Changelog — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/changelog): All notable changes to the Ciketo Figma template. Versions follow Semantic Versioning. Part of the Ciketo Figma documentation.
- [Components — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/components): Ciketo for Figma: The pages are built from components, so a change to a component reaches every page that uses it. The main components live on the…
- [Editing the design — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/editing): Ciketo for Figma: Double-click a text layer and type. Its style (size, weight, line height) stays as it is. If a heading grows longer than the demo copy,…
- [Getting started — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/getting-started): Your purchase gives you the Ciketo Figma file in one of two forms. Either way the copy is yours: edit it freely and invite your team. A free Figma plan is…
- [From design to website — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/handoff): Ciketo: A Figma file is a design, not a website. When yours is ready, there are four ways to turn it into one.
- [Colours and text styles — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/styles): Ciketo for Figma: Every colour and every piece of text in the file uses a style. Change a style and every frame, component and state that uses it updates —…
- [Troubleshooting — Ciketo Figma](https://framebrick.co/docs/ciketo/figma/troubleshooting): Ciketo: "Missing fonts" when opening the file. Install Inter (Regular and Medium) on your computer, then reopen the file. In the Figma desktop app, restart…
- [Ciketo documentation — Framer](https://framebrick.co/docs/ciketo/framer): Ciketo for Framer is the original, free edition of the template: a logistics and shipping company website you edit visually and publish from Framer, no code.
- [The CMS — Ciketo Framer](https://framebrick.co/docs/ciketo/framer/cms): In Ciketo, services, trade lanes, clients, testimonials, posts and legal texts live in Framer's CMS: add an item, and every list and page that shows it updates.
- [Design — Ciketo Framer](https://framebrick.co/docs/ciketo/framer/design): Colours and text in Ciketo for Framer come from styles: change a style, and every page, component and state that uses it follows.
- [Forms — Ciketo Framer](https://framebrick.co/docs/ciketo/framer/forms): Ciketo takes quote requests through two Framer forms with the same fields, which show a sending state and a "Thank you" without any code.
- [Getting started — Ciketo Framer](https://framebrick.co/docs/ciketo/framer/getting-started): Ciketo for Framer is free: one link copies it into your Framer workspace. This guide covers the copy, the plan you need, and a tour of the pages and layout.
- [Going live — Ciketo Framer](https://framebrick.co/docs/ciketo/framer/publish): What to do before and after you publish Ciketo: titles, descriptions and images, a free Framer address or your own domain, and the checks once it is live.
- [Questions and answers — Ciketo Framer](https://framebrick.co/docs/ciketo/framer/troubleshooting): Answers to what buyers of Ciketo for Framer ask most, from plans and breakpoints to the CMS and the forms, then the demo text to replace before you publish.
- [Ciketo documentation — HTML](https://framebrick.co/docs/ciketo/html): Ciketo for HTML: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Ciketo HTML](https://framebrick.co/docs/ciketo/html/changelog): All notable changes to the Ciketo HTML template. Versions follow Semantic Versioning. Part of the Ciketo HTML documentation.
- [Editing without touching HTML — Ciketo](https://framebrick.co/docs/ciketo/html/cms): Ciketo: The HTML edition is deliberately simple: the content is written into the pages, and you edit files (Editing the site). There is no admin panel.
- [Design — Ciketo HTML](https://framebrick.co/docs/ciketo/html/design): Ciketo is styled with Tailwind CSS classes and a few colour, font and breakpoint tokens. Most changes are HTML edits; a new colour or font needs a CSS rebuild.
- [Editing the site — Ciketo HTML](https://framebrick.co/docs/ciketo/html/editing): Ciketo: Every page is a plain HTML file that you edit in a code editor. This guide shows where everything is, and how to add a service, a post or a page.
- [Forms — Ciketo HTML](https://framebrick.co/docs/ciketo/html/forms): The Ciketo HTML template has one form, the quote request: on Home, on the Contact page and on every service page.
- [Going live — Ciketo HTML](https://framebrick.co/docs/ciketo/html/publish): Ciketo: Publishing the HTML edition means replacing the demo's details and pictures, pointing the form at you and uploading the folder to any static host.
- [Troubleshooting — Ciketo HTML](https://framebrick.co/docs/ciketo/html/troubleshooting): Ciketo: Most problems in the HTML edition come from a path with the wrong number of ../, a class the stylesheet doesn't have yet, or an empty form endpoint.
- [Ciketo documentation — Next.js](https://framebrick.co/docs/ciketo/nextjs): Ciketo for Next.js: Everything you need to go from the downloaded folder to a published site. Read in this order, or jump to what you need.
- [Changelog — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/changelog): All notable changes to the Ciketo Next.js template. Versions follow Semantic Versioning. Part of the Ciketo Next.js documentation.
- [Using a headless CMS — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/cms): Ciketo: Connecting a headless CMS works the same for every Framebrick Next.js template. The approach, rich text, images, keeping pages fresh, and step-by-step…
- [Editing the content — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/content): Ciketo for Next.js: All the words and images of the site live in src/content/. You edit plain TypeScript files (quotes around text, commas between items),…
- [Design — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/design): Ciketo for Next.js: The look comes from a small set of tokens. Change a token and nearly every page, component and state follows, so you rarely need to…
- [Ciketo design system — Next.js](https://framebrick.co/docs/ciketo/nextjs/design-system): Ciketo for Next.js: Content-free building blocks of the Ciketo template, mirrored from the Framer components. Import everything from @/design-system;…
- [Forms — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/forms): Ciketo for Next.js: Ciketo has one form, the quote request, and it works as soon as you run the site. It appears in three places with the same fields and copy.
- [Forms reference — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/forms-reference): Ciketo for Next.js: The site's form — the quote request on Home, the Contact page and every service page — uses this pipeline.
- [Install and run — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/install): Ciketo runs on Node.js with the usual Next.js commands: install the packages once, then start the development server and edit while the page updates by itself.
- [Pages and sections — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/pages): Ciketo for Next.js: A page is a small file that picks sections and hands them content. src/app/blog/page.tsx is the whole Blog page.
- [Going live — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/publish): Ciketo: Before the site goes public, replace the demo's details, figures and pictures and point the quote form at you. Then deploy it to any host that runs…
- [Troubleshooting — Ciketo Next.js](https://framebrick.co/docs/ciketo/nextjs/troubleshooting): Ciketo for Next.js: Most problems come from a content file with a typo, a missing image or a form variable that was not set on the host. The answers below…
- [Ciketo documentation — AI Prompts](https://framebrick.co/docs/ciketo/prompt): Ciketo for AI Prompts: Prompts that build the Ciketo website with an AI tool — a chat builder such as Lovable, Bolt, v0 or Replit, or a coding agent such as…
- [Changelog — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/changelog): Ciketo for AI Prompts: All notable changes to the Ciketo AI prompt pack. Versions follow Semantic Versioning.
- [Making it yours — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/customizing): Ciketo for AI Prompts: After the last prompt you have the Ciketo site with its demo text and grey placeholder photos. Everything a visitor reads lives in…
- [The quote form — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/forms): Ciketo for AI Prompts: Ciketo has one form, the quote request, on Home, on every service page and on the Contact page. The prompts build it with its states…
- [Getting started — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/getting-started): Ciketo for AI Prompts: The pack builds Ciketo one prompt at a time. Each prompt describes one part of the site exactly — sizes, spacing, text styles,…
- [Publishing — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/publish): Ciketo for AI Prompts: When the last prompt is done and the demo text is yours, publish from your AI tool or from the code it wrote, then check the live…
- [Notes for each tool — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/tools): Ciketo for AI Prompts: The prompts work in any tool that writes and runs a React website. They ask for React with TypeScript, Tailwind CSS and Motion, and…
- [Troubleshooting — Ciketo AI Prompts](https://framebrick.co/docs/ciketo/prompt/troubleshooting): Ciketo for AI Prompts: AI tools rarely get every detail right the first time. These answers cover the usual drifts from the design and the questions buyers…

## Tustel

- [Tustel documentation](https://framebrick.co/docs/tustel): Photographer and creative designer portfolio website template — documentation for the Framer editions.
- [Tustel documentation — Framer](https://framebrick.co/docs/tustel/framer): Tustel for Framer is the original, free edition of the template: a portfolio for photographers and designers that you edit visually and publish from Framer.
- [The CMS — Tustel Framer](https://framebrick.co/docs/tustel/framer/cms): In Tustel, the projects, services, testimonials and journal posts live in Framer's CMS: add an item, and every list and page that shows it updates.
- [Design — Tustel Framer](https://framebrick.co/docs/tustel/framer/design): Colours and text in Tustel for Framer come from styles: change a style, and every page, component and state that uses it follows.
- [Forms — Tustel Framer](https://framebrick.co/docs/tustel/framer/forms): Tustel takes project enquiries through one Framer form on the Contact page, which shows a sending state and a "Thank you" without any code.
- [Getting started — Tustel Framer](https://framebrick.co/docs/tustel/framer/getting-started): Tustel for Framer is free: one link copies the portfolio into your Framer workspace. This guide covers the copy, the plan you need, the pages and the layout.
- [Going live — Tustel Framer](https://framebrick.co/docs/tustel/framer/publish): What to do before and after you publish Tustel: titles, descriptions and images, a free Framer address or your own domain, and the checks once it is live.
- [Questions and answers — Tustel Framer](https://framebrick.co/docs/tustel/framer/troubleshooting): Answers to what buyers of Tustel for Framer ask most, from plans and breakpoints to the CMS and the form, then the demo text to replace before you publish.

## License

- [Framebrick Template License](https://framebrick.co/docs/license): The license that comes with every Framebrick template, free or with Pro: unlimited websites and client work, no reselling or sharing.

## Custom work

- [Custom work](https://framebrick.co/docs/custom-work): Have Marcframe, the studio behind the templates, update a template to your needs, build a custom template or design a new website.