Tinder Visual Refresh
Tinder Visual Refresh
Tinder Visual Refresh
2025
Tinder is the Spark
Role
Design Systems
Visual Design
Client
Tinder
Tinder is facing a critical challenge: a noticeable decline in brand perception among our key demographic. To address this issue, Tinder embarked on a comprehensive redesign initiative aimed at realigning Tinder with the evolving needs and expectations of modern users. As part of the Wave 1 approach, we introduced significant aesthetic updates to our product. These updates included a new color palette, font, typography styles, icons, and illustrations.
As lead product designer, my role was to drive the redesign initiative from design to implementation across color, typography, iconography and illustrations.
2025
Tinder is the Spark
Role
Design Systems
Visual Design
Client
Tinder
Tinder is facing a critical challenge: a noticeable decline in brand perception among our key demographic. To address this issue, Tinder embarked on a comprehensive redesign initiative aimed at realigning Tinder with the evolving needs and expectations of modern users. As part of the Wave 1 approach, we introduced significant aesthetic updates to our product. These updates included a new color palette, font, typography styles, icons, and illustrations.
As lead product designer, my role was to drive the redesign initiative from design to implementation across color, typography, iconography and illustrations.
2025
Tinder is the Spark
Role
Design Systems
Visual Design
Client
Tinder
Tinder is facing a critical challenge: a noticeable decline in brand perception among our key demographic. To address this issue, Tinder embarked on a comprehensive redesign initiative aimed at realigning Tinder with the evolving needs and expectations of modern users. As part of the Wave 1 approach, we introduced significant aesthetic updates to our product. These updates included a new color palette, font, typography styles, icons, and illustrations.
As lead product designer, my role was to drive the redesign initiative from design to implementation across color, typography, iconography and illustrations.
Palette inspired by the flame
Our color palette is inspired by the warmth and colors of the flame. Bright and bold, it reduces the pressure of dating, creating a fun and light atmosphere for connection.
Palette inspired by the flame
Our color palette is inspired by the warmth and colors of the flame. Bright and bold, it reduces the pressure of dating, creating a fun and light atmosphere for connection.
Palette inspired by the flame
Our color palette is inspired by the warmth and colors of the flame. Bright and bold, it reduces the pressure of dating, creating a fun and light atmosphere for connection.
Semantic color scheme
The Tinder semantic color scheme features token-based values derived from tonal base palettes for use across themes. These are the primary values to use when designing background, foreground or accent colors in the Tinder UI.
Semantic color scheme
The Tinder semantic color scheme features token-based values derived from tonal base palettes for use across themes. These are the primary values to use when designing background, foreground or accent colors in the Tinder UI.
Semantic color scheme
The Tinder semantic color scheme features token-based values derived from tonal base palettes for use across themes. These are the primary values to use when designing background, foreground or accent colors in the Tinder UI.
Streamlining premium branding
Our premium ALC and Subscription features use a molten flame gradient to signal intensity and elevated interactions. Bright tones and dynamic lighting emphasize value and connection, with a rightward light source echoing the iconic swipe right.
Streamlining premium branding
Our premium ALC and Subscription features use a molten flame gradient to signal intensity and elevated interactions. Bright tones and dynamic lighting emphasize value and connection, with a rightward light source echoing the iconic swipe right.
Streamlining premium branding
Our premium ALC and Subscription features use a molten flame gradient to signal intensity and elevated interactions. Bright tones and dynamic lighting emphasize value and connection, with a rightward light source echoing the iconic swipe right.
Color and contrast in the discovery experience
The Gamepad is one of the most sensitive components in the discovery experience. To better understand the impact of color and contrast on discovery user behavior we tested 4 variants.
Color and contrast in the discovery experience
The Gamepad is one of the most sensitive components in the discovery experience. To better understand the impact of color and contrast on discovery user behavior we tested 4 variants.
Color and contrast in the discovery experience
The Gamepad is one of the most sensitive components in the discovery experience. To better understand the impact of color and contrast on discovery user behavior we tested 4 variants.
Streamlining premium branding
Our premium ALC and Subscription features use a molten flame gradient to signal intensity and elevated interactions. Bright tones and dynamic lighting emphasize value and connection, with a rightward light source echoing the iconic swipe right.
Streamlining premium branding
Our premium ALC and Subscription features use a molten flame gradient to signal intensity and elevated interactions. Bright tones and dynamic lighting emphasize value and connection, with a rightward light source echoing the iconic swipe right.
Streamlining premium branding
Our premium ALC and Subscription features use a molten flame gradient to signal intensity and elevated interactions. Bright tones and dynamic lighting emphasize value and connection, with a rightward light source echoing the iconic swipe right.
Icons with a flare
We handcrafted 200+ new icons reflecting the Tinder flame logo’s round form, dynamic flare, and soft curves. These icons prioritize precisions and geometry to ensure consistency and legibility across product scales.
Icons with a flare
We handcrafted 200+ new icons reflecting the Tinder flame logo’s round form, dynamic flare, and soft curves. These icons prioritize precisions and geometry to ensure consistency and legibility across product scales.
Icons with a flare
We handcrafted 200+ new icons reflecting the Tinder flame logo’s round form, dynamic flare, and soft curves. These icons prioritize precisions and geometry to ensure consistency and legibility across product scales.
Icon explorations
Before landing our icon style direction, we explored 3 options inspired by different elements of the branding. Ultimately, option 1 proved to be the most legible at scale for the system.
Icon explorations
Before landing our icon style direction, we explored 3 options inspired by different elements of the branding. Ultimately, option 1 proved to be the most legible at scale for the system.
Icon explorations
Before landing our icon style direction, we explored 3 options inspired by different elements of the branding. Ultimately, option 1 proved to be the most legible at scale for the system.
A warm and human typeface
Our bespoke typeface is an optimistic and characterful sans serif including 7 weights ranging from Light to Wide Bold.
A warm and human typeface
Our bespoke typeface is an optimistic and characterful sans serif including 7 weights ranging from Light to Wide Bold.
A warm and human typeface
Our bespoke typeface is an optimistic and characterful sans serif including 7 weights ranging from Light to Wide Bold.
Localization support
Sparks Sans was constructed with multiple language support across Latin based languages, Thai and Arabic. For languages Sparks Sans does not support, the fallback of Inter or a system font was used.
Localization support
Sparks Sans was constructed with multiple language support across Latin based languages, Thai and Arabic. For languages Sparks Sans does not support, the fallback of Inter or a system font was used.
Localization support
Sparks Sans was constructed with multiple language support across Latin based languages, Thai and Arabic. For languages Sparks Sans does not support, the fallback of Inter or a system font was used.
Documentation & Guidance
Released updated documentation and Figma resources to support redesign efforts, providing a consistent source of truth for system styling across teams.
Documentation & Guidance
Released updated documentation and Figma resources to support redesign efforts, providing a consistent source of truth for system styling across teams.
Documentation & Guidance
Released updated documentation and Figma resources to support redesign efforts, providing a consistent source of truth for system styling across teams.
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
Work together?
Let's make something to be proud of. me@andrewwags.com
© 2025 — Andrew Wagenhals
If You Know You Know
Hint: Please reach out to me@andrewwags.com