Read me before you edit.

Mesa, template version 1.1, September 2026

Two CMS collections

Desktop, tablet and phone on every page

What is inside

What is inside

Mesa is a home page plus Pricing, Customers, Changelog, Security and Contact, with 404, Privacy, Terms and this page behind them. Customer stories come from the CMS, so adding one is a row, not a page.

The home page has nine sections: Hero, Customer Wordmarks, Before After Ledger, Metric Field, Walkthrough, Integrations, Customers, Plans and Questions. The layer names match that list.

Change fonts and colours

Change fonts and colours

Colour styles: Deep Blue #0B1636 is the page, Night #071029 is the darker band, Raised Navy #122048 is a card, Frost #EEF1F8 is the type, Frost Muted is the quiet type, Signal Orange #FF7A2F is the one accent and Resolved #45C97F marks a closed ticket. Change Signal Orange and the whole site follows.

Text styles are set in Instrument Sans, with IBM Plex Mono on UI Mono, the ledger times and anything that should look like a console. Swap those two families in the text styles and nothing else needs touching.

Edit the product panel

Edit the product panel

The panel under the headline is built from frames and text, not a screenshot. Every ticket row, time and status is editable, so you can put your own product in it without opening an image editor.

The Before After Ledger is two columns of the same rows with different times. If you change a row on one side, change it on the other.

Customer stories

Customer stories

Stories live in the Cases collection: client, sector, two figures with their labels, the stack they run, a quote and the body. Add a row and the card on /customers and the page at /customers/<slug> both appear.

Keep the figures short. The card shows them at 46 px, so anything longer than six characters starts to crowd the label.

Changelog

Changelog

The Releases collection has a version, a date, a tag and one paragraph. The tag is a plain string, so New, Improved and Fixed are whatever you type. The list is sorted by date, newest first.

Connect the form

Connect the form

One native Framer form on /contact: name, work email, company and message. Entries land under Site Settings, Forms. Point it at your own inbox before you publish.

Publish

Publish

Set your domain in Site Settings, drop a 1200 by 630 image under Site Settings, Social, check the page title and description, then publish.

Create a free website with Framer, the website builder loved by startups, designers and agencies.