UX/UI Design
Led the project, working closely with teammates, external teams and developers.
Date
2024
Project / Client
TTC
Collaborated with cross‑functional teams to consolidate fragmented brand style guides and align design and engineering workflows.
1. The Challenge
TTC managed multiple brand websites, each with its own style guide, resulting in inconsistent typography, redundant components, and disjointed front-end implementation.
Problems identified:
-
Duplication of typography, button variants, and colour tokens
-
Maintenance overhead due to inconsistent naming and token use
-
Design-to-code friction, leading to slow handoffs and implementation errors
2. Research & Benchmarking
Analysed top design systems for best practices:
-
Material Design (Google)
-
Atlassian Design System
-
Shopify Polaris
-
IBM Design Language
-
Salesforce Lightning Design System
Insights guided the introduction of naming conventions, token structures, and component hierarchies.
3. Design Strategy & Execution
To boost consistency and efficiency across our multi-brand websites, the Design Team partnered with Front-End Developers to streamline and unify our Style Guides. By removing redundancies and standardising typography, buttons, and colour tokens, we created a scalable, maintainable system that balances brand identity with technical cohesion.
Naming Convention
Developed a clear, modular naming system, easing communication between designers and developers.
Typography
Streamlined to a core text style set (e.g., Title, Subtitle, Paragraphs, Buttons, Labels) with Tailwind-inspired sizing and spacing.
Allowed for brand-specific tweaks while maintaining core consistency.
Buttons
Audited and removed unused variants, creating a three-tier system: Primary, Secondary, Tertiary.
Rebuilt buttons using Tailwind tokens for consistency and maintainability.
Colour Palettes
Defined separate hex-based palettes per brand, eliminating overlaps.
Included Figma descriptions and opacity rules (5% increments) for developer clarity.
Iconography
Adopted Material Design Icons, leveraging fill, weight, grade, and optical size options for a flexible yet cohesive icon system.
Additional Design Tokens
Added standardised tokens for Shadows, Border Radius, and Opacity, improving design clarity and developer handover.
Style Guide for Multiple Brands
4. Tools & Collaboration
-
Built upon TailwindCSS utility tokens, featuring modular, scalable components.
-
Utilised Figma Local Variables to manage global tokens like colour, typography, spacing, and effects.
-
Maintained tight alignment with developers throughout implementation, ensuring smooth production translation.
5. Visual Evolution
Typography
Improved the typography by removing unique font sizes across all brands to align more consistently with Tailwind CSS values.
Colours
We have minimized the amount of unused styles by displaying only unique classes in the Main colour palette without any repetitions. However, the Contextual values palette will still show repeated colour tokens.
Buttons & Links
We have reduced the number of unused buttons and only show the ones that we actually use on the website.
6. Outcomes & Reflection
-
Eliminated design duplication, reducing redundancy in typography, buttons, and colours
-
Accelerated design-to-code delivery with standardised components and tokens
-
Enabled brand differentiation without sacrificing system-wide consistency
-
Created a scalable, maintainable design system aligned with developer workflows
Lessons learned:
-
Some tokens (e.g., extra font weights) proved excessive—future iterations will favour leaner defaults.
-
The balance of “what we can create” vs. “what we should create” will guide future optimisation.
7. What’s Next
-
Iterate the token set based on real-world usage—pruning where unnecessary
-
Extend tokenisation to new properties as brands and UI components evolve
-
Enhance collaboration with continuous developer feedback loops and documentation refinement
Final Thoughts
This project successfully transformed a fragmented multi-brand system into a cohesive, developer-friendly design ecosystem. It showcases how strategic design-token rationalisation, backed by careful tooling and collaboration, can improve efficiency, clarity, and system resilience—all while preserving unique brand identities.
Note: Retrospect, some of the tokens we created were unnecessary—for example, labels and buttons didn’t need as many font size variations to match titles. We also included too many font weights when a single default weight would have sufficed.
They were so preoccupied with what they could create, they never stopped to ask if they should.