A design system that made client sites 30% faster from design to live.
At Equerry Co Consulting I designed client websites in Figma and built them myself in Squarespace. I turned the parts I kept rebuilding into a modular system of tokens, styled blocks and custom CSS, so each new site went from approved design to live about 30% faster.
VIEW LIVE SITE ↗
01 · In brief
One system behind every client site.
The problem
Every client site started from scratch: new buttons, new spacing, new CSS, then the same fixes again on the next site.
What I did
Audited existing screens, defined tokens, built components with variants, and documented how to use them.
Outcome
About 30% faster from approved Figma design to live site. For Equerry clients, Jelka’s inbound enquiries rose 500% with 7.1M social reach in 2024, and Cool Ridings’ organic traffic grew 445% month on month.
My part
I worked directly with each client to gather requirements and designed in Figma. My manager reviewed the designs, then each client approved or revised them before I built the site in Squarespace. Along the way I introduced the modular design system and maintained it, built its components in accessible HTML, CSS and JavaScript, and ran usability tests and interviews with users.
02 · Challenge
Every screen was a one-off.
Each client site was designed and built from a blank page, so every site meant restyling the same buttons, forms and sections and fixing the same bugs again.
How might we
How might we make every new client site start from parts that are already designed, built and tested?
03 · Audit
Counting the mess first.
I screenshotted and grouped every element across the sites I’d built. The same buttons, forms and section layouts had been rebuilt slightly differently each time, in size, colour and corner radius. That inventory showed what to standardise first.
04 · Foundations
Tokens before components.
Colour
16 colour primitives mapped to 20 semantic tokens, so a change in one place updates everywhere.
Type
A 6-step type scale with clear roles for display, headings, body, labels and captions.
Spacing
A 4-point spacing scale shared between Figma and the site CSS.
05 · Components
Built to be modular.
Components were built with variants and properties, so one button covers every size, state and icon option instead of dozens of copies.
— Core set: buttons, form inputs, status labels, toggles, checkboxes, plus styled Squarespace sections for heroes, feature grids, newsletters and footers.
— Every component includes default, hover, focus, disabled and error states.
— Accessible by default: contrast checked, focus states visible, labels written in.
06 · Hand-off
Design and build used the same names.
I designed every component in Figma and built it once in Squarespace with blocks and custom CSS, using the same names in both. Each component had usage notes and do's and don'ts, and new pages were assembled from styled blocks instead of designed from scratch.
07 · Outcome
Measurable, not just tidier.
30%
faster from design to live site
3
years building and maintaining it, 2022 to 2025
500%
more inbound enquiries for Jelka after site structure and content changes, with 7.1M social reach in 2024
445%
month-on-month rise in organic traffic for Cool Ridings after redesigning the navigation, structure and on-page SEO
90 · 96
Accessibility and Best Practices for ca-ada.com, on desktop and mobile (Lighthouse, November 2026)
Compared how long sites took from approved Figma design to live, before and after the system, across the client sites I built between 2022 and 2025. Each design went through three rounds of client revisions before I built it.
08 · Options I rejected
Options I didn’t take.
The system came from saying no to the way every site had been built before.
✕ Rejected
Designing every client site from a blank page
✓ Instead
Every new site starts from parts that are already designed, built and tested.
✕ Rejected
A separate copy of each button for every size and state
✓ Instead
One component with variants: 3 variants × 4 states from a single button.
✕ Rejected
Hard-coded colours inside each component
✓ Instead
Semantic tokens, so a rebrand changes 16 primitives, not every layer.
✕ Rejected
A design file and a site matched by hand
✓ Instead
The same names in Figma and in the Squarespace custom CSS.
09 · Reflection
A system is a product too.
Figma was far less advanced when I built this. Today I’d lean on it much more: tokens as Figma variables, components with properties and Dev Mode specs, so the design file and the Squarespace CSS stay in sync instead of being matched by hand. Building it taught me that adoption matters as much as the components themselves.
Next project