Gizmo: AI Tutor

Colors

• #4A0E78Header Deep Purple Gradient · top paywall backdrop background
• #FFFFFFSheet Card White · bottom sheet background · plan card surface
• #2563EBAccent Royal Blue · selected plan border · save discount badge fill · legal links
• #111827Primary Dark Navy · plan titles · price text · cta button fill
• #E2E8F0Border Stroke Gray · unselected plan border · toggle card border
• #64748BMuted Legal Gray · secondary renewal disclaimer text

Type

• Brand Hero TitleNunito · 64px · 900 · #FFFFFF
• Plan TitleNunito · 28px · 800 · #111827
• Plan Pricing / DurationNunito · 26px · 700 · #111827
• Discount Tag LabelNunito · 22px · 800 · #FFFFFF
• CTA Button LabelNunito · 28px · 800 · #FFFFFF
• Disclaimer TextNunito · 20px · 500 · #64748B

Elements

• Selected Subscription Plan Card · selection_card

  Top plan option displaying plan name, annual total, and weekly rate with badge · White card with high-contrast royal blue 2px border and attached 'Save 80%' pill badge

• Unselected Subscription Plan Card · selection_card

  Second plan option below primary tier · White card with light gray border outline and standard text styling

• Discount Toggle Row · switch_tile

  Full width rounded container with 'Student discount 😜' label and toggle switch · White card with light gray border and inactive iOS-style toggle switch

• Go Unlimited CTA Button · cta_button

  Full width pill button positioned above renewal footer text · Solid dark navy fill with centered bold white text

Layout

Paywall subscription tier selection screen featuring tier cards with savings badge, student discount toggle, and conversion CTA button with recurring billing disclosures.

Notes

Top card is selected by default with blue highlight outline. Terms of Use and Privacy Policy are presented as hyperlinks.