ClassDojo

Colors

• #FFFFFFModal Sheet Surface · Modal card background fill
• #3E2197Header Graphic Purple · Space backdrop illustration
• #191724Primary Text Dark · Paywall headline · Plan titles · Feature bullet text
• #3892F6Highlight Blue · Headline colored phrase · Gradient button start
• #14111ESelected Card Dark Fill · Annual plan card background
• #FFE850Badge Yellow · 50% OFF discount badge background
• #EAE4FFSub-Banner Lilac · Annual plan bottom banner fill
• #F6F6F9Unselected Card Fill · Monthly plan card background
• #8964F5CTA Gradient End Purple · Try for $0.00 button gradient

Type

• Paywall HeadlineGilroy · 62px · 800 · #191724
• Plan Title SelectedGilroy · 44px · 700 · #FFFFFF
• Plan Pricing SelectedGilroy · 40px · 700 · #FFFFFF
• Plan Title UnselectedGilroy · 44px · 700 · #191724
• Feature Item TextGilroy · 38px · 600 · #191724
• Primary CTA Button TextGilroy · 44px · 700 · #FFFFFF
• Tertiary Action TextGilroy · 38px · 700 · #6E45E8
• Disclaimer CaptionGilroy · 28px · 500 · #6B6778

Elements

• Close Modal Button · icon_button

  Top right over space graphic, circular diameter ~110px. · White circle with centered bold black 'X' icon.

• Hero Mascot Space Graphic · header_illustration

  Header bleed spanning top area with astronaut Mojo floating among planets. · Space-themed vector illustration with smooth curved white bottom boundary.

• Annual Plan Card · selection_card

  Width matching content margins, height ~230px, includes overlapping discount badge. · Dark black-purple fill with top left yellow pill badge ('50% OFF'), strike-through pricing, and attached bottom lilac trial pill.

• Monthly Plan Card · selection_card

  Stacked beneath annual card with ~24px gap, height ~140px. · Light off-white rounded rectangle with dark title and price.

• Feature List · list

  Vertical column of 4 items with outline icons on left and labels on right, 32px vertical gap. · Minimalist black linear icon glyphs alongside clear black text.

• Try for $0.00 CTA · pill_button

  Full width with content insets, height ~136px. · Linear gradient fill from blue (#3892F6) on left to purple (#8964F5) on right, white label and external link glyph.

Layout

Upsell subscription sheet modal featuring top decorative banner, centered headline, multi-tier pricing selector cards, value proposition feature list, and bottom sticky button stack.

Notes

Modal uses inverted light color scheme distinct from the dark background onboarding screens.