Gizmo: AI Tutor

Colors

• #F9FAFCBackground Off-White · Screen background
• #FFFFFFCard White · Language selection card background
• #111827Primary Dark · Headings · Active card border · Primary button fill
• #6F32E6Primary Purple · Progress bar active indicator
• #E5E7EBSubtle Gray Border · Inactive card border
• #6B7280Muted Text Gray · Subtitle/secondary label text

Type

• Screen TitleSF Pro Display · 38px · 800 · #111827
• Card TitleSF Pro Text · 28px · 700 · #111827
• Card SubtitleSF Pro Text · 22px · 400 · #6B7280
• Primary Action Button LabelSF Pro Text · 26px · 700 · #FFFFFF
• Dropdown Link LabelSF Pro Text · 26px · 700 · #111827

Elements

• Progress Bar · Indicator

  Full-width track near top of screen with small horizontal margin · Thin rounded track with purple circular pill indicator at beginning

• Brand Mascot Icon Header · Avatar/Badge

  Row at top left, pairing mascot avatar with 'Gizmo' title · Circular mascot artwork followed by bold text

• Language Option Card (Selected) · Radio/Selection Card

  Full-width card with horizontal padding, containing round flag avatar and text stack · White background, solid 3px dark charcoal/black border

• Language Option Card (Unselected) · Radio/Selection Card

  Full-width card below first item · White background, thin light gray border

• View All Languages Toggle · Dropdown Button

  Centered horizontally above the bottom action button · Plain text accompanied by a chevron pointing down

• Continue Button · Primary Button

  Pinned near bottom edge, spans full horizontal width minus margins · Solid dark navy fill, white centered bold label

Layout

Top-to-bottom step wizard: navigation/progress at top, heading and options list in top-center, expanding view toggle and primary CTA anchored at bottom.

Notes

Selected item is differentiated with a thick high-contrast dark border instead of radio buttons or checkmarks.