Gizmo: AI Tutor

Colors

• #4A0E78Header Deep Purple Gradient · top paywall backdrop background
• #FFFFFFCard Surface White · comparison sheet background · back button circle
• #111827Primary Dark Navy · sheet headline · table feature labels · cta button fill
• #F0F4FAHighlighted Column Tint · Unlimited column background tint
• #F59E0BStar Gold Orange · feature star icons in unlimited column
• #8C96A5Muted Table Gray · table header text · empty dash indicators

Type

• Brand Hero TitleNunito · 64px · 900 · #FFFFFF
• Modal HeadlineNunito · 42px · 800 · #111827
• Table Column HeaderNunito · 22px · 700 · #8C96A5
• Table Feature Row TextNunito · 26px · 700 · #111827
• CTA Button LabelNunito · 26px · 700 · #FFFFFF

Elements

• Back Navigation Button · icon_button

  Top left below status bar · White circular button with dark arrow icon

• Comparison Sheet Card · card

  Covers lower three-quarters of the screen with rounded top corners · White solid background with soft border radius

• Comparison Matrix Table · table

  3-column grid comparing features between Basic and Unlimited plans · Bordered container with shaded vertical column highlight for Unlimited tier and star glyphs

• See Plans Button · cta_button

  Fixed full-width pill button near bottom edge · Dark navy solid fill with bold centered white text

Layout

Paywall overview layout combining rich purple gradient top section featuring 3D rocket graphic with an extensive feature comparison matrix below.

Notes

Comparison highlights advantages of Unlimited tier via distinctive orange stars versus muted dashes or checkmark for Basic.