A commercial Squarespace template that customers could adapt to their own content and identity.
Modular Content System
Capri
A commercial Squarespace template that customers could adapt to their own content and identity.
One template system for service, portfolio and commerce content.
Website design · Content architecture · Design system
Client
FloAgency Inc.
Role
Product Designer
Sole designer on the project
Scope
Template architecture & content flow
Component & style system
Desktop & mobile design
Design documentation
Project context
Designed for customers to adapt.
Capri was designed for FloAgency Inc. as a commercial Squarespace template for its Squaremuse marketplace, intended for customers to purchase and adapt for their own websites.
The design needed to accommodate different identities and content while giving customers control over sections, page composition, imagery, colour and typography.
The template was structured from reusable sections and page components. Customers could add, remove and reorder content, create additional pages and enable only the functionality they needed — while the underlying visual system kept the experience coherent.
01 — System approach
Reusable blocks.
A coherent whole.
The template was structured from reusable sections and page components. Customers could add, remove and reorder content, create additional pages and enable only the functionality they needed — while the underlying visual system kept the experience coherent.
01 Introduction and profile sections assembled within one template.
02 A reusable contact section combining details and an enquiry form.
02 — Content architecture
One system.
Different content structures.
Capri was designed to support different types of content within one modular template. Customers could combine, add or remove pages and sections for services, portfolio content and commerce while retaining the same underlying design language.
01
Services
02
Portfolio / Gallery
03
Commerce
Different content structures within one modular template system.
01
Services
02
Portfolio / Gallery
03
Commerce
Different content structures within one modular template system.
03 — Designing within Squarespace
Flexibility within constraints.
Customer flexibility, supported by a defined structure.
The template had to fit Squarespace’s editing and responsive constraints. Section structure and layout rules were defined at component level, giving customers a framework for changing content, composition and presentation.
The template had to fit Squarespace’s editing and responsive constraints. Section structure and layout rules were defined at component level, giving customers a framework for changing content, composition and presentation.
Customer flexibility, supported by a defined structure.
04 — Responsive system
From a wide layout
to a vertical sequence.
01 Desktop: supporting entries frame the featured post.
02 Mobile: the featured content follows a single reading order.
01 Desktop: supporting entries frame the featured post.
02 Mobile: the featured content follows a single reading order.
Individual participant parameters
The blog block uses surrounding entries to frame a featured post on desktop. On mobile, it becomes a focused vertical sequence: section heading, featured image, article details and action.
01 Type hierarchy and button treatments as reusable style foundations.
05 — Component & style system
Make customisation
part of the system.
Typography, colour styles, buttons and interface treatments were defined as a coordinated set. Customers could customise the template’s appearance from these starting points, using shared hierarchy and component rules to guide their choices.
01 Type hierarchy and button treatments as reusable style foundations.
02 Colour-style options for different visual identities.
03 Text colour, style name and background colour specified together.
Desktop and mobile layouts, content sections and style variations in the final template composition.
Distinct resource types are separated into clear destinations while remaining part of the same navigation and visual system.
06 — Design outcome
Many expressions.
One publishing system.
The final design brought page layouts, content blocks and style options into one commercial template. It could support different website identities and compositions while retaining a recognisable publishing structure.
Commercial template product for the Squaremuse marketplace.
Desktop and mobile layouts, content sections and style variations in the final template composition.
DESIGN SUMMARY
Different content.
A shared language.
A commercial template designed around customer choice, with reusable structures and visual rules that give those choices a coherent foundation.
A commercial template designed around customer choice, with reusable structures and visual rules that give those choices a coherent foundation.
DESIGN SUMMARY
A commercial template designed around customer choice, with reusable structures and visual rules that give those choices a coherent foundation.