Assembly
Design System
January 2024
The challenge
Assembly is one of the companies that acquired CUE as a white-label product. The challenge involved rebranding the platform to align with Assembly’s visual identity, expanding their Design System to meet their specific needs, and evaluating the integration of additional features into the platform.
My role and dutties
As the Principal UX/UI Designer, I was responsible for leading the creation of Assembly's Design System. This involved building upon and adapting the existing CUE DS. My tasks included designing and documenting ad hoc components, refining interaction patterns, and modifying the color palette to infuse the interface with a distinct personality while maintaining brand alignment. In addition, I conducted usability evaluations, collaborated closely with developers to ensure pixel-perfect implementation, and maintained design consistency across multiple platforms. I also worked cross-functionally with product managers and stakeholders to align design decisions with business goals and user needs.
Overview of the process
1. Audit & Mapping
I began by conducting a full audit of the CUE Design System to assess what could be reused, what needed to be modified, and what Assembly would require based on their product roadmap. I mapped each component and token against Assembly’s brand guidelines to identify gaps and areas of overlap.
2. Branding Integration
The next step involved integrating Assembly's visual identity into the system. This included:
-
Defining new color tokens based on Assembly’s palette
-
Updating typography styles to reflect their brand tone
-
Adjusting spacing, elevation, and radii values to meet their visual rhythm
-
Ensuring accessibility compliance with the new color contrasts
​
3. Component Overrides & Theming
Rather than creating an entirely new system, I implemented a theming structure to keep the base logic intact. This allowed Assembly to inherit the robust CUE component library while applying their own skin. Components were enhanced with props and design variants to allow flexibility while remaining consistent.
​
4. Documentation & Handoff
All changes were thoroughly documented in Figma and aligned with the dev team’s Storybook instance. I created a clear handoff structure, including:
-
A changelog of customized vs. inherited components
-
Token documentation mapping CUE → ASM overrides
-
Usage guidelines for Assembly designers and developers
-
​
5. Collaboration & Iteration
Throughout the process, I worked closely with Assembly’s brand, product, and engineering teams to validate assumptions, review iterations, and prioritize new components specific to their use cases (e.g., dashboards, modular cards, reporting views). Feedback loops were established to ensure alignment and to continually evolve the system post-launch.
ASM's color palette
As you can see, the color palette presented an issue from the start—red was chosen as the primary accent color. This posed significant usability and accessibility challenges, as red is conventionally associated with error and warning states in UI design. Using it for buttons, highlights, and interactive elements created potential confusion and inconsistency in user perception.
The extended color palette, though well thought out for marketing purposes, lacks balance.
​
Expanded color palette for UI
First hi-fi drafts
The client never got to see the dark theme. Stagwell Marketing stakeholders decided it was best to present only the light version, as it was simpler to implement and considered the safer option. I was eager to explore the dark theme, but ultimately, the light version aligned better with stakeholder priorities at the time.
Top Nav Bar
Slightly different than the one in CUE, but using that one as basis.
Side Nav Bar
Steppers
Responsive
Screens
You might recognize them from the case of CUE.
I keep on working on this design system
making it grow and improve
As we enter 2025, SMC’s main Design System has been fully retokenized, and this Design System is now undergoing the same retokenization process to ensure consistency and scalability.
To be continued.