Tessel — SaaS Website Template for Framer

Tessel is a SaaS website template for Framer. I designed it for developer tools, data and ops products, infrastructure and fintech: products that would rather look precise than friendly.

Many SaaS sites look the same: gradients, glow, a purple button and a dashboard floating in space. Tessel goes the other way. Sections are numbered like chapters, the page sits on a visible grid and one burnt-orange accent marks every action.

The goal is a site that explains the product in order, compares plans side by side and shows the product is alive, with a changelog and a blog that update from the CMS.

19 pages · 5 CMS collections · 4 breakpoints · no custom code.

Every block carries a numeral anchored to the last line of its title. The page reads in order, the way a product with something to say should, and the numerals double as anchors for the navigation.

Pricing with a comparison table, a changelog with release types, integrations with category chips and careers with role pages. All of it lives in the CMS, so the site moves at the speed of the product.

Home. Hero, product rows, a four-step process, before and after, a customer wall, pricing, FAQ and the latest releases.

Customers. A featured quote, a logo strip, figures and six reviews from the CMS.

Burnt orange appears where the eye has to go: the key word in a headline, the primary button, the plan worth choosing. Nowhere on the site asks for a second colour, so the accent keeps its meaning.

Careers. Open roles from the CMS, the hiring process and a role page with an apply link.

Photography is greyscale architecture from Unsplash: structure, repetition, shadow. It keeps the accent as the only colour on the page and swaps in one click for your own imagery.

Phone. Home, connected sources and pricing at the phone breakpoint, on the same grid.

Twenty colour tokens are named for what they do (Surface, Text, Line, Ink, Accent, Status), never for what they look like. A new palette is a token swap, not a redesign, and a dark theme is the same job.

Pricing. Three plans and a comparison table. The plan worth choosing is the only one in orange.

About. A statement, figures, the team and the principles behind the product.

— 19 pages: Home, Product, Pricing with a comparison table, Integrations, Customers, Changelog and entry, Blog and post, Careers and role, About, Contact with a working form, Privacy, Terms, DPA, Licenses, 404 and a Style guide.

— 5 CMS collections (Reviews, Changelog, Integrations, Blog, Careers) already wired to lists and detail pages.

— A design system as Framer styles: 20 colour tokens, 17 text styles and 7 components, including a Button with four variants.

— Four breakpoints: Large (1440+), Desktop, Tablet and Phone.

— Anton, Geist and IBM Plex Mono from the Framer font library. No custom code.

Blog. A featured post, a grid of black-and-white covers, and each post signed by its author and role.

Good for: developer tools, ops and data products, infrastructure, fintech. Anything that would rather look precise than friendly.

Limitations, so you know before you buy. Light mode only: tokens are named by role, so a dark theme is a token swap, not a redesign. No docs or help-center pages. Everything is demo content: legal pages, testimonials, logos and photos are placeholders to replace with yours.

Get Tessel. Live demo, details and purchase → https://miguelrecio.es/templates/tessel

Framer Marketplace → https://www.framer.com/marketplace/templates/tessel/

Made by Miguel Recio, identity and web designer. Want it live with your product, pricing and brand? I set it up for you as a separate service → https://miguelrecio.es/templates/setup