Pimsleur | Language Learning

Colors

• #092288brand-blue-gradient · screen-background
• #ffffffcard-surface · modal-card-background · annual-card-body · subscription-toggle-pill
• #d1d5dbtoggle-track-gray · segmented-control-track
• #dd1029plan-red-header · monthly-plan-header
• #0a56edplan-blue-selected · monthly-plan-body · primary-cta-button
• #00b2feplan-cyan-header · annual-plan-header
• #0a56edborder-blue · annual-plan-border · checklist-check-color
• #0c236etext-dark-navy · card-header-title · checklist-text · disclaimer-text

Type

• hero-headlineGilroy · 52px · 800 · #ffffff
• hero-subtitleGilroy · 36px · 500 · #ffffff
• section-headerGilroy · 44px · 700 · #0c236e
• pricing-headerGilroy · 36px · 700 · #ffffff
• pricing-valueGilroy · 44px · 800 · #ffffff
• checklist-bodyGilroy · 36px · 500 · #111827
• disclaimer-bodyGilroy · 28px · 500 · #111827

Elements

• modal_header_bar · header

  Pinned across top, close (X) icon left-aligned, Pimsleur wordmark centered. · Translucent navigation header with crisp white icons and logo.

• subscription_card_container · card

  Occupies middle to lower viewport, inset ~48px from left and right edges, spanning downwards. · Solid white fill with rounded top corners (~28px) and soft outer shadow.

• lifestyle_photo_header · media_view

  Top of subscription card container, full width inside the white container margins (~840px wide). · Square-cut photograph of laughing couple in outdoor lighting.

• plan_segmented_control · segmented_control

  Centered under 'Choose Your Plan' title, ~620px wide by 88px high. · Gray track (#d1d5db) with rounded rectangle pill selection in solid white with drop shadow for 'Subscription'.

• pricing_tier_grid · container

  Two-column horizontal arrangement featuring 'Monthly' on left and 'Annual' on right, each ~400px wide. · Monthly has red top header with deep royal blue body; Annual has light blue top header, white body with blue border.

• value_proposition_checklist · list

  Vertical stack of 3 list rows below the pricing tier grid, left-aligned with checkmark icons. · Blue checkmark vectors (#0a56ed) paired with dark charcoal text.

• cta_trial_button · button

  Full width inside the card content margin, height ~108px, centered horizontally. · Royal blue fill (#0a56ed), rounded pill shape, bold white text with external link icon.

Layout

Vertical modal paywall flow. Deep royal blue background, title and subhead at top, followed by a prominent white content card holding media, plan toggle, comparative pricing cards, check list, CTA, and external disclaimer text.

Notes

Touch tap indicators visible on screen over the monthly and annual cards are interaction artifacts from a testing/recording tool.