Web
Design System
Scope
Multi-brand web design system
Platform migration
Token architecture
Component system
Role
Led the visual implementation of the new brand identity across the ICS web platform
Defined web-specific semantic tokens building on the existing multi-channel variable system
Restyled and standardized core components across multiple websites
Created documentation and usage guidelines to support system adoption and future extension
Conducted design QA during migration to maintain consistency across brands
Implementing a multi-brand web design system for ICS during a platform migration, translating a new brand identity into scalable tokens and components across multiple websites.
The system establishes a shared foundation for future web products while allowing controlled variation across ICS brands.
The new brand identity was introduced through the existing web component system to ensure consistency across multiple websites. Early concept explorations helped align stakeholders on how key brand elements could translate into reusable components before system-level implementation.
Given the scale of the migration, user-experience changes were intentionally minimal and targeted to areas that supported conversion and brand expression while preserving established navigation patterns.
The homepage refresh demonstrates how brand updates were introduced without disrupting existing navigation structures or content hierarchy.
System Architecture
To support multiple brands during the migration, the web design system was structured into four layers
Primitive tokens: shared typography, color, and spacing variables used across channels
Semantic tokens: web-specific variables translating design intent into reusable roles
Components: modular UI elements built on the token system and adaptable across brands
Pages: composed templates developed with UX and stakeholders to support different content and conversion goals
This layered structure allowed brand expression to vary while preserving a consistent underlying system.
On top of this foundation, a semantic token layer was defined for web usage, enabling consistent application of design intent while allowing individual brands to express their identity within shared constraints.
Documentation
Clear documentation and visual examples were created to explain token usage, color roles, and component behavior, supporting handover and future extension of the system.
Multi-Brand Implementation
Example pages demonstrate how the system supports the main ICS brand alongside multiple sub-brands, allowing visual variation without fragmenting the underlying structure.
