Multi-Theme System for Scalable City Websites

Multi-Theme System for Scalable City Websites

Multi-Theme System for Scalable City Websites

Introduction

Designed and implemented a scalable multi-theme system for a white-label platform that creates municipal websites for cities across the USA.

The system allows cities to maintain a unique visual identity while adhering to a consistent, user-friendly structure optimized for accessibility and usability.

CLIENT

Town Web

LOCATION

USA 🇺🇸

PROJECT DURATION

4 Months

ROLE

Design System Lead, Design Tokens Architecture

Overview

Objective

Streamline the design process by enabling designers to select and customize pre-built website sections in Figma.

Implement Design Tokens to allow quick adjustments for key properties like Typography, Colors, Spacing, and Corner Radius.

Enhance front-end development by exporting design tokens for seamless integration into the code, reducing manual updates.

Improve scalability and consistency across multiple city websites while maintaining flexibility for client-specific customizations.

Problems

Time-Consuming Design Process

  • Each new client required a custom UI design from scratch, despite the structural similarities between websites.

  • Designers had to manually adjust layouts, typography, colors, and spacing for every project.

Inefficient Front-End Development

  • The front-end team had to manually implement styles for each new client, increasing development time.

  • Lack of a structured system led to inconsistencies and repetitive work.

Lack of Scalability in Theming

  • Clients had different branding preferences, requiring case-by-case design adjustments.

  • No efficient way to apply multi-theme options across projects.

Inconsistencies in Design & Development Handoff

  • Designers and developers had a disjointed workflow, causing delays and inconsistencies in implementation

solutions

Implemented a Design Tokens System in Figma, allowing designers to select pre-built section layouts from a dropdown and modify key properties instantly from Figma Variables.

Standardized design properties with exportable design tokens, enabling front-end developers to simply replace variables in the code instead of manually coding styles.

Created a Multi-Theme System where each client could choose section layout and choose from two preset options for Typography, Colors, Spacing, and Corner Radius, ensuring faster customization while maintaining flexibility.

Used Figma Variables & Tokens Export to ensure smooth handoff, where front-end teams only needed to update tokens instead of reworking styles from scratch.

Challenges

Integrating Multiple Templates into One Master Template

The project aimed to combine 4 different templates into a single master template. This required ensuring that the new template was flexible enough to accommodate various client needs, while keeping the design structure clean and scalable.

Creating Components with Multiple Variants

Designing the master template involved building components with a variety of variants to accommodate different layout preferences.

This posed a challenge in organizing and managing variants to ensure seamless navigation and selection by designers.

Managing Style Customization with Figma Variables

The core challenge was to enable clients to select from a range of style options (colors, typography, shadows, spacing, and corner radius) easily.

This needed to be done via a simple dropdown menu instead of applying these properties manually across the entire design for each new client.

Ensuring Ease of Use for Designers

The task was to structure Figma Variables so designers could quickly activate a style variant from a dropdown, without needing to manually adjust each style element (e.g., typography or spacing) for every project. This required a careful balance of flexibility, scalability, and simplicity.

Strategy and Implementation

To successfully integrate the Multi-Theme System using Design Tokens, a structured approach was taken to align both design and development teams.

  1. Developer Collaboration & Understanding Constraints

The first step was to educate developers on the design tokens concept, demonstrating real-world examples to ensure a shared understanding.

I also explored the CMS builder they were using to identify any technical constraints that could impact implementation.

  1. Testing the End-to-End Process

To validate the workflow, we conducted a pilot test using two key components:

  • QuickLinks Section

  • Hero Section

This allowed us to refine the process before scaling it to the full system

  1. Structuring Design Tokens in Figma

We established a systematic approach for creating and managing design tokens:

  • Built components with variants for flexible section selection.

  • Planned and structured tokens for Colors, Typography, Spacing, Borders, and Sizing with two selectable options for each.

  • Defined tokens in Figma Variables, ensuring they could be activated via a dropdown menu.

  1. Exporting and Implementing Tokens

  • Exported tokens to JSON format and converted them into CSS variables for easy integration into the front-end.

  • Created comprehensive documentation to guide developers on how to implement and manage design tokens.

  1. Developer Feedback & EnhancementsExporting and Implementing Tokens

  • Shared the tokens with the development team and collected feedback on usability and implementation feasibility.

  • Made necessary refinements to certain variables to improve flexibility and ease of use.

Outcome

The structured strategy led to a successful and efficient integration of design tokens, significantly streamlining customization and development workflows. The result was a scalable multi-theme system that allowed quick design modifications without manual updates for every new client. 🚀

In the Gif below, you can see the developer copy the new Variables.css file and replace it in his code files, then refresh the browser, you can see the entire style has been changes. This was a part of End-to-end testing process for "Hero section and Quicklinks Section". After that we got a feedback from the developer and repeat the process for the rest of sections.