Triptych - Framer Template

SaaS template for Framer featuring three interchangeable visual styles. Triptych allows you to change the appearance of each section live, combine identities, and adapt the brand quickly, flexibly, and in a visually consistent way.AA

// Project description

Triptych is a Framer SaaS template with a special twist: each section includes three hand-crafted styles and a selector that lets you switch them live.

Minimal, clean and uncluttered; Bold, with a more brutalist aesthetic; and Editorial, with a more typographic and sophisticated approach. These are not simple colour changes: each style truly recomposes the page. The hero goes from a centred card to a full-bleed black and white composition, or to a magazine-style cover with a soft chromatic wash. The features sections change from a bento grid to a numbered index or a centred manifesto. Even the main image automatically adapts to each style from a single image control.

The system allows you to switch styles in different ways: fix an appearance per section from the properties panel, let visitors change the entire page with a floating selector, or blend visual identities per section. Each combination generates a shareable URL, ideal for A/B testing or validating proposals with clients. Every section incorporates its own style-switching controls with active states, which can be easily hidden once a visual direction has been chosen.

The template is designed to be easy to use. All texts can be edited from the properties panel, without having to dig inside the components. Two CMS collections manage the features —with case study style detail pages— and testimonials. Colours and typographies are organised in three token folders, allowing for a complete rebranding in about 30 minutes. The file also includes a template guide page and a style matrix board with nine views.

It's a complete, production-ready template: home, work index, CMS-driven detail pages with a quick-facts sidebar, custom 404 page, native hamburger menu on mobile, fully responsive design across all breakpoints, WCAG AA contrast across all three palettes, purposeful animations, semantic HTML, and strong Lighthouse scores.

Includes:

  • 3 complete visual identities: Minimal, Bold, and Editorial

  • 8 section components × 3 style variants each

  • Live style switcher: per-section controls, floating toggle, and URL parameters

  • CMS: features with detail pages and testimonials

  • Pricing section with featured plan

  • Case study pages and work index

  • 18 colour tokens, 15 responsive text styles, and 6 button variants

  • Template guide and style matrix

  • Custom 404 page, favicon, social image, hover states, and micro-animations

Role:

Design and implementation in Framer

Year:

2026

Stack:

Framer, Claude Code

triptych.framer.website

View on Framer Marketplace

Noa Torner - Barcelona, 2026

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