The project
The work was done within Farco Studio’s Webflow development team: a CMS system that creates each bank’s microsite without rebuilding anything.
Collections per bank for the microsite, the referral form, the thank-you pages, the legal pages, the benefits and the pricing questions, connected by references.
The challenge
To have twenty-one different brands live on a single site without any resembling another and without multiplying the work by twenty-one.
The details
Recorded on a partner bank’s microsite
The CMS
Collections for each bank’s microsites, the referral form, two types of thank-you pages, the privacy policy, the terms of use, the benefits and the pricing questions.
The site map is built with references and multi-references: each bank gets its complete experience from its entries.
Colour
The palette of Business Online Payroll, by how much it is used on the delivered site. Hover over a colour.
Usage measured on recordings of the delivered site: every pixel counts towards the nearest colour; photos and gradients aside.
Typography
Measured on businessonlinepayroll.com, at 1440 px.
Spacing
- Base step
- 8 px
- Between sections
- 136 px
- Container
- 1272 px
- 4margin, 12 times
- 16padding, 47 times
- 20gap, 13 times
- 24padding, 27 times
- 32gap, 16 times
- 40padding, 24 times
- 56gap, 17 times
- 64padding, 7 times
- 96padding, 8 times
The paddings, margins and gaps that repeat most on the delivered site, at 1440 px and true scale; almost all fall on 8 px steps.
Motion
Smooth scrolling with Lenis and forms with Finsweet.
One bank, its brand
Its colours are Webflow variables connected to the CMS: switching bank means switching entry.
The same pieces
Benefits and product blocks that each bank reuses: the text and the brand change.
The close
Full-bleed photography, white headline and the product video: the call to get started, with the bank’s brand.
Under the hood
Tools
- Webflow
- Lenis
- Finsweet
How it is built
- Webflow CMS with references and multi-references
- Colours per bank through variables linked to the CMS, with a naming scheme built to grow
- Smooth scrolling with Lenis and forms with Finsweet
In numbers
- 21 banks, each with its microsite
- 1 single CMS architecture
Conclusion
A CMS system creates each bank’s microsite without rebuilding anything: its colours are variables connected to its entry and its pages come from shared collections.
Twenty-one partner banks, each with its own brand, on a single architecture. It was done within Farco Studio’s Webflow development team, for SurePayroll.
“The client’s testimonial about this project goes here: two or three lines, with their charcoal portrait. Placeholder for Eric.”