Marketing Design System
The starting point
An agency had delivered two pages that defined the visual direction. Color, type, spacing, content structure. That was the starting point.
Two static frames. No breakpoints. No token architecture. No multi-brand flexibility across four business lines.
My job was to turn two pages into a system.
Building from two pages
Before building anything I needed to understand who the system was actually for. Designers needed flexible patterns they could move fast with. Developers needed predictable states and behaviors. Stakeholders needed confidence the brand would hold at scale.
How I built it
I worked atomic from the start. Atoms into molecules into organisms into templates into pages. Every decision at the token level so changes propagated instead of cascaded into manual updates. Everything built in Figma variables mapped directly to TIAA's Ethos atomic system so design and engineering were speaking the same language from day one.
Seventy-five patterns across five breakpoints and four brand palettes. Each one built for AEM's authoring model from the ground up, not retrofitted. Authors could only make decisions that made sense. Consistency stopped being something you enforced and started being something that just happened.
Building for four brands
Every pattern had to work across four distinct business lines, each with its own visual palette. Nothing could be designed in isolation. Every component was pressure tested across all four themes before it was considered done.
A hero that worked in one palette had to hold up in the others without breaking hierarchy, contrast, or readability. Token architecture made this scalable. Switching between brand palettes was a theme change not a rebuild.
That flexibility created extreme versatility. One component could be used across hundreds of pages in completely different ways without ever feeling inconsistent.
The shift to templates
Instead of telling teams how to build pages I gave them pages to build from. I designed a template system that put the components in context, showing how patterns combined into full layouts across breakpoints and brand themes.
The difference was immediate. Teams stopped asking how to use the system and started building with it. The template became the documentation. Seeing a component in a real layout at every breakpoint was more useful than any annotation I could write.
What shipped
0%
0%
more page launches.
0%
0%
growth in advice sessions.
0%
0%
drop in bounce rate.
0%
0%
faster page design.
Client
TIAA
Scope
UX/UI Design, System Design
Contributers
Darrin Amellio, Eric Shoemaker, Miraj Mehta
Duration
2023-2024
Scaling a century-old brand across enterprise marketing
TIAA was mid-rebrand. Eighteen fragmented design systems meant design, engineering, and content were all working from a different version of reality. No tokens. No breakpoints. No authoring logic for the CMS. Teams could not ship consistently. Nobody was aligned.
My director pulled me aside and said he needed me to fix it.
I was handed two finished web pages and told to build everything else. No clean foundation. No runway. Campaign teams were already waiting to use a system that did not exist yet.
So I got to work.
Marketing Design System
Marketing Design System
Client
TIAA
My role
UX/UI Design, System Design
Contributers
Darrin Amellio, Eric Shoemaker, Miraj Mehta
Duration
2023-2024
Scaling a century-old brand across enterprise marketing
TIAA was mid-rebrand. Eighteen fragmented design systems meant design, engineering, and content were all working from a different version of reality. No tokens. No breakpoints. No authoring logic for the CMS. Teams could not ship consistently. Nobody was aligned.
My director pulled me aside and said he needed me to fix it.
I was handed two finished web pages and told to build everything else. No clean foundation. No runway. Campaign teams were already waiting to use a system that did not exist yet.
So I got to work.
“Jeremy is a rare combination of a true design systems architect and an exceptional UX leader. He joined at a moment when we were building our UX organization from the ground up, and he quickly became a foundational force in shaping not only our systems, but how the team worked, learned, and grew.”
Tamara Namaste
Head of Digital Marketing at TIAA
The starting point
An agency had delivered two pages that defined the visual direction. Color, type, spacing, content structure. That was the starting point.
Two static frames. No breakpoints. No token architecture. No multi-brand flexibility across four business lines.
My job was to turn two pages into a system.
Building from two pages
I audited both pages and extracted every pattern. Spacing rhythms, type scales, grid structures, component behaviors. Sixty five patterns emerged, each one a decision about what the system needed to do.
For each component I built five breakpoints, mobile through wide desktop. Then mapped everything to atomic tokens so switching between the four brand palettes was a theme change not a rebuild. Token-connected components meant every team was working from the same foundation regardless of which business line they were designing for.
How I built it
I worked atomic from the start. Atoms into molecules into organisms into templates into pages. Every decision at the token level so changes propagated instead of cascaded into manual updates. Everything built in Figma variables mapped directly to TIAA's Ethos atomic system so design and engineering were speaking the same language from day one.
Seventy-five patterns across five breakpoints and four brand palettes. Each one built for AEM's authoring model from the ground up, not retrofitted. Authors could only make decisions that made sense. Consistency stopped being something you enforced and started being something that just happened.
Building for four brands
Every pattern had to work across four distinct business lines, each with its own visual palette. Nothing could be designed in isolation. Every component was pressure tested across all four themes before it was considered done.
A hero that worked in one palette had to hold up in the others without breaking hierarchy, contrast, or readability. Token architecture made this scalable. Switching between brand palettes was a theme change not a rebuild.
That flexibility created extreme versatility. One component could be used across hundreds of pages in completely different ways without ever feeling inconsistent.
First approach: annotations
My first instinct was documentation. I annotated every component, spacing rules, type behavior, grid logic, interaction states. The thinking was that clear documentation would give teams everything they needed to build correctly.
It did not scale. Annotations required teams to read, interpret, and apply rules manually every time they built something new. The more pages teams needed to ship the more the annotation model broke down. It was creating work instead of reducing it.
I needed a different approach.
The shift to templates
Instead of telling teams how to build pages I gave them pages to build from. I designed a template system that put the components in context, showing how patterns combined into full layouts across breakpoints and brand themes.
The difference was immediate. Teams stopped asking how to use the system and started building with it. The template became the documentation. Seeing a component in a real layout at every breakpoint was more useful than any annotation I could write.
“Jeremy led the design systems work with clarity, rigor, and vision. He helped transform a fragmented environment into a cohesive, scalable system that allowed teams to move faster while improving quality and consistency. His work made complexity manageable and gave designers and partners the confidence to build with intention, not guesswork.”
Tamara Namaste
Head of Digital Marketing at TIAA
What shipped
0%
0%
more page launches.
0%
0%
more page launches.
0%
0%
growth in advice sessions.
0%
0%
growth in advice sessions.
0%
0%
drop in bounce rate.
0%
0%
drop in bounce rate.
0%
0%
faster page design.
0%
0%
faster page design.