TTC Tech design team, external stakeholders, and developers.
Date
2025 and Beyond
Project / Client
TTC
Building a Scalable, Visual-First Design System for a Growing Travel Brand Portfolio
This case study initiates the development of an evolving, multi-brand design system and style guide—engineered for scale, consistency, and adaptability across 2024 and beyond.
Envisioned as a living document, the system was launched with strong foundational principles and will continue to evolve alongside our digital products, design standards, and branding strategies.
Our goal?
The migration to a new CMS and Tailwind CSS–based front-end framework presented the perfect opportunity to establish a centralised design system—a consistent, reusable foundation across all brands. This empowers design, development, and content teams to deliver cohesive, high-performance, brand-specific experiences at scale.
Platform Foundation
The customer’s digital ecosystem is built on a Tailwind CSS–based front-end framework and a bespoke multi-brand design system, supporting brands including:
-
Contiki
-
Trafalgar
-
Costsaver
-
AAT Kings
-
Insight Vacations
-
…with more to follow.
This architecture enables brand-specific customisation while maintaining a shared, scalable core across all implementations.
System Architecture
Atomic Design Methodology
All components follow an atomic hierarchy—from atoms to molecules, organisms, and templates—allowing modular, reusable, and testable building blocks across the ecosystem.
Tailwind CSS Integration
Using Tailwind’s utility-first approach allowed us to:
Ensure consistency with design tokens.
Reduce bloated CSS by minimising overrides.
Accelerate development cycles.
Brand-Theming Support
We developed a shared token system, where:
A core base theme underpins all brands.
Brand-specific tokens override visual attributes like colour, typography, and spacing.
Custom identities remain distinct, yet technically unified.
Figma Design Structure
A vanilla/unbranded style guide in Figma serves as the source of truth.
Design tokens—colours, typography, spacing—are managed via Figma Local Variables. These tokens are then dynamically themed across brands, ensuring design alignment with the dev system.
This approach reduces file duplication and speeds up onboarding for new brands and components.
Configuration variables within the system architecture are used to tailor components for various brands.
Magic Picker & Editor Empowerment
✨ The Magic Picker
A key innovation of this system is the Magic Picker, a visual interface within Umbraco CMS that empowers non-technical users to:
-
Apply and preview brand styling instantly.
-
Update component styles without writing any code.
-
Select from Tailwind-compatible token values like colour, font sizes, spacing, and more.
🔄 Token-Based Updates
All styles are mapped to JSON files—updatable via Git, reflected across:
-
CMS styling options.
-
Figma component themes.
-
Live site outputs.
This setup allows real-time updates, seamless theming, and scalable maintenance across a growing list of brands.
Overview of the Tailwind-Based Component Library and Design System
🔖 Component Structure
The Design System (DS) library includes:
-
On-Page Components: Editable building blocks for content editors.
-
Built-In Components: Full sections designed for content editing.
-
Modules – Groups of elements serving a defined function.
-
Elements – Basic UI units with minimal logic or style.
-
Layouts: Reusable layout patterns structured around an 8px spacing system (8, 16, 24px, and beyond).
Each is presented in:
-
Alphabetical order for quick navigation.
-
With default CMS controls previewed alongside Figma mockups.
-
Branded and unbranded variants (as applicable).
-
Tailwind-Based Component Library and Design System
Neutral, unstyled components are used as the design system’s starting point before brand identities are layered on.
Benchmarking Components in Live Page Context
To validate component use at scale, we created a key Contiki benchmark page that displays components in situ and connects to the centralised component library. This work was carried out in collaboration with the Contiki team and the TTC Tech Design Team, who together helped shape the page structure and its implementation.
Other Touring brands
Worked on the key pages using components from the Tailwind-Based Component Library and Design System
Collaboration & Process
From day one, the Design and Front-End teams worked in tandem to:
-
Audit redundant styles/components.
-
Create shared naming conventions in design and code.
-
Align Figma variables with Tailwind tokens.
-
Build reusable starter kits for new brand onboarding.
Design handoff friction was minimised thanks to strict token parity and automation between design and code.
Microinteraction Enhancements
We refined not just components, but how they feel:
-
Focus states, transitions, and animations were harmonised across brands.
-
Microinteractions (e.g., button press, field validation) were smoothed to meet modern UX expectations.
-
These updates were validated through internal testing and are now configurable via design tokens for future flexibility.
Component Variants & Figma Workflow
To ensure brand adaptability:
-
A template file was shared across teams.
-
Designers used “detach + swap” workflows while retaining token dependencies.
-
Detached component patterns helped us identify missing states or needed variants, leading to more robust documentation.
Looking Ahead
As the ecosystem grows, we plan to:
Expand brand token management with accessibility baked in.
Integrate component usage analytics.
Extend the system to other channels (mobile, email, commerce).
Build out more sophisticated layout-level theming tools.
This design system is just the beginning—a scalable foundation built not only to deliver today, but to evolve continuously.
-
Tailwind-Based Component Library and Design System Neutral, unstyled components are used as the design system’s starting point before brand identities are layered on.