TEMPLATE DESIGN SYSTEM
Reducing design and engineering TAT while making website templates anything but boring
PROJECT OVERVIEW
I designed a flexible, future-ready system for Neo website AI templates. Every color, font, and layout adapts perfectly when switching designs—making our template creation faster, cleaner, and easier to manage.
What if users could swap website templates without losing a single word or image? I built a system that lets users switch effortlessly, preserving 100% of their content, while offering 2,700+ visual variations via typography and color themes.
Why we needed this
When I started working on Neo AI’s website builder, our users were small business owners, not designers. They simply wanted a great-looking website up fast.
CONTEXT AND PROBLEM
We needed dozens of templates tailored to different industries like cleaning, to salons, retail, creators and more.
Templates alone aren’t enough. The real magic happens when users can experiment and switch templates without re-entering any content.
Most popular builders like WIX or Squarespace don’t work that way. Switching often breaks layouts or erases copy. That stops users from exploring.
How I kicked things off
I started by mapping out our user personas: offline services, online services, retailers, creators etc. The offline services (cleaning services) template became our pilot - perfect for testing lead generation, service listings, bookings.
A MODULAR TEMPLATE STRUCTURE WAS DEFINED
Sections like Intro, Services, Gallery, About, Appointment, Contact.
Each section needed named content elements, like services.title, gallery.image, contact.primary-btn.
This way, no matter how a section looked visually, its content would always have a home during a template switch. That consistency is the foundation of the system.
Building the engine - System architecture
DESIGN TOKENS & VARIABLES
Typography: 15 curated font pairs, each with desktop and mobile scales - for each template.
DESIGN TOKENS & VARIABLES
Color: 15 theme packs (with tonal variants, text states, error states, shadows) for each template.
RESUSABLE COMPONENT
Buttons (primary, secondary, tertiary, icon variants), cards, section scaffolds — all hooked into the variable system.
ENGINEERING COLLABORATION
Every template uses the same slot or element structure. That means switching from Cleaning to Salon (or any other template) keeps content intact.
SCALE CAPABILITY
With 12+ templates, each with 15 color themes × 15 font pairs, the system can generate over 2,700 unique site styles automatically.
The system in action, here's how it all came together
Why it mattered
IMPACT IT CREATED
Design & dev time shrank: templates became building-block assemblies, not full redrafts.
User freedom increased: they could experiment without the fear of losing work.
Visual variety that feels intentional, not random.
We shipped 50+ templates across verticals, all cross-compatible.
This wasn’t a quick build; it required systems thinking
Figma was our single source of truth - tokens, components, and templates all linked to this library.
Folder structure and naming conventions (like hero-title-H1 or btn-primary-large) ensured consistency.
I documented component anatomy, token usage, and section schemas—so teammates and future designers would have clarity.
We staged rollout, gathered internal feedback, and iterated on edge cases like truncated lists or fallback CTAs.
Key learnings and future scope
FUTURE SCOPE
Token-first design unlocks massive flexibility.
Early engineering buy-in ensures systems stay robust across implementation.
Next up: introduce accessibility overrides, and build a section marketplace for plug-and-play expansion.
This project let me flex both systems thinking and visual design. It ended with a scalable template ecosystem where users can switch designs fearlessly, designers ship fast, and every website feels custom.
Here you'll only find
isha.designworks@gmail.com