Turning days of email design into minutes
Lead Designer · Design Systems, Email
Problem
Every SearchKings email started as a duplicated Figma file with disconnected components, loose styles and mixed icon sets. Branding drifted from email to email, and an email that doesn’t look like the company starts to look like a phishing email.
Outcome
An end-to-end design and template system behind every email SearchKings has sent for three years. Teams build on-brand, client-ready emails in minutes instead of days, each with its MJML attached and ready to hand off to developers.
Mixed branding, mixed messaging
Logos, colours, buttons and copy changed from email to email, so nothing felt like it came from the same company.
Inconsistent structure across emails
Nothing used auto layout, so type sizes and gaps were set by eye and every email followed its own scale.
Hours lost on every email
Rebuilding and copying old files kept designers on each email far longer than needed, adding time and cost to every send.
A type scale built on email-safe fonts
Satoshi is the brand font, but most inboxes can’t load it, so Helvetica became the closest email-safe match, set in one fixed scale.
Auto layout on a 4pt grid
Components are built with auto layout on a 4pt spacing grid, so gaps are set once and repeat exactly in every email.
Colour for every mode and service
Brand and service colours are tested against light and dark text, with SK Grey in place of pure black, so emails stay readable in either mode.
Two sizes, every component
Every component ships as a 600 desktop and 360 mobile pair, so each email can be previewed and tested at both breakpoints before it’s sent.
One primary action per section
A standard across every template: each section gets a single primary button, so the next step never competes with another.
Progress clients can see
Clients see which steps are done and what’s next on the way to Google Guaranteed, so they always know where they stand.
An invoice that reads like a summary
Each service, its amount and one clear total come first, so clients understand what they’re paying for at a glance.
Built from templates, not from scratch
Each email type has a template designers start from, and the same template is built in code, so developers reuse it too.
Every email sounds like SearchKings
Shared greetings, calls to action and sign-offs make emails familiar to read and instantly recognisable as the real thing.
Past emails become a playbook
Documenting every live email gives the team a full record to reference, so a new partner or franchise starts from what already worked.
From new file to first draft in minutes
Every file follows the same setup, so any designer can open it, pick a template and start on-system from the very first frame.
What’s designed is what ships
Each component carries its MJML in Dev Mode, so developers build from the same source as design, with nothing lost in translation.