Gizmo: AI Tutor

Colors

• #F9FAFCBackground Off-White · Screen background
• #111827Primary Dark · Header text · Back icon · Primary button fill
• #6F32E6Brand Purple · Progress bar active fill
• #516279Stat Number Slate · Large metric glyph
• #1F2937Body Text Dark · Explanation text below stat

Type

• Screen TitleSF Pro Display · 38px · 800 · #111827
• Stat Callout NumberDruk Wide · 140px · 900 · #516279
• Stat DescriptionSF Pro Text · 26px · 400 · #1F2937
• Primary Button LabelSF Pro Text · 26px · 700 · #FFFFFF

Elements

• Progress Track · Progress Bar

  Top row beside back button · Horizontal progress track filled ~65% with bright purple

• Large Count Graphic · Data Display / Stat

  Centered horizontally and vertically in the main viewport · Ultra-bold sans display numeral '2' with heavy square-ish geometry

• Find your friends Button · Primary Button

  Pinned near bottom with standard page margins · Dark navy solid pill button with centered white bold text

Layout

Social proof onboarding interstitial: top progress bar and mascot greeting, centered large numeral metric callout with explanation, and sticky primary action button at bottom.

Notes

Large metric numeral uses an ultra-bold display typeface matching the brand title styling seen on the splash screen.