visit live website here
Elevate.ca
For a dual focus project spanning consumer facing assets & scalable design systems, including branding for existing and new sub-brands, we strategically segmented the scope of work.
Solutions
Seamless Multi-Brand Integration
Custom iconography and gradient-based color systems were introduced to visually tie sub-brands to the parent identity, reinforcing recognition while allowing for unique expression.
Scalable Brand Foundations
A modular UI component library with dynamic theming was developed so sub-brand LPs could adopt core functionality while seamlessly applying their own color schemes. This flexibility allowed new landing pages to launch efficiently—even as foundational branding guidelines were still in development.
Unified Cross-Brand Experience
Targeted user flow optimized navigation, directing different audience segments to tailored journeys. Shared UX patterns were implemented to create familiarity across branded properties, ensuring harmony throughout the website experience.
Accelerated Delivery Without Compromise
Reusable, themable components streamlined landing page production, cutting development time without sacrificing quality.
Challenges
Multi-Brand Integration
The website required to onboard new sub-brands requiring distinct but cohesive identities
We identified early on that there was a need for unifying legacy sub-brands w/ parent brand standards
Accelerated Timeline
As the parent product was event-focused and already live, landing pages and digital assets needed rapid deployment under tight deadlines.
Consistent Cross-Brand UX
All deployed products needed to preserve their function while ensuring visual harmony between parent brand and sub-brands
User experience across all branded properties didn’t feel very familiar to its parent brand or each other. A need for unilateral experience was required.
Evolving Brand Foundations
There was a requirement for new landing pages for an in-market product while core branding and UI was still developing
Navigation Flow
Wireframes
The new logo design offers a more cohesive visual identity, seamlessly unifying
previously disjointed
elements.
vs.
Pantone
P 139 -5 U
CMYK
49 | 0 | 42 | 0
RGB
141 | 239 | 190
#HEX
8DEFBE
Pantone
P70 -15U
CMYK
4 | 100 | 92 | 0
RGB
228 | 0 | 42
#HEX
E4002B
Pantone
P70 -15U
CMYK
32 | 100 | 64 | 32
RGB
132 | 0 | 55
#HEX
840037
Pantone
ELEVATE BLK
CMYK
75 | 66 | 62 | 67
RGB
36 | 39 | 42
#HEX
24272A
Pantone
P99 -7U
CMYK
78 | 75 | 0 | 0
RGB
80 | 52 | 250
#HEX
5034FA
CMYK
0 | 0 | 0 | 0
RGB
255 | 255 | 255
#HEX
FFFFFF
Pantone
0000A
CMYK
000/000/000
#HEX
1D484E
Pantone
0000
CMYK
0 | 0 | 0 | 0
RGB
255 | 255 | 255
#HEX
FFFFFF
Pantone
P 101 - 16U
CMYK
97 | 83 | 46 | 58
RGB
4 | 29 | 58
#HEX
041D3A
design system
To ensure consistency, efficiency, and brand cohesion across Elevate’s digital platform, I developed a modular design system with reusable UI components, typography hierarchies, and an accessible colour palette. By documenting patterns in Figma and establishing clear governance rules, this system streamlined collaboration between designers and developers—accelerating iteration (a consistent requirement w/ this product). The result? A unified, scalable foundation that enhanced both user experience and team workflow.
Typography
Properties
Iconography
Use-case
Elevate.ca uses icons from the selection below often to highlight content in variation with website components.
36px
48x48px grid
40px
8px
Icon Colours
visit live website here