GoodRx Design System

Evolving the GoodRx Design System

 

My Role
As Staff Product Designer for Platform & Design Systems, I led the evolution of GoodRx's design system to support a company-wide rebrand and long-term platform scalability. My work included design system strategy, token architecture, component modernization, accessibility, documentation, and design-to-engineering alignment. I partnered with Product, Brand, and Engineering to deliver the rebrand consistently across consumer and healthcare experiences at scale.

 

The Challenge
GoodRx was undergoing a major visual rebrand that extended far beyond colors and typography. The existing design system contained inconsistencies across tokens, components, and implementation patterns. The challenge was to introduce a new visual language while simultaneously improving scalability, accessibility, and consistency across a growing ecosystem of experiences.

 

The Solution
Rather than treating the rebrand as a visual refresh, I used it as an opportunity to modernize the design system. By evolving foundational tokens, introducing scalable theme architecture, modernizing components, and strengthening design-to-code alignment, I created a foundation that enabled the new brand while strengthening the overall system.

 

 

token architecture

---

Building a resilient design foundation

 

As the design system expanded, its token structure had grown organically, making it increasingly difficult to scale, maintain, and evolve. To create a more resilient foundation, I redesigned the architecture around semantic design intent—establishing a shared naming language and layered token model that strengthened consistency, design-to-code alignment, and future scalability.

 

Naming by intent, not appearance
Legacy token names reflected colors, products, and implementation details rather than purpose. I introduced semantic naming that improved clarity, encouraged reuse, and created a more scalable foundation for future evolution.

 

A shared language for design and code
I established a semantic naming convention that replaced inconsistent visual naming with a structured vocabulary based on design intent. Each token follows a predictable pattern that communicates its role within the interface, while adopting familiar Tailwind CSS conventions (text, bg, stroke, etc.) to strengthen design-to-code alignment and long-term scalability.

 

A layered token architecture
The naming convention became the foundation of a layered architecture that separated raw values, semantic intent, and component implementation—creating a flexible system that could evolve without rebuilding components.

 

Built for change
Separating semantic intent from primitive values made large-scale visual updates significantly easier. Components continued referencing the same semantic tokens while only the underlying primitive values changed.

 

 

 

modernizing the foundation

---

Translating a new brand into a scalable product system

 

As GoodRx evolved its brand identity, I partnered with Brand, Marketing, Product Design, and Engineering to translate a comprehensive visual refresh into a flexible product foundation. This work included establishing scalable systems for color, typography, elevation, iconography, and illustration, validating accessibility requirements, and creating a theme architecture that enabled consistent implementation across products.

 

---

Translating brand into product
The rebrand introduced a refreshed visual identity, but products require more than a brand palette to support complex experiences. I translated the new visual identity into a flexible product color system that balanced visual warmth, accessibility, and implementation consistency. The result was a shared color foundation with consistent roles for hierarchy, interaction, and feedback across the design system.

 

Creating a warmer healthcare experience
I replaced the previous cool gray palette with warmer neutrals that aligned with the refreshed brand while preserving the clarity and contrast required for healthcare experiences. The result was a more approachable product without compromising accessibility.

 

Supporting interaction
Interactive elements rely on consistent visual feedback to communicate state and affordance. I established reusable color patterns for primary, brand, and destructive actions—including hover, pressed, disabled, and focus states—creating a shared interaction language that could be applied consistently across the design system.

 

Communicating system status
Feedback colors were designed to communicate system status clearly while remaining accessible and consistent across experiences. Each message pairs color with iconography, typography, and supporting copy so information never depends on color alone.

 

---

Bringing a new brand voice to product experiences
I translated the refreshed brand typography into a scalable product system, pairing F37 Moon for expressive headings with F37 Bolton for highly readable content.

 

Creating a more consistent visual hierarchy
I redesigned the typography scale to establish more predictable relationships between heading levels. Replacing irregular size jumps with a systematic progression improved visual rhythm, strengthened content hierarchy, and created a foundation that could scale with future product needs.

 

Typography scale should have rhythm, not accidents
The previous scale relied on arbitrary size jumps that lacked a clear pattern. I established a more systematic progression using consistent 12px increments across primary heading levels and smaller 4px refinements for supporting sizes, creating stronger visual hierarchy and a more scalable foundation.

 

Modernizing typography tokens for design and code
I modernized the typography token architecture to align with contemporary front-end standards. By standardizing sizing around a 16px base and converting tokens to rem values, I created a more accessible, responsive, and scalable foundation while improving alignment between design and engineering.

 

---

Refining depth and hierarchy through elevation
I introduced a new elevation token system that defined consistent depth relationships across components and surfaces. Standardized elevation values improved implementation consistency, strengthened design-to-code alignment, and provided a scalable foundation for future component development.

 

Creating meaningful depth and affordance
The existing interface relied heavily on elevation in default component states, creating visual noise while diminishing its ability to communicate hierarchy. Hover interactions were similarly understated, often relying on barely perceptible color shifts to indicate interactivity.

 

 

I established a standardized elevation system that removed shadows from default states and reserved them for hover, focus, and floating surfaces, creating clearer affordance and a more intentional sense of depth throughout the experience.

 

Standardizing floating surfaces
The floating elevation token was applied consistently across components that temporarily appear above surrounding content, including modals, dropdown menus, and tooltips. Reusing the same elevation treatment reinforced hierarchy, reduced visual inconsistency, and created a more cohesive experience across the design system.

 

---

Bringing personality to functional experiences
I incorporated the updated illustration system into the product experience, creating a consistent visual language that reinforced the GoodRx brand while supporting key product moments. The illustrations introduced warmth and personality without compromising clarity, helping transform functional healthcare workflows into more approachable and engaging experiences.

 

Expanding the visual language through spot illustrations
I extended the design system to support Brand's spot illustration library, providing reusable patterns and documentation that encouraged consistent adoption across the product.

 

---

Modernizing iconography for consistency and clarity
I integrated the updated utility icon library into the design system, collaborating closely with the icon designer as new icons were introduced. This established consistent implementation patterns and created a scalable foundation for future product needs.

 

 

component evolution

---

Evolving core components to reflect the new brand

 

The rebrand extended beyond visual foundations into the component library itself. Core building blocks—including buttons, inputs, and form controls—were redesigned to express the updated brand while maintaining usability, accessibility, and consistency across product experiences.

 

---

Establishing a new shape language
As one of the design system's most recognizable components, buttons evolved from an 8px radius to a fully rounded shape, expressing the refreshed brand while establishing a consistent shape language across interactive components.

 

---

Modernizing inputs for accessibility and clarity
The legacy input component relied on low-contrast stroke colors that failed accessibility requirements in default and focus states.

 

I updated the color system to achieve compliant contrast ratios, strengthened focus affordances, and increased corner radii to better reflect the updated brand language.

 

Designing beyond minimum compliance
Although disabled controls are exempt from WCAG non-text contrast requirements, I refined disabled text and stroke colors to improve readability and ensure the component remained legible within the broader interface.

 

Extending accessibility to dark surfaces
Rather than optimizing inputs for a single background color, I defined state-specific color tokens that could adapt across light and dark surfaces. This approach ensured accessibility requirements, visual hierarchy, and interaction affordances remained consistent throughout the system.

 

 

rebrand in practice

---

A single theme, applied everywhere.

 

The rebrand was designed as a theme rather than a collection of one-off redesigns. By building the refreshed visual language into shared foundations and components, existing product experiences could adopt the new brand through a simple theme change instead of requiring each interface to be redesigned individually.

 

A seamless theme transition
Because shared components referenced semantic design tokens rather than hard-coded brand values, existing experiences automatically inherited the refreshed visual language without requiring redesign work.

 

 

---

While many experiences adopted the refreshed visual language through theming alone, product teams also leveraged the updated design system as they modernized key workflows. These examples demonstrate how shared foundations and reusable components enabled meaningful UX improvements while preserving a cohesive experience across the product.

 

Home
Home and Search were consolidated into a single destination, simplifying primary navigation and reducing tab bar complexity. Saved medications moved to a dedicated Medicine Cabinet, creating a more focused Home experience.

 

Drug Search results
The experience now surfaces the recommended coupon at the top of the page, helping users reach savings with one less tap. Pharmacy results were also redesigned as fully tappable rows, simplifying scanning and increasing touch targets.

 

Medicine Cabinet
Medications previously listed on Home now are on a dedicated Medications Tab where users can easily access their coupons.

 

 

blue to black

---

Reimagining interaction without relying on colors

 

In 2025, the product transitioned from a blue primary UI color to black as part of the rebrand. This change introduced a significant design systems challenge: blue had long been the product's primary signal for interactivity. I conducted an audit of interaction patterns across the platform and established new standards for buttons, links, form controls, focus states, and selection behaviors. The resulting system relied on multiple visual cues—not color alone—to communicate affordance, improve accessibility, and create a more intentional interaction model.

 

---

Redefining primary and secondary actions
Historically, blue served as the primary signal for interactivity throughout the product. As part of the rebrand, I redefined button hierarchy using a combination of color, fill, contrast, and visual weight rather than relying on color alone. Primary actions adopted the new black visual language, while secondary actions maintained clear distinction through outlined treatments and supporting interaction states.

 

Creating clear action hierarchy within complex workflows
Transitioning away from blue required careful evaluation of where color was communicating brand versus functionality. I established new hierarchy patterns that relied on contrast, placement, and visual weight for buttons and primary actions while preserving blue links in key workflows. Testing showed that links styled similarly to body copy became significantly less discoverable, even when underlined, making color an important accessibility and affordance cue in those contexts.

 

---

Strengthening choice architecture
Selection controls previously relied heavily on blue to indicate active states. I redesigned these patterns to incorporate multiple indicators—including fill, iconography, stroke treatment, and visual emphasis—creating more resilient interaction patterns that remained understandable across themes, contexts, and accessibility needs.

 

 

expanding the system

---

Supporting new healthcare experiences through reusable components

 

As GoodRx expanded into new healthcare services and workflows, I identified recurring user experience challenges and translated them into reusable design system patterns. These components helped teams communicate progress, status, discovery, and next steps while creating scalable solutions that could be adopted across products and experiences.

 

---

Guiding users to relevant treatments faster
As GoodRx expanded beyond prescription savings into healthcare services, search became an increasingly important navigation pattern. I created a reusable search component that combined discovery, guidance, and action, enabling teams to consistently surface relevant treatments and healthcare content across experiences.

 

---

Helping users navigate complex healthcare workflows
I established a reusable progress pattern for multi-step experiences, enabling teams to communicate workflow status consistently across onboarding, treatment, and subscription journeys. The component used solid utility icons to indicate the current step and outlined icons for upcoming steps, creating a clear visual distinction between present and future actions. This approach reduced cognitive load, strengthened user orientation, and provided a scalable framework for complex healthcare workflows.

 

---

Creating transparency throughout medication delivery
I designed a reusable status tracking component that gave users visibility into each stage of the home delivery process, from clinical review through delivery. Consistent iconography and progressive status indicators helped communicate completed and upcoming milestones, while contextual messaging and actions reduced uncertainty and created a more transparent fulfillment experience.

 

 

outcomes and impact

---

Lasting impact beyond the rebrand

 

What began as a visual rebrand became an opportunity to modernize the design system itself—improving scalability, accessibility, consistency, and long-term maintainability across the GoodRx product ecosystem.