Triptych - Framer Template

Triptych és una template de Framer SaaS amb un gir especial: cada secció inclou tres estils dissenyats a mà i un selector que permet canviar-los en directe.

Minimal, net i ordenat; Bold, amb una estètica més brutalista; i Editorial, amb un enfocament més tipogràfic i sofisticat. No són simples canvis de color: cada estil recompon realment la pàgina. L’hero passa d’una targeta centrada a una composició en blanc i negre a sang completa, o a una portada d’estil revista amb un bany cromàtic suau. Les seccions de característiques canvien d’un bento grid a un índex numerat o a un manifest centrat. Fins i tot la imatge principal s’adapta automàticament a cada estil des d’un únic control d’imatge.

El sistema permet canviar els estils de diferents maneres: fixar una aparença per secció des del panell de propietats, deixar que els visitants canviïn tota la pàgina amb un selector flotant o combinar identitats visuals per secció. Cada combinació genera una URL compartible, ideal per fer proves A/B o validar propostes amb clients. Cada secció incorpora els seus propis controls de canvi d’estil amb estats actius, que es poden amagar fàcilment quan ja s’ha escollit una direcció visual.

La plantilla està pensada perquè sigui fàcil d’utilitzar. Tots els textos es poden editar des del panell de propietats, sense haver d’entrar dins dels components. Dues col·leccions CMS gestionen les funcionalitats —amb pàgines de detall tipus case study— i els testimonis. Els colors i les tipografies estan organitzats en tres carpetes de tokens, cosa que permet fer un rebranding complet en aproximadament 30 minuts. El fitxer també inclou una pàgina de guia de la plantilla i un tauler de matriu d’estils amb nou vistes.

És una plantilla completa i preparada per a producció: home, índex de treballs, pàgines de detall gestionades amb CMS i sidebar de dades ràpides, pàgina 404 personalitzada, menú hamburguesa natiu en mòbil, disseny responsive en tots els breakpoints, contrast WCAG AA en les tres paletes, animacions intencionades, HTML semàntic i bons resultats a Lighthouse.

Inclou:

• 3 identitats visuals completes: Minimal, Bold i Editorial

• 8 components de secció × 3 variants d’estil cadascun

• Selector d’estil en directe: controls per secció, toggle flotant i paràmetres d’URL

• CMS: funcionalitats amb pàgines de detall i testimonis

• Secció de preus amb pla destacat

• Pàgines de case study i índex de treballs

• 18 tokens de color, 15 estils de text responsive i 6 variants de botó

• Guia de la plantilla i matriu d’estils

• Pàgina 404 personalitzada, favicon, imatge social, estats hover i microanimacions