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