The Squarespace Master Website UI Library

For the past 10 years, I’ve witnessed Squarespace transform from an immersive site template platform, to a dynamic platform where any business or company can launch a beautiful website and manage all of their marketing. Squarespace played a pivotal role in opening the doors to my understanding of beautiful website design and design systems early on in my career, and I’ve trusted it as an invaluable design solution for most of my start-up/SMB clients; as it allows for beautifully designed websites and an even more beautiful and intuitive user back-end experience.

With the release of Squarespace’s new design system, Fluid Engine, back in August 2022, I was invigorated at the potential of more custom and bespoke website design without the limitations of its previous versions. Especially with the Squarespace Circle community sharing coding snippets and reformatting of content blocks, it became clear to me that Squarespace can be more than just a template website, but a development playground that can house any kind of design and perform any type of interactivity. That being said, the general tendencies to design “within the platform” end up compromising overall project vision, UI pattern and page design consistency, and overall productivity. As someone who learned early on to flesh out ideas before jumping into design, this obviously didn’t sit right with me.

With the intention of empowering other Squarespace designers, as well as designers not as seasoned with website or UI design, I set out to create a “master” website UI design system library in Figma, based on Squarespace’s content blocks and section layouts. This would allow designers to focus on the design—UX and UI respectively—without getting lost in the platform’s weeds. This was implemented on the Santoro Design website, as well as the Lynn Music Foundation website.